Improve navigation styles on mobile

Use more basic styling, since we don't know on how many lines the device renders the nav on. Related to #645
Raku · Jun 29, 2016 · 6a8604e · 6a8604e
1 parent b6eed52
commit 6a8604e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/assets/sass/style.scss b/assets/sass/style.scss
@@ -340,13 +340,18 @@ footer.pretty-box {
 }
 
 @media (max-width : 560px) {
-    #header > a {
-        font-size: 1.1em;
-        display: block;
-        padding: 5px 10px 0;
-        margin: 0;
-        text-align: center;
+    #header {
+        border-radius: 10px;
+
+        > a {
+            font-size: 1.1em;
+            display: block;
+            padding: 5px 10px 0;
+            margin: 0;
+            text-align: center;
+        }
     }
+
     #home_logo {
         display: none;
     }
@@ -356,4 +361,19 @@ footer.pretty-box {
     .pretty-box {
         padding: 3px;
     }
+
+    .menu-items {
+        height: auto;
+        padding: 0 10px;
+
+        .menu-item + .menu-item {
+            border: none;
+        }
+    }
+
+
+    .menu-item.selected {
+        box-shadow: none;
+        border-radius: 3px;
+    }
 }
diff --git a/html/css/style.css b/html/css/style.css
@@ -281,15 +281,25 @@ footer.pretty-box {
   font-size: 80%; }
 
 @media (max-width: 560px) {
-  #header > a {
-    font-size: 1.1em;
-    display: block;
-    padding: 5px 10px 0;
-    margin: 0;
-    text-align: center; }
+  #header {
+    border-radius: 10px; }
+    #header > a {
+      font-size: 1.1em;
+      display: block;
+      padding: 5px 10px 0;
+      margin: 0;
+      text-align: center; }
   #home_logo {
     display: none; }
   body {
     padding: 0; }
   .pretty-box {
-    padding: 3px; } }
+    padding: 3px; }
+  .menu-items {
+    height: auto;
+    padding: 0 10px; }
+    .menu-items .menu-item + .menu-item {
+      border: none; }
+  .menu-item.selected {
+    box-shadow: none;
+    border-radius: 3px; } }