feat: updated index page mobile styling

data-preservation-programs · Feb 29, 2024 · 7b72db2 · 7b72db2
1 parent a99b691
commit 7b72db2
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 15 deletions.
diff --git a/.gitignore b/.gitignore
@@ -107,3 +107,6 @@ sw.*
 # Storybook
 .nuxt-storybook
 storybook-static
+
+# rclone filter rules
+open-panda-dataset-meta-bk__filter.txt
diff --git a/packages/fe/assets/scss/typography.scss b/packages/fe/assets/scss/typography.scss
@@ -20,7 +20,7 @@ $letterSpacing_Large: 0.03em;
 @mixin fontSize_16 { font-size: clamp(toRem(14), vw(16px), toRem(16)) }
 @mixin fontSize_17 { font-size: toRem(17) }
 @mixin fontSize_18 { font-size: clamp(toRem(14), vw(18px), toRem(18)) }
-@mixin fontSize_20 { font-size: clamp(toRem(14), vw(20px), toRem(20)) }
+@mixin fontSize_20 { font-size: clamp(toRem(16), vw(20px), toRem(20)) }
 @mixin fontSize_24 { font-size: clamp(toRem(20), vw(24px), toRem(24)) }
 @mixin fontSize_28 { font-size: clamp(toRem(20), vw(28px), toRem(28)) }
 @mixin fontSize_32 { font-size: toRem(32) }
@@ -41,7 +41,8 @@ $letterSpacing_Large: 0.03em;
   @include fontWeight_Bold;
   font-family: $font_Primary;
   @include fontSize_65;
-  line-height: leading(75, 65);
+  // line-height: leading(75, 65);
+  line-height: 150%;
 }
 
 @mixin h2 {
@@ -83,7 +84,8 @@ $letterSpacing_Large: 0.03em;
   @include fontWeight_Regular;
   font-family: $font_Primary;
   @include fontSize_20;
-  line-height: leading(30, 20);
+  // line-height: leading(30, 20);
+  line-height: 150%;
 }
 
 @mixin p2 {

diff --git a/packages/fe/components/blocks/category-slider-block.vue b/packages/fe/components/blocks/category-slider-block.vue
@@ -182,9 +182,10 @@ export default {
 }
 
 :deep(.slider-controls) {
-  position: absolute;
+  // position: absolute;
   width: 100%;
-  transform: translateY(74px);
+  margin-top: -1rem;
+  // transform: translateY(74px);
   @include small {
     transform: none;
     display: flex;

diff --git a/packages/fe/components/category-ticker.vue b/packages/fe/components/category-ticker.vue
@@ -118,6 +118,9 @@ export default {
 // ///////////////////////////////////////////////////////////////////// General
 :deep(.filters) {
   margin-bottom: toRem(20);
+  @include tiny {
+    margin-bottom: toRem(39);
+  }
 }
 
 .inner-content {
@@ -134,7 +137,7 @@ export default {
 .text-wrapper {
   display: flex;
   position: absolute;
-  bottom: 20%;
+  bottom: 25%;
 }
 
 .ticker {

diff --git a/packages/fe/components/page-home/toolbar.vue b/packages/fe/components/page-home/toolbar.vue
@@ -230,7 +230,7 @@ export default {
     max-width: none;
   }
   @include mini {
-    margin-bottom: toRem(10);
+    // margin-bottom: toRem(10);
   }
 }
 

diff --git a/packages/fe/components/site-header.vue b/packages/fe/components/site-header.vue
@@ -140,7 +140,7 @@ export default {
   padding-top: toRem(50);
   padding-bottom: toRem(70);
   @include medium {
-    padding-top: toRem(10);
+    padding-top: toRem(31);
     padding-bottom: toRem(27);
   }
   &.singular-page {
@@ -197,7 +197,7 @@ export default {
       display: none;
     }
     @include medium {
-      width: toRem(121);
+      width: toRem(137);
       display: inline-block;
     }
   }
@@ -211,16 +211,16 @@ export default {
     right: -3px;
   }
   @include medium {
-    right: 0.4vw;
-    top: calc(100% - 7px);
+    right: 5px;
+    top: calc(100% - 10px);
   }
   &:hover {
     transform: scale(1.1);
   }
 }
 
 .alpha-tag {
-  width: toRem(55);
+  width: toRem(40);
 }
 
 .hamburger-c {
@@ -241,7 +241,7 @@ export default {
   height: 18px;
   top: -3px;
   transition-duration: 150ms;
-  margin-left: toRem(15);
+  margin-left: toRem(19);
   position: relative;
 
   .hamburger-icon {

diff --git a/packages/fe/content/pages/index.json b/packages/fe/content/pages/index.json
@@ -54,7 +54,17 @@
               "props": {
                 "block": {
                   "src": "/images/index-hero-right.png"
-                }
+                },
+                "class": "desktop-only"
+              }
+            },
+            "image2": {
+              "name": "ImageBlock",
+              "props": {
+                "block": {
+                  "src": "/images/index-hero-right-mobile.png"
+                },
+                "class": "mobile-only"
               }
             },
             "heading": {

diff --git a/packages/fe/pages/index.vue b/packages/fe/pages/index.vue
@@ -194,7 +194,7 @@ export default {
       margin-top: toRem(90);
       @include medium {
         margin-left: 0;
-        margin-top: toRem(20);
+        margin-top: toRem(35);
       }
     }
   }
@@ -208,6 +208,19 @@ export default {
       display: none;
     }
   }
+  .image-block {
+    &.desktop-only {
+      @include tiny {
+        display: none;
+      }
+    }
+    &.mobile-only {
+      display: none;
+      @include tiny {
+        display: block;
+      }
+    }
+  }
 }
 
 :deep(.home-slider) {
@@ -217,6 +230,9 @@ export default {
 // ///////////////////////////////////////////////////////////////////// Toolbar
 #section-toolbar {
   margin-bottom: toRem(55);
+  @include tiny {
+    margin-bottom: toRem(24);
+  }
 }
 
 // ////////////////////////////////////////////////////////////////// No results

diff --git a/packages/fe/static/images/index-hero-right-mobile.png b/packages/fe/static/images/index-hero-right-mobile.png