From d645e29ce5a876ab3055836128ed68de8b6c9044 Mon Sep 17 00:00:00 2001 From: Lucien Cartier-Tilet Date: Tue, 30 Mar 2021 19:09:20 +0200 Subject: [PATCH] [SCSS, some dart] Theme rework, dark dropped, nord replaces dark The old dark mode is dropped and replaced with nord. Light and black themes were also rebased on the Nord theme. Code blocks now appear the same way my terminal windows appear in my Linux configuration, emulating a side titlebar. --- web/dart/navbar.dart | 1 - web/dart/reorganize_html.dart | 13 ++ web/dart/theme.dart | 4 +- web/style/style.scss | 68 ++++++- web/style/themes.scss | 353 ++++++++++------------------------ 5 files changed, 180 insertions(+), 259 deletions(-) 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; }