test footer layout changes

texastribune · Jul 8, 2020 · 07b4463 · 07b4463
1 parent 78e96cb
commit 07b4463
Show file tree

Hide file tree

Showing 3 changed files with 343 additions and 26 deletions.
diff --git a/assets/scss/6-components/site-footer/_site-footer.scss b/assets/scss/6-components/site-footer/_site-footer.scss
@@ -19,7 +19,7 @@
   }
 
   &__header {
-    letter-spacing: .08em;
+    letter-spacing: 0.08em;
   }
 
   &__icon {
@@ -35,3 +35,63 @@
     }
   }
 }
+
+// test
+.c-site-footer {
+  padding: $size-l $size-b $size-giant;
+
+  &__inner {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &__links {
+    li {
+      margin-bottom: px-to-rem(4px);
+    }
+
+    @include mq($until: bp-m) {
+    }
+  }
+  // remove after 10yr treatment
+  &__logo {
+    // hack: nudge 10yr bug left for alignment of square
+    margin-left: -$size-xxs;
+    margin-bottom: $size-b;
+    width: 66px;
+  }
+
+  @include mq($until: bp-s) {
+    &__inner {
+      @include gap($size-xxl);
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+    }
+
+    &__col--1 {
+      grid-column: 1 / 2;
+      grid-row: 1 / 2;
+    }
+
+    &__col--3 {
+      grid-column: 2 / 3;
+      grid-row: -1 / 1;
+    }
+
+    &__col--4 {
+      grid-column: 1 / 2;
+      grid-row: 2 / 4;
+    }
+    // increase size of mobile tap targets
+    // @link: https://web.dev/tap-targets
+    &__links {
+      li {
+        margin-bottom: px-to-rem(9px);
+      }
+
+      a {
+        display: block;
+        padding: px-to-rem(2px) 0;
+      }
+    }
+  }
+}