marius/risotto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use base16 framework for palettes

Browse source
This commit is contained in:
Joe Roe 2022-09-30 12:54:31 +02:00
parent c94228ed2a
commit a181c69fd6
18 changed files with 158 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

10
static/css/colour/dark-mode.css
View file

@ -1,10 +0,0 @@
:root {
--bg: var(--black);
--dark-bg: var(--dark-black);
--bright-bg: var(--bright-black);
--fg: var(--white);
--bright-fg: var(--bright-white);
--logo-bg: var(--green);
--logo-hover: var(--bright-green);
--highlight-bg: var(--yellow);
}

29
static/css/colour/gruvbox-dark.css
View file

@ -1,29 +0,0 @@
/* gruvbox dark mode
* https://github.com/morhetz/gruvbox
*/
:root {
--dark-black: #1d2021;
--black: #282828;
--bright-black: #928374;
--white: #ebdbb2;
--bright-white: #fbf1c7;
--red: #cc241d;
--green: #98971a;
--yellow: #d79921;
--blue: #458588;
--magenta: #b16286;
--cyan: #689d6a;
--orange: #d65d0e;
--gray: #928374;
--bright-red: #fb4934;
--bright-green: #b8bb26;
--bright-yellow: #fabd2f;
--bright-blue: #83a598;
--bright-magenta: #d3869b;
--bright-cyan: #8ec07c;
--bright-orange: #fe8019;
--bright-gray: #a89984;
}

30
static/css/colour/gruvbox-light.css
View file

@ -1,30 +0,0 @@
/* gruvbox light mode
* https://github.com/morhetz/gruvbox
*/
:root {
--dark-black: #282828;
--black: #3c3836;
--bright-black: #928374;
--white: #fbf1c7;
--bright-white: #f9f5d7;
--red: #9d0006;
--green: #79740e;
--yellow: #b57614;
--blue: #076678;
--magenta: #8f3f71;
--cyan: #427b58;
--orange: #af3a03;
--gray: #7c6f64;
--dark-white: #f2e5bc;
--bright-red: #cc241d;
--bright-green: #98971a;
--bright-yellow: #d79921;
--bright-blue: #458588;
--bright-magenta: #b16286;
--bright-cyan: #689d6a;
--bright-orange: #d65d0e;
--bright-gray: #928374;
}

10
static/css/colour/light-mode.css
View file

@ -1,10 +0,0 @@
:root {
--bg: var(--white);
--dark-bg: var(--dark-white);
--bright-bg: var(--bright-black);
--fg: var(--black);
--bright-fg: var(--bright-black);
--logo-bg: var(--green);
--logo-hover: var(--bright-green);
--highlight-bg: var(--yellow);
}

17
static/css/colours.css Normal file
View file

@ -0,0 +1,17 @@
:root {
/* Background */
--bg: var(--base00);
--off-bg: var(--base01);
--inner-bg: var(--base02);
/* Text */
--fg: var(--base05);
--off-fg: var(--base04);
--muted: var(--base03);
--link: var(--base0D);
--hover: var(--base0C);
--highlight: var(--base0A);
/* Logo */
--logo: var(--base0B);
}

2
static/css/footer.css
View file

