phundrak/nord-for-org
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

[SCSS, some dart] Theme rework, dark dropped, nord replaces dark

Browse Source 
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.
This commit is contained in:
Lucien Cartier-Tilet 2021-03-30 19:09:20 +02:00
parent 291fc9111b
commit d645e29ce5
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
5 changed files with 180 additions and 259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/dart/navbar.dart
View File

@ -131,7 +131,6 @@ Future<Element> makeThemeChanger() async {
..attributes['id'] = 'theme-dropdown' ..attributes['id'] = 'theme-dropdown'
..append(makeThemeItem('lightBtn')) ..append(makeThemeItem('lightBtn'))
..append(makeThemeItem('darkBtn')) ..append(makeThemeItem('darkBtn'))
..append(makeThemeItem('nordBtn'))
..append(makeThemeItem('blackBtn'))); ..append(makeThemeItem('blackBtn')));
} }

13
web/dart/reorganize_html.dart
View File

@ -5,6 +5,16 @@ import './navbar.dart' show makeNavbar;
const image_header = '/img/icon.webp'; const image_header = '/img/icon.webp';
Future<void> 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<Element> makeHeader() async { Future<Element> makeHeader() async {
var header = Element.tag('header'); var header = Element.tag('header');
header header
@ -54,6 +64,9 @@ Future<void> reorganizeHtml() async {
// Make header // Make header
final header = await makeHeader(); final header = await makeHeader();
// Add decorative divs to source block wrappers
await makeDecorativeButtonsOrgSrc();
// wrap tables in container for better SCSS display // wrap tables in container for better SCSS display
await wrapTables(); await wrapTables();

4
web/dart/theme.dart
View File

@ -3,7 +3,7 @@ import 'dart:html' show window, querySelector;
final localStorage = window.localStorage; final localStorage = window.localStorage;
Future<void> setTheme([String? theme]) async { Future<void> setTheme([String? theme]) async {
theme ??= localStorage['theem'] ?? theme ??= localStorage['theme'] ??
(window.matchMedia('(prefers-color-scheme: dark)').matches (window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark' ? 'dark'
: 'light'); : 'light');
@ -14,7 +14,7 @@ Future<void> setTheme([String? theme]) async {
} }
void enableThemeChanger() { void enableThemeChanger() {
final themes = <String>['light', 'dark', 'nord', 'black']; final themes = <String>['light', 'dark', 'black'];
themes.forEach((theme) => themes.forEach((theme) =>
querySelector('#${theme}Btn')!.onClick.listen((_) => setTheme(theme))); querySelector('#${theme}Btn')!.onClick.listen((_) => setTheme(theme)));
} }

62
web/style/style.scss
View File

@ -358,18 +358,70 @@ ul {
padding-inline-start: 20px; padding-inline-start: 20px;
} }
pre.src, pre.example { .org-src-container,
overflow-y: auto; 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 { pre {
.src-fish:before { width: -moz-fit-content;
width: fit-content;
border: none;
box-shadow: none !important;
margin: .5em;
padding: 2.75em 1.5em !important;
overflow-y: auto;
}
pre.src::before {
top: -10px;
}
pre.src-fish::before {
content: 'fish'; content: 'fish';
} }
.src-rust:before { pre.src-rust::before {
content: 'rust'; 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 { .twitter-tweet {

353
web/style/themes.scss
View File

@ -4,82 +4,64 @@ $tooltip-underline-size: 3px;
// Themes ///////////////////////////////////////////////////////////////////// // Themes /////////////////////////////////////////////////////////////////////
$dark: rgba( 52, 73, 94, 1); $nord0: #2e3440;
$nord: rgba( 46, 52, 64, 1); $nord1: #3b4252;
$black: rgba( 0, 0, 0, 1); $nord2: #434c5e;
$accent1: rgba( 93, 115, 126, 1); $nord3: #4c566a;
$accent2: rgba( 92, 172, 126, 1); $nord4: #d8dee9;
$accent3: rgba(197, 193, 155, 1); $nord5: #e5e9f0;
$light: #eee; $nord6: #eceff4;
$grey1: #f8f8f8; $nord7: #8fbcbb;
$grey2: #dbe1e8; $nord8: #88c0d0;
$grey3: #b2becd; $nord9: #81a1c1;
$grey4: #6c7983; $nord10: #5e81ac;
$grey5: #454e56; $nord11: #bf616a;
$grey6: #12181b; $nord12: #d08770;
$nord13: #ebcb8b;
// Accent 1 $nord14: #a3be8c;
// Black $nord15: #b48ead;
$gradient-accent1-black-left: linear-gradient(to left, $black, $accent1, $accent1); $dark: $nord1;
$gradient-accent1-black-right: linear-gradient(to right, $black, $accent1, $accent1); $light: $nord5;
// Dark $accent1: $nord7;
$gradient-accent1-dark-left: linear-gradient(to left, $dark, $accent1); $accent2: $nord9;
$gradient-accent1-dark-right: linear-gradient(to right, $dark, $accent1); $accent3: $nord8;
// 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);
.light { .light {
$bg-nav: $gradient-accent3-light-right;
$border-color: $accent1; $border-color: $accent1;
color: $dark; color: $dark;
background: $light; background: $light;
transition: background 500ms ease-in-out, color 1s ease-in-out; $bg-nav: linear-gradient(to right, $nord6, $nord4);
.navbar, header, .dropdown {
pre {
box-shadow: 3px 5px $dark;
border-color: $light;
}
pre.src, pre.example {
&::before {
background-color: $light;
color: $dark;
}
}
.navbar, header {
background: $bg-nav; background: $bg-nav;
color: $dark;
} }
.navbar svg { .navbar svg {
fill: $dark; 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 { .status {
background: $gradient-accent3-light-left; background: $bg-nav;
color: $dark; color: $dark;
} }
@ -96,11 +78,6 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
} }
} }
.dropdown {
background: $accent3;
color: $dark;
}
#content { #content {
a { a {
box-shadow: inset 0 -3px 0 $accent3; box-shadow: inset 0 -3px 0 $accent3;
@ -127,228 +104,97 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
} }
} }
.dark, .black { .black, .dark {
$bg-nav: $gradient-accent2-dark-right; $border-color: $nord1;
$border-color: $dark;
color: $light; color: $nord6;
background: $dark; background: $nord0;
transition: background 500ms ease-in-out, color 1s ease-in-out; $bg-nav: linear-gradient(to right, $nord3, $nord1);
.navbar, header, .dropdown {
pre {
box-shadow: 3px 3px $dark;
border: none;
}
pre.src, pre.example {
&::before {
background-color: $dark;
color: $light;
}
}
.navbar, header {
background: $bg-nav; background: $bg-nav;
color: $light;
} }
.navbar svg { .navbar svg {
fill: $light; 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 { .status {
background: $gradient-accent2-dark-left; background: $bg-nav;
color: $light; color: $nord6;
} }
.tooltip { .tooltip {
border-bottom: $tooltip-underline-size dotted $accent1; border-bottom: $tooltip-underline-size dotted $nord7;
.tooltiptext { .tooltiptext {
background-color: $accent1; background-color: $nord7;
color: $light; color: $nord6;
&::after { &::after {
border-color: $accent1 transparent transparent transparent; border-color: $nord7 transparent transparent transparent;
} }
} }
} }
.dropdown {
background: $dark;
color: $light;
}
#content { #content {
a { a {
box-shadow: inset 0 -3px 0 $accent2; box-shadow: inset 0 -3px 0 $nord7;
transition: box-shadow 300ms ease-in-out; transition: box-shadow 300ms ease-in-out;
&:hover { &:hover {
box-shadow: inset 0 -23px 0 $accent2; box-shadow: inset 0 -23px 0 $nord7;
transition: box-shadow 300ms ease-in-out; transition: box-shadow 300ms ease-in-out;
} }
} }
} }
table, th, td { table, th, td {
border: 1px solid $accent1; border: 1px solid $nord7;
} }
th { th {
background: darken($dark, 2.5%); background: darken($nord0, 2.5%);
} }
.gentree { .gentree {
filter: invert(100%); filter: invert(100%);
transition: filter 1s ease-in-out; transition: filter 1s ease-in-out;
} }
pre.src, pre.example, .org-src-container {
background: $nord1;
color: $nord5;
}
} }
.black { .black {
$bg-nav: $gradient-accent1-black-right; background: black;
color: $nord4;
background: $black; $bg-nav: linear-gradient(to right, $nord2, $nord0);
.navbar, header, .dropdown {
pre {
box-shadow: 3px 3px $light;
border: none;
}
pre.src, pre.example {
&::before {
background-color: $black;
color: $light;
}
}
.navbar, header {
background: $bg-nav; background: $bg-nav;
} }
.status { pre.src, pre.example, .org-src-container {
background: $gradient-accent1-black-left; 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 { #lightBtn {
@ -356,18 +202,29 @@ $gradient-accent3-light-right: linear-gradient(to right, $light, $accent3);
} }
#darkBtn { #darkBtn {
background: $dark; background: $nord0;
}
#nordBtn {
background: $nord;
} }
#blackBtn { #blackBtn {
background: $black; background: black;
} }
pre.src, pre.example { pre {
background: $dark; box-shadow: none;
color: $light; }
.closeButton {
background-color: $nord11;
}
.minButton {
background-color: $nord12;
}
.maxButton {
background-color: $nord14;
}
.floatButton {
background-color: $nord15;
} }