phundrak/nord-for-org
Archived
1
0
Fork 0
Code Issues 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
5 changed files with 180 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/style/style.scss
View File

@@ -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 {

353
web/style/themes.scss
View File

@@ -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;
}