Merge pull request #47 from data-preservation-programs/feat-mobile-ex…

…perience feat: mobile experience improvements
data-preservation-programs · Sep 28, 2023 · 97ddb60 · 97ddb60
2 parents baaec89 + 8824479
commit 97ddb60
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 10 deletions.
diff --git a/assets/scss/core/utilities.scss b/assets/scss/core/utilities.scss
@@ -26,6 +26,13 @@
   @return math.div($value, $baseFontSize) + rem;
 }
 
+/**
+  * Calculate vw based on expected element size at $x-large breakpoint ($base-vw)
+  */
+@function vw($px-vw, $base-vw: 1440px) {
+  @return math.div($px-vw * 100vw, $base-vw);
+}
+
 // ////////////////////////////////////////////////////////////////////// Mixins
 // -----------------------------------------------------------------------------
 // =================================================================== Animation

diff --git a/components/card.vue b/components/card.vue
@@ -87,7 +87,10 @@ const iconComponent = computed(() => {
   display: flex;
   align-items: center;
   @include large {
-    margin-bottom: 1rem;
+   margin-bottom: 1rem;
+  }
+  @include mini {
+    margin-bottom: 0;
   }
 }
 

diff --git a/components/site-header.vue b/components/site-header.vue
@@ -253,11 +253,8 @@ const handleNavClick = () => {
     path {
       transition: 250ms ease;
     }
-    @include mini {
-      max-width: toRem(205);
-    }
     @include tiny {
-      max-width: toRem(150);
+      max-width: clamp(toRem(150), vw(180px, 415px), toRem(180));
     }
   }
 }

diff --git a/pages/index.vue b/pages/index.vue
@@ -121,14 +121,25 @@ onBeforeUnmount(() => {
       @include mini {
         margin-right: 0;
         margin-bottom: toRem(23);
+        .button-row {
+          display: flex;
+          justify-content: flex-end;
+        }
+        .theme__primary:first-child {
+          margin-right: 0;
+        }
+      }
+      @include tiny {
+        .theme__primary:first-child{
+          margin-right: 1.6rem;
+        }
       }
       .heading {
         @include medium {
           margin-bottom: toRem(17);
         }
       }
       .description {
-        padding-right: toRem(50);
         margin-bottom: toRem(43);
         @include medium {
           margin-bottom: toRem(27);
@@ -165,13 +176,18 @@ onBeforeUnmount(() => {
   .code-block {
     margin-bottom: toRem(48);
     @include medium {
-      margin-bottom: toRem(27);
+      margin-bottom: toRem(34);
     }
   }
   .card-list-block {
-    .card.type__logo {
-      @include tiny {
-        transform: scale(0.9);
+    .card-wrapper {
+      @include mini {
+        margin-bottom: 1rem;
+        &:nth-child(1),
+        &:nth-child(2),
+        &:nth-child(3) {
+            margin-bottom: 1.5rem;
+        }
       }
     }
   }