Fix responsive navigation on small widths (gulpjs#72)

shrpne · phated · commit 82725ba54d5e · 2017-11-12T14:36:38.000-08:00
diff --git a/css/devices.css b/css/devices.css
@@ -40,12 +40,16 @@
 }
 @media screen and (max-width: 900px) {
 .centerdevices .computerwrapper .computer {
-    margin: auto;
     width: 100%;
     padding: 20px;
     height: calc((100vw - 80px) * .75);
   }
 }
+@media screen and (max-width: 370px) {
+  .centerdevices .computerwrapper .computer {
+    padding: 15px;
+  }
+}
 .centerdevices .iphoneipad2 .mask {
   height: 100%;
   width: 100%;
diff --git a/css/main.css b/css/main.css
@@ -81,26 +81,6 @@ div.logo-cli {
 p.paragraph {
   color: rgba(0, 0, 0, .5);
 }
-.logo {
-  font-size: 30px;
-  line-height: 30px;
-  font-weight: 900;
-}
-@media (max-width: 420px) {
-  .logo {
-    font-size: 22px;
-  }
-}
-.nav-link2,
-.nav-link {
-  text-decoration: none;
-  font-size: 18px;
-  line-height: 30px;
-  color: inherit;
-}
-.nav-link:not(:first-of-type) {
-  margin-left: 20px;
-}
 .text-center {
   text-align: center;
 }
@@ -276,6 +256,40 @@ p.paragraph {
 .sidedevices {
   position: relative;
 }
+
+/*elements*/
+.logo {
+  font-size: 30px;
+  line-height: 30px;
+  font-weight: 900;
+}
+@media (max-width: 420px) {
+  .logo {
+    font-size: 22px;
+  }
+}
+.nav-link {
+  text-decoration: none;
+  font-size: 18px;
+  line-height: 30px;
+  color: inherit;
+}
+.nav-link:not(:first-of-type) {
+  margin-left: 20px;
+}
+@media (max-width: 370px) {
+  .nav {
+    padding: 0 10px;
+  }
+}
+@media (max-width: 350px) {
+  .nav {
+    padding: 0;
+  }
+  .nav-link {
+    font-size: 16px;
+  }
+}
 .header {
   padding: 20px 0 90px 0;
   overflow: hidden;
@@ -291,6 +305,16 @@ p.paragraph {
     margin-top: 60px;
   }
 }
+@media (max-width: 500px) {
+  .header .heading {
+    margin-top: 50px;
+  }
+}
+@media (max-width: 350px) {
+  .header .editor-window code span {
+    font-size: 14px;
+  }
+}
 .ctas-button,
 .ctas-button-2 {
   display: inline-block;
@@ -358,7 +382,7 @@ p.paragraph {
 @media (max-width: 420px) {
   .editor-window code,
   .editor-window code span {
-    font-size: 13pt;
+    font-size: 16px;
   }
 }
 .editor-window pre {
diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
         <a class="logo mobile-hide">
           <img class="logo-img" src="img/gulp-white-text.svg">
         </a>
-        <div class="mobile-col-12 spread">
+        <div class="nav mobile-col-12 spread">
           <a class="nav-link" href="https://github.com/gulpjs/gulp/blob/master/docs/API.md">Docs</a>
           <a class="nav-link" href="http://gulpjs.com/plugins">Plugins</a>
           <a class="nav-link" href="https://twitter.com/gulpjs">Twitter</a>

Original file line number	Diff line number	Diff line change
`@@ -40,12 +40,16 @@`
`40`	`40`	`}`
`41`	`41`	`@media screen and (max-width: 900px) {`
`42`	`42`	`.centerdevices .computerwrapper .computer {`
`43`		`- margin: auto;`
`44`	`43`	`width: 100%;`
`45`	`44`	`padding: 20px;`
`46`	`45`	`height: calc((100vw - 80px) * .75);`
`47`	`46`	`}`
`48`	`47`	`}`
	`48`	`+@media screen and (max-width: 370px) {`
	`49`	`+ .centerdevices .computerwrapper .computer {`
	`50`	`+ padding: 15px;`
	`51`	`+ }`
	`52`	`+}`
`49`	`53`	`.centerdevices .iphoneipad2 .mask {`
`50`	`54`	`height: 100%;`
`51`	`55`	`width: 100%;`