diff --git a/README.md b/README.md index acb717a..f0768d0 100644 --- a/README.md +++ b/README.md @@ -18,12 +18,6 @@ If your site is already a git repository, you can add the theme as a submodule i git submodule add https://github.com/joeroe/risotto.git themes/risotto ``` -## Configure - -To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`. - -See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme. - ## Update If you installed the theme using `git clone`, pull the repository to get the latest version: @@ -39,3 +33,33 @@ Or, if you added it as a git submodule: git submodule update --remote ``` +## Configure + +To use the theme, add `theme = risotto` to your site's `config.toml` or `config.yaml`. + +See `exampleSite/config.toml` for the theme-specific parameters you need to add to your site's `config.toml` or `config.yaml` to configure the theme. + +### Colour palettes + +Colour palettes for the theme are defined using the [base16 system](https://github.com/chriskempson/base16): + +| Base | Default colour | Used for | Examples | +| ---- | -------------- | -------- | -------- | +| 00 | Dark | Background | Page background | +| 01 | │ | Alt. background | Content background | +| 02 | │ | In-text backgrounds | `
`, ``, ``, `` |
+| 03   | │              | Muted text | `:before` & `:marker` symbols |
+| 04   | │              | Alt. foreground | Aside text          |
+| 05   | │              | Foreground         | Content text         |
+| 06   | │              |          |          |
+| 07   | Light          |          |          |
+| 08   | Red            |          |          |
+| 09   | Orange         |          |          |
+| 0A   | Yellow         | Highlights | Selected text, `` |
+| 0B   | Green          | Primary accent | Logo          |
+| 0C   | Cyan           | Active links | `a:active`, `a:hover`         |
+| 0D   | Blue           | Links    | `a:link`, `a:visited`         |
+| 0E   | Magenta        |          |          |
+| 0F   | Brown          |          |          |
+
+For light mode palettes, the sequence of 00–07 should be reversed (light to dark, not dark to light).
diff --git a/exampleSite/.hugo_build.lock b/exampleSite/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a838d04..567dd17 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -18,8 +18,7 @@ sectionPagesMenu = "main"
 noindex = false
 
 [params.theme]
-palette = "gruvbox-dark"
-mode = "dark-mode"
+palette = "gruvbox-light"
 
 # Sidebar: about/bio
 [params.about]
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 4fd02f9..900ccae 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -12,7 +12,6 @@
 
 
 
-
-
+
 
 
diff --git a/static/css/colour/dark-mode.css b/static/css/colour/dark-mode.css
deleted file mode 100644
index d7b5f28..0000000
--- a/static/css/colour/dark-mode.css
+++ /dev/null
@@ -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);
-}
diff --git a/static/css/colour/gruvbox-dark.css b/static/css/colour/gruvbox-dark.css
deleted file mode 100644
index 24c4218..0000000
--- a/static/css/colour/gruvbox-dark.css
+++ /dev/null
@@ -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;
-}
diff --git a/static/css/colour/gruvbox-light.css b/static/css/colour/gruvbox-light.css
deleted file mode 100644
index cff8fa3..0000000
--- a/static/css/colour/gruvbox-light.css
+++ /dev/null
@@ -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;
-}
diff --git a/static/css/colour/light-mode.css b/static/css/colour/light-mode.css
deleted file mode 100644
index 0e09f14..0000000
--- a/static/css/colour/light-mode.css
+++ /dev/null
@@ -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);
-}
diff --git a/static/css/colours.css b/static/css/colours.css
new file mode 100644
index 0000000..4326985
--- /dev/null
+++ b/static/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/static/css/footer.css b/static/css/footer.css
index 3c5d6e9..3e84188 100644
--- a/static/css/footer.css
+++ b/static/css/footer.css
@@ -1,5 +1,5 @@
 .page__footer {
-    color: var(--bright-bg);
+    color: var(--off-fg);
 }
 
 .page__footer p {
diff --git a/static/css/layout.css b/static/css/layout.css
index da8027e..d249166 100644
--- a/static/css/layout.css
+++ b/static/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/static/css/logo.css b/static/css/logo.css
index 06aa86c..368fff4 100644
--- a/static/css/logo.css
+++ b/static/css/logo.css
@@ -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 {
diff --git a/static/css/palettes/base16-dark.css b/static/css/palettes/base16-dark.css
new file mode 100644
index 0000000..cb1ec1d
--- /dev/null
+++ b/static/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/static/css/palettes/base16-light.css b/static/css/palettes/base16-light.css
new file mode 100644
index 0000000..bcbbb5a
--- /dev/null
+++ b/static/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/static/css/palettes/gruvbox-dark.css b/static/css/palettes/gruvbox-dark.css
new file mode 100644
index 0000000..1d60bd9
--- /dev/null
+++ b/static/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/static/css/palettes/gruvbox-light.css b/static/css/palettes/gruvbox-light.css
new file mode 100644
index 0000000..f786cf0
--- /dev/null
+++ b/static/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/static/css/risotto.css b/static/css/risotto.css
index 3c2969d..dcb5a96 100644
--- a/static/css/risotto.css
+++ b/static/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/static/css/typography.css b/static/css/typography.css
index abed6f4..11ef532 100644
--- a/static/css/typography.css
+++ b/static/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);
+    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);
 }