fix: improve mobile responsiveness for landing page

Resize oversized header logo/nav on phones, fix modal overflow on
small screens, use transform-based toast centering, clamp section
headings with vw instead of vmax, and hide Get Extension link on
mobile.

Author: rvmoldova

index.html

@@ -28,6 +28,7 @@ <h1 class="header__name">static.md</h1>
     <ul class="header__nav">
       <li class="header__nav__item"><a class="header__nav__link link" id="nav_home" href="/" data-navigo="" data-i18n="nav.home">Home</a></li>
       <li class="header__nav__item"><a class="header__nav__link link" id="nav_contact" href="/contact" data-navigo="" data-i18n="nav.contact">Contact</a></li>
+      <li class="header__nav__item"><a class="header__nav__link" id="nav_extension" href="https://chromewebstore.google.com/detail/staticshot-screenshot-cap/bbgoenllpdnfljjapjcababahphohncj" target="_blank" rel="noopener"><svg class="chrome-icon" width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M188.8,255.93A67.2,67.2,0,1,0,256,188.75,67.38,67.38,0,0,0,188.8,255.93Z"/><path d="M476.75,217.79s0,0,0,.05a206.63,206.63,0,0,0-7-28.84h-.11a202.16,202.16,0,0,1,7.07,29h0a203.5,203.5,0,0,0-7.07-29H314.24c19.05,17,31.36,40.17,31.36,67.05a86.55,86.55,0,0,1-12.31,44.73L231,478.45a2.44,2.44,0,0,1,0,.27V479h0v-.26A224,224,0,0,0,256,480c6.84,0,13.61-.39,20.3-1a222.91,222.91,0,0,0,29.78-4.74C405.68,451.52,480,362.4,480,255.94A225.25,225.25,0,0,0,476.75,217.79Z"/><path d="M256,345.5c-33.6,0-61.6-17.91-77.29-44.79L76,123.05l-.14-.24A224,224,0,0,0,207.4,474.55l0-.05,77.69-134.6A84.13,84.13,0,0,1,256,345.5Z"/><path d="M91.29,104.57l77.35,133.25A89.19,89.19,0,0,1,256,166H461.17a246.51,246.51,0,0,0-25.78-43.94l.12.08A245.26,245.26,0,0,1,461.17,166h.17a245.91,245.91,0,0,0-25.66-44,2.63,2.63,0,0,1-.35-.26A223.93,223.93,0,0,0,91.14,104.34l.14.24Z"/></svg> Get Extension</a></li>
       <li class="header__nav__item" id="headerApp"><a class="header__nav__link link" id="nav_upload" href="#" data-i18n="nav.upload" @click="toggleModal($event)">Upload</a></li>
     </ul>
   </header>

src/styles/components/_gallery.scss

