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

[Style] Add Nord theme, break up SCSS code

Browse Source 
This commit adds the Nord theme into the list of available themes. The
Nord theme is now the default theme for dark-based systems.

Theme buttons now have their own class to make it easier to change
them without too much work.

The `style.scss' file has been split up in three different files:
- main.scss, the new file to load from the HTML page, imports the two
    other files
- themes.scss, containing all the theming of the websites
- style.scss, containing the rest

All websites loading the theme will now need to load it from
`main.scss' instead of `style.scss', likewise with the `.css'
extension
This commit is contained in:
Lucien Cartier-Tilet 2020-08-28 22:19:42 +02:00
parent e4dc101346
commit e710c594f1
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
6 changed files with 388 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -6,3 +6,4 @@
/.sass-cache/
/build/
*.scssc
/Book.html

5
web/dart/navbar.dart
View File

@ -114,7 +114,9 @@ Future<Element> makeThemeChanger() async {
Element makeThemeItem(String t_btnId) {
return Element.li()
..classes.add('dropdown-item')
..append(Element.span()..attributes['id'] = t_btnId);
..append(Element.span()
..attributes['id'] = t_btnId
..classes.add('themeBtn'));
}
return Element.li()
@ -131,6 +133,7 @@ Future<Element> makeThemeChanger() async {
..attributes['id'] = 'theme-dropdown'
..append(makeThemeItem('lightBtn'))
..append(makeThemeItem('darkBtn'))
..append(makeThemeItem('nordBtn'))
..append(makeThemeItem('blackBtn')));
}

6
web/dart/theme.dart
View File

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

2
web/style/main.scss Normal file
View File

@ -0,0 +1,2 @@
@import "themes.scss";
@import "style.scss";

280
web/style/style.scss
View File

@ -1,4 +1,4 @@
/* Variables *****************************************************************/
// Variables //////////////////////////////////////////////////////////////////
$switch-small-screen: "only screen and (max-width: 600px)";
$switch-smaller-screen: "only screen and (max-width: 400px)";
@ -6,262 +6,7 @@ $switch-smaller-screen: "only screen and (max-width: 400px)";
$navbar-height: 70px;
$postamble-height: 55px;
$tooltip-underline-size: 3px;
// Themes /////////////////////////////////////////////////////////////////////
$dark: rgba( 52, 73, 94, 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);
.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 {
&::before {
background-color: $light;
color: $dark;
}
}
.navbar, header {
background: $bg-nav;
}
.navbar svg {
fill: $dark;
}
.status {
background: $gradient-accent3-light-left;
color: $dark;
}
.tooltip {
border-bottom: $tooltip-underline-size dotted $accent3;
.tooltiptext {
background-color: $accent3;
color: $dark;
&::after {
border-color: $accent3 transparent transparent transparent;
}
}
}
.dropdown {
background: $accent3;
color: $dark;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
}
}
}
table, th, td {
border: 1px solid $dark;
}
th {
background: darken($light, 5%);
}
.gentree {
filter: invert(0%);
transition: filter 1s ease-in-out;
}
}
.dark, .black {
$bg-nav: $gradient-accent2-dark-right;
$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 {
&::before {
background-color: $dark;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.navbar svg {
fill: $light;
}
.status {
background: $gradient-accent2-dark-left;
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: $dark;
color: $light;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent2;
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;
}
}
.black {
$bg-nav: $gradient-accent1-black-right;
background: $black;
pre {
box-shadow: 3px 3px $light;
border: none;
}
pre.src {
&::before {
background-color: $black;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent1-black-left;
}
.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%);
}
}
/* Style *********************************************************************/
// Style //////////////////////////////////////////////////////////////////////
* {
outline: none;
@ -343,7 +88,6 @@ header {
align-items: center;
justify-content: space-around;
min-height: 3rem;
margin-top: 1rem;
padding: 0.5rem;
top: 0;
@ -363,7 +107,7 @@ header {
}
#table-of-contents, #drop-page {
top: $navbar-height / 1.3;
top: $navbar-height;
opacity: 1;
z-index: 5;
height: 80vh;
@ -373,12 +117,12 @@ header {
}
#theme-dropdown {
width: 150px;
width: 250px;
flex-direction: row;
transform: translateX(-75%);
}
#lightBtn, #darkBtn, #blackBtn {
.themeBtn {
content: ' ';
border: 2px solid white;
border-radius: 50%;
@ -389,18 +133,6 @@ header {
margin-right: 10px;
}
#lightBtn {
background: $light;
}
#darkBtn {
background: $dark;
}
#blackBtn {
background: $black;
}
#drop-page, #table-of-contents {
flex-direction: column;
@ -616,7 +348,5 @@ ul {
}
pre.src {
background: $dark;
color: $light;
overflow-y: auto;
}

373
web/style/themes.scss Normal file
View File

@ -0,0 +1,373 @@
// Variables //////////////////////////////////////////////////////////////////
$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);
.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 {
&::before {
background-color: $light;
color: $dark;
}
}
.navbar, header {
background: $bg-nav;
}
.navbar svg {
fill: $dark;
}
.status {
background: $gradient-accent3-light-left;
color: $dark;
}
.tooltip {
border-bottom: $tooltip-underline-size dotted $accent3;
.tooltiptext {
background-color: $accent3;
color: $dark;
&::after {
border-color: $accent3 transparent transparent transparent;
}
}
}
.dropdown {
background: $accent3;
color: $dark;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent3;
transition: box-shadow 300ms ease-in-out;
}
}
}
table, th, td {
border: 1px solid $dark;
}
th {
background: darken($light, 5%);
}
.gentree {
filter: invert(0%);
transition: filter 1s ease-in-out;
}
}
.dark, .black {
$bg-nav: $gradient-accent2-dark-right;
$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 {
&::before {
background-color: $dark;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.navbar svg {
fill: $light;
}
.status {
background: $gradient-accent2-dark-left;
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: $dark;
color: $light;
}
#content {
a {
box-shadow: inset 0 -3px 0 $accent2;
transition: box-shadow 300ms ease-in-out;
&:hover {
box-shadow: inset 0 -23px 0 $accent2;
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;
}
}
.black {
$bg-nav: $gradient-accent1-black-right;
background: $black;
pre {
box-shadow: 3px 3px $light;
border: none;
}
pre.src {
&::before {
background-color: $black;
color: $light;
}
}
.navbar, header {
background: $bg-nav;
}
.status {
background: $gradient-accent1-black-left;
}
.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 {
&::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 {
background: $light;
}
#darkBtn {
background: $dark;
}
#nordBtn {
background: $nord;
}
#blackBtn {
background: $black;
}
pre.src {
background: $dark;
color: $light;
}