UI Style Tweaks (#1004)

* Add misc mobile and desktop component styles.

* Update hero animation logo speed.

---------

Co-authored-by: Jesse Borden <[email protected]>

Author: jesseaborden

assets/javascripts/new-javascripts/hero.js

@@ -1,5 +1,7 @@
 const heroAnimation = async () => {
-  const isReduceMotionEnabled = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const isReduceMotionEnabled = window.matchMedia(
+    '(prefers-reduced-motion: reduce)',
+  ).matches
   const urlParams = new URLSearchParams(location.search)
   const hasDebugParam = urlParams.has('debug')
 
@@ -118,7 +120,12 @@ const heroAnimation = async () => {
     return { ctx, pathInstance }
   }
 
-  const initLogo = ({ canvas, image, positionStart: [posX, posY], positionEnd: [endX, endY] }) => {
+  const initLogo = ({
+    canvas,
+    image,
+    positionStart: [posX, posY],
+    positionEnd: [endX, endY],
+  }) => {
     const ctx = canvas.getContext('2d')
     // Same reason for conversion as initSwoops
     ctx.translate(posX - image.naturalWidth / 2, posY - image.naturalHeight / 2)
@@ -128,9 +135,9 @@ const heroAnimation = async () => {
       ctx.drawImage(image, 0, 0)
     } else {
       ctx.globalAlpha = 1
-      const deltaX = endX - posX;
-      const deltaY = endY - posY;
-      ctx.drawImage(image, deltaX, deltaY);
+      const deltaX = endX - posX
+      const deltaY = endY - posY
+      ctx.drawImage(image, deltaX, deltaY)
     }
 
     return ctx
@@ -147,11 +154,11 @@ const heroAnimation = async () => {
     logo.image = logoImage
     // init canvas for each swoop layer
     heroSwoops.forEach((swoop, i) => {
-      swoop.image = swoopImages[i];
-      const canvasData = initSwoops(swoop);
-      swoop.ctx = canvasData.ctx;
-      swoop.pathInstance = canvasData.pathInstance;
-    });
+      swoop.image = swoopImages[i]
+      const canvasData = initSwoops(swoop)
+      swoop.ctx = canvasData.ctx
+      swoop.pathInstance = canvasData.pathInstance
+    })
     // init logo canvas
     logo.ctx = initLogo(logo)
   } catch (error) {
@@ -160,7 +167,7 @@ const heroAnimation = async () => {
   }
 
   if (isReduceMotionEnabled) {
-    return;
+    return
   }
 
   const DURATION = 1000
@@ -271,7 +278,7 @@ const heroAnimation = async () => {
     logo.state,
     {
       ease: 'out(1.1)',
-      duration: 250,
+      duration: 200,
       delay: 750,
       progress: 1,
       // ease: 'inOutQuad',

assets/stylesheets/new-stylesheets/includes/footer/_base.scss

@@ -12,11 +12,12 @@
 }
 
 footer.global-footer {
-  background-color: #1E162E;
+  background-color: #1e162e;
   padding: 20px;
   text-align: center;
   padding: 6rem 3rem 3rem 3.5em;
   color: rgb(235, 236, 240);
+  position: relative;
   z-index: 10;
 
   .container {
@@ -31,23 +32,23 @@ footer.global-footer {
     margin-bottom: 5em;
 
     .logo {
-        display: flex;
-        height: 36px;
-        margin-bottom: 15px;
+      display: flex;
+      height: 36px;
+      margin-bottom: 15px;
 
-        svg {
-          height: 100%;
-        }
+      svg {
+        height: 100%;
+      }
 
-        #logotype {
-          fill: #ebecf0;
-        }
+      #logotype {
+        fill: #ebecf0;
+      }
     }
 
     h3 {
       height: 36px;
       margin-bottom: 15px;
-      color: #FCA76C;
+      color: #fca76c;
       font-size: 1.17em;
       line-height: 1.2;
       font-weight: bold;
@@ -130,7 +131,7 @@ footer.global-footer {
         }
 
         input:checked + .color-scheme-toggle-label {
-          background: #FCA76C;
+          background: #fca76c;
           color: #1e162e;
         }
       }
@@ -144,20 +145,19 @@ footer.global-footer {
     align-items: flex-end;
     color: #d1d2d4;
 
-
     nav {
       display: inline-block;
 
-        ul {
-          list-style: none;
-          padding: 0;
-          margin: 0;
-          display: inline-flex;
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: inline-flex;
 
-          a {
-            color: #d1d2d4;
-          }
+        a {
+          color: #d1d2d4;
         }
+      }
     }
 
     .legals {
@@ -168,7 +168,9 @@ footer.global-footer {
         margin-bottom: 1.5em;
         line-height: 1.5em;
 
-        p { margin: 0; }
+        p {
+          margin: 0;
+        }
 
         a {
           color: #d1d2d4;
@@ -180,7 +182,7 @@ footer.global-footer {
           margin-right: 1.75em;
 
           a {
-            padding: .35em 0;
+            padding: 0.35em 0;
             border-bottom: 1px solid transparent;
 
             &:hover {
@@ -205,24 +207,24 @@ footer.global-footer {
           &.github {
             @include icon-style($icon-github);
           }
-  
+
           &.bluesky {
             @include icon-style($icon-bluesky);
           }
-  
+
           &.feed {
             @include icon-style($icon-feed);
           }
-  
+
           &.mastodon {
             @include icon-style($icon-mastodon);
           }
-  
+
           &.x {
             @include icon-style($icon-x);
           }
         }
       }
     }
   }
-}
+}