Add SVG logo and adjust nav styles.

1 files changed, 92 insertions, 22 deletions

diff --git a/assets/mumi.scss b/assets/mumi.scss
index eda6a4b..7d9cfb9 100644
--- a/assets/mumi.scss
+++ b/assets/mumi.scss
@@ -3,8 +3,6 @@
 //$primary: #ff3300;
 //$primary-600: #ff3300;
 
-
-
 $commit_header: #005cc5;
 
 // Import full Pico source code
@@ -15,8 +13,33 @@ $commit_header: #005cc5;
     --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
+
+// Light theme (Default)
+// Can be forced with data-theme="light"
+[data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --background-color: #{#fcfbf3};
+  --background-color: #{$white};
+  --nav-background-color: #{rgba(mix($grey-50, $white, 33%), 0.7)};
+  --nav-border-color: #{rgba($grey-500, 0.2)};
+  --nav-logo-color: #333;
+  --article-code-background-color: #{mix($grey-50, $white, 33%)};
+}
+
+// Dark theme
+@mixin dark {
+  --nav-background-color: #{rgba(darken($grey-900, 6%), 0.8)};
+  --nav-border-color: #{rgba($grey-500, 0.2)};
+  --nav-logo-color: #{rgba(darken($grey-200, 6%), 0.8)};
+  --article-code-background-color: var(--code-background-color);
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    @include dark;
+  }
+}
+[data-theme="dark"] {
+  @include dark;
 }
 
 * {
@@ -28,17 +51,76 @@ html {
     scroll-padding-top: 70px; /* height of sticky header */
 }
 
-html, body {
-    background-color: #fff;
-    width: 100%;
-    padding: 0px;
-    margin: 0px;
-}
-
 body {
     height: auto;
 }
 
+body > main {
+    padding-top: calc(var(--block-spacing-vertical) + 3.5rem);
+}
+
+body > nav {
+  --nav-link-spacing-vertical: 1rem;
+
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  z-index: 99;
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  backdrop-filter: saturate(180%) blur(20px);
+  background-color: var(--nav-background-color);
+  box-shadow: 0px 1px 0 var(--nav-border-color);
+
+  &.container-fluid {
+    padding-right: calc(var(--spacing) + var(--scrollbar-width, 0px));
+  }
+
+  a {
+    border-radius: 0;
+  }
+
+  svg {
+    vertical-align: text-bottom;
+  }
+
+  // Band & Title
+  ul:first-of-type {
+    margin-left: calc(var(--spacing) * -1);
+
+    li {
+      padding: 0;
+
+      // Brand
+      &:first-of-type {
+        a {
+          display: block;
+          margin: 0;
+          padding: 0;
+
+          svg {
+            display: block;
+            width: 7rem;
+            height: 3.5rem;
+            fill: var(--nav-logo-color);
+          }
+        }
+      }
+
+      // Title
+      &:nth-of-type(2) {
+        display: none;
+        margin-left: calc(var(--spacing) * 1.5);
+        color: var(--h1-color);
+
+        @media (min-width: map-get($breakpoints, "lg")) {
+          display: inline;
+        }
+      }
+    }
+  }
+}
+
 h1 {
     clear: both;
     margin-top: 1.3rem;
@@ -112,18 +194,6 @@ tr.important svg {
     vertical-align: text-bottom;
 }
 
-nav {
-    background: #333333;
-    border-color: #1A1A1A1A;
-    border-style: none none solid none;
-    border-width: thin;
-    width: 100%;
-    margin-bottom: 1rem;
-    padding: .5em;
-    color: #fff;
-    border-radius: 0;
-}
-
 nav span.navbar-text {
     display: flex;
     flex-grow: 1;