Merge pull request #20 from Sycamost/dev

Dev

1 files changed, 77 insertions, 0 deletions

diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss
new file mode 100644
index 0000000..44ec5c6
--- /dev/null
+++ b/scss/modules/nav.scss
@@ -0,0 +1,77 @@
+.nav > :not(:last-child) {
+  margin-block-end: var(--margin-block-sm);
+}
+
+.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);
+}
+
+.nav__nav-links li {
+  margin: 0;
+}
+
+.nav__logo {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-5);
+  font-weight: 700;
+
+  /* This gradient is based on                  *
+   * --color-primary-60 -> --color-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;
+}
+
+.nav__logo a {
+  text-decoration: none;
+  border: var(--relative-eighth-rem) dotted transparent;
+  transition: border-color 100ms;
+}
+
+.nav__logo a:is(:focus, :focus-visible, :focus-within) {
+  box-shadow: none;
+  outline: none;
+  border-color: var(--special-text-color);
+  transition: border-color 300ms;
+}
+
+.nav__breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.nav__breadcrumbs li {
+  list-style-type: none;
+  min-width: max-content;
+}
+
+.nav__breadcrumbs li::before {
+  content: '/'
+}
+
+.nav__switch-language-link {
+  text-align: right;
+}