Split out logo

Hoverbear · Dec 14, 2024 · 77877aa · 77877aa
1 parent f50e43a
commit 77877aa
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 73 deletions.
diff --git a/sass/_logo.scss b/sass/_logo.scss
@@ -0,0 +1,71 @@
+
+svg.logo {
+  width: 100vw;
+  height: 100vh;
+
+  animation: fade-in;
+  animation-timing-function:ease-in;
+  animation-delay: .25s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  animation-duration: 1.5s;
+
+  #bear {
+    fill: none;
+    stroke: white;
+
+    & path {
+      opacity: 0;
+      stroke-dashoffset: 4000;
+      stroke-dasharray: 4000;
+
+      animation: delayed-stroke-in;
+      animation-timing-function:ease-in;
+      animation-delay: 3s;
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+      animation-duration: 4.5s;
+    }
+
+  }
+
+  #star-links {
+    stroke: #808285;
+    stroke-miterlimit: 10;
+    stroke-width: 0.75px;
+
+    line {
+      opacity: 0;
+      animation: twinkle;
+      animation-timing-function: ease-in;
+      animation-delay: 3s;
+      animation-iteration-count: 1;
+      animation-fill-mode: both;
+    }
+
+    @for $i from 1 through 20 {
+      line:nth-child(1n + #{$i}) {
+        animation-duration: #{random(10) * 2}s;
+        animation-timing-function: cubic-bezier(#{random()},#{random()},#{random()},#{random()});
+      }
+    }
+  }
+
+  #stars, #starfield {
+    fill: #808285;
+
+    circle {
+      opacity: 0;
+      animation: twinkle;
+      animation-fill-mode: both;
+      animation-iteration-count: infinite;
+    }
+
+    @for $i from 1 through 20 {
+      circle:nth-child(20n + #{$i}) {
+        animation-duration: #{random(10) * 2}s;
+        animation-timing-function: cubic-bezier(#{random()},#{random()},#{random()},#{random()});
+      }
+    }
+  }
+}
diff --git a/sass/main.scss b/sass/main.scss
@@ -1,5 +1,6 @@
 @import 'reset';
 
+@import 'logo';
 @import 'syntax-highlighting';
 @import 'text';
 @import 'figure';
@@ -33,77 +34,6 @@ div#splash {
   background: var(--gradient-splash-background);
 }
 
-svg.logo {
-  width: 100vw;
-  height: 100vh;
-
-  animation: fade-in;
-  animation-timing-function:ease-in;
-  animation-delay: .25s;
-  animation-iteration-count: 1;
-  animation-fill-mode: both;
-  animation-duration: 1.5s;
-
-  #bear {
-    fill: none;
-    stroke: white;
-
-    & path {
-      opacity: 0;
-      stroke-dashoffset: 4000;
-      stroke-dasharray: 4000;
-
-      animation: delayed-stroke-in;
-      animation-timing-function:ease-in;
-      animation-delay: 3s;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-      animation-duration: 4.5s;
-    }
-
-  }
-
-  #star-links {
-    stroke: #808285;
-    stroke-miterlimit: 10;
-    stroke-width: 0.75px;
-
-    line {
-      opacity: 0;
-      animation: twinkle;
-      animation-timing-function: ease-in;
-      animation-delay: 3s;
-      animation-iteration-count: 1;
-      animation-fill-mode: both;
-    }
-
-    @for $i from 1 through 20 {
-      line:nth-child(1n + #{$i}) {
-        animation-duration: #{random(10) * 2}s;
-        animation-timing-function: cubic-bezier(#{random()},#{random()},#{random()},#{random()});
-      }
-    }
-  }
-
-  #stars, #starfield {
-    fill: #808285;
-
-    circle {
-      opacity: 0;
-      animation: twinkle;
-      animation-fill-mode: both;
-      animation-iteration-count: infinite;
-    }
-
-    @for $i from 1 through 20 {
-      circle:nth-child(20n + #{$i}) {
-        animation-duration: #{random(10) * 2}s;
-        animation-timing-function: cubic-bezier(#{random()},#{random()},#{random()},#{random()});
-      }
-    }
-  }
-}
-
 
 div#hero-wrapper {
   position: fixed;

diff --git a/templates/partials/logo.html b/templates/partials/logo.html
@@ -1,8 +1,11 @@
 <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2160 1444" preserveAspectRatio="xMidYMin slice">
   <g id="starfield">
     {%- for idx in range(end=600) -%}
-    <circle cx="{{ get_random(start=0, end=2160) }}" cy="{{ get_random(start=0, end=1444) }}"
-      r="{{ get_random(start=10, end=100) | float / 30 }}" />
+      <circle
+        cx="{{ get_random(start=0, end=2160) }}"
+        cy="{{ get_random(start=0, end=1444) }}"
+        r="{{ get_random(start=10, end=100) | float / 30 }}"
+      />
     {%- endfor -%}
   </g>
   <g id="logo" transform="translate(780 152)">