feat: responsive styling on all sections down to tiny breakpoint

data-preservation-programs · Sep 7, 2023 · f9f90ef · f9f90ef
1 parent f58641a
commit f9f90ef
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 23 deletions.
diff --git a/assets/scss/theme/typography.scss b/assets/scss/theme/typography.scss
@@ -245,6 +245,10 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(27, 14);
   font-weight: 500;
   letter-spacing: 0.01em;
+  @include tiny {
+    font-size: toRem(12);
+    line-height: leading(27, 12);
+  }
 }
 
 @mixin formFieldPlaceholder {

diff --git a/components/blocks/text-block.vue b/components/blocks/text-block.vue
@@ -126,6 +126,9 @@ export default {
         width: toRem(60);
         height: toRem(60);
       }
+      @include tiny {
+        margin-right: toRem(17);
+      }
     }
   }
   span {

diff --git a/components/card.vue b/components/card.vue
@@ -169,6 +169,9 @@ const iconComponent = computed(() => {
     @include h3;
     color: $sageGreen;
     margin-bottom: toRem(27);
+    @include mini {
+      margin-bottom: toRem(10);
+    }
   }
   .description {
     @include p2;

diff --git a/components/roadmap.vue b/components/roadmap.vue
@@ -7,7 +7,9 @@
       class="roadmap-item">
       <div class="grid-noGutter-noBottom no-padding">
 
-        <div class="col-4_sm-3">
+        <div
+          class="col-4_sm-3_mi-10_ti-12"
+          data-push-left="off-0_mi-1_ti-0">
           <div class="heading">
 
             <ZeroButton
@@ -24,7 +26,9 @@
           </div>
         </div>
 
-        <div class="col-8_sm-9">
+        <div
+          class="col-8_sm-9_mi-10_ti-12"
+          data-push-left="off-0_mi-1_ti-0">
           <div class="roadmap-card">
             <div class="inner-card">
 
@@ -90,6 +94,9 @@ const cta = computed(() => {
 <style lang="scss" scoped>
 .roadmap-item {
   margin-bottom: toRem(12);
+  @include mini {
+    margin-bottom: toRem(15);
+  }
   &:hover {
     .icon {
       transform: scale(1.15);
@@ -104,6 +111,10 @@ const cta = computed(() => {
   display: flex;
   align-items: center;
   margin-top: toRem(25);
+  @include mini {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+  }
   .icon-button {
     display: block;
     width: toRem(41);
@@ -127,21 +138,36 @@ const cta = computed(() => {
   margin-left: -2rem;
   @include cardPanel(90deg);
   @include small {
-    margin-left: 1rem;
+    margin-left: 2rem;
+  }
+  @include mini {
+    margin: 0;
   }
 }
 
 .inner-card {
   position: relative;
   z-index: 2;
   padding: toRem(31);
+  @include small {
+    padding: toRem(24) toRem(30);
+  }
+  @include tiny {
+    padding: toRem(12) toRem(17);
+  }
 }
 
 .milestone {
   display: flex;
   justify-content: space-between;
+  @include tiny {
+    flex-direction: column;
+  }
   &:not(:last-child) {
     margin-bottom: toRem(31);
+    @include tiny {
+      margin-bottom: toRem(11);
+    }
   }
   .title {
     width: 19%;
@@ -153,6 +179,10 @@ const cta = computed(() => {
       width: 29%;
       min-width: 29%;
     }
+    @include tiny {
+      margin-top: 0;
+      margin-bottom: 0.25rem;
+    }
   }
   .content {
     flex-grow: 1;
@@ -172,5 +202,8 @@ const cta = computed(() => {
   display: flex;
   justify-content: flex-end;
   margin-top: toRem(30);
+  @include mini {
+    margin-top: toRem(14);
+  }
 }
 </style>
diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -4,24 +4,24 @@
     <div class="panel-top">
       <div class="grid-bottom-noBottom-noGutter">
 
-        <div class="col-2">
+        <div class="col-2_sm-5">
           <nuxt-link to="/" class="site-footer-logo">
             <SiteFooterLogo />
           </nuxt-link>
         </div>
 
-        <div class="col-4" data-push-left="off-6">
+        <div class="col-4_sm-5_mi-7" data-push-left="off-6_sm-2_mi-0">
           <div class="authors">
             <div
               class="text"
               v-html="authors.text">
             </div>
             <div class="logos">
               <ZeroButton to="https://dataprograms.org/" tag="a">
-                <DataProgramsLogo />
+                <DataProgramsLogo class="logo" />
               </ZeroButton>
               <ZeroButton to="https://protocol.ai/" tag="a">
-                <ProtocolLabsLogo />
+                <ProtocolLabsLogo class="logo" />
               </ZeroButton>
             </div>
           </div>
@@ -33,11 +33,11 @@
     <div class="panel-bottom">
       <div class="grid-bottom-noBottom-noGutter">
 
-        <div class="col-3_md-2">
+        <div class="col-3_md-2_sm-hidden">
           <!-- dummy div -->
         </div>
 
-        <div class="col-4_md-5">
+        <div class="col-4_md-5_sm-12">
           <div class="legal">
             <ZeroButton
               v-for="link in legal.links"
@@ -103,6 +103,11 @@ const legal = computed(() => {
       left: calc(100% - 52rem);
       background-position: -227px -33px;
     }
+    @include small {
+      left: 0;
+      width: 100%;
+      background-position: center top;
+    }
   }
 }
 
@@ -123,9 +128,15 @@ const legal = computed(() => {
   @include medium {
     width: toRem(95);
   }
+  @include mini {
+    margin-bottom: 0.125rem;
+  }
 }
 
 .authors {
+  @include small {
+    padding-left: 1rem;
+  }
   .text {
     @include formFieldText;
     margin-bottom: toRem(28);
@@ -135,6 +146,9 @@ const legal = computed(() => {
         font-size: toRem(14);
       }
     }
+    @include mini {
+      margin-bottom: toRem(22);
+    }
     :deep(span) {
       &.green {
         color: $sageGreen;
@@ -146,8 +160,27 @@ const legal = computed(() => {
     display: flex;
     :deep(.button) {
       @include transitionDefault;
-      &:not(:last-child) {
+      @include small {
+        display: flex;
+        align-items: flex-end;
+      }
+      &:first-child {
         margin-right: toRem(43);
+        @include small {
+          margin-right: 10%;
+          width: 50%;
+        }
+        @include tiny {
+          width: 40%;
+        }
+      }
+      &:last-child {
+        @include small {
+          width: 40%;
+        }
+        @include tiny {
+          width: 32%;
+        }
       }
       &:hover {
         transform: scale(1.08);
@@ -163,6 +196,10 @@ const legal = computed(() => {
     justify-content: space-between;
     transform: translate(1rem, calc(-100% + 0.375rem));
   }
+  @include small {
+    transform: none;
+    margin-top: toRem(39);
+  }
 }
 
 .footer-button {
@@ -178,17 +215,16 @@ const legal = computed(() => {
     @include large {
       margin-right: toRem(27);
     }
-    @include medium {
-      margin-right: 0;
-      margin-left: auto;
-    }
-  }
-  &:hover {
-    border-bottom: solid 1px rgba($sageGreen, 1);
   }
   @include medium {
     margin-right: 0;
     margin-left: auto;
   }
+  @include small {
+    margin: 0;
+  }
+  &:hover {
+    border-bottom: solid 1px rgba($sageGreen, 1);
+  }
 }
 </style>