From 781cb319840ffb950dfed4df137f8476227a27f5 Mon Sep 17 00:00:00 2001 From: Dan Allen Date: Wed, 26 Jun 2019 23:24:19 -0600 Subject: [PATCH] rename CSS classes and add more CSS variables - rename CSS classes to make them more concise and consistent - extract CSS variables into dedicated file - pull more widths and heights into CSS variables - rename crumbs to breadcrumbs - consolidate styles for site navigation into single CSS file --- src/css/base.css | 7 - src/css/body.css | 5 + src/css/breadcrumbs.css | 14 +- src/css/doc.css | 4 +- src/css/header.css | 18 +- src/css/main.css | 4 - src/css/nav.css | 269 +++++++++++++++++++++++++++ src/css/navigation-explore.css | 103 ---------- src/css/navigation-menu.css | 106 ----------- src/css/navigation.css | 62 ------ src/css/page-versions.css | 10 +- src/css/print.css | 2 +- src/css/site.css | 6 +- src/css/toolbar.css | 18 +- src/css/vars.css | 22 +++ src/js/01-navigation.js | 8 +- src/js/03-page-versions.js | 2 +- src/partials/{crumbs.hbs => breadcrumbs.hbs} | 6 +- src/partials/nav-explore.hbs | 2 +- src/partials/nav-menu.hbs | 2 +- src/partials/nav-toggle.hbs | 2 +- src/partials/nav-tree.hbs | 2 +- src/partials/nav.hbs | 4 +- src/partials/page-versions.hbs | 4 +- src/partials/toolbar.hbs | 2 +- 25 files changed, 345 insertions(+), 339 deletions(-) create mode 100644 src/css/body.css create mode 100644 src/css/nav.css delete mode 100644 src/css/navigation-explore.css delete mode 100644 src/css/navigation-menu.css delete mode 100644 src/css/navigation.css create mode 100644 src/css/vars.css rename src/partials/{crumbs.hbs => breadcrumbs.hbs} (73%) diff --git a/src/css/base.css b/src/css/base.css index 5d66327..c3602d0 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -1,10 +1,3 @@ -:root { - --color-text: #222; - --color-navbar-bg: #0a0a0a; - --color-navbar-bg-focus: #000; - --color-navbar-text: #fff; -} - html, body { height: 100%; diff --git a/src/css/body.css b/src/css/body.css new file mode 100644 index 0000000..1d4db3d --- /dev/null +++ b/src/css/body.css @@ -0,0 +1,5 @@ +@media screen and (min-width: 1024px) { + .body { + display: flex; + } +} diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css index 6ec1824..d85fb59 100644 --- a/src/css/breadcrumbs.css +++ b/src/css/breadcrumbs.css @@ -1,4 +1,4 @@ -.crumbs { +.breadcrumbs { display: none; flex: 1 1; padding: 0 0.5rem 0 0.75rem; @@ -7,16 +7,16 @@ } @media screen and (min-width: 1024px) { - .crumbs { + .breadcrumbs { display: block; } } -a + .crumbs { +a + .breadcrumbs { padding-left: 0.05rem; } -.crumbs ul { +.breadcrumbs ul { display: flex; flex-wrap: wrap; margin: 0; @@ -24,16 +24,16 @@ a + .crumbs { list-style: none; } -.crumbs li { +.breadcrumbs li { display: inline; margin: 0; } -.crumbs li::after { +.breadcrumbs li::after { content: "/"; padding: 0 0.5rem; } -.crumbs li:last-of-type::after { +.breadcrumbs li:last-of-type::after { content: none; } diff --git a/src/css/doc.css b/src/css/doc.css index 92a5916..922af29 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -1,6 +1,6 @@ .doc { margin: 0 auto; - max-width: 40rem; + max-width: var(--width-doc-mobile); padding: 0 1rem 4rem; color: #333; } @@ -8,7 +8,7 @@ @media screen and (min-width: 1024px) { .doc { margin: 0 2rem; - max-width: 54rem; + max-width: var(--width-doc); } } diff --git a/src/css/header.css b/src/css/header.css index 0bb4ec0..84eab5f 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,25 +1,21 @@ -:root { - --navbar-height: 3.25rem; -} - html.is-clipped--navbar { overflow-y: hidden; } body { - padding-top: var(--navbar-height); + padding-top: var(--height-navbar); } .navbar { background-color: var(--color-navbar-bg); color: var(--color-navbar-text); font-size: 0.83333rem; - height: var(--navbar-height); + height: var(--height-navbar); position: fixed; top: 0; width: 100%; word-wrap: break-word; - z-index: 3; + z-index: var(--z-index-navbar); } .navbar a { @@ -62,7 +58,7 @@ body { align-items: stretch; display: flex; flex-shrink: 0; - height: var(--navbar-height); + height: var(--height-navbar); } .navbar-burger { @@ -72,9 +68,9 @@ body { outline: none; cursor: pointer; display: block; - height: var(--navbar-height); + height: var(--height-navbar); position: relative; - /* width: var(--navbar-height); */ + /* width: var(--height-navbar); */ width: 2.75rem; margin-left: auto; padding: 0; @@ -184,7 +180,7 @@ body { .navbar-menu.is-active { display: block; box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); - max-height: calc(100vh - var(--navbar-height)); + max-height: var(--height-nav); overflow-y: auto; } diff --git a/src/css/main.css b/src/css/main.css index 0d51e10..d48eea0 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -1,8 +1,4 @@ @media screen and (min-width: 1024px) { - .body { - display: flex; - } - main { flex: auto; /* min-width: 0 required for flexbox to constrain overflowing elements */ diff --git a/src/css/nav.css b/src/css/nav.css new file mode 100644 index 0000000..e94d6f4 --- /dev/null +++ b/src/css/nav.css @@ -0,0 +1,269 @@ +.nav-container { + display: none; + position: fixed; + top: var(--height-navbar); + left: 0; + width: 100%; + font-size: 0.9375rem; + z-index: var(--z-index-nav); +} + +.nav-container.is-active { + display: block; +} + +@media screen and (min-width: 769px) { + .nav-container { + width: var(--width-nav); + font-size: 0.875rem; + } +} + +@media screen and (min-width: 1024px) { + .nav-container { + font-size: 0.8125rem; + flex: none; + display: block; + position: static; + top: 0; + } +} + +.nav { + background-color: #fafafa; + position: relative; + top: var(--height-toolbar); + height: var(--height-nav-mobile); +} + +@media screen and (min-width: 769px) { + .nav { + box-shadow: 0.5px 0 3px #c1c1c1; + } +} + +@media screen and (min-width: 1024px) { + .nav { + top: var(--height-navbar); + box-shadow: none; + position: sticky; + height: var(--height-nav); + } +} + +.nav .panels { + display: flex; + flex-direction: column; + height: inherit; +} + +html.is-clipped--nav { + overflow-y: hidden; +} + +.nav-panel-menu { + flex-grow: 1; + overflow-y: auto; + display: flex; + flex-direction: column; + /* help Chrome calculate the height correctly; must match .nav value minus height of drawer */ + height: var(--height-nav-panel-mobile); +} + +@media screen and (min-width: 1024px) { + .nav-panel-menu { + height: var(--height-nav-panel); + } +} + +.nav-panel-menu:not(.is-active) { + display: none; +} + +.nav-panel-menu::-webkit-scrollbar { + width: 0.25rem; +} + +.nav-panel-menu::-webkit-scrollbar-thumb { + background-color: #c1c1c1; +} + +.nav-menu { + flex-grow: 1; + min-height: 0; + width: 100%; + padding: 0.5rem 0.75rem; + line-height: 1.35; + position: relative; +} + +.nav-menu h3.title { + margin: 0; + font-weight: 500; + color: #424242; + font-size: 1em; + padding: 0.25em 0 0.125em; +} + +.nav-menu a, +.nav-menu a:visited { + color: inherit; +} + +.nav-list { + margin: 0 0 0 0.8em; + padding: 0; +} + +.nav-menu > .nav-list { + margin-bottom: 0.5rem; +} + +.nav-item { + list-style: none; + margin-top: 0.5em; +} + +/* adds some breathing room below a nested list */ +.nav-item-toggle ~ .nav-list { + padding-bottom: 0.125rem; +} + +/* matches list without a title */ +.nav-item[data-depth="0"] > .nav-list:first-child { + display: block; + margin: 0; +} + +.nav-item:not(.is-active) > .nav-list { + display: none; +} + +.nav-item-toggle { + background: transparent url(../img/caret.svg) no-repeat center; + background-size: 55%; + border: none; + cursor: pointer; + outline: none; + position: absolute; + height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */ + width: 1.5em; + margin-left: -1.5em; +} + +.nav-item-toggle::-moz-focus-inner { + border: none; +} + +.nav-item.is-active > .nav-item-toggle { + transform: rotate(90deg); +} + +.is-current-page > .nav-link, +.is-current-page > .nav-text { + font-weight: 500; +} + +.nav-panel-explore { + display: flex; + flex-direction: column; +} + +.nav-panel-explore.is-active { + height: inherit; +} + +.nav-panel-explore .context { + flex-shrink: 0; + color: #5d5d5d; + background-color: #fafafa; + box-shadow: 0 -1px 0 #e1e1e1; + padding: 0 0.25rem 0 0.5rem; + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + line-height: 1; + font-size: 0.8125rem; + height: var(--height-drawer); +} + +@media screen and (min-width: 1024px) { + .nav-panel-explore .context { + font-size: 0.75rem; + } +} + +.nav-panel-explore.is-active .context { + box-shadow: 0 1px 0 #e1e1e1; +} + +.nav-panel-explore .context .version { + background-image: url(../img/chevron.svg); + background-repeat: no-repeat; + background-position: right 0.5rem top 50%; + background-size: auto 0.75em; + padding: 0 1.5rem 0 0; +} + +.nav-panel-explore .components { + flex-grow: 1; + box-shadow: inset 0 1px 5px #e1e1e1; + background-color: #f0f0f0; + padding: 0.5rem; + margin: 0; + overflow-y: auto; + max-height: 100%; + display: block; +} + +.nav-panel-explore:not(.is-active) .components { + display: none; +} + +.nav-panel-explore .component { + display: block; +} + +.nav-panel-explore .component + .component { + margin-top: 0.5rem; +} + +.nav-panel-explore .component .title { + font-weight: 500; +} + +.nav-panel-explore .versions { + display: flex; + flex-wrap: wrap; + list-style: none; + padding-left: 0.5rem; +} + +.nav-panel-explore .component .version { + display: block; + font-size: 0.9375em; +} + +.nav-panel-explore .component .version a { + border: 1px solid #b0b0b0; + border-radius: 0.25em; + color: #4a4a4a; + white-space: nowrap; + padding: 0.05em 0.25em 0; +} + +.nav-panel-explore .component .is-current a { + border-color: #4a4a4a; + font-weight: 500; +} + +/* +.nav-panel-explore .component .is-latest a::after { + content: " (latest)"; +} +*/ + +.nav-panel-explore .component .version + .version { + padding-left: 0.375em; +} diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css deleted file mode 100644 index 938e51a..0000000 --- a/src/css/navigation-explore.css +++ /dev/null @@ -1,103 +0,0 @@ -.navigation-explore { - display: flex; - flex-direction: column; -} - -.navigation-explore.is-active { - height: inherit; -} - -.navigation-explore .context { - flex-shrink: 0; - color: #5d5d5d; - background-color: #fafafa; - box-shadow: 0 -1px 0 #e1e1e1; - padding: 0 0.25rem 0 0.5rem; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - line-height: 1; - font-size: 0.8125rem; - height: var(--drawer-height); -} - -@media screen and (min-width: 1024px) { - .navigation-explore .context { - font-size: 0.75rem; - } -} - -.navigation-explore.is-active .context { - box-shadow: 0 1px 0 #e1e1e1; -} - -.navigation-explore .context .version { - background-image: url(../img/chevron.svg); - background-repeat: no-repeat; - background-position: right 0.5rem top 50%; - background-size: auto 0.75em; - padding: 0 1.5rem 0 0; -} - -.navigation-explore .components { - flex-grow: 1; - box-shadow: inset 0 1px 5px #e1e1e1; - background-color: #f0f0f0; - padding: 0.5rem; - margin: 0; - overflow-y: auto; - max-height: 100%; - display: block; -} - -.navigation-explore:not(.is-active) .components { - display: none; -} - -.navigation-explore .component { - display: block; -} - -.navigation-explore .component + .component { - margin-top: 0.5rem; -} - -.navigation-explore .component .title { - font-weight: 500; -} - -.navigation-explore .versions { - display: flex; - flex-wrap: wrap; - list-style: none; - padding-left: 0.5rem; -} - -.navigation-explore .component .version { - display: block; - font-size: 0.9375em; -} - -.navigation-explore .component .version a { - border: 1px solid #b0b0b0; - border-radius: 0.25em; - color: #4a4a4a; - white-space: nowrap; - padding: 0.05em 0.25em 0; -} - -.navigation-explore .component .is-current a { - border-color: #4a4a4a; - font-weight: 500; -} - -/* -.navigation-explore .component .is-latest a::after { - content: " (latest)"; -} -*/ - -.navigation-explore .component .version + .version { - padding-left: 0.375em; -} diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css deleted file mode 100644 index d781944..0000000 --- a/src/css/navigation-menu.css +++ /dev/null @@ -1,106 +0,0 @@ -html.is-clipped--nav { - overflow-y: hidden; -} - -.navigation-menu { - flex-grow: 1; - overflow-y: auto; - display: flex; - flex-direction: column; - /* help Chrome calculate the height correctly; must match .navigation value minus height of drawer */ - height: calc(100vh - var(--navbar-height) - var(--toolbar-height) - var(--drawer-height)); -} - -@media screen and (min-width: 1024px) { - .navigation-menu { - height: calc(100vh - var(--navbar-height) - var(--drawer-height)); - } -} - -.navigation-menu:not(.is-active) { - display: none; -} - -.navigation-menu::-webkit-scrollbar { - width: 0.25rem; -} - -.navigation-menu::-webkit-scrollbar-thumb { - background-color: #c1c1c1; -} - -.nav-menu { - flex-grow: 1; - min-height: 0; - width: 100%; - padding: 0.5rem 0.75rem; - line-height: 1.35; - position: relative; -} - -.nav-menu h3.title { - margin: 0; - font-weight: 500; - color: #424242; - font-size: 1em; - padding: 0.25em 0 0.125em; -} - -.nav-menu a, -.nav-menu a:visited { - color: inherit; -} - -.nav-list { - margin: 0 0 0 0.8em; - padding: 0; -} - -.nav-menu > .nav-list { - margin-bottom: 0.5rem; -} - -.nav-item { - list-style: none; - margin-top: 0.5em; -} - -/* adds some breathing room below a nested list */ -.nav-toggle ~ .nav-list { - padding-bottom: 0.125rem; -} - -/* matches list without a title */ -.nav-item[data-depth="0"] > .nav-list:first-child { - display: block; - margin: 0; -} - -.nav-item:not(.is-active) > .nav-list { - display: none; -} - -.nav-toggle { - background: transparent url(../img/caret.svg) no-repeat center; - background-size: 55%; - border: none; - cursor: pointer; - outline: none; - position: absolute; - height: 1.4em; /* NOTE must match line-height of text; slightly tweaked for alignment */ - width: 1.5em; - margin-left: -1.5em; -} - -.nav-toggle::-moz-focus-inner { - border: none; -} - -.nav-item.is-active > .nav-toggle { - transform: rotate(90deg); -} - -.is-current-page > .nav-link, -.is-current-page > .nav-text { - font-weight: 500; -} diff --git a/src/css/navigation.css b/src/css/navigation.css deleted file mode 100644 index 550e59a..0000000 --- a/src/css/navigation.css +++ /dev/null @@ -1,62 +0,0 @@ -:root { - --drawer-height: 2.5rem; -} - -.navigation-container { - display: none; - position: fixed; - top: var(--navbar-height); - left: 0; - width: 100%; - font-size: 0.9375rem; - z-index: 1; -} - -.navigation-container.is-active { - display: block; -} - -@media screen and (min-width: 769px) { - .navigation-container { - width: 16rem; - font-size: 0.875rem; - } -} - -@media screen and (min-width: 1024px) { - .navigation-container { - font-size: 0.8125rem; - flex: none; - display: block; - position: static; - top: 0; - } -} - -.navigation { - background-color: #fafafa; - position: relative; - top: var(--toolbar-height); - height: calc(100vh - var(--navbar-height) - var(--toolbar-height)); -} - -@media screen and (min-width: 769px) { - .navigation { - box-shadow: 0.5px 0 3px #c1c1c1; - } -} - -@media screen and (min-width: 1024px) { - .navigation { - top: var(--navbar-height); - box-shadow: none; - position: sticky; - height: calc(100vh - var(--navbar-height)); - } -} - -.navigation .panels { - display: flex; - flex-direction: column; - height: inherit; -} diff --git a/src/css/page-versions.css b/src/css/page-versions.css index 49e617b..364cdeb 100644 --- a/src/css/page-versions.css +++ b/src/css/page-versions.css @@ -14,7 +14,7 @@ color: #333; } -.page-versions .versions-menu-toggle { +.page-versions .version-menu-toggle { color: inherit; font-family: inherit; font-size: inherit; @@ -26,14 +26,14 @@ cursor: pointer; padding: 0.35rem 1.5rem 0.35rem 0.5rem; position: relative; - z-index: 1; + z-index: var(--z-index-page-version-menu); } -.page-versions .versions-menu-toggle::-moz-focus-inner { +.page-versions .version-menu-toggle::-moz-focus-inner { border: none; } -.page-versions .versions-menu { +.page-versions .version-menu { border: 1px solid transparent; background-color: #f0f0f0; padding: 1.3rem 0.5rem 0.35rem; @@ -43,7 +43,7 @@ width: 100%; } -.page-versions:not(.is-active) .versions-menu { +.page-versions:not(.is-active) .version-menu { display: none; } diff --git a/src/css/print.css b/src/css/print.css index dbe6c65..c72840a 100644 --- a/src/css/print.css +++ b/src/css/print.css @@ -53,7 +53,7 @@ } #topbar-nav, - .navigation-container, + .nav-container, .toolbar { display: none; } diff --git a/src/css/site.css b/src/css/site.css index b081e3a..07c9d93 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,10 +1,10 @@ @import "typeface-roboto.css"; @import "typeface-roboto-mono.css"; +@import "vars.css"; @import "base.css"; +@import "body.css"; +@import "nav.css"; @import "main.css"; -@import "navigation.css"; -@import "navigation-menu.css"; -@import "navigation-explore.css"; @import "toolbar.css"; @import "breadcrumbs.css"; @import "page-versions.css"; diff --git a/src/css/toolbar.css b/src/css/toolbar.css index 24b2411..3607518 100644 --- a/src/css/toolbar.css +++ b/src/css/toolbar.css @@ -1,7 +1,3 @@ -:root { - --toolbar-height: 2.5rem; -} - .toolbar { color: #5d5d5d; align-items: center; @@ -9,11 +5,11 @@ box-shadow: 0 1px 0 #e1e1e1; display: flex; font-size: 0.75rem; - height: var(--toolbar-height); + height: var(--height-toolbar); justify-content: flex-start; position: sticky; - top: var(--navbar-height); - z-index: 1; + top: var(--height-navbar); + z-index: var(--z-index-toolbar); } .toolbar a, @@ -21,7 +17,7 @@ color: inherit; } -.navigation-toggle { +.nav-toggle { background: url(../img/menu.svg) no-repeat 50% 47.5%; background-size: 49%; border: none; @@ -34,17 +30,17 @@ margin-right: -0.25rem; } -.navigation-toggle::-moz-focus-inner { +.nav-toggle::-moz-focus-inner { border: none; } @media screen and (min-width: 1024px) { - .navigation-toggle { + .nav-toggle { display: none; } } -.navigation-toggle.is-active { +.nav-toggle.is-active { background-image: url(../img/back.svg); background-size: 41.5%; } diff --git a/src/css/vars.css b/src/css/vars.css new file mode 100644 index 0000000..7973ceb --- /dev/null +++ b/src/css/vars.css @@ -0,0 +1,22 @@ +:root { + --color-text: #222; + --color-navbar-bg: #0a0a0a; + --color-navbar-bg-focus: #000; + --color-navbar-text: #fff; + --height-navbar: 3.25rem; + --height-drawer: 2.5rem; + --height-toolbar: 2.5rem; + --height-to-body: var(--height-navbar); + --height-min-body: calc(100vh - var(--height-to-body)); + --height-nav: var(--height-min-body); + --height-nav-mobile: calc(var(--height-min-body) - var(--height-toolbar)); + --height-nav-panel: calc(var(--height-nav) - var(--height-drawer)); + --height-nav-panel-mobile: calc(var(--height-nav-mobile) - var(--height-drawer)); + --width-nav: 16rem; + --width-doc: 54rem; + --width-doc-mobile: 40rem; + --z-index-nav: 1; + --z-index-toolbar: 2; + --z-index-page-version-menu: 3; + --z-index-navbar: 4; +} diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js index 9f6fd1f..ba25546 100644 --- a/src/js/01-navigation.js +++ b/src/js/01-navigation.js @@ -1,11 +1,11 @@ ;(function () { 'use strict' - var navContainer = document.querySelector('.navigation-container') - var navToggle = document.querySelector('.navigation-toggle') + var navContainer = document.querySelector('.nav-container') + var navToggle = document.querySelector('.nav-toggle') navToggle.addEventListener('click', toggleNavigation) - // don't let click events propagate outside of navigation container + // don't let click events propagate outside of nav container navContainer.addEventListener('click', concealEvent) var menuPanel = navContainer.querySelector('[data-panel=menu]') @@ -21,7 +21,7 @@ navContainer.querySelector('[data-panel=' + activatePanel + ']').classList.toggle('is-active') }) - find('.nav-toggle', menuPanel).forEach(function (btn) { + find('.nav-item-toggle', menuPanel).forEach(function (btn) { var li = btn.parentElement btn.addEventListener('click', function () { li.classList.toggle('is-active') diff --git a/src/js/03-page-versions.js b/src/js/03-page-versions.js index 672bda1..d1d4c2a 100644 --- a/src/js/03-page-versions.js +++ b/src/js/03-page-versions.js @@ -1,7 +1,7 @@ ;(function () { 'use strict' - var toggle = document.querySelector('.page-versions .versions-menu-toggle') + var toggle = document.querySelector('.page-versions .version-menu-toggle') if (!toggle) return var selector = document.querySelector('.page-versions') diff --git a/src/partials/crumbs.hbs b/src/partials/breadcrumbs.hbs similarity index 73% rename from src/partials/crumbs.hbs rename to src/partials/breadcrumbs.hbs index 0611b26..503772e 100644 --- a/src/partials/crumbs.hbs +++ b/src/partials/breadcrumbs.hbs @@ -1,13 +1,13 @@ -