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 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
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 (file)
--- 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 (file)
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 (file)
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 (file)
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 (file)
--- a/src/partials/navigation.hbs
+++ b/src/partials/navigation.hbs
@@ -1,6 +1,5 @@
 <div class="navigation-container">
   <aside class="navigation" role="navigation">
-    <button class="navigation-close"></button>
     <div class="panels">
 {{> navigation-domain}}
 {{> navigation-explore}}

diff --git a/src/partials/toolbar.hbs b/src/partials/toolbar.hbs
index 6898c1f..11fdeef 100644 (file)
--- a/src/partials/toolbar.hbs
+++ b/src/partials/toolbar.hbs
@@ -1,5 +1,5 @@
 <div class="toolbar" role="navigation">
-  <button class="navigation-open"></button>
+  <button class="navigation-toggle"></button>
   {{#if siteRootUrl}}
   <a href="{{siteRootUrl}}" class="home-link{{#if home}} is-current{{/if}}"></a>
   {{/if}}

diff --git a/yarn.lock b/yarn.lock
index 98387a4..1b19a3a 100644 (file)
--- a/yarn.lock
+++ b/yarn.lock
@@ -5724,6 +5724,14 @@ typedarray@^0.0.6, typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
+typeface-roboto-mono@^0.0.35:
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/typeface-roboto-mono/-/typeface-roboto-mono-0.0.35.tgz#ff750974b25707b398bcba0777397c628ee6bd82"
+
+typeface-roboto@^0.0.35:
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/typeface-roboto/-/typeface-roboto-0.0.35.tgz#5965d3f6d4cd72b7b2833d6b7d42c9b59b8392ba"
+
 typescript-eslint-parser@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-7.0.0.tgz#be57d8768e37707af825e339ea2af18d7393cabb"