diff options
| -rw-r--r-- | assets/mumi.scss | 114 | ||||
| -rw-r--r-- | mumi/web/view/html.scm | 102 |
2 files changed, 187 insertions, 29 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; diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm index 22e749c..28dd9bb 100644 --- a/mumi/web/view/html.scm +++ b/mumi/web/view/html.scm @@ -144,16 +144,104 @@ simple query language. Here is a list of supported query terms:") (a (@ (href "help#search")) "many more!")))))) +(define logo + '(svg + (@ (width "97.896") + (height "34.396") + (viewBox"0 0 97.896 34.396") + (xmlns "http://www.w3.org/2000/svg") + (xmlns:xlink "http://www.w3.org/1999/xlink")) + (defs + (linearGradient + (@ (id "lg1") + (x1 "142.97") + (x2 "176.6") + (y1 "63.656") + (y2 "70.667") + (gradientTransform "matrix(.23496 0 0 .23496 65.67 125.11)") + (gradientUnits "userSpaceOnUse") + (xlink:href "#lg2")) "") + (linearGradient + (@ (id "lg2")) + (stop + (@ (stop-color "#f00") + (stop-opacity "0.58431") + (offset "0"))) + (stop + (@ (stop-color "#fc0") + (offset "1")))) + (linearGradient + (@ (id "lg3") + (x1 "113.51") + (x2 "78") + (y1 "1004.8") + (y2 "922.07") + (gradientTransform "matrix(.23496 0 0 .23496 65.662 -75.155)") + (gradientUnits "userSpaceOnUse") + (xlink:href "#lg2")) "") + (linearGradient + (@ (id "lg4") + (x1 "108.09") + (x2 "80.655") + (y1 "1025.7") + (y2 "1043.7") + (gradientTransform "matrix(-.13157 0 0 .13157 102.74 23.454)") + (gradientUnits "userSpaceOnUse")) + (stop (@ (stop-color "#ffb638") + (offset "0"))) + (stop (@ (stop-color "#f0ae26") + (offset "1")))) + (linearGradient + (@ (id "lg5") + (x1 "142.97") + (x2 "177.04") + (y1 "63.656") + (y2 "69.791") + (gradientTransform "matrix(-.23496 0 0 .23496 113.39 125.11)") + (gradientUnits "userSpaceOnUse") + (xlink:href "#lg2")) "")) + (g + (@ (transform "translate(-56.102 -131.49)")) + (path + (@ (d "m108.81 136.28c-0.42374 0.77444-0.85393 1.4049-1.2923 1.9017-0.42373 0.48221-0.891 0.86789-1.4024 1.1601-0.4968 0.27763-1.0605 0.47787-1.6888 0.59473-0.61369 0.10229-1.3183 0.15423-2.122 0.1542-0.59281 0-1.1256-0.0304-1.5933-0.0881h-7e-3c-0.0593-4e-3 -0.18178-0.0241-0.30839-0.0441-0.13335-0.0209-0.26966-0.041-0.4846-0.0808-3.9399-0.72898-5.2466 2.0062-5.5289 2.7608-0.04419 0.11811-0.06608 0.1909-0.06608 0.1909l-4.7873 13.349-2.937 4.9929h5.8666c2.4095-5.3648 4.726-16.566 7.203-17.556 0.53688 0.0751 1.2024 0.11012 2.0045 0.11012 1.052 0 1.994-0.12613 2.8268-0.38915 0.83285-0.26302 1.582-0.67095 2.2541-1.2262 0.67213-0.56983 1.2803-1.2966 1.8209-2.1734 0.55523-0.87667 1.0818-1.9299 1.5786-3.1572l-1.3363-0.4993z") + (fill "#ffbf2d")) "") + (path + (@ (d "m108.81 136.28c-0.42374 0.77443-0.8539 1.404-1.2922 1.9008-0.42373 0.4822-0.89119 0.86807-1.4026 1.1603-0.12303 0.0687-0.24987 0.13192-0.38107 0.19111-1e-3 0-2e-3 3e-3 -3e-3 3e-3 -0.16514 0.11615-0.37756 0.21584-0.66546 0.28437-3.3205 0.7906-5.5822 3.7498-5.7946 4.036 0.09632-0.0792 0.19328-0.14386 0.29007-0.19339 0.01455-8e-3 0.02866-0.0148 0.04323-0.0217 0.0024 0 0.0045-3e-3 0.0068-3e-3 0.01688-8e-3 0.0343-0.0148 0.05119-0.0217 0.53688 0.0751 1.2022 0.11033 2.0043 0.11033 1.052 0 1.9939-0.12716 2.8268-0.39015 0.83286-0.26302 1.5813-0.6699 2.2535-1.2252 0.67213-0.56984 1.2806-1.2971 1.8212-2.1738 0.55524-0.8767 1.0821-1.9304 1.5789-3.1578l-1.3366-0.49824z") + (fill "url(#lg1)")) "") + (path + (@ (d "m70.244 136.28c0.42374 0.77444 0.85393 1.4049 1.2923 1.9017 0.42374 0.48221 0.89101 0.86789 1.4024 1.1601 0.4968 0.27763 1.0605 0.47787 1.6888 0.59473 0.61369 0.10232 1.3183 0.15423 2.122 0.1542 0.59281 0 1.1256-0.0304 1.5933-0.0881h0.0074c0.0593-4e-3 0.18177-0.0241 0.30838-0.0441 0.13335-0.0209 0.26966-0.041 0.4846-0.0808 3.9399-0.72898 5.2466 2.0062 5.5289 2.7608 0.04419 0.11811 0.06608 0.1909 0.06608 0.1909l4.7873 13.349 2.937 4.9929h-5.8666c-2.4095-5.3648-4.726-16.566-7.203-17.556-0.53688 0.0751-1.2024 0.11012-2.0045 0.11012-1.052 0-1.994-0.12613-2.8268-0.38915-0.83286-0.26302-1.582-0.67095-2.2541-1.2262-0.67213-0.56983-1.2803-1.2966-1.8209-2.1734-0.55524-0.87667-1.0818-1.9299-1.5786-3.1572l1.3363-0.4993z") + (fill "#ffbf2d")) "") + (path + (@ (d "m70.244 136.28c0.42374 0.77443 0.85393 1.4049 1.2923 1.9017 0.42374 0.4822 0.89101 0.86789 1.4024 1.1601 0.4968 0.27763 1.0605 0.47784 1.6888 0.59473 0.61369 0.10231 1.3183 0.15422 2.122 0.15417 0.59281 0 1.1256-0.0303 1.5933-0.0881h0.0074c0.0593-4e-3 0.18177-0.0243 0.30838-0.044 0.13335-0.0209 0.26967-0.041 0.4846-0.0808 3.9399-0.72898 5.2466 2.0062 5.5289 2.7608 0.04418 0.11811 0.06608 0.1909 0.06608 0.1909l4.7873 13.349 2.4671 4.9929h-5.3967c-2.4095-5.3648-4.726-16.566-7.203-17.556-0.53688 0.0751-1.2024 0.11012-2.0045 0.11012-1.052 0-1.994-0.12613-2.8268-0.38912-0.83286-0.26303-1.582-0.67096-2.2541-1.2262-0.67213-0.56984-1.2803-1.2967-1.8209-2.1734-0.55524-0.87667-1.0818-1.9299-1.5786-3.1572l1.3363-0.49929z") + (fill "url(#lg3)")) "") + (path + (@ (d "m89.524 156.17-2.9255 4.995h5.8637") + (fill "url(#lg4)")) "") + (path + (@ (d "m70.245 136.28-1.3366 0.49823c0.15525 0.38357 0.31332 0.75055 0.47436 1.1 0.0322 0.0699 0.06425 0.13851 0.09669 0.20704 1.27e-4 2.3e-4 -1.24e-4 0 0 0 0.03229 0.0682 0.06531 0.13562 0.09783 0.20246 0.01085 0.0222 0.02212 0.0439 0.03299 0.066 0.05454 0.11113 0.10863 0.22143 0.1638 0.32875h0.0011c0.03289 0.064 0.06585 0.12737 0.09897 0.18997 0.13355 0.25252 0.26892 0.49416 0.4061 0.72461 0.03425 0.0576 0.0679 0.11332 0.10238 0.16949 0.01336 0.0217 0.0264 0.0433 0.03981 0.0649 0.02133 0.0344 0.04342 0.0686 0.06484 0.10237 0.03379 0.0548 0.06692 0.10906 0.10124 0.16267 0.05468 0.0854 0.11121 0.16896 0.16722 0.2514 0.01413 0.0209 0.02786 0.0419 0.04209 0.0626 0.03554 0.0515 0.07086 0.10207 0.10693 0.15242 0.07177 0.10015 0.14456 0.19807 0.21841 0.29348 0.03693 0.0477 0.07404 0.0945 0.11148 0.14105 0.07488 0.093 0.15057 0.18365 0.22751 0.27189 0.05833 0.0669 0.11795 0.13266 0.17746 0.19679 0.01881 0.0204 0.03796 0.0403 0.05688 0.0603 0.07916 0.0836 0.15882 0.16471 0.24002 0.24345 0.0405 0.0393 0.08071 0.078 0.12172 0.11602 0.0412 0.0383 0.08228 0.0756 0.124 0.11263 0.04151 0.0368 0.08312 0.0724 0.12513 0.10806 0.12603 0.10411 0.25528 0.20312 0.38676 0.29689 0.35062 0.25005 0.72078 0.46355 1.1114 0.64045 0.04882 0.0222 0.09728 0.0439 0.14674 0.0648 0.09924 0.0421 0.19962 0.0819 0.30145 0.11946 0.05075 0.0188 0.10103 0.0359 0.15243 0.0535 0.0514 0.0175 0.10379 0.0347 0.15584 0.0512 0.05205 0.0164 0.10407 0.0324 0.15698 0.0478 0.10581 0.0307 0.21383 0.06 0.32306 0.0864 0.05461 0.0132 0.10948 0.0254 0.16494 0.0376 0.05547 0.0122 0.1109 0.0241 0.16722 0.0353 0.05668 0.0114 0.11309 0.0217 0.17063 0.0318 0.11435 0.0204 0.23031 0.0385 0.34808 0.0546 0.17666 0.0241 0.3571 0.0442 0.54147 0.0591 0.12292 0.0101 0.2479 0.018 0.37425 0.0238 0.12635 6e-3 0.2547 0.01 0.38449 0.0114h0.19566c0.10026 0 0.19861-3e-5 0.29462 0 0.19202-3e-3 0.37538-7e-3 0.55057-0.0138 0.08721-3e-3 0.17286-7e-3 0.25595-0.0114 0.08344-5e-3 0.16526-0.0101 0.24457-0.0159 0.23793-0.0172 0.45731-0.0389 0.65864-0.0671 0.01688 7e-3 0.03432 0.0138 0.05119 0.0217 0.0024 0 0.0045 3e-3 0.0068 3e-3 0.01458 7e-3 0.02867 0.014 0.04323 0.0217 0.09685 0.0496 0.19369 0.11414 0.29007 0.19338-0.21199-0.28567-2.4738-3.2453-5.7946-4.036-0.28789-0.0685-0.50031-0.16825-0.66546-0.2844-0.0013 0-0.0021-3e-3 -0.0034-3e-3 -0.1309-0.059-0.2583-0.12253-0.38108-0.19111-2.51e-4 -1.1e-4 -7.94e-4 1.3e-4 -0.0011 0-0.03168-0.018-0.06308-0.0369-0.09442-0.0557-2.48e-4 -1.4e-4 -7.93e-4 1e-4 -0.0011 0-0.03162-0.0191-0.062-0.0383-0.09328-0.058-0.0628-0.0396-0.12514-0.0803-0.18656-0.12284-0.03058-0.0212-0.06076-0.0429-0.091-0.0649-0.06091-0.0442-0.12021-0.0893-0.17973-0.1365-0.02956-0.0236-0.05838-0.0464-0.08759-0.0705-0.02943-0.0243-0.05851-0.0488-0.08759-0.0739-0.02887-0.0249-0.05679-0.0506-0.08532-0.0762-0.14265-0.12819-0.28108-0.26487-0.4152-0.4118-0.02682-0.0294-0.05428-0.0597-0.08077-0.0899-0.09747-0.11046-0.19453-0.2277-0.29121-0.3515-0.01204-0.0153-0.02326-0.031-0.03526-0.0466-0.02715-0.0353-0.05482-0.0706-0.0819-0.10692-0.13544-0.18169-0.26982-0.37711-0.40383-0.58584-0.0536-0.0835-0.10701-0.1692-0.16039-0.2571-0.02669-0.0439-0.05299-0.088-0.07963-0.13308-0.07966-0.13473-0.15968-0.27504-0.23888-0.41977z") + (fill "url(#lg5)")) "") + ;; "Guix" + (g + (path + (@ (d "m112.5 159.96c-0.82977 0.40336-1.6912 0.70588-2.5844 0.90757-0.89316 0.20167-1.8151 0.3025-2.7659 0.3025-2.1493 0-3.8521-0.59928-5.1082-1.7978-1.2562-1.2043-1.8843-2.835-1.8843-4.8922 0-2.0802 0.63961-3.7167 1.9188-4.9094s3.0309-1.7892 5.2552-1.7892c0.85857 2e-5 1.6797 0.0807 2.4634 0.24201 0.78942 0.16137 1.5328 0.4005 2.23 0.71742v2.6708c-0.7203-0.4091-1.4377-0.7145-2.1522-0.91617-0.70876-0.20166-1.4204-0.30252-2.1349-0.30252-1.3253 0-2.3481 0.37166-3.0684 1.115-0.71452 0.73758-1.0718 1.7949-1.0718 3.1721 0 1.3656 0.34574 2.4201 1.0372 3.1635 0.69147 0.74335 1.6739 1.115 2.9474 1.115 0.34572 0 0.66553-0.0201 0.95941-0.0605 0.29963-0.0461 0.56757-0.11523 0.80383-0.20743v-2.5066h-2.0312v-2.23h5.186v6.2059")) "") + (path + (@ (d "m113.95 157.15v-5.9121h3.1116v0.96806c0 0.52438-3e-3 1.1842-9e-3 1.9793-6e-3 0.78946-9e-3 1.3167-9e-3 1.5818-1e-5 0.7779 0.0202 1.3397 0.0605 1.6854 0.0403 0.33999 0.10948 0.58774 0.20744 0.74332 0.12677 0.20169 0.29099 0.35726 0.49268 0.46675 0.20743 0.10951 0.44368 0.16423 0.70875 0.16423 0.64537 0 1.1524-0.24776 1.5212-0.74332 0.36877-0.49554 0.55317-1.1842 0.55318-2.0658v-4.7798h3.0943v9.6806h-3.0943v-1.4002c-0.46676 0.56471-0.96231 0.98246-1.4867 1.2533-0.51861 0.26506-1.092 0.39759-1.72 0.39759-1.1179 0-1.9707-0.34284-2.5584-1.0285-0.58199-0.68572-0.87298-1.6826-0.87298-2.9906")) "") + (path + (@ (d "m125.44 151.24h3.0943v9.6806h-3.0943v-9.6806m0-3.7685h3.0943v2.5239h-3.0943v-2.5239")) "") + (path + (@ (d "m133.98 155.97-3.4919-4.7279h3.2758l1.9793 2.8696 2.0053-2.8696h3.2758l-3.4919 4.7106 3.6648 4.97h-3.2758l-2.1781-3.0598-2.1522 3.0598h-3.2758l3.6648-4.9527")) ""))))) + (define* (header #:key (search-bar? #t) title) `(nav - (@ (class "sticky-top navbar navbar-expand navbar-light bg-light")) - (a (@ (href "/") (class "navbar-brand pt-0 logo navbar-collapse")) - (img (@ (src "/img/logo.png") (alt "logo") (height "25")))) - ,@(if title - `((span (@ (class "navbar-text")) ,title)) - '()) + (@ (class "container-fluid")) + (ul + (li + (a (@ (href "/")) ,logo)) + ,@(if title + `((li (span (@ (class "navbar-text")) ,title))) + '())) ,@(if search-bar? - `(,(search-form)) + `((ul (li ,(search-form)))) '()))) (define (index) |