feat(app): put cubes in containers

unionlabs · Jul 3, 2024 · 94d16f5 · 94d16f5
1 parent c084987
commit 94d16f5
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 30 deletions.
diff --git a/app/src/lib/components/spinning-logo/square.svelte b/app/src/lib/components/spinning-logo/square.svelte
@@ -7,31 +7,42 @@
 
 
 <!-- front !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
-
-<!-- left !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: rotateY(90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
-
-<!-- top !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: rotateX(-90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
-
-<!-- back !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: translateZ(${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
-
-<!-- right !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: rotateY(-90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
-
-<!-- bottom !-->
-<svg class="absolute" stroke-width={strokeWidth} style={`top: ${y}; left: ${x}; transform: rotateX(90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
-	<rect x=0 y=0 width={size} height={size} stroke="black"/>
-</svg>
+<div class="cube-container" style={`top: ${y}px; left: ${x}px; width: ${size}px; height: ${size}px;`}> 
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+
+	<!-- left !-->
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: rotateY(90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+
+	<!-- top !-->
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: rotateX(-90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+
+	<!-- back !-->
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: translateZ(${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+
+	<!-- right !-->
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: rotateY(-90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+
+	<!-- bottom !-->
+	<svg class="absolute" stroke-width={strokeWidth} style={`transform: rotateX(90deg) translateZ(-${size/2}px)`} width={`${size}px`} height={`${size}px`} viewBox={`0 0 ${size} ${size}`} fill="none" xmlns="http://www.w3.org/2000/svg">
+		<rect x=0 y=0 width={size} height={size} stroke="black"/>
+	</svg>
+</div>
+
+
+<style lang="postcss">
+.cube-container {
+	position: absolute;
+	transform-style: preserve-3d;
+}
+
+</style>
diff --git a/app/src/lib/components/spinning-outline-logo.svelte b/app/src/lib/components/spinning-outline-logo.svelte
@@ -12,8 +12,7 @@
 
 <div class="overflow-hidden max-size-full flex-1">
   <div class="logo-scene max-size-full overflow-hidden size-full">
-  <!--<div class="logo-scene max-size-full overflow-hidden size-full" style={`width: ${logoWidth}px; height: ${cubeWidth}px`};}>!-->
-    <div class="logo" style={`left: calc(50% - (${logoWidth}px / 2)); top: calc(50% - (${cubeWidth}px / 2)); width: ${logoWidth}px; height: ${cubeWidth}px`};}>
+    <div class="logo absolute" style={`left: calc(50% - (${logoWidth}px / 2)); top: calc(50% - (${cubeWidth}px / 2)); width: ${logoWidth}px; height: ${cubeWidth}px`};}>
       {#each {length: cubeCount} as _, i}
         <Square {strokeWidth} size={cubeWidth} x={(cubeWidth + gap) * i} y={0}/>
       {/each}