feat: data programs title responsive styling across breakpoints

data-preservation-programs · Jul 6, 2023 · e7b0914 · e7b0914
1 parent 337f90e
commit e7b0914
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 35 deletions.
diff --git a/components/section-hero.vue b/components/section-hero.vue
@@ -12,10 +12,10 @@
 
     <div class="typeface-container">
       <TypefacePattern
-        v-for="(pattern, i) in [rows, mini]"
+        v-for="(pattern, i) in [rows, tiny]"
         :key="`pattern-${i}`"
         :pattern="pattern"
-        :mini="i === 1" />
+        :tiny="i === 1" />
     </div>
 
   </div>
@@ -47,21 +47,21 @@ export default {
         { offset: -7.5, reverse: true },
         { offset: 4, reverse: true }
       ],
-      mini: [
-        { offset: 14, reverse: true, transparent: ['programs'] },
-        { offset: 176, transparent: ['data'] },
-        { offset: -76, reverse: true, fill: ['data'] },
-        { offset: 83, reverse: true, fill: ['programs'] },
-        { offset: 56 },
-        { offset: -26, reverse: true },
-        { offset: 56 },
-        { offset: -26, reverse: true },
-        { offset: 56 },
-        { offset: -26, reverse: true },
-        { offset: 56 },
-        { offset: -26, reverse: true },
-        { offset: 56 },
-        { offset: -26, reverse: true }
+      tiny: [
+        { offset: 4, reverse: true, transparent: ['programs'] },
+        { offset: 36, transparent: ['data'] },
+        { offset: -12, reverse: true, fill: ['data'] },
+        { offset: 12, reverse: true, fill: ['programs'] },
+        { offset: 11, reverse: true },
+        { offset: -4.5, reverse: true },
+        { offset: 10, reverse: true },
+        { offset: -4.5, reverse: true },
+        { offset: 10 },
+        { offset: -4.5, reverse: true },
+        { offset: 10 },
+        { offset: -4.5, reverse: true },
+        { offset: 10 },
+        { offset: -4.5, reverse: true }
       ]
     }
   },
@@ -92,7 +92,7 @@ export default {
   @include customMaxMQ ($containerWidth + 4rem) {
     padding-top: 0;
   }
-  @include mini {
+  @include tiny {
     padding-top: 0.125rem;
     padding-right: 1.5rem;
   }
@@ -107,7 +107,7 @@ export default {
   @include small {
     margin-top: 1rem;
   }
-  @include mini {
+  @include tiny  {
     margin-top: 0;
   }
 }

diff --git a/components/typeface-pattern.vue b/components/typeface-pattern.vue
@@ -3,8 +3,8 @@
     <div
       v-for="(row, i) in pattern"
       :key="`row-${i}`"
-      :class="['data-programs-typeface', { reverse: row.reverse }, { large }, { mini }]"
-      :style="{ transform: `translateX(${row.offset}%)` }">
+      :class="['data-programs-typeface', { reverse: row.reverse }, { large }, { tiny }]"
+      :style="{ transform: `translateX(${row.offset}vw)` }">
 
       <DataTypeface
         :class="[
@@ -44,7 +44,7 @@ export default {
       required: true,
       default: () => []
     },
-    mini: {
+    tiny: {
       type: Boolean,
       required: false,
       default: false
@@ -53,7 +53,7 @@ export default {
 
   computed: {
     large () {
-      return !this.mini
+      return !this.tiny
     }
   }
 }
@@ -69,17 +69,17 @@ export default {
   padding-top: 1rem;
   padding-bottom: 0.5rem;
   :first-child {
-    margin-right: clamp(1.5rem, vw(40px), 2.5rem);
+    margin-right: clamp(toRem(27), vw(40px), 2.5rem);
   }
   &.large {
-    @include mini {
+    @include tiny {
       display: none;
     }
   }
   &.reverse {
     flex-direction: row-reverse;
     :last-child {
-      margin-right: clamp(1.5rem, vw(40px), 2.5rem);
+      margin-right: clamp(toRem(27), vw(40px), 2.5rem);
     }
     :first-child {
       margin-right: 0;
@@ -88,31 +88,34 @@ export default {
   &:first-child {
     padding-top: 0;
   }
+  @include mini {
+    padding-top: 0.5rem;
+  }
 }
 
 .data-programs-typeface {
-  &.mini {
+  &.tiny {
     display: none;
     width: toRem(570);
     padding: toRem(7) 0;
-    @include mini {
+    @include tiny {
       display: flex;
     }
     .typeface {
       &.data {
-        width: toRem(178);
-        height: toRem(55);
+        // width: toRem(178);
+        // height: toRem(62);
       }
       &.programs {
-        width: toRem(365);
-        height: toRem(55);
+        // width: toRem(365);
+        // height: toRem(62);
       }
     }
   }
 }
 
 .typeface {
-  height: clamp(toRem(55), vw(145px), toRem(145));
+  max-height: clamp(55px, vw(145px), toRem(145));
   :deep(path) {
     fill: transparent;
   }

diff --git a/pages/index.vue b/pages/index.vue
@@ -81,13 +81,17 @@ export default {
 }
 
 :deep(.hero-header) {
-  margin-bottom: clamp(toRem(100), vw(276px), toRem(276));
+  margin-bottom: clamp(toRem(80), vw(225px), toRem(225));
   @include mini {
-    margin-bottom: toRem(146);
+    margin-bottom: clamp(3rem, 6vw, 6rem);
+  }
+  @include tiny {
+    margin-bottom: toRem(190);
   }
 }
 
 :deep(#section-projects) {
+  // opacity: 0;
   .card-list-block {
     .card {
       @include mini {