@@ -1,5 +1,6 @@
 .grid-sizer,
 .grid-item {
+    width: 100%;
     @media(min-width: 500px) {
         width: 50%;
     }
@@ -97,17 +98,18 @@ figure.grid-item {
         margin: 0 auto;
         padding: 20px 30px;
         border: 1px solid #888;
-        width: 300px;
+        width: calc(100vw - 2rem);
+        max-width: 300px;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         -webkit-animation-name: animateTop;
         -webkit-animation-duration: 0.4s;
         animation-name: animateTop;
         animation-duration: 0.4s;
         @media (min-width: 425px) {
-            width: 400px;
+            max-width: 400px;
         }
         @media (min-width: 768px) {
-            width: 600px;
+            max-width: 600px;
         }
     }
     /* The Close Button */
@@ -181,9 +183,8 @@ figure.grid-item {
     }
     .copy-trigger {
         position: absolute;
-        right: 0;
-        margin-right: 10px;
-        margin-top: 110px;
+        right: 1rem;
+        bottom: 1rem;
         color: $primary-color;
         &:hover {
             cursor: pointer;
@@ -341,7 +342,7 @@ section.headline {
 #toast {
     visibility: hidden;
     min-width: 250px;
-    margin-left: -125px;
+    max-width: calc(100vw - 2rem);
     background-color: $secondary-color;
     color: #fff;
     text-align: center;
@@ -352,6 +353,7 @@ section.headline {
     left: 50%;
     bottom: 30px;
     font-size: 17px;
+    transform: translateX(-50%);
     &.show {
         visibility: visible;
         -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

src/styles/components/_upload_app.scss

@@ -16,7 +16,8 @@
 }
 
 .modal-container {
-    width: 300px;
+    width: calc(100vw - 2rem);
+    max-width: 300px;
     margin: 0px auto;
     padding: 20px 30px;
     background-color: #fff;
@@ -25,10 +26,10 @@
     transition: all .3s ease;
     font-family: Helvetica, Arial, sans-serif;
     @media (min-width: 425px) {
-        width: 400px;
+        max-width: 400px;
     }
     @media (min-width: 768px) {
-        width: 600px;
+        max-width: 600px;
     }
 }
 
@@ -77,11 +78,14 @@
 }
 
 .modal-header.modal-title {
-    padding: 0 50px 20px 0;
+    padding: 0 20px 20px 0;
     border-bottom: 1px solid $active;
     color: $active;
     font-size: $text-big;
     line-height: $line-height-big;
+    @media (min-width: 425px) {
+        padding: 0 50px 20px 0;
+    }
 }
 
 input[type="file"] {

src/styles/layout/_footer.scss

@@ -34,7 +34,7 @@
         margin-left: 2em;
     }
     @include mob-small {
-        flex-basis: 50%;
+        flex-basis: auto;
         &:not(:first-of-type) {
             margin-left: 0;
         }

src/styles/layout/_header.scss

@@ -56,9 +56,9 @@
     overflow: hidden;
     transition: transform .2s ease-in-out;
     @include mob-big {
-        width: 33vw;
-        height: 33vw;
-        margin-right: 5vw;
+        width: 3rem;
+        height: 3rem;
+        margin-right: 0.75rem;
     }
     &:hover {
         transform: scale(1.25); // @supports (mix-blend-mode: multiply) {
@@ -94,7 +94,7 @@
     display: inline-block;
     font-size: $text-normal;
     @include mob-big {
-        font-size: 8vw;
+        font-size: 1.2em;
     }
 }
 
@@ -108,27 +108,53 @@
 .header__nav__item {
     display: inline-block;
     @include mob-big {
-        margin-bottom: 1em;
-        font-size: 5vw;
-        flex-basis: calc(50% - 2em);
-        &:last-of-type {
-            flex-basis: 50%;
-        }
+        font-size: $text-small;
+        flex-basis: auto;
+        text-align: center;
     }
     &:not(:last-of-type) {
         margin-right: 2em;
+        @include mob-big {
+            margin-right: 1em;
+        }
     }
 }
 
 .header__nav__link {
     display: inline-block;
     color: $grey-dark;
     font-size: $text-normal;
+    @include mob-big {
+        min-height: 44px;
+        line-height: 44px;
+    }
     &--active {
         color: $active;
         font-weight: $font-bold;
     }
     &::after {
         display: none;
     }
+}
+
+#nav_extension {
+    display: inline-flex;
+    align-items: center;
+    gap: .35em;
+    color: $grey-dark;
+    font-size: $text-normal;
+    transition: color .2s ease-in-out;
+    @include mob-big {
+        display: none;
+    }
+
+    &:hover {
+        color: $active;
+    }
+
+    .chrome-icon {
+        flex-shrink: 0;
+        width: 1em;
+        height: 1em;
+    }
 }

src/styles/layout/_headline.scss

@@ -6,7 +6,7 @@
     transform: translateZ(0);
     @include ipad-land {
         margin: 2rem auto 4rem;
-        margin: 4vmax auto 8vmax;
+        margin: 4vw auto 8vw;
     }
 }
 

src/styles/layout/_section.scss

@@ -33,7 +33,7 @@
     }
     @include mob-big {
         padding: 0 0 2vmax 0;
-        font-size: 5vmax;
+        font-size: clamp(1.2em, 5vw, 1.8em);
         flex-basis: 100%;
     }
 }