diff --git a/web/dart/navbar.dart b/web/dart/navbar.dart index d7eecb3..9c13cb2 100644 --- a/web/dart/navbar.dart +++ b/web/dart/navbar.dart @@ -131,7 +131,6 @@ Future makeThemeChanger() async { ..attributes['id'] = 'theme-dropdown' ..append(makeThemeItem('lightBtn')) ..append(makeThemeItem('darkBtn')) - ..append(makeThemeItem('nordBtn')) ..append(makeThemeItem('blackBtn'))); } diff --git a/web/dart/reorganize_html.dart b/web/dart/reorganize_html.dart index d195649..8c5f6d4 100644 --- a/web/dart/reorganize_html.dart +++ b/web/dart/reorganize_html.dart @@ -5,6 +5,16 @@ import './navbar.dart' show makeNavbar; const image_header = '/img/icon.webp'; +Future makeDecorativeButtonsOrgSrc() async { + for (var pre in querySelectorAll('.org-src-container')) { + pre + ..append(Element.div()..attributes['class'] = 'closeButton') + ..append(Element.div()..attributes['class'] = 'minButton') + ..append(Element.div()..attributes['class'] = 'maxButton') + ..append(Element.div()..attributes['class'] = 'floatButton'); + } +} + Future makeHeader() async { var header = Element.tag('header'); header @@ -54,6 +64,9 @@ Future reorganizeHtml() async { // Make header final header = await makeHeader(); + // Add decorative divs to source block wrappers + await makeDecorativeButtonsOrgSrc(); + // wrap tables in container for better SCSS display await wrapTables(); diff --git a/web/dart/theme.dart b/web/dart/theme.dart index 20e3f76..11727be 100644 --- a/web/dart/theme.dart +++ b/web/dart/theme.dart @@ -3,7 +3,7 @@ import 'dart:html' show window, querySelector; final localStorage = window.localStorage; Future setTheme([String? theme]) async { - theme ??= localStorage['theem'] ?? + theme ??= localStorage['theme'] ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); @@ -14,7 +14,7 @@ Future setTheme([String? theme]) async { } void enableThemeChanger() { - final themes = ['light', 'dark', 'nord', 'black']; + final themes = ['light', 'dark', 'black']; themes.forEach((theme) => querySelector('#${theme}Btn')!.onClick.listen((_) => setTheme(theme))); } diff --git a/web/style/style.scss b/web/style/style.scss index 1713d04..41e7209 100644 --- a/web/style/style.scss +++ b/web/style/style.scss @@ -358,18 +358,70 @@ ul { padding-inline-start: 20px; } -pre.src, pre.example { - overflow-y: auto; +.org-src-container, +pre { + border-radius: .5em; +} + +.org-src-container { + position: relative; + padding-left: 1em; + box-shadow: 3px 3px 10px rgba(0,0,0,.3); + min-height: 5.5em; + margin: 0 auto; + width: -moz-fit-content; + width: fit-content; } pre { - .src-fish:before { - content: 'fish'; - } + width: -moz-fit-content; + width: fit-content; + border: none; + box-shadow: none !important; + margin: .5em; + padding: 2.75em 1.5em !important; + overflow-y: auto; +} - .src-rust:before { - content: 'rust'; - } +pre.src::before { + top: -10px; +} + +pre.src-fish::before { + content: 'fish'; +} + +pre.src-rust::before { + content: 'Rust'; +} + +.closeButton, +.minButton, +.maxButton, +.floatButton { + position: absolute; + position: absolute; + width: .8em; + height: .8em; + border-radius: .4em; + z-index: 2; + left: .3em; +} + +.closeButton { + top: .3em; +} + +.minButton { + top: 1.4em; +} + +.maxButton { + top: 2.5em; +} + +.floatButton { + bottom: .3em; } .twitter-tweet { diff --git a/web/style/themes.scss b/web/style/themes.scss index c59d168..d40f3a0 100644 --- a/web/style/themes.scss +++ b/web/style/themes.scss @@ -4,82 +4,64 @@ $tooltip-underline-size: 3px; // Themes ///////////////////////////////////////////////////////////////////// -$dark: rgba( 52, 73, 94, 1); -$nord: rgba( 46, 52, 64, 1); -$black: rgba( 0, 0, 0, 1); -$accent1: rgba( 93, 115, 126, 1); -$accent2: rgba( 92, 172, 126, 1); -$accent3: rgba(197, 193, 155, 1); -$light: #eee; -$grey1: #f8f8f8; -$grey2: #dbe1e8; -$grey3: #b2becd; -$grey4: #6c7983; -$grey5: #454e56; -$grey6: #12181b; - -// Accent 1 -// Black -$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1); -$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1); -// Dark -$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1); -$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1); -// Light -$gradient-accent1-light-left: linear-gradient(to left, $light, $accent1); -$gradient-accent1-light-right: linear-gradient(to right, $light, $accent1); -// Accent 2 -// Black -$gradient-accent2-black-left: linear-gradient(to left, $black, $accent2, $accent2); -$gradient-accent2-black-right: linear-gradient(to right, $black, $accent2, $accent2); -// Dark -$gradient-accent2-dark-left: linear-gradient(to left, $dark, $accent2); -$gradient-accent2-dark-right: linear-gradient(to right, $dark, $accent2); -// Light -$gradient-accent2-light-left: linear-gradient(to left, $light, $accent2); -$gradient-accent2-light-right: linear-gradient(to right, $light, $accent2); -// Accent 3 -// Black -$gradient-accent3-black-left: linear-gradient(to left, $black, $accent3, $accent3); -$gradient-accent3-black-right: linear-gradient(to right, $black, $accent3, $accent3); -// Dark -$gradient-accent3-dark-left: linear-gradient(to left, $dark, $accent3); -$gradient-accent3-dark-right: linear-gradient(to right, $dark, $accent3); -// Light -$gradient-accent3-light-left: linear-gradient(to left, $light, $accent3); -$gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); +$nord0: #2e3440; +$nord1: #3b4252; +$nord2: #434c5e; +$nord3: #4c566a; +$nord4: #d8dee9; +$nord5: #e5e9f0; +$nord6: #eceff4; +$nord7: #8fbcbb; +$nord8: #88c0d0; +$nord9: #81a1c1; +$nord10: #5e81ac; +$nord11: #bf616a; +$nord12: #d08770; +$nord13: #ebcb8b; +$nord14: #a3be8c; +$nord15: #b48ead; +$dark: $nord1; +$light: $nord5; +$accent1: $nord7; +$accent2: $nord9; +$accent3: $nord8; .light { - $bg-nav: $gradient-accent3-light-right; $border-color: $accent1; color: $dark; background: $light; - transition: background 500ms ease-in-out, color 1s ease-in-out; - - pre { - box-shadow: 3px 5px $dark; - border-color: $light; - } - - pre.src, pre.example { - &::before { - background-color: $light; - color: $dark; - } - } - - .navbar, header { + $bg-nav: linear-gradient(to right, $nord6, $nord4); + .navbar, header, .dropdown { background: $bg-nav; + color: $dark; } .navbar svg { fill: $dark; } + transition: background 500ms ease-in-out, color 1s ease-in-out; + + pre { + border-color: $light; + } + + pre.src, pre.example { + &::before { + background-color: $nord6; + color: $dark; + } + } + + pre.src, pre.example, .org-src-container { + background: $light; + color: $dark; + } + .status { - background: $gradient-accent3-light-left; + background: $bg-nav; color: $dark; } @@ -96,11 +78,6 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); } } - .dropdown { - background: $accent3; - color: $dark; - } - #content { a { box-shadow: inset 0 -3px 0 $accent3; @@ -127,228 +104,97 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); } } -.dark, .black { - $bg-nav: $gradient-accent2-dark-right; - $border-color: $dark; +.black, .dark { + $border-color: $nord1; - color: $light; - background: $dark; + color: $nord6; + background: $nord0; - transition: background 500ms ease-in-out, color 1s ease-in-out; - - pre { - box-shadow: 3px 3px $dark; - border: none; - } - - pre.src, pre.example { - &::before { - background-color: $dark; - color: $light; - } - } - - .navbar, header { + $bg-nav: linear-gradient(to right, $nord3, $nord1); + .navbar, header, .dropdown { background: $bg-nav; + color: $light; } .navbar svg { fill: $light; } + transition: background 500ms ease-in-out, color 1s ease-in-out; + + pre { + border: none; + } + + pre.src, pre.example { + &::before { + background-color: $nord0; + color: $nord6; + } + } + .status { - background: $gradient-accent2-dark-left; - color: $light; + background: $bg-nav; + color: $nord6; } .tooltip { - border-bottom: $tooltip-underline-size dotted $accent1; + border-bottom: $tooltip-underline-size dotted $nord7; .tooltiptext { - background-color: $accent1; - color: $light; + background-color: $nord7; + color: $nord6; &::after { - border-color: $accent1 transparent transparent transparent; + border-color: $nord7 transparent transparent transparent; } } } - .dropdown { - background: $dark; - color: $light; - } - #content { a { - box-shadow: inset 0 -3px 0 $accent2; + box-shadow: inset 0 -3px 0 $nord7; transition: box-shadow 300ms ease-in-out; &:hover { - box-shadow: inset 0 -23px 0 $accent2; + box-shadow: inset 0 -23px 0 $nord7; transition: box-shadow 300ms ease-in-out; } } } table, th, td { - border: 1px solid $accent1; + border: 1px solid $nord7; } th { - background: darken($dark, 2.5%); + background: darken($nord0, 2.5%); } .gentree { filter: invert(100%); transition: filter 1s ease-in-out; } + + pre.src, pre.example, .org-src-container { + background: $nord1; + color: $nord5; + } } .black { - $bg-nav: $gradient-accent1-black-right; + background: black; + color: $nord4; - background: $black; - - pre { - box-shadow: 3px 3px $light; - border: none; - } - - pre.src, pre.example { - &::before { - background-color: $black; - color: $light; - } - } - - .navbar, header { + $bg-nav: linear-gradient(to right, $nord2, $nord0); + .navbar, header, .dropdown { background: $bg-nav; } - .status { - background: $gradient-accent1-black-left; + pre.src, pre.example, .org-src-container { + background: $nord0; + color: $nord4; } - - .dropdown { - background: $dark; - color: $light; - } - - #content { - a { - box-shadow: inset 0 -3px 0 $accent1; - transition: box-shadow 300ms ease-in-out; - - &:hover { - box-shadow: inset 0 -23px 0 $accent1; - transition: box-shadow 300ms ease-in-out; - } - } - } - - table, th, td { - border: 1px solid $light; - } - - th { - background: lighten($black, 15%); - } -} - -.nord { - $dark: #2e3440; - $black: #000000; - $accent1: #8fbcbb; - $accent2: #a3be8c; - $accent3: #ebcb8b; - $light: #eceff4; - $grey1: #e5e9f0; - $grey2: #d8dee9; - $grey3: #4c566a; - $grey4: #434c5e; - $grey5: #3b4252; - $grey6: #12181b; - $gradient-dark-to-light: linear-gradient(to right, $grey3, $grey5); - // Accent 1 - // Black - - $bg-nav: $gradient-dark-to-light; - $border-color: $dark; - - color: $light; - background: $dark; - - transition: background 500ms ease-in-out, color 1s ease-in-out; - - pre { - box-shadow: 3px 3px $dark; - border: none; - } - - pre.src, pre.example { - &::before { - background-color: $dark; - color: $light; - } - } - - .navbar, header { - background: $bg-nav; - } - - .navbar svg { - fill: $light; - } - - .status { - background: $gradient-dark-to-light; - color: $light; - } - - .tooltip { - border-bottom: $tooltip-underline-size dotted $accent1; - - .tooltiptext { - background-color: $accent1; - color: $light; - - &::after { - border-color: $accent1 transparent transparent transparent; - } - } - } - - .dropdown { - background: $grey3; - color: $light; - } - - #content { - a { - box-shadow: inset 0 -3px 0 $accent1; - transition: box-shadow 300ms ease-in-out; - - &:hover { - box-shadow: inset 0 -23px 0 $accent1; - transition: box-shadow 300ms ease-in-out; - } - } - } - - table, th, td { - border: 1px solid $accent1; - } - - th { - background: darken($dark, 2.5%); - } - - .gentree { - filter: invert(100%); - transition: filter 1s ease-in-out; - } - } #lightBtn { @@ -356,18 +202,29 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3); } #darkBtn { - background: $dark; -} - -#nordBtn { - background: $nord; + background: $nord0; } #blackBtn { - background: $black; + background: black; } -pre.src, pre.example { - background: $dark; - color: $light; +pre { + box-shadow: none; +} + +.closeButton { + background-color: $nord11; +} + +.minButton { + background-color: $nord12; +} + +.maxButton { + background-color: $nord14; +} + +.floatButton { + background-color: $nord15; }