diff --git a/package.json b/package.json index 9044a5b82..a9a1d1eb7 100644 --- 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 new file mode 100644 index 000000000..1f026ec30 --- /dev/null +++ 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 index 49b73689c..97eceb23d 100644 --- a/src/_includes/layout.njk +++ b/src/_includes/layout.njk @@ -28,7 +28,7 @@ alt="" /> Parcel {% include "darkmode.html" %} -
-
- +
+ -
+
+

{{ title | default(eleventyNavigation.title) | @@ -87,12 +92,13 @@ Edit this page on GitHub + Edit this page on GitHub + -

-
+
+
+ diff --git a/src/doc-styles.scss b/src/doc-styles.scss index 8df8a966d..4788226b7 100644 --- 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 index e87e5fb74..4f39c6bdc 100644 --- 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 index ac3fd6e18..2cdb889d5 100644 --- a/src/src.json +++ b/src/src.json @@ -1,7 +1,7 @@ { "tagOrder": [ "🚀 Getting Started", - "💡Features", + "💡 Features", "🔧 Configuration", "🍰 Recipes", "📚 Languages",