Merge pull request #15 from ethmarks/home-redesign

Redesign home page

Author: ethmarks

assets/css/base/_animations.scss

@@ -93,7 +93,7 @@
         transform: none !important;
     }
 
-    header .title,
+    header #title,
     header nav a {
         animation: none !important;
         opacity: 1 !important;

assets/css/base/_constants.scss

@@ -30,6 +30,9 @@ $color-panel-zebra: darken($color-panel, 1%);
 $color-panel-dark: darken($color-panel, 3%);
 $color-panel-hover: transparentize(lighten($color-panel, 7%), 0.5);
 
+$color-card: rgba(40, 40, 40, 0.8);
+$color-card-hover: rgba(50, 50, 50, 0.9);
+
 $mint-gradient: linear-gradient(135deg, $color-accent, $color-text);
 $mint-blend: mix($color-accent, $color-text, 75%);
 
@@ -105,6 +108,8 @@ $radius-round: 18px;
 $color-shadow-standard: rgba(black, 0.2);
 $color-shadow-accent: $color-accent-transparent-30;
 $color-shadow-accent-hover: $color-accent-transparent-40;
+$shadow-card: 0 4px 12px rgba(black, 0.15);
+$shadow-card-hover: 0 8px 24px rgba(black, 0.25);
 
 // =========================================================================
 // TRANSITION

assets/css/base/_mixins.scss

@@ -22,6 +22,29 @@
     }
 }
 
+@mixin motion {
+    @media (prefers-reduced-motion: no-preference) {
+        @content;
+    }
+}
+
+@mixin noMotion {
+    @media (prefers-reduced-motion: reduce) {
+        @content;
+    }
+}
+
+@mixin tall {
+    @media (min-height: 1200px) {
+        @content
+    }
+}
+
+@mixin notTall {
+    @media (max-height: 1200px) {
+        @content
+    }
+  
 @mixin nomint {
     background: none;
     background-clip: none;

assets/css/components/_footer.scss

@@ -4,21 +4,27 @@ $footer-bg: rgba(255, 255, 255, 0.1);
 $footer-border-color: rgba(255, 255, 255, 0.18);
 $footer-border: 1px solid $footer-border-color;
 
+$footer-radius: $radius-lg;
+
 $footer-blur: 10px;
 
 $footer-padding-top: 10px;
-$footer-padding-sides: 30px;
+$footer-padding-sides: 25px;
 $footer-padding-bottom: 5px;
 
+$footer-margin-top: 0px;
+$footer-margin-sides: 10px;
+$footer-margin-bottom: 5px;
+
+$footer-width: 100vw;
+
 footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 100%;
     background: $footer-bg;
     backdrop-filter: blur($footer-blur);
     transform: translate3d(0, 0, 0);
-    border-top: $footer-border;
     padding: $footer-padding-top $footer-padding-sides $footer-padding-bottom;
     box-sizing: border-box;
     color: $color-text;
@@ -27,6 +33,22 @@ footer {
     position: fixed;
     bottom: 0;
 
+    @include mobile {
+        width: $footer-width;
+        border-top: $footer-border;
+        border-radius: 0;
+        margin: 0;
+    }
+
+    @include notMobile {
+        --footer-width: $footer-width;
+        --footer-margin-sides: $footer-margin-sides;
+        width: calc(var(--footer-width) - var(--footer-margin-sides) * 2);
+        border: $footer-border;
+        border-radius: $footer-radius;
+        margin: $footer-margin-top $footer-margin-sides $footer-margin-bottom;
+    }
+
     body.height-overflow & {
         position: static;
     }

assets/css/components/_header.scss

@@ -29,12 +29,6 @@ header {
         transform: translate3d(0, 0, 0);
     }
 
-    @media (pointer: fine) {
-        &:hover {
-            backdrop-filter: blur(5px) saturate(0.8);
-        }
-    }
-
     #title {
         font-weight: $font-weight-light !important;
         display: inline-block;