Merge pull request #5 from Andrii-Moshenskyi/main

Remove mobile menu popup and hamburger button, adapting the main menu for mobile devices

6 files changed, 86 insertions, 156 deletions

diff --git a/sass/header.sass b/sass/header.sass
index 0ae1105..27c5efa 100644
--- a/sass/header.sass
+++ b/sass/header.sass
@@ -12,6 +12,8 @@ header
     z-index: 2

   +resp(esm)

     padding: 10px 0

+  +resp(xsm)

+    padding: 5px 0

 

   div.header__inner

     display: flex

@@ -27,75 +29,54 @@ header
         margin-right: 30px

         +resp(lg)

           margin-right: 16px

+        +resp(md)

+          margin-right: 10px

       div.header__text

         font-weight: 500

-        font-size: 16px

         line-height: 25px

         +resp(sm)

           display: none

         p

           font-size: 16px

           color: #ACACAD

-          text-align: left

           +resp(md)

+            font-size: 15px

+          +resp(sm)

             display: none

 

     div.header__links-side

-      display: grid

-      grid-template-columns: 1fr auto auto auto

-      grid-gap: 31px

-      justify-items: center

+      display: flex

       align-items: center

-      +resp(lg)

-        grid-gap: 20px

-        text-align: center

-      +resp(sm)

-        display: none

+      +resp(xsm)

+        flex-wrap: wrap

+        justify-content: flex-end

       a

         font-weight: 600

         font-size: 15px

-        line-height: 14px

+        line-height: 140%

         text-transform: uppercase

         text-decoration: none

         color: $black

         transition: 0.3s

+        margin-left: 31px

+        text-align: center

         +resp(lg)

           font-size: 14px

+          margin-left: 20px

+        +resp(esm)

+          margin-left: 14px

+        +resp(usm)

+          font-size: 13px

+        +resp(xsm)

+          line-height: 180%

+          font-size: 14px

+          margin-left: 24px

+        &:nth-child(1)

+          margin-left: 0

+        &:nth-child(3)

+          +resp(usm)

+            max-width: 100px

+          +resp(xsm)

+            max-width: 100%

         &:hover

-          color: $orange

-

-    div.header__mobile-menu__buttons

-      height: 100%

-      width: 30px

-      justify-content: center

-      display: none

-      +resp(sm)

-        display: flex

-      img

-        cursor: pointer

-        display: none

-      img.active

-        display: block

-

-nav#mobile-menu

-  z-index: 1

-  bottom: 0

-  top: 0

-  right: 0

-  position: fixed

-  left: 100%

-  background-color: $white

-  padding: 70px 15px

-  +resp(esm)

-    padding: 60px 15px

-  a

-    display: block

-    text-transform: uppercase

-    color: $black

-    text-decoration: none

-    padding: 15px 0

-    font-weight: 600

-    transition: 0.3s

-    border-bottom: 1px solid #e0e0e0

-    &:hover

-      color: $orange
\ No newline at end of file
+          color: $orange
\ No newline at end of file
diff --git a/sass/settings.sass b/sass/settings.sass
index 6cca3d9..01b3d95 100644
--- a/sass/settings.sass
+++ b/sass/settings.sass
@@ -35,11 +35,7 @@ $dark-orange: #FD8F01
 	@if $media == usm

 		@media only screen and (max-width: 450px)

 			@content

-	// 390px and down

+	// 375px and down

 	@if $media == xsm

-		@media only screen and (max-width: 390px)

-			@content

-	// 350px and down

-	@if $media == exsm

-		@media only screen and (max-width: 350px)

+		@media only screen and (max-width: 375px)

 			@content
\ No newline at end of file
diff --git a/site/css/fixup.css b/site/css/fixup.css
deleted file mode 100644
index 858e376..0000000
--- a/site/css/fixup.css
+++ /dev/null
@@ -1,23 +0,0 @@
-#content {
-  max-width: 800px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-p {
-  text-align: left;
-}
-
-@supports (hyphens: auto) {
-  p {
-    text-align: justify;
-    hyphens: auto;
-  }
-}
-
-pre, code, sample {
-  white-space: pre-wrap;
-  hyphens: none;
-}
diff --git a/site/css/main.css b/site/css/main.css
index 458b9b6..f1484a1 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -178,6 +178,11 @@ header {
     padding: 10px 0;
   }
 }
+@media only screen and (max-width: 375px) {
+  header {
+    padding: 5px 0;
+  }
+}
 header div.header__inner {
   display: -webkit-box;
   display: -webkit-flex;
@@ -215,9 +220,13 @@ header div.header__inner div.header__logo-side a.header__logo {
     margin-right: 16px;
   }
 }
