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

Changed navigation links color on focus to distinguish focused link from hovered.
Made overlay transition faster to make interface snappier.

Author: Tomasz-Kluczkowski

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;