Styling tweaks and basic mobile support (parcel-bundler#606)

* don't max-width * basic breakpoints * navigation style fixes * make nav sections hideable * fix features * center content and limit it to 80rem * add margin back and add line under header cuz felt kinda weird in dark mode * hide only on mobile * update border color...
benwilliamsBJSS · Jun 19, 2020 · f0485a6 · f0485a6
1 parent 9f173e3
commit f0485a6
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "watch": "eleventy --watch",
     "serve": "eleventy --serve --quiet",
     "debug": "DEBUG=* eleventy",
-    "lint": "prettier --write 'src/**/*.{json,md,scss}'",
+    "lint": "prettier --write 'src/**/*.{js,json,md,scss}'",
     "generate-api-docs": "node generate-api-docs/ ../ ./api"
   },
   "devDependencies": {
@@ -30,7 +30,7 @@
     "nullthrows": "^1.1.1"
   },
   "lint-staged": {
-    "*.{md,scss,json}": "prettier --write"
+    "*.{md,scss,js,json}": "prettier --write"
   },
   "husky": {
     "hooks": {

diff --git a/src/_includes/doc-nav-toggle.js b/src/_includes/doc-nav-toggle.js
@@ -0,0 +1,19 @@
+"use strict";
+(function () {
+  var navToggles = document.querySelectorAll(".toggle-doc-nav-tree");
+  navToggles.forEach((toggle) => {
+    toggle.addEventListener("change", function (evt) {
+      try {
+        var navTreeId = evt.target.id.replace("toggle", "nav-tree");
+        var target = document.getElementById(navTreeId);
+        var isChecked = evt.target.checked;
+
+        if (target) {
+          target.setAttribute("class", isChecked ? "" : "doc-nav-group-hidden");
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    });
+  });
+})();
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
@@ -28,7 +28,7 @@
           alt=""
         />
         <img
-          class="type"
+          class="parcel-text"
           src="/assets/logo.svg"
           alt="Parcel"
           width="300"
@@ -53,23 +53,28 @@
       </div>
       {% include "darkmode.html" %}
     </header>
-    <div class="content-scroll">
-      <div id="content" class="content-container">
-        <nav class="sidebar">
-          {%- for tag in tagOrder -%}
-          <ul>
-            <li>{{ tag }}</li>
-            <li>
-              {{ collections[tag] | eleventyNavigation |
-              eleventyNavigationToHtml({ listItemHasChildrenClass: 'section',
-              activeListItemClass: 'current', activeKey:
-              eleventyNavigation.key}) | safe }}
-            </li>
-          </ul>
-          {%- endfor -%}
-        </nav>
+    <div id="content" class="content-container">
+      <nav class="docs-navigation">
+        {%- for tag in tagOrder -%}
+        <ul>
+          <li>
+            <label>
+              <span>{{ tag }}</span>
+              <input type="checkbox" class="toggle-doc-nav-tree visually-hidden" id="{{ tag }} toggle">
+            </label>
+          </li>
+          <li id="{{ tag }} nav-tree" class="doc-nav-group-hidden">
+            {{ collections[tag] | eleventyNavigation |
+            eleventyNavigationToHtml({ listItemHasChildrenClass: 'section',
+            activeListItemClass: 'current', activeKey:
+            eleventyNavigation.key}) | safe }}
+          </li>
+        </ul>
+        {%- endfor -%}
+      </nav>
 
-        <main class="main-content">
+      <main class="main-content">
+        <div>
           <header>
             <h1>
               {{ title | default(eleventyNavigation.title) |
@@ -87,12 +92,13 @@
               <a
                 href="https://github.com/parcel-bundler/website/blob/v2/{{ page.inputPath }}"
                 style="float: right;"
-                >Edit this page on GitHub</a
               >
+                Edit this page on GitHub
+              </a>
             </i>
           </footer>
-        </main>
-      </div>
+        </div>
+      </main>
     </div>
 
     <script>
@@ -105,4 +111,7 @@
         });
     </script>
   </body>
+  <script>
+    {% include "doc-nav-toggle.js" %}
+  </script>
 </html>
diff --git a/src/doc-styles.scss b/src/doc-styles.scss
@@ -8,12 +8,16 @@ $title-fonts: "Gill Sans", "Avenir Next", Avenir, "Helvetica Neue", Helvetica,
 $text-fonts: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman",
   serif;
 
+$breakpoint-tablet: 1000px;
+
 @mixin transition-background-color {
   transition: background 0.2s ease-in-out;
 }
+
 @mixin transition-color {
   transition: color 0.2s ease-in-out;
 }
+
 @mixin transition-colors {
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
@@ -28,6 +32,7 @@ html {
   --code-mark-background-color: #ff0;
   --border-color: #eee;
 }
+
 html.dark {
   --color: #fafafa;
   --header-background-color: #111d27;
@@ -176,15 +181,20 @@ body {
 
     & .asset:first-child mark {
       background: #f004;
+
       @include transition-colors;
+
       .dark & {
         color: white;
         background: #f006;
       }
     }
+
     & .asset:last-child mark {
       background: #4a06;
+
       @include transition-colors;
+
       .dark & {
         color: white;
       }
@@ -196,6 +206,7 @@ body {
   height: 35rem;
   max-height: 65vh;
   max-width: none;
+
   .dark & {
     filter: invert(1) hue-rotate(180deg);
   }
@@ -211,9 +222,11 @@ body {
   & .big-circle {
     transform-origin: center;
   }
+
   .dark & .big-circle {
     transform: scale(1.1);
   }
+
   .dark & .small-circle {
     transform: translate(-20px, 10px);
   }
@@ -256,14 +269,21 @@ body {
   color: #e7dacb;
   width: 100%;
 
+  border-bottom: 1px solid var(--border-color);
+
   .logo {
     display: flex;
     align-items: center;
     height: 30px;
     padding-right: 1rem;
 
-    .type {
+    .parcel-text {
       width: 120px;
+      display: none;
+
+      @media (min-width: $breakpoint-tablet) {
+        display: block;
+      }
     }
 
     .parcel {
@@ -334,28 +354,38 @@ body {
   }
 }
 
-.content-scroll {
-  flex: 0 1 auto;
-  overflow: scroll;
-}
-
 .content-container {
-  padding-top: 1rem;
   display: flex;
-  flex-direction: row;
-  max-width: 80rem;
-  margin: auto;
+  flex-direction: column;
+  margin-top: 1rem;
 
-  .sidebar {
+  @media (min-width: $breakpoint-tablet) {
+    flex-direction: row;
+  }
+
+  .docs-navigation {
     color: var(--sidebar-color);
     @include transition-color;
 
-    padding: 0 1rem 0 0.5rem;
+    padding: 0.5rem 1.5rem;
     border-right: 1px solid var(--border-color);
     font-family: $title-fonts;
     font-size: 1.1rem;
     white-space: nowrap;
 
+    .doc-nav-group-hidden {
+      // Only hide on mobile
+      @media (max-width: $breakpoint-tablet) {
+        position: absolute !important;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+        clip: rect(1px, 1px, 1px, 1px);
+        white-space: nowrap; /* added line */
+      }
+    }
+
     ul,
     li {
       list-style: none;
@@ -368,8 +398,8 @@ body {
     a {
       color: inherit;
       display: flex;
-      text-decoration: none;
       padding: 0.25rem 0.5rem;
+      text-decoration: none;
       border-radius: 2px;
 
       &:hover {
@@ -383,12 +413,31 @@ body {
         margin-bottom: 0.5rem;
       }
 
+      & > li:first-child > label {
+        display: block;
+
+        @media (max-width: $breakpoint-tablet) {
+          cursor: pointer;
+          padding: 1rem 0;
+        }
+      }
+
       & > li:not(:first-child) {
         margin-bottom: 1.5rem;
 
-        & > ul > li {
-          margin-bottom: 0.25rem;
-          margin-left: 1.2rem;
+        & > ul {
+          a {
+            padding-left: 1.5rem;
+          }
+
+          @media (max-width: $breakpoint-tablet) {
+            display: flex;
+            flex-wrap: wrap;
+
+            a {
+              padding: 0.5rem 0.75rem;
+            }
+          }
         }
       }
     }
@@ -408,15 +457,25 @@ body {
     padding: 2rem;
     padding-top: 0;
     line-height: 1.5em;
+    box-sizing: border-box;
 
-    & > header {
-      h1 {
-        margin: 0;
-      }
-      .summary {
-        margin-top: 0.5rem;
-        margin-bottom: 0;
-        filter: opacity(0.7);
+    & > div {
+      width: 100%;
+      max-width: 80rem;
+      margin: 0 auto;
+
+      & > header {
+        h1 {
+          margin: 0;
+          margin-top: 0.5rem;
+          margin-bottom: 1rem;
+        }
+
+        .summary {
+          margin-top: 0.5rem;
+          margin-bottom: 1rem;
+          filter: opacity(0.7);
+        }
       }
     }
 

diff --git a/src/features/features.json b/src/features/features.json
@@ -1,3 +1,3 @@
 {
-  "tags": "💡Features"
+  "tags": "💡 Features"
 }
diff --git a/src/src.json b/src/src.json
@@ -1,7 +1,7 @@
 {
   "tagOrder": [
     "🚀 Getting Started",
-    "💡Features",
+    "💡 Features",
     "🔧 Configuration",
     "🍰 Recipes",
     "📚 Languages",