From: Dan Allen Date: Sat, 14 Oct 2017 21:59:16 +0000 (-0600) Subject: add CSS for UI shell X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=646d7eeb991bf5f75138b44a9fb93b569fe3bbdc;p=working%2Feg-antora.git add CSS for UI shell - add CSS for all UI elements outside of article content - add additional CSS classes to be activated by JavaScript - add Roboto and Roboto Mono font packages as dev dependencies - change navigation button in toolbar to a toggle --- diff --git a/package.json b/package.json index 13c29bb..ea580ec 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,8 @@ "require-from-string": "^2.0.1", "stylelint": "^8.2.0", "stylelint-config-standard": "^17.0.0", + "typeface-roboto": "^0.0.35", + "typeface-roboto-mono": "^0.0.35", "vinyl-buffer": "^1.0.0", "vinyl-fs": "^2.4.4" } diff --git a/src/css/article.css b/src/css/article.css new file mode 100644 index 0000000..166b9c2 --- /dev/null +++ b/src/css/article.css @@ -0,0 +1,11 @@ +.doc { + margin: 0 auto; + max-width: 40rem; +} + +@media (min-width: 1024px) { + .doc { + margin: 0 2rem; + max-width: 54rem; + } +} diff --git a/src/css/base.css b/src/css/base.css new file mode 100644 index 0000000..14ad1fc --- /dev/null +++ b/src/css/base.css @@ -0,0 +1,58 @@ +:root { + --color-text: #222; + --color-navbar-bg: #0a0a0a; + --color-navbar-bg-focus: #000; + --color-navbar-text: #fff; +} + +html, +body { + height: 100%; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; + font-family: 'Roboto', sans-serif; + font-size: 1.1em; + text-size-adjust: 100%; +} + +@media (min-width: 1024px) { + html { + font-size: 1.2em; + } +} + +body { + color: var(--color-text); + line-height: 1.6; + margin: 0; +} + +code, +pre { + font-family: 'Roboto Mono', monospace; +} + +::-webkit-scrollbar { + width: 0.3333rem; + height: 0.3333rem; +} + +::-webkit-scrollbar-track { + background-color: #f0f0f0; +} + +::-webkit-scrollbar-thumb { + background-color: #c1c1c1; +} + +::-webkit-scrollbar-thumb:window-inactive { + background: transparent; +} diff --git a/src/css/breadcrumbs.css b/src/css/breadcrumbs.css new file mode 100644 index 0000000..c7c27bb --- /dev/null +++ b/src/css/breadcrumbs.css @@ -0,0 +1,39 @@ +.crumbs { + display: none; + flex: 1 1; + padding: 0 0.5rem 0 0.75rem; + line-height: 1.35; + hyphens: none; +} + +@media (min-width: 1024px) { + .crumbs { + display: block; + } +} + +a + .crumbs { + padding-left: 0.05rem; +} + +.crumbs ul { + display: flex; + flex-wrap: wrap; + margin: 0; + padding: 0; + list-style: none; +} + +.crumbs li { + display: inline; + margin: 0; +} + +.crumbs li::after { + content: "/"; + padding: 0 0.5rem; +} + +.crumbs li:last-of-type::after { + content: none; +} diff --git a/src/css/footer.css b/src/css/footer.css new file mode 100644 index 0000000..5e12675 --- /dev/null +++ b/src/css/footer.css @@ -0,0 +1,10 @@ +footer.footer { + font-size: 0.85rem; + background-color: #2c2c2c; + color: #8e8e8e; + padding: 0.5rem 1rem; +} + +.footer p { + margin: 0.5rem 0; +} diff --git a/src/css/header.css b/src/css/header.css new file mode 100644 index 0000000..65ce47c --- /dev/null +++ b/src/css/header.css @@ -0,0 +1,273 @@ +:root { + --navbar-height: 3.25rem; +} + +html.is-clipped--navbar { + overflow-y: hidden; +} + +body { + padding-top: var(--navbar-height); +} + +.navbar { + background-color: var(--color-navbar-bg); + color: var(--color-navbar-text); + font-size: 0.83333rem; + height: var(--navbar-height); + position: fixed; + top: 0; + width: 100%; + word-wrap: break-word; + z-index: 3; +} + +.navbar a { + text-decoration: none; +} + +.navbar-brand .navbar-item { + color: var(--color-navbar-text); + font-size: 1.15rem; +} + +@media screen and (min-width: 1024px) { + .navbar-end > .navbar-item, + .navbar-end .navbar-link { + color: var(--color-navbar-text); + } + + .navbar-end > a.navbar-item:hover, + .navbar-end .navbar-link:hover { + background-color: var(--color-navbar-bg-focus); + color: var(--color-navbar-text); + } + + .navbar-end .navbar-link::after { + border-color: var(--color-navbar-text); + } + + .navbar-item.has-dropdown:hover .navbar-link { + background-color: var(--color-navbar-bg-focus); + color: var(--color-navbar-text); + } +} + +.navbar-brand { + align-items: stretch; + display: flex; + flex-shrink: 0; + height: var(--navbar-height); +} + +.navbar-burger { + color: var(--color-navbar-text); + background: none; + border: none; + outline: none; + cursor: pointer; + display: block; + height: var(--navbar-height); + position: relative; + /* width: var(--navbar-height); */ + width: 2.75rem; + margin-left: auto; + padding: 0; +} + +.navbar-burger::-moz-focus-inner { + border: none; +} + +.navbar-burger span { + background-color: currentColor; + display: block; + height: 1px; + left: 50%; + margin-left: -7px; + position: absolute; + top: 50%; + width: 15px; +} + +.navbar-burger span:nth-child(1) { + margin-top: -6px; +} + +.navbar-burger span:nth-child(2) { + margin-top: -1px; +} + +.navbar-burger span:nth-child(3) { + margin-top: 4px; +} + +.navbar-burger:hover { + background-color: var(--color-navbar-bg-focus); +} + +.navbar-burger.is-active span:nth-child(1) { + margin-left: -5px; + transform: rotate(45deg); + transform-origin: left top; +} + +.navbar-burger.is-active span:nth-child(2) { + opacity: 0; +} + +.navbar-burger.is-active span:nth-child(3) { + margin-left: -5px; + transform: rotate(-45deg); + transform-origin: left bottom; +} + +.navbar-menu { + display: none; +} + +.navbar-item, +.navbar-link { + color: var(--color-text); + display: block; + line-height: 1.5; + padding: 0.5rem 1rem; + position: relative; +} + +.navbar-item { + flex: none; +} + +.navbar-item.has-dropdown { + padding: 0; +} + +.navbar-link { + padding-right: 2.5em; +} + +.navbar-dropdown { + font-size: 0.875rem; +} + +.navbar-dropdown .navbar-item { + padding-left: 1.5rem; + padding-right: 1.5rem; +} + +@media screen and (max-width: 1023px) { + .navbar-brand .navbar-item { + align-items: center; + display: flex; + } + + .navbar-menu { + background-color: #fff; + padding: 0.5rem 0; + } + + .navbar-menu.is-active { + display: block; + box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1); + max-height: calc(100vh - var(--navbar-height)); + overflow-y: auto; + } + + .navbar-menu a.navbar-item:hover, + .navbar-menu .navbar-link:hover { + background-color: #fafafa; + } +} + +@media screen and (min-width: 1024px) { + .navbar, + .navbar-menu, + .navbar-end { + align-items: stretch; + display: flex; + } + + .navbar-burger { + display: none; + } + + .navbar-item, + .navbar-link { + align-items: center; + display: flex; + } + + .navbar-item.has-dropdown { + align-items: stretch; + } + + .navbar-item.is-hoverable:hover .navbar-dropdown { + display: block; + } + + .navbar-link::after { + border-width: 0 0 1px 1px; + border-style: solid; + content: " "; + display: block; + height: 0.5em; + pointer-events: none; + position: absolute; + transform: rotate(-45deg); + width: 0.5em; + margin-top: -0.375em; + right: 1.125em; + top: 50%; + } + + .navbar-menu { + flex-grow: 1; + } + + .navbar-end { + justify-content: flex-end; + margin-left: auto; + } + + .navbar-dropdown { + background-color: #fff; + border: 1px solid #e1e1e1; + display: none; + font-size: 0.875rem; + top: 100%; + left: 0; + min-width: 100%; + position: absolute; + } + + .navbar-dropdown .navbar-item { + padding: 0.5rem 1rem; + white-space: nowrap; + } + + .navbar-dropdown a.navbar-item { + padding-right: 3rem; + } + + .navbar-dropdown.is-right { + left: auto; + right: 0; + } + + .navbar-dropdown a.navbar-item:hover { + background-color: #fafafa; + } +} + +.navbar .button { + display: inline-flex; + align-items: center; + background-color: #fff; + border: 1px solid #e1e1e1; + border-radius: 0.15rem; + height: 1.75rem; + color: #333; + padding: 0 0.75em; + white-space: nowrap; +} diff --git a/src/css/main.css b/src/css/main.css new file mode 100644 index 0000000..ed146b2 --- /dev/null +++ b/src/css/main.css @@ -0,0 +1,11 @@ +@media (min-width: 1024px) { + .main-wrapper { + display: flex; + } + + .main { + flex: auto; + /* min-width: 0 required for flexbox to constrain overflowing elements */ + min-width: 0; + } +} diff --git a/src/css/navigation-domain.css b/src/css/navigation-domain.css new file mode 100644 index 0000000..9d7b10a --- /dev/null +++ b/src/css/navigation-domain.css @@ -0,0 +1,122 @@ +html.is-clipped--nav { + overflow-y: hidden; +} + +.navigation-domain { + flex-grow: 1; + overflow-y: auto; + display: flex; + flex-direction: column; +} + +.navigation-domain:not(.is-active) { + display: none; +} + +.nav-menu { + flex-grow: 1; + min-height: 0; + /* QUESTION move padding to .navigation-domain? */ + /* + padding: 0.5rem; + */ + padding: 0.4rem 0.5rem; +} + +.nav-list { + list-style: none; + margin: 0; + padding: 0; +} + +.nav-list .nav-list { + margin-left: 1em; +} + +.nav-item { + display: flex; + align-items: flex-start; + flex-wrap: wrap; +} + +.nav-item .nav-item { + padding-top: 0.25em; +} + +.nav-item > .nav-list { + display: none; +} + +.nav-item[data-depth="0"] > .nav-list, +.nav-item.is-active > .nav-list { + display: block; +} + +.nav-toggle { + background: transparent url(../img/caret.svg) no-repeat left center; + background-size: 85%; + border: none; + cursor: pointer; + font-size: inherit; + height: 1.85em; + outline: none; + padding: 0; + width: 1em; +} + +@media (min-width: 769px) { + .nav-toggle { + height: 1.6em; + } +} + +.nav-toggle::-moz-focus-inner { + border: none; +} + +.nav-item.is-active > .nav-toggle { + transform: rotate(90deg); +} + +.nav-link, +.nav-text { + color: inherit; + display: inline-block; + line-height: 1.85em; + margin-left: 1em; + text-decoration: none; + padding-left: 0.25em; +} + +@media (min-width: 769px) { + .nav-link, + .nav-text { + line-height: 1.6em; + } +} + +.is-current-page > .nav-link, +.is-current-page > .nav-text { + font-weight: 500; +} + +.nav-item[data-depth="0"] > .nav-link, +.nav-item[data-depth="0"] > .nav-text, +.nav-item[data-depth="0"] > .nav-list { + margin-left: 0; +} + +.nav-toggle + .nav-link, +.nav-toggle + .nav-text { + margin-left: 0; +} + +.nav-link:hover { + text-decoration: underline; +} + +.nav-item[data-depth="0"] > .nav-link, +.nav-item[data-depth="0"] > .nav-text { + padding-left: 0; + display: none; /* FIXME temporary */ +} diff --git a/src/css/navigation-explore.css b/src/css/navigation-explore.css new file mode 100644 index 0000000..f954c90 --- /dev/null +++ b/src/css/navigation-explore.css @@ -0,0 +1,96 @@ +.navigation-explore { + display: flex; + flex-direction: column; +} + +.navigation-explore.is-active { + height: inherit; +} + +.navigation-explore .current { + 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; + /* font-size: 0.75rem; */ + font-size: 0.8824em; + line-height: 1; + height: var(--toolbar-height); +} + +.navigation-explore.is-active .current { + box-shadow: 0 1px 0 #e1e1e1; +} + +.navigation-explore .current .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 .domains { + 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) .domains { + display: none; +} + +.navigation-explore .domain { + display: block; +} + +.navigation-explore .domain + .domain { + margin-top: 0.5rem; +} + +.navigation-explore .domain .title { + font-weight: 500; +} + +.navigation-explore .versions { + display: flex; + flex-wrap: wrap; + padding-left: 0.5rem; +} + +.navigation-explore .domain .version { + display: block; + font-size: 0.95em; +} + +.navigation-explore .domain .version a { + color: #4a4a4a; + text-decoration: none; + white-space: nowrap; +} + +.navigation-explore .domain .version.is-current { + font-weight: 500; +} + +.navigation-explore .domain .version.is-latest a::after { + content: ' (latest)'; +} + +.navigation-explore .domain .version a:hover { + text-decoration: underline; +} + +.navigation-explore .domain .version + .version { + padding-left: 0.5em; +} diff --git a/src/css/navigation.css b/src/css/navigation.css new file mode 100644 index 0000000..aaa0d22 --- /dev/null +++ b/src/css/navigation.css @@ -0,0 +1,58 @@ +.navigation-container { + display: none; + position: fixed; + top: var(--navbar-height); + left: 0; + width: 100%; + font-size: 0.95rem; + z-index: 1; +} + +.navigation-container.is-active { + display: block; +} + +@media (min-width: 769px) { + .navigation-container { + width: 16rem; + font-size: 0.9rem; + } +} + +@media (min-width: 1024px) { + .navigation-container { + font-size: 0.85rem; + 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 (min-width: 769px) { + .navigation { + box-shadow: 0.5px 0 3px #c1c1c1; + } +} + +@media (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 new file mode 100644 index 0000000..4cd9207 --- /dev/null +++ b/src/css/page-versions.css @@ -0,0 +1,64 @@ +.page-versions { + display: none; + margin-right: 0.7rem; + position: relative; +} + +@media (min-width: 1024px) { + .page-versions { + display: block; + } +} + +.page-versions.is-active { + color: #333; +} + +.page-versions .versions-menu-toggle { + color: inherit; + font-family: inherit; + font-size: inherit; + background: url(../img/chevron.svg) no-repeat; + background-position: right 0.5rem top 50%; + background-size: auto 0.75em; + border: 1px solid transparent; + outline: none; + cursor: pointer; + padding: 0.35rem 1.5rem 0.35rem 0.5rem; + position: relative; + z-index: 1; +} + +.page-versions .versions-menu-toggle::-moz-focus-inner { + border: none; +} + +.page-versions .versions-menu { + border: 1px solid transparent; + background-color: #f0f0f0; + padding: 1.3rem 0.5rem 0.35rem; + position: absolute; + top: 0; + left: 0; + width: 100%; +} + +.page-versions:not(.is-active) .versions-menu { + display: none; +} + +.page-versions .version { + display: block; + line-height: 1; + padding-top: 0.6em; +} + +.page-versions .version.is-current { + display: none; +} + +.page-versions .version.is-missing { + color: #8e8e8e; + text-decoration: none; + font-style: italic; +} diff --git a/src/css/site.css b/src/css/site.css index d4fadc9..ab3a32e 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,3 +1,13 @@ -:root { - /* placeholder */ -} +@import "typeface-roboto.css"; +@import "typeface-roboto-mono.css"; +@import "base.css"; +@import "main.css"; +@import "navigation.css"; +@import "navigation-domain.css"; +@import "navigation-explore.css"; +@import "toolbar.css"; +@import "breadcrumbs.css"; +@import "page-versions.css"; +@import "article.css"; +@import "header.css"; +@import "footer.css"; diff --git a/src/css/toolbar.css b/src/css/toolbar.css new file mode 100644 index 0000000..821e196 --- /dev/null +++ b/src/css/toolbar.css @@ -0,0 +1,88 @@ +:root { + --toolbar-height: 2.5rem; +} + +.toolbar { + color: #5d5d5d; + align-items: center; + background-color: #fafafa; + box-shadow: 0 1px 0 #e1e1e1; + display: flex; + font-size: 0.75rem; + height: var(--toolbar-height); + justify-content: flex-start; + position: sticky; + top: var(--navbar-height); + z-index: 1; +} + +.toolbar a { + text-decoration: none; +} + +.toolbar a, +.toolbar a:hover, +.toolbar a:visited { + color: inherit; +} + +.toolbar a:hover { + text-decoration: underline; +} + +.navigation-toggle { + background: url(../img/menu.svg) no-repeat 50% 47.5%; + background-size: 49%; + border: none; + outline: none; + cursor: pointer; + display: block; + height: 2.5rem; + padding: 0; + width: 2.5rem; + margin-right: -0.25rem; +} + +.navigation-toggle::-moz-focus-inner { + border: none; +} + +@media (min-width: 1024px) { + .navigation-toggle { + display: none; + } +} + +.navigation-toggle.is-active { + background-image: url(../img/close.svg); + background-size: 41.5%; +} + +.home-link { + background: url(../img/home-o.svg) no-repeat 50% 45%; + background-size: 50%; + display: block; + height: 2.5rem; + padding: 0; + width: 2.5rem; +} + +.home-link:hover, +.home-link.is-current { + background-image: url(../img/home.svg); +} + +.edit-this-page { + display: none; + padding-right: 0.5rem; +} + +@media (min-width: 1024px) { + .edit-this-page { + display: block; + } +} + +.toolbar .edit-this-page a { + color: #8e8e8e; +} diff --git a/src/css/typeface-roboto-mono.css b/src/css/typeface-roboto-mono.css new file mode 100644 index 0000000..5d30dc3 --- /dev/null +++ b/src/css/typeface-roboto-mono.css @@ -0,0 +1,21 @@ +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 400; + src: + local("Roboto Mono"), + local("RobotoMono-Regular"), + url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff2) format("woff2"), + url(~typeface-roboto-mono/files/roboto-mono-latin-400.woff) format("woff"); +} + +@font-face { + font-family: "Roboto Mono"; + font-style: normal; + font-weight: 500; + src: + local("Roboto Mono Medium"), + local("RobotoMono-Medium"), + url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff2) format("woff2"), + url(~typeface-roboto-mono/files/roboto-mono-latin-500.woff) format("woff"); +} diff --git a/src/css/typeface-roboto.css b/src/css/typeface-roboto.css new file mode 100644 index 0000000..7825486 --- /dev/null +++ b/src/css/typeface-roboto.css @@ -0,0 +1,43 @@ +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 400; + src: + local("Roboto Regular"), + local("Roboto-Regular"), + url(~typeface-roboto/files/roboto-latin-400.woff2) format("woff2"), + url(~typeface-roboto/files/roboto-latin-400.woff) format("woff"); +} + +@font-face { + font-family: "Roboto"; + font-style: italic; + font-weight: 400; + src: + local("Roboto Italic"), + local("Roboto-Italic"), + url(~typeface-roboto/files/roboto-latin-400italic.woff2) format("woff2"), + url(~typeface-roboto/files/roboto-latin-400italic.woff) format("woff"); +} + +@font-face { + font-family: "Roboto"; + font-style: normal; + font-weight: 500; + src: + local("Roboto Medium"), + local("Roboto-Medium"), + url(~typeface-roboto/files/roboto-latin-500.woff2) format("woff2"), + url(~typeface-roboto/files/roboto-latin-500.woff) format("woff"); +} + +@font-face { + font-family: "Roboto"; + font-style: italic; + font-weight: 500; + src: + local("Roboto Medium Italic"), + local("Roboto-MediumItalic"), + url(~typeface-roboto/files/roboto-latin-500italic.woff2) format("woff2"), + url(~typeface-roboto/files/roboto-latin-500italic.woff) format("woff"); +} diff --git a/src/partials/navigation.hbs b/src/partials/navigation.hbs index 5540601..414b04c 100644 --- a/src/partials/navigation.hbs +++ b/src/partials/navigation.hbs @@ -1,6 +1,5 @@