aboutsummaryrefslogtreecommitdiff
path: root/public/css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css')
-rw-r--r--public/css/colours.css17
-rw-r--r--public/css/footer.css2
-rw-r--r--public/css/layout.css6
-rw-r--r--public/css/logo.css5
-rw-r--r--public/css/palettes/base16-dark.css22
-rw-r--r--public/css/palettes/base16-light.css22
-rw-r--r--public/css/palettes/gruvbox-dark.css23
-rw-r--r--public/css/palettes/gruvbox-light.css23
-rw-r--r--public/css/risotto.css3
-rw-r--r--public/css/typography.css22
10 files changed, 127 insertions, 18 deletions
diff --git a/public/css/colours.css b/public/css/colours.css
new file mode 100644
index 0000000..4326985
--- /dev/null
+++ b/public/css/colours.css
@@ -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);
+}
diff --git a/public/css/footer.css b/public/css/footer.css
index 3c5d6e9..3e84188 100644
--- a/public/css/footer.css
+++ b/public/css/footer.css
@@ -1,5 +1,5 @@
.page__footer {
- color: var(--bright-bg);
+ color: var(--off-fg);
}
.page__footer p {
diff --git a/public/css/layout.css b/public/css/layout.css
index da8027e..d249166 100644
--- a/public/css/layout.css
+++ b/public/css/layout.css
@@ -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 */
diff --git a/public/css/logo.css b/public/css/logo.css
index be24b86..368fff4 100644
--- a/public/css/logo.css
+++ b/public/css/logo.css
@@ -11,7 +11,8 @@
.page__logo-inner {
display: block;
- background: var(--green);
+ 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(--bright-green);
+ opacity: 1;
}
.page__logo-inner:before {
diff --git a/public/css/palettes/base16-dark.css b/public/css/palettes/base16-dark.css
new file mode 100644
index 0000000..cb1ec1d
--- /dev/null
+++ b/public/css/palettes/base16-dark.css
@@ -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;
+}
diff --git a/public/css/palettes/base16-light.css b/public/css/palettes/base16-light.css
new file mode 100644
index 0000000..bcbbb5a
--- /dev/null
+++ b/public/css/palettes/base16-light.css
@@ -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;
+}
diff --git a/public/css/palettes/gruvbox-dark.css b/public/css/palettes/gruvbox-dark.css
new file mode 100644
index 0000000..1d60bd9
--- /dev/null
+++ b/public/css/palettes/gruvbox-dark.css
@@ -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;
+}
diff --git a/public/css/palettes/gruvbox-light.css b/public/css/palettes/gruvbox-light.css
new file mode 100644
index 0000000..f786cf0
--- /dev/null
+++ b/public/css/palettes/gruvbox-light.css
@@ -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;
+}
diff --git a/public/css/risotto.css b/public/css/risotto.css
index 3c2969d..dcb5a96 100644
--- a/public/css/risotto.css
+++ b/public/css/risotto.css
@@ -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);
}
diff --git a/public/css/typography.css b/public/css/typography.css
index 5a2c044..a5e8d80 100644
--- a/public/css/typography.css
+++ b/public/css/typography.css
@@ -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);
+a:hover, a:active, a.active {
+ 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(--yellow);
+ background-color: var(--highlight);
color: var(--bg);
}
@@ -175,7 +175,7 @@ hr {
hr:after {
content: '---';
- color: var(--bright-bg);
+ color: var(--muted);
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-08-02 06:33:14 +0000