feat: responsive styling down to small breakpoint

data-preservation-programs · Sep 6, 2023 · 7d65bc2 · 7d65bc2
1 parent 9d2fb43
commit 7d65bc2
Show file tree

Hide file tree

Showing 15 changed files with 369 additions and 45 deletions.
diff --git a/assets/scss/core/layout-grid.scss b/assets/scss/core/layout-grid.scss
@@ -12,12 +12,14 @@
 .layout {
   position: relative;
   z-index: 100;
+  overflow-x: hidden;
 }
 
 [class~="grid"], [class*="grid-"], [class*="grid_"] {
   width: $gridWidth;
   margin: 0 auto;
   @include gridMaxMQ {
+    width: 100%;
     padding: 0 4.1665%;
   }
   &[class*="-noGutter"] {

diff --git a/assets/scss/theme/typography.scss b/assets/scss/theme/typography.scss
@@ -80,20 +80,24 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(65, 48);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(30);
-    line-height: leading(43, 30);
+  @include medium {
+    font-size: toRem(36);
+    line-height: leading(48, 36);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(30);
+    line-height: leading(43, 30);
+  }
 }
 
 @mixin h2 { // Roadmap headings
   font-size: toRem(26);
   line-height: leading(34, 26);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(20);
     line-height: leading(30, 20);
     font-weight: 500;
@@ -106,20 +110,24 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(30, 24);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
-    font-size: toRem(16);
-    line-height: leading(27, 16);
+  @include medium {
+    font-size: toRem(18);
+    line-height: leading(27, 18);
     font-weight: 500;
     letter-spacing: 0.03em;
   }
+  @include mini {
+    font-size: toRem(16);
+    line-height: leading(27, 16);
+  }
 }
 
 @mixin h4 { // Roadmap milestone headings, captions for stats in hero section
   font-size: toRem(16);
   line-height: leading(30, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -132,7 +140,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(19, 16);
   font-weight: 500;
   letter-spacing: 0.11em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(16, 14);
     font-weight: 500;
@@ -199,7 +207,7 @@ $fontAssetPath: 'assets/fonts';
   line-height: leading(27, 16);
   font-weight: 500;
   letter-spacing: 0.03em;
-  @include small {
+  @include medium {
     font-size: toRem(14);
     line-height: leading(21, 14);
     font-weight: 600;

diff --git a/components/blocks/accordion-block.vue b/components/blocks/accordion-block.vue
@@ -161,6 +161,12 @@ const getIconComponent = (icon) => {
   &.open {
     .accordion-content {
       max-height: toRem(200);
+      @include large {
+        max-height: toRem(228);
+      }
+      @include medium {
+        max-height: toRem(300);
+      }
     }
   }
   &.open,

diff --git a/components/blocks/card-list-block.vue b/components/blocks/card-list-block.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="card-list-block">
-    <div :class="grid">
+    <div :class="[grid, 'no-padding']">
       <div
         v-for="(card, i) in cards"
         :key="`card-col-${i}`"
-        :class="columns">
+        :class="[columns, 'card-wrapper']">
 
         <Card :card="card" />
 

diff --git a/components/blocks/code-block.vue b/components/blocks/code-block.vue
@@ -52,26 +52,42 @@ const lines = computed(() => {
   @include inlineCode;
   margin-bottom: 0.125rem;
   color: $sageGreen;
+  @include medium {
+    margin-bottom: 0;
+  }
   &.heading {
     color: $eastSide;
   }
 }
 
 .code {
   display: inline-block;
+  white-space: nowrap;
   @include inlineCode;
   &.id,
   &.type {
     width: 12%;
+    @include medium {
+      width: 20%;
+    }
   }
   &.path {
     width: 40%;
+    @include medium {
+      width: 60%;
+    }
   }
   &.scan-state {
     width: 21%;
+    @include medium {
+      display: none;
+    }
   }
   &.dag-state {
     width: 16%;
+    @include gridMaxMQ {
+      display: none;
+    }
   }
 }
 </style>
diff --git a/components/blocks/text-block.vue b/components/blocks/text-block.vue
@@ -122,6 +122,10 @@ export default {
       width: toRem(90);
       height: toRem(90);
       margin-right: toRem(35);
+      @include medium {
+        width: toRem(60);
+        height: toRem(60);
+      }
     }
   }
   span {

diff --git a/components/button/cta.vue b/components/button/cta.vue
@@ -122,6 +122,7 @@ const props = defineProps({
 }
 
 .button-content {
+  white-space: nowrap;
   @include transitionDefault;
   &.hide {
     opacity: 0;

diff --git a/components/card.vue b/components/card.vue
@@ -86,41 +86,76 @@ const iconComponent = computed(() => {
   margin: auto;
   display: flex;
   align-items: center;
+  @include large {
+    margin-bottom: 1rem;
+  }
 }
 
 .card.type__vertical {
   padding: toRem(30) toRem(24);
+  @include medium {
+    padding: toRem(24);
+  }
+  @include small {
+    padding: toRem(15);
+  }
   .content {
     position: relative;
     z-index: 2;
   }
   .icon {
     margin-bottom: toRem(45);
+    @include medium {
+      margin-bottom: toRem(15);
+    }
   }
   .title {
     @include h3;
     color: $sageGreen;
     margin-bottom: toRem(25);
+    @include medium {
+      margin-bottom: toRem(10);
+    }
   }
   .description {
     @include p2;
     margin-bottom: toRem(22);
+    @include medium {
+      margin-bottom: 0;
+    }
   }
 }
 
 .card.type__horizontal {
   padding: toRem(32) toRem(24);
+  @include medium {
+    padding: toRem(26) toRem(19);
+  }
   .content {
     position: relative;
     z-index: 2;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 100%;
+    @include medium {
+      align-items: flex-start;
+    }
   }
   .image {
     padding: 0 toRem(28);
     max-height: toRem(120);
+    @include large {
+      padding: 0;
+      margin-right: 1rem;
+    }
+    @include medium {
+      max-height: toRem(75);
+      margin-left: 1rem;
+    }
+    @include small {
+      margin-left: 0;
+    }
   }
   .text {
     flex-grow: 1;

diff --git a/components/roadmap.vue b/components/roadmap.vue
@@ -5,9 +5,9 @@
       v-for="item in items"
       :key="item.heading"
       class="roadmap-item">
-      <div class="grid-noGutter-noBottom">
+      <div class="grid-noGutter-noBottom no-padding">
 
-        <div class="col-4">
+        <div class="col-4_sm-3">
           <div class="heading">
 
             <ZeroButton
@@ -24,7 +24,7 @@
           </div>
         </div>
 
-        <div class="col-8">
+        <div class="col-8_sm-9">
           <div class="roadmap-card">
             <div class="inner-card">
 
@@ -126,6 +126,9 @@ const cta = computed(() => {
   position: relative;
   margin-left: -2rem;
   @include cardPanel(90deg);
+  @include small {
+    margin-left: 1rem;
+  }
 }
 
 .inner-card {
@@ -143,8 +146,13 @@ const cta = computed(() => {
   .title {
     width: 19%;
     min-width: 19%;
+    margin-top: 0.25em;
     @include h4;
     color: $sageGreen;
+    @include medium {
+      width: 29%;
+      min-width: 29%;
+    }
   }
   .content {
     flex-grow: 1;