Fixed navigation links overflowing the navigation overlay on landscape mobile devices.

Tomasz-Kluczkowski · Tomasz-Kluczkowski · commit 673668e700d8 · 2018-02-09T21:15:44.000Z
Changed navigation links color on focus to distinguish focused link from hovered.
Made overlay transition faster to make interface snappier.
diff --git a/static/css/style.css b/static/css/style.css
@@ -146,7 +146,7 @@
     background-color: rgb(0,0,0);
     background-color: rgba(0, 0, 0, 0.9);
     overflow-x: hidden;
-    transition: 0.5s;
+    transition: 0.3s;
 }
 
 .navigation__overlay-content {
@@ -157,19 +157,30 @@
     margin-top: 30px;
 }
 
+@media screen and (max-width: 850px) and (orientation: landscape) {
+    .navigation__overlay-content {
+    top: 15%;
+    }
+}
+
 .navigation__overlay .navigation__link {
-    padding: 8px;
+    padding: 0.25em;
     text-decoration: none;
-    font-size: 36px;
+    font-size: 2em;
+    font-family: 'Encode Sans Expanded', sans-serif;
     color: #818181;
     display: block;
-    transition: 0.3s;
+    transition: 0.4s;
 }
 
-.navigation__link:hover, .navigation__link:focus {
+.navigation__link:hover {
     color: #f1f1f1;
 }
 
+.navigation__link:focus {
+    color: #035e9a;
+}
+
 .navigation__button-close-container {
     display: none;
 }
@@ -194,7 +205,6 @@
     margin-bottom: 2.5%;
 }
 
-
 @media (min-width: 376px) {
     .section-title {
     font-size: 3em;
@@ -207,14 +217,6 @@
     }
 }
 
-
-
-
-
-
-
-
-
 .section-content {
     font-size: 1.1em;
     text-align: center;
