Added Hamburger Menu for small screens per Bulma spec.

[github/bastienwirtz/homer.git] / app.scss

diff --git a/app.scss b/app.scss
index a0b1d42dcdfaec20d08d1c855412fb7f5e105407..69b1067e2f2ecd1d4fd303b826e9bd27e042a086 100644 (file)
--- a/app.scss
+++ b/app.scss
@@ -175,7 +175,7 @@ body {
         }
       }
     }
-    .navbar {
+    .navbar, .navbar-menu {
       background-color: $secondary-color;
 
       a {
@@ -186,6 +186,9 @@ body {
         }
       }
     }
+    .navbar-end {
+      text-align: right;
+    }
   }
 
   #main-section {
@@ -320,7 +323,7 @@ body {
       background-color: lighten( $secondary-color, 6% );
       border-radius: 5px;
       padding: 2px 12px 2px 30px;
-      margin: 10px 0;
+      margin: 0 0 0 12px;
       transition: all 100ms linear;
       color: #ffffff;
       height: 30px;
@@ -337,12 +340,13 @@ body {
     .search-label::before {
       font-family: 'Font Awesome 5 Free';
       position: absolute;
-      top: 12px;
-      left: 8px;
+      top: 4px;
+      left: 16px;
       content: "\f002";
       font-weight: 900;
       width: 20px;
       height: 20px;
+      color: #ffffff;
     }
 
       &:focus-within .search-label::before {
@@ -352,6 +356,7 @@ body {
 
   .icon-button {
     display: inline-block;
+    padding: 0 12px;
   }
 
   .offline-message {