Tweak mobile styles

themes/starter/source/assets/scss/modules/_index.scss

@@ -308,8 +308,8 @@
   }
 
   .grid__item__image {
-    width: 40px;
-    height: 40px;
+    width: 30px;
+    height: 30px;
   }
 
   .grid__item__image,
@@ -317,6 +317,10 @@
     flex: initial;
   }
 
+  .grid__item__title {
+    font-size: 1rem;
+  }
+
   .grid__card {
     display: none;
   }

themes/starter/source/assets/scss/modules/_navbar.scss

@@ -178,6 +178,21 @@
 }
 
 @media screen and (max-width: $mq-small) {
+  .hamburger {
+    width: 170px;
+    top: -80px;
+    right: -75px;
+  }
+
+  .hamburg-box {
+    top: 45px;
+    width: 95px;
+  }
+
+  .hamburger svg:last-of-type {
+    margin-left: 30px;
+  }
+
   .navbar li:not(:last-child) {
     line-height: 2.5;
   }

themes/starter/source/assets/scss/modules/_sidebar.scss

@@ -83,6 +83,19 @@
   fill: $golden;
 }
 
+@media screen and (max-width: $mq-small) {
+  .sidebar.g-sidebar {
+    width: 170px;
+    top: -80px;
+    left: -75px;
+  }
+
+  .sidebar.g-sidebar .f-logo {
+    top: 97px;
+    width: 70px;
+  }
+}
+
 @media screen and (max-width: $mq-xsmall) {
   .share-wrapper .u-extra {
     margin-bottom: 0;

themes/starter/source/assets/scss/partials/_layout.scss

@@ -304,7 +304,7 @@ ol {
 
 .no-js {
   position: absolute;
-  top: 4em;
+  top: 6em;
   left: 50%;
   transform: translateX(-50%);
   width: 70%;
@@ -312,7 +312,7 @@ ol {
   color: $black;
   padding: .4em 1em;
   text-align: center;
-  z-index: $zIndex--4;
+  z-index: $zIndex--5;
 }
 
 @media screen and (max-width: $mq-medium) {

themes/starter/source/assets/scss/partials/_z-index.scss

@@ -4,4 +4,5 @@
 $zIndex--1: 1; // footer
 $zIndex--2: 2; // .main__container:after
 $zIndex--3: 3; // .grid
-$zIndex--4: 4; // no-js, navbar, trigger, aside
+$zIndex--4: 4; // navbar, trigger, aside
+$zIndex--5: 5; // no-js