summaryrefslogtreecommitdiff
path: root/assets/mumi.scss
diff options
context:
space:
mode:
authorRicardo Wurmus <rekado@elephly.net>2022-12-20 14:39:20 +0100
committerRicardo Wurmus <rekado@elephly.net>2022-12-20 14:39:20 +0100
commitd622f88cbe0d50f4a612f2fa93298f12aac4e2ff (patch)
tree6ecf095ed93fd53b24aa62318ed57200b6617e3f /assets/mumi.scss
parenta6f9c6473166915e406a5afef0286afa3467294e (diff)
Add SVG logo and adjust nav styles.
Diffstat (limited to 'assets/mumi.scss')
-rw-r--r--assets/mumi.scss114
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;