Uses SCSS partials (#64)

1 files changed, 78 insertions, 0 deletions

diff --git a/scss/modules/_nav.scss b/scss/modules/_nav.scss
new file mode 100644
index 0000000..f2f32a9
--- /dev/null
+++ b/scss/modules/_nav.scss
@@ -0,0 +1,78 @@
+.nav {
+  & > :not(:last-child) {
+    margin-block: 0 var(--margin-block-sm);
+  }
+
+  li {
+    list-style-type: none;
+  }
+}
+
+.nav__bottom-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav__nav-links {
+  display: grid;
+  grid-template-columns: repeat(var(--grid-column-count), var(--grid-column-width));
+  column-gap: var(--grid-gutter-width);
+
+  li {
+    list-style-type: none;
+    margin: 0;
+  }
+}
+
+.nav__logo {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-5);
+  font-weight: 700;
+  line-height: 1.15;
+
+  /* This gradient is based on                  *
+   * colours.$primary-60 -> colours.$secondary-60 *
+   * using Josh W Comeau's gradient generator   */
+  width: fit-content;
+  background-image: linear-gradient(
+    45deg,
+    hsl(248deg 100% 75%) 0%,
+    hsl(227deg 100% 70%) 24%,
+    hsl(211deg 100% 58%) 40%,
+    hsl(205deg 100% 50%) 51%,
+    hsl(202deg 100% 49%) 60%,
+    hsl(200deg 100% 47%) 66%,
+    hsl(197deg 100% 44%) 70%,
+    hsl(194deg 100% 41%) 73%,
+    hsl(190deg 100% 38%) 76%,
+    hsl(186deg 100% 35%) 79%,
+    hsl(181deg 100% 33%) 84%,
+    hsl(177deg 100% 32%) 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  a {
+    text-decoration: none;
+    border: var(--border-width) dotted transparent;
+    transition: border-color 100ms;
+
+    &:is(:focus, :focus-visible, :focus-within) {
+      box-shadow: none;
+      outline: none;
+      border-color: var(--special-text-color);
+      transition: border-color 300ms;
+    }
+  }
+}
+
+.nav__breadcrumbs {
+  li {
+    list-style: '▸';
+    list-style-position: inside;
+  }
+}
+
+.nav__switch-language-link {
+  text-align: right;
+}