Fix navigation (#73)

* Fix hamburger menu for RTL

* Better css rules hierarchy for navigation

1 files changed, 64 insertions, 67 deletions

diff --git a/assets/scss/_navigation.scss b/assets/scss/_navigation.scss
index 065cdeb..5c64861 100644
--- a/assets/scss/_navigation.scss
+++ b/assets/scss/_navigation.scss
@@ -11,79 +11,76 @@
       font-size: 1.4rem;
     }
   }
-}
 
-.navigation-list {
-  float: right;
-  list-style: none;
-  margin-bottom: 0;
-  margin-top: 0;
-  @media only screen and (max-device-width : 768px) {
-    position: absolute;
-    top: 6.0rem;
-    right: 0;
-    z-index: 5;
-    visibility: hidden;
-    opacity: 0;
-    padding: 0;
-    max-height: 0;
-    width: 100%;
-    background-color: $bg-color;
-    border-top: solid 2px $alt-bg-color;
-    border-bottom: solid 2px $alt-bg-color;
-    transition: opacity 0.25s, max-height 0.15s linear;
-  }
-}
-
-.navigation-item {
-  float: left;
-  margin: 0;
-  position: relative;
-  @media only screen and (max-device-width : 768px) {
-    float: none !important;
-    text-align: center;
-    a, span {
-      line-height: 5.0rem;
+  .navigation-list {
+    float: right;
+    list-style: none;
+    margin-bottom: 0;
+    margin-top: 0;
+    @media only screen and (max-device-width : 768px) {
+      position: absolute;
+      top: 6.0rem;
+      right: 0;
+      z-index: 5;
+      visibility: hidden;
+      opacity: 0;
+      padding: 0;
+      max-height: 0;
+      width: 100%;
+      background-color: $bg-color;
+      border-top: solid 2px $alt-bg-color;
+      border-bottom: solid 2px $alt-bg-color;
+      transition: opacity 0.25s, max-height 0.15s linear;
     }
-  }
-  a, span {
-    margin-left: 1.0rem;
-    margin-right: 1.0rem;
-  }
-}
-
-.menu-button {
-  display: none;
-  @media only screen and (max-device-width : 768px) {
-    display: block;
-    font-size: 2.4rem;
-    font-weight: 400;
-    line-height: 6.0rem;
-    color: $fg-color;
-    cursor: pointer;
-  }
-}
-
-.menu-separator {
-  @media only screen and (max-device-width : 768px) {
-    border-top: 2px solid $fg-color;
-    margin: 0 8.0rem;
-    span {
-      display: none;
+    .navigation-item {
+      float: left;
+      margin: 0;
+      position: relative;
+      @media only screen and (max-device-width : 768px) {
+        float: none !important;
+        text-align: center;
+        a, span {
+          line-height: 5.0rem;
+        }
+      }
+      a, span {
+        margin-left: 1.0rem;
+        margin-right: 1.0rem;
+      }
+    }
+    .menu-separator {
+      @media only screen and (max-device-width : 768px) {
+        border-top: 2px solid $fg-color;
+        margin: 0 8.0rem;
+        span {
+          display: none;
+        }
+      }
     }
   }
-}
 
-#menu-toggle {
-  display: none;
-  @media only screen and (max-device-width : 768px) {
-    &:checked + label {
-      color: $alt-bg-color;
+  #menu-toggle {
+    display: none;
+    @media only screen and (max-device-width : 768px) {
+      &:checked + label {
+        color: $alt-bg-color;
+      }
+      &:checked + label + ul {
+        visibility: visible;
+        opacity: 1;
+        max-height: 100rem;
+      }
     }
-    &:checked + label + ul {
-      visibility: visible;
-      opacity: 1;
-      max-height: 100rem;
+  }
+  .menu-button {
+    display: none;
+    @media only screen and (max-device-width : 768px) {
+      display: block;
+      font-size: 2.4rem;
+      font-weight: 400;
+      line-height: 6.0rem;
+      color: $fg-color;
+      cursor: pointer;
     }
   }
 }