feat: medium and small breakpoint styling

data-preservation-programs · Jun 22, 2023 · 137bc03 · 137bc03
1 parent 2bca628
commit 137bc03
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 60 deletions.
diff --git a/components/button.vue b/components/button.vue
@@ -105,7 +105,7 @@ export default {
   padding: 0 toRem(13);
   border: solid 2px $color_Secondary;
   border-radius: 0.3125rem;
-  @include mini {
+  @include medium {
     border: solid 1.5px $color_Secondary;
   }
   .text {

diff --git a/components/card.vue b/components/card.vue
@@ -137,6 +137,20 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
 }
+
+.description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-flex: 1;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.theme__mini-card {
+  .description {
+    -webkit-line-clamp: 2;
+  }
+}
 // ////////////////////////////////////////////////////////////////////// Shared
 .card.type__project,
 .card.type__slider {
@@ -154,8 +168,6 @@ export default {
     border-right: solid 2px $color_Accent;
     @include mini {
       border-right: solid 1.5px $color_Accent;
-    }
-    @include mini {
       width: toRem(53);
       padding: toRem(14) toRem(12);
     }
@@ -236,7 +248,7 @@ export default {
   }
   .button-row {
     :deep(.button) {
-      @include mini {
+      @include medium {
         .text {
           @include fontSize_Mini;
         }
@@ -264,28 +276,40 @@ export default {
 .card.type__slider {
   width: 100%;
   height: 100%;
+  .sidebar {
+    @include small {
+      border-right: solid 1.5px $color_Accent;
+      width: toRem(53);
+      padding: toRem(14) toRem(12);
+    }
+  }
   .sidebar-text {
     @include textOutlineDark;
+    @include small {
+      font-size: toRem(22);
+    }
   }
   .card-content {
     padding-bottom: toRem(17);
-    @include mini {
+    @include small {
       padding-bottom: toRem(5);
+      width: calc(100% - 48px);
     }
   }
   .image {
     width: calc(100% + 2px);
     height: toRem(195);
     margin-bottom: toRem(40);
-    @include mini {
+    @include small {
+      height: toRem(125);
       margin-bottom: toRem(19);
     }
   }
   .title,
   .description,
   .button-row {
     padding: 0 toRem(19);
-    @include mini {
+    @include small {
       padding: 0 0.75rem;
     }
   }
@@ -295,21 +319,29 @@ export default {
     font-family: $font_Primary;
     line-height: leading(36, 24);
     margin-bottom: 1.375rem;
-    @include mini {
+    @include small {
       @include fontSize_Mini; // 14px
       line-height: leading(23, 14);
       margin-bottom: 0.625rem;
     }
   }
   .description {
     @include p2;
-    @include mini {
+    @include small {
       @include fontSize_Tiny;
     }
   }
   .button-row {
+    @include small {
+      margin-top: 0;
+    }
     :deep(.button) {
       padding-left: 0;
+      .text {
+        @include small {
+          @include fontSize_Tiny;
+        }
+      }
     }
   }
 }
@@ -318,33 +350,34 @@ export default {
   height: unset;
   padding: toRem(49) 0;
   @include itemDivider;
-  @include mini {
+  @include medium {
     flex-direction: column;
   }
   .sidebar-image {
     width: toRem(75);
     height: toRem(75);
     border-radius: 50%;
     margin-right: toRem(37);
-    @include mini {
+    @include medium {
       margin-bottom: toRem(13);
     }
   }
   .card-content {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    max-width: 75%;
   }
   .title {
     @include h3;
     margin-bottom: toRem(3);
-    @include mini {
+    @include medium {
       padding-right: 1rem;
     }
   }
   .description {
     @include p1;
-    @include mini {
+    @include medium {
       padding-right: 1rem;
     }
   }

diff --git a/components/circular-slider.vue b/components/circular-slider.vue
@@ -276,7 +276,7 @@ export default {
 // ///////////////////////////////////////////////////////////////////// General
 .panel-before {
   height: toRem(690);
-  @include mini {
+  @include small {
     height: toRem(424);
   }
 }

diff --git a/components/deck-of-cards.vue b/components/deck-of-cards.vue
@@ -14,10 +14,6 @@
           :key="`slide-${i}`"
           :class="['slider-card', classlist]">
           <Card :card="card" class="slide-content" />
-          <!--           <div
-            class="content"
-            :style="{ 'background-color': card.color }">
-          </div> -->
         </div>
       </template>
 
@@ -107,7 +103,7 @@ export default {
   height: toRem(565);
   transform: translateX(-50%);
   transition: transform 250ms ease;
-  @include mini {
+  @include small {
     width: toRem(280);
     height: toRem(358);
   }
@@ -116,29 +112,29 @@ export default {
   }
   &.animation-slot-3 {
     transform: translateX(-50%) translateY(45px) rotate(-4deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(35px) rotate(-4deg);
     }
   }
   &.animation-slot-5 {
     transform: translateX(-50%) translateY(45px) rotate(4deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(35px) rotate(4deg);
     }
   }
   &.animation-slot-0,
   &.animation-slot-1,
   &.animation-slot-2 {
     transform: translateX(-50%) translateY(112px) rotate(-9.2deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(86px) rotate(-9.2deg);
     }
   }
   &.animation-slot-6,
   &.animation-slot-7,
   &.animation-slot-8-or-grt {
     transform: translateX(-50%) translateY(112px) rotate(9.2deg);
-    @include mini {
+    @include small {
       transform: translateX(-50%) translateY(86px) rotate(9.2deg);
     }
   }
@@ -166,7 +162,7 @@ export default {
 
 :deep(.panel-after) {
   padding: 0 toRem(60);
-  @include mini {
+  @include small {
     padding: 0 1rem;
   }
   .title-matter {

diff --git a/components/section-contributors.vue b/components/section-contributors.vue
@@ -16,7 +16,7 @@
 
     <div class="grid-equalHeight-noGutter">
 
-      <div class="col-7_mi-12">
+      <div class="col-7_md-8_sm-7_mi-12">
         <div class="cta-block">
 
           <div class="typeface">
@@ -45,7 +45,7 @@
         </div>
       </div>
 
-      <div class="col-3_mi-6" data-push-left="off-2_mi-6">
+      <div class="col-3_md-3_sm-3_mi-6" data-push-left="off-2_md-1_sm-2_mi-6">
         <ImageBlock :block="imageblock" />
       </div>
 
@@ -95,7 +95,7 @@ export default {
   align-items: center;
   padding-top: toRem(44);
   padding-bottom: toRem(120);
-  @include mini {
+  @include small {
     padding-bottom: toRem(44);
   }
 }
@@ -115,21 +115,24 @@ export default {
   border-radius: toRem(19);
   padding: toRem(30) toRem(38);
   overflow: hidden;
-  @include mini {
+  @include medium {
+    padding: toRem(30) toRem(30);
+  }
+  @include small {
     padding: toRem(27) toRem(19);
     padding-bottom: toRem(20);
   }
   .typeface {
     width: 100%;
     margin-top: 1.125rem;
-    @include mini {
+    @include small {
       margin-top: 0;
       margin-bottom: 1.875rem;
     }
     :deep(svg) {
       width: toRem(1103);
       transform: translateX(-138px);
-      @include mini {
+      @include small {
         width: toRem(477);
         transform: translateX(-50px);
         height: toRem(45);
@@ -140,15 +143,21 @@ export default {
   .cta {
     display: flex;
     justify-content: space-between;
-    @include mini {
+    @include large {
+      align-items: flex-end;
+    }
+    @include small {
       height: toRem(40);
     }
     .text {
       font-family: $font_Primary;
       @include fontSize_Huge;
       line-height: leading(52, 36);
       color: $mercury;
-      @include mini {
+      @include large {
+        @include fontSize_Large;
+      }
+      @include small {
         @include fontSize_Small;
       }
       .strong {
@@ -165,8 +174,14 @@ export default {
       transform: scale(1.05);
     }
     :deep(.button) {
-      width: toRem(39);
-      height: toRem(39);
+      @include small {
+        width: toRem(39);
+        height: toRem(39);
+      }
+      svg {
+        width: toRem(39);
+        height: toRem(39);
+      }
     }
   }
 }

diff --git a/components/section-hero.vue b/components/section-hero.vue
@@ -2,9 +2,10 @@
   <div class="section-hero-header">
 
     <div class="grid">
-      <div class="col-7_mi-8_ti-9">
-        <div class="statement-of-intent">
-          {{ headerData.statement.toUpperCase() }}
+      <div class="col-7_sm-8_ti-9">
+        <div
+          class="statement-of-intent"
+          v-html="headerData.statement.toUpperCase()">
         </div>
       </div>
     </div>
@@ -110,7 +111,14 @@ export default {
   padding: toRem(30) 0;
   @include h5;
   z-index: 2;
+  @include customMaxMQ ($containerWidth + 4rem) {
+    padding-top: 0;
+  }
+  @include medium {
+    @include fontSize_Medium; // 20
+  }
   @include mini {
+    @include fontSize_Small; // 16
     padding-top: 0.125rem;
     padding-right: 1.5rem;
   }

diff --git a/components/site-footer.vue b/components/site-footer.vue
@@ -6,7 +6,7 @@
         <div class="divider"></div>
       </div>
 
-      <div class="col-6_mi-12">
+      <div class="col-6_sm-12">
         <div class="site-footer-logo">
           <div class="statement-of-intent">
             {{ headerData.statement.toUpperCase() }}
@@ -17,7 +17,7 @@
         </div>
       </div>
 
-      <div class="col-5_mi-12" data-push-left="off-1_mi-0">
+      <div class="col-5_sm-12" data-push-left="off-1_sm-0">
         <div class="footer-links">
           <div
             v-for="link in links"
@@ -152,7 +152,7 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: 100%;
-  @include mini {
+  @include small {
     padding: toRem(19) 0;
     @include sectionDivider;
   }
@@ -172,7 +172,7 @@ export default {
   @include fontWeight_Semibold;
   line-height: leading(27, 18);
   letter-spacing: 0.05em;
-  @include mini {
+  @include small {
     padding: 0;
     margin-bottom: toRem(53);
   }