@ -1,5 +1,5 @@
.page__footer {
color: var(--bright-bg);
color: var(--off-fg);
}
.page__footer p {

6
static/css/layout.css
View file

@ -41,14 +41,14 @@
/* Body + aside */
.page__body {
grid-area: body;
background-color: var(--bg);
box-shadow: 0 0 0 1rem var(--bg);
background-color: var(--off-bg);
box-shadow: 0 0 0 1rem var(--off-bg);
overflow-wrap: break-word;
}
.page__aside {
grid-area: aside;
color: var(--bright-bg);
color: var(--off-fg);
}
/* Footer */

5
static/css/logo.css
View file

@ -11,7 +11,8 @@
.page__logo-inner {
display: block;
background: var(--logo-bg);
background: var(--logo);
opacity: 0.90;
padding: 0.25rem;
}
@ -22,7 +23,7 @@ a.page__logo-inner:link, a.page__logo-inner:visited {
a.page__logo-inner:hover,
a.page__logo-inner:active {
background: var(--logo-hover);
opacity: 1;
}
.page__logo-inner:before {

22
static/css/palettes/base16-dark.css Normal file
View file

@ -0,0 +1,22 @@
/* base16 default dark
* https://github.com/chriskempson/base16-default-schemes
*/
:root {
--base00: #181818;
--base01: #282828;
--base02: #383838;
--base03: #585858;
--base04: #b8b8b8;
--base05: #d8d8d8;
--base06: #e8e8e8;
--base07: #f8f8f8;
--base08: #ab4642;
--base09: #dc9656;
--base0A: #f7ca88;
--base0B: #a1b56c;
--base0C: #86c1b9;
--base0D: #7cafc2;
--base0E: #ba8baf;
--base0F: #a16946;
}

22
static/css/palettes/base16-light.css Normal file
View file

@ -0,0 +1,22 @@
/* base16 default light
* https://github.com/chriskempson/base16-default-schemes
*/
:root {
--base00: #f8f8f8;
--base01: #e8e8e8;
--base02: #d8d8d8;
--base03: #b8b8b8;
--base04: #585858;
--base05: #383838;
--base06: #282828;
--base07: #181818;
--base08: #ab4642;
--base09: #dc9656;
--base0A: #f7ca88;
--base0B: #a1b56c;
--base0C: #86c1b9;
--base0D: #7cafc2;
--base0E: #ba8baf;
--base0F: #a16946;
}

23
static/css/palettes/gruvbox-dark.css Normal file
View file

@ -0,0 +1,23 @@
/* gruvbox dark
* https://github.com/morhetz/gruvbox
* base16: https://github.com/dawikur/base16-gruvbox-scheme
*/
:root {
--base00: #282828;
--base01: #3c3836;
--base02: #504945;
--base03: #665c54;
--base04: #bdae93;
--base05: #d5c4a1;
--base06: #ebdbb2;
--base07: #fbf1c7;
--base08: #fb4934;
--base09: #fe8019;
--base0A: #fabd2f;
--base0B: #b8bb26;
--base0C: #8ec07c;
--base0D: #83a598;
--base0E: #d3869b;
--base0F: #d65d0e;
}

23
static/css/palettes/gruvbox-light.css Normal file
View file

@ -0,0 +1,23 @@
/* gruvbox light
* https://github.com/morhetz/gruvbox
* base16: https://github.com/dawikur/base16-gruvbox-scheme
*/
:root {
--base00: #fbf1c7;
--base01: #ebdbb2;
--base02: #d5c4a1;
--base03: #bdae93;
--base04: #665c54;
--base05: #504945;
--base06: #3c3836;
--base07: #282828;
--base08: #9d0006;
--base09: #af3a03;
--base0A: #b57614;
--base0B: #79740e;
--base0C: #427b58;
--base0D: #076678;
--base0E: #8f3f71;
--base0F: #d65d0e;
}

3
static/css/risotto.css
View file

@ -1,3 +1,4 @@
@import 'colours.css';
@import 'typography.css';
@import 'layout.css';
@import 'header.css';
@ -6,6 +7,6 @@
@import 'footer.css';
body {
background-color: var(--dark-bg);
background-color: var(--bg);
color: var(--fg);
}

20
static/css/typography.css
View file

@ -52,7 +52,7 @@ h3:before,
h4:before,
h5:before,
h6:before {
color: var(--bright-bg);
color: var(--muted);
}
h1:first-child {
@ -67,11 +67,11 @@ p {
/* Links */
a:link, a:visited {
color: var(--fg);
color: var(--link);
}
a:hover, a:active {
color: var(--bright-fg);
color: var(--hover);
}
/* Lists */
@ -94,11 +94,11 @@ ol ol {
ul li::marker {
content: '∗\00A0';
color: var(--bright-bg);
color: var(--muted);
}
ol li::marker {
color: var(--bright-bg);
color: var(--muted);
}
dt {
@ -129,7 +129,7 @@ blockquote::before {
position: absolute;
left: -1.5rem;
content: ">";
color: var(--bright-bg);
color: var(--muted);
}
.twitter-tweet::before {
@ -143,9 +143,9 @@ pre,
code,
kbd,
samp {
background: var(--dark-bg) !important;
background: var(--inner-bg) !important;
font-family: var(--font-monospace);
color: var(--bright-bg);
color: var(--off-fg);
}
pre {
@ -163,7 +163,7 @@ strong {
/* Highlighting */
::selection,
mark {
background-color: var(--highlight-bg);
background-color: var(--highlight);
color: var(--bg);
}
@ -175,7 +175,7 @@ hr {
hr:after {
content: '---';
color: var(--bright-bg);
color: var(--muted);
}