Merge branch 'industrial' into mini

Revolution-Hacks · Dec 6, 2024 · f486aeb · f486aeb
2 parents 8d8e9bf + 4577a53
commit f486aeb
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 9 deletions.
diff --git a/src/lib/images/doublearrow.svg b/src/lib/images/doublearrow.svg
diff --git a/src/lib/style.scss b/src/lib/style.scss
@@ -46,6 +46,10 @@ $size_lg: 64rem;
       box-shadow 100ms,
       transform 100ms,
       filter 100ms;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
   }
 
   &:hover {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -136,6 +136,11 @@
       @media (min-width: style.$size_md) {
         --transform: translate(calc(50% - 8em), calc(50% - 2em));
       }
+      
+      @media (prefers-reduced-motion) {
+        animation: none;
+        transform: var(--transform);
+      }
     }
 
     .wall-top {
@@ -184,6 +189,8 @@
         width: 3em;
         height: 3em;
         align-self: center;
+        
+        stroke: rgb(var(--fg));
       }
 
       .header {

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -9,7 +9,7 @@
   <title>Revolution 2025</title>
   <meta
     name="description"
-    content="Revolution is a UK hackathon taking place sometime next year. We'd love to see you there!"
+    content="Revolution is a UK hackathon taking place next summer. We'd love to see you there!"
   />
   <meta name="og:type" content="website" />
   <meta name="og:site_name" content="Revolution 2025" />
@@ -171,6 +171,10 @@
         background: no-repeat space url('$lib/images/train.svg') left/149em;
         animation: 30s linear infinite train;
         animation-delay: var(--animation-delay);
+        
+        @media (prefers-reduced-motion) {
+          display: none;
+        }
       }
 
       &.reverse::after {
@@ -186,10 +190,6 @@
           background-position-x: 550%;
         }
       }
-
-      @media (prefers-reduced-motion) {
-        display: none;
-      }
     }
 
     .gear {
@@ -240,6 +240,7 @@
 
       @media (prefers-reduced-motion) {
         animation: none;
+        transform: var(--transform);
       }
     }
   }
@@ -256,13 +257,62 @@
     padding: 8em 4em;
     margin: auto;
     gap: 1em;
+    
+    @keyframes logo-a {
+      0% {
+        stroke-dasharray: 0 100;
+      }
+      
+      20% {
+        stroke-dasharray: 100 100;
+      }
+      
+      100% {
+        stroke-dasharray: 100 100;
+      }
+    }
+    
+    @keyframes logo-b {
+      0% {
+        stroke-dasharray: 0 100;
+      }
+      
+      20% {
+        stroke-dasharray: 0 100;
+      }
+      
+      100% {
+        stroke-dasharray: 100 100;
+      }
+    }
 
     :global(.logo) {
       /* I'm not sure why this is needed. Maybe because it's another component */
       grid-area: 1 / 1 / 1 / 1;
       width: 3em;
       height: 3em;
       align-self: center;
+      
+      stroke: rgb(var(--fg));
+    }
+    
+    :global(.logo .a) {
+      stroke-dasharray: 0 100;
+      animation: 1s cubic-bezier(.05,.09,.23,1) logo-a forwards;
+      animation-delay: 200ms;
+    }
+    
+    :global(.logo .b) {
+      stroke-dasharray: 0 100;
+      animation: 1s cubic-bezier(.05,.09,.23,1) logo-b forwards;
+      animation-delay: 200ms;
+    }
+    
+    @media (prefers-reduced-motion) {
+      :global(.logo .a), :global(.logo .b) {
+        animation: none;
+        stroke-dasharray: 100 100;
+      }
     }
 
     .header {