+@media only screen and (max-width: 991px) {
+  header div.header__inner div.header__logo-side a.header__logo {
+    margin-right: 10px;
+  }
+}
 header div.header__inner div.header__logo-side div.header__text {
   font-weight: 500;
-  font-size: 16px;
   line-height: 25px;
 }
 @media only screen and (max-width: 767px) {
@@ -228,106 +237,88 @@ header div.header__inner div.header__logo-side div.header__text {
 header div.header__inner div.header__logo-side div.header__text p {
   font-size: 16px;
   color: #ACACAD;
-  text-align: left;
 }
 @media only screen and (max-width: 991px) {
   header div.header__inner div.header__logo-side div.header__text p {
+    font-size: 15px;
+  }
+}
+@media only screen and (max-width: 767px) {
+  header div.header__inner div.header__logo-side div.header__text p {
     display: none;
   }
 }
 header div.header__inner div.header__links-side {
-  display: grid;
-  grid-template-columns: 1fr auto auto auto;
-  grid-gap: 31px;
-  justify-items: center;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
       -ms-flex-align: center;
           align-items: center;
 }
-@media only screen and (max-width: 1199px) {
-  header div.header__inner div.header__links-side {
-    grid-gap: 20px;
-    text-align: center;
-  }
-}
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: 375px) {
   header div.header__inner div.header__links-side {
-    display: none;
+    -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+            flex-wrap: wrap;
+    -webkit-box-pack: end;
+    -webkit-justify-content: flex-end;
+        -ms-flex-pack: end;
+            justify-content: flex-end;
   }
 }
 header div.header__inner div.header__links-side a {
   font-weight: 600;
   font-size: 15px;
-  line-height: 14px;
+  line-height: 140%;
   text-transform: uppercase;
   text-decoration: none;
   color: #18191C;
   -webkit-transition: 0.3s;
   -o-transition: 0.3s;
   transition: 0.3s;
+  margin-left: 31px;
+  text-align: center;
 }
 @media only screen and (max-width: 1199px) {
   header div.header__inner div.header__links-side a {
     font-size: 14px;
+    margin-left: 20px;
   }
 }
-header div.header__inner div.header__links-side a:hover {
-  color: #FFBE12;
-}
-header div.header__inner div.header__mobile-menu__buttons {
-  height: 100%;
-  width: 30px;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  display: none;
-}
-@media only screen and (max-width: 767px) {
-  header div.header__inner div.header__mobile-menu__buttons {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
+@media only screen and (max-width: 575px) {
+  header div.header__inner div.header__links-side a {
+    margin-left: 14px;
   }
 }
-header div.header__inner div.header__mobile-menu__buttons img {
-  cursor: pointer;
-  display: none;
+@media only screen and (max-width: 450px) {
+  header div.header__inner div.header__links-side a {
+    font-size: 13px;
+  }
 }
-header div.header__inner div.header__mobile-menu__buttons img.active {
-  display: block;
+@media only screen and (max-width: 375px) {
+  header div.header__inner div.header__links-side a {
+    line-height: 180%;
+    font-size: 14px;
+    margin-left: 24px;
+  }
 }
-
-nav#mobile-menu {
-  z-index: 1;
-  bottom: 0;
-  top: 0;
-  right: 0;
-  position: fixed;
-  left: 100%;
-  background-color: #ffffff;
-  padding: 70px 15px;
+header div.header__inner div.header__links-side a:nth-child(1) {
+  margin-left: 0;
 }
-@media only screen and (max-width: 575px) {
-  nav#mobile-menu {
-    padding: 60px 15px;
+@media only screen and (max-width: 450px) {
+  header div.header__inner div.header__links-side a:nth-child(3) {
+    max-width: 100px;
   }
 }
-nav#mobile-menu a {
-  display: block;
-  text-transform: uppercase;
-  color: #18191C;
-  text-decoration: none;
-  padding: 15px 0;
-  font-weight: 600;
-  -webkit-transition: 0.3s;
-  -o-transition: 0.3s;
-  transition: 0.3s;
-  border-bottom: 1px solid #e0e0e0;
+@media only screen and (max-width: 375px) {
+  header div.header__inner div.header__links-side a:nth-child(3) {
+    max-width: 100%;
+  }
 }
-nav#mobile-menu a:hover {
+header div.header__inner div.header__links-side a:hover {
   color: #FFBE12;
 }
 
diff --git a/templates/main.html b/templates/main.html
index 327ea5e..4bdb60a 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -29,26 +29,12 @@
           <div class="header__links-side">

             <a href="/get">GET VYOS</a>

             <a href="/contribute">CONTRIBUTE</a>

-            <a href="/test">TEST AND REPORT A BUG</a>

             <a href="http://vyos.io">COMMERCIAL SERVICES</a>

           </div>

-          

-          <div class="header__mobile-menu__buttons">

-            <img class="open active" src="/img/header/mobile-menu-open.svg">

-            <img class="close" src="/img/header/mobile-menu-close.svg">

-          </div>

-

         </div>

       </div>

     </header>

 

-    <nav id="mobile-menu">

-      <a href="/get">GET VYOS</a>

-      <a href="/contribute">CONTRIBUTE</a>

-      <a href="/test">TEST AND REPORT A BUG</a>

-      <a href="http://vyos.io">COMMERCIAL SERVICES</a>

-    </nav>

-

     <main>

       <div class="container small" id="content">

         <!-- content is automatically inserted here -->

diff --git a/templates/menu.html b/templates/menu.html
index 6acb1a9..6ec3ed3 100644
--- a/templates/menu.html
+++ b/templates/menu.html
@@ -1,6 +1,5 @@
 <nav>
   <a href="/download">Get VyOS</a>
   <a href="/contribute">Contribute</a>
-  <a href="https://phabricator.vyos.net">Report a bug</a>
   <a href="https://vyos.io">Commercial services</a>
 </nav>