diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2a8645f --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.hugo_build.lock 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/README.md b/exampleSite/README.md
deleted file mode 100644
index 11a456c..0000000
--- a/exampleSite/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# hugoBasicExample
-
-This repository offers an example site for [Hugo](https://gohugo.io/) and also it provides the default content for demos hosted on the [Hugo Themes Showcase](https://themes.gohugo.io/).
-
-# Using
-
-1. [Install Hugo](https://gohugo.io/overview/installing/)
-2. Clone this repository
-
-```bash
-git clone https://github.com/gohugoio/hugoBasicExample.git
-cd hugoBasicExample
-```
-
-3. Clone the repository you want to test. If you want to test all Hugo Themes then follow the instructions provided [here](https://github.com/gohugoio/hugoThemes#installing-all-themes)
-
-4. Run Hugo and select the theme of your choosing
-
-```bash
-hugo server -t YOURTHEME
-```
-
-5. Under `/content/` this repository contains the following:
-
-- A section called `/post/` with sample markdown content
-- A headless bundle called `homepage` that you may want to use for single page applications. You can find instructions about headless bundles over [here](https://gohugo.io/content-management/page-bundles/#headless-bundle)
-- An `about.md` that is intended to provide the `/about/` page for a theme demo
-
-6. If you intend to build a theme that does not fit in the content structure provided in this repository, then you are still more than welcome to submit it for review at the [Hugo Themes](https://github.com/gohugoio/hugoThemes/issues) respository
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a307cae..b5bbcad 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -15,10 +15,10 @@ ignoreErrors = ["error-remote-getjson"]
 sectionPagesMenu = "main"
 
 [params]
+noindex = false
 
 [params.theme]
-palette = "gruvbox-dark"
-mode = "dark-mode"
+palette = "base16-dark"
 
 # Sidebar: about/bio
 [params.about]
@@ -28,16 +28,16 @@ logo = "images/rice.svg"
 
 # Sidebar: social links
 # Available icon sets:
-# * FontAwesome 5  ('fas fa-' or 'fab-fa' for brands)
+# * FontAwesome 6  ('fa-brands', 'fa-normal', or 'fa-solid' for brands)
 # * Academicons  ('ai ai-')
 
 [[params.socialLinks]]
-icon = "fab fa-github"
+icon = "fa-brands fa-github"
 title = "GitHub"
 url = "https://github.com/joeroe/risotto"
 
 [[params.socialLinks]]
-icon = "fas fa-envelope"
+icon = "fa-solid fa-envelope"
 title = "Email"
 url = "mailto:example@example.com"
 
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
deleted file mode 100644
index ed6494b..0000000
--- a/exampleSite/content/_index.md
+++ /dev/null
@@ -1,3 +0,0 @@
-+++
-author = "Hugo Authors"
-+++
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
new file mode 120000
index 0000000..fe84005
--- /dev/null
+++ b/exampleSite/content/_index.md
@@ -0,0 +1 @@
+../../README.md
\ No newline at end of file
diff --git a/exampleSite/content/_index.md.old b/exampleSite/content/_index.md.old
new file mode 100644
index 0000000..ed6494b
--- /dev/null
+++ b/exampleSite/content/_index.md.old
@@ -0,0 +1,3 @@
++++
+author = "Hugo Authors"
++++
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index f91cdb0..37742ef 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-    
{{ .Title | markdownify }}

+    
{{ .Title | markdownify }}

 
     {{ .Content }}
 
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 180a05b..45673a5 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -3,15 +3,15 @@
 
 
 
+{{ if .Site.Params.noindex }} {{ end }}
 
 
-
+
 
 
 
 
-
-
-
+
+
 
 
diff --git a/static/css/colour/dark-mode.css b/static/css/colour/dark-mode.css
deleted file mode 100644
index 386f99d..0000000
--- a/static/css/colour/dark-mode.css
+++ /dev/null
@@ -1,7 +0,0 @@
-:root {
-    --bg: var(--black);
-    --dark-bg: var(--dark-black);
-    --bright-bg: var(--bright-black);
-    --fg: var(--white);
-    --bright-fg: var(--bright-white);
-}
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 3ac2827..0000000
--- a/static/css/colour/light-mode.css
+++ /dev/null
@@ -1,7 +0,0 @@
-:root {
-    --bg: var(--white);
-    --dark-bg: var(--dark-white);
-    --bright-bg: var(--bright-black);
-    --fg: var(--black);
-    --bright-fg: var(--bright-black);
-}
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 711761a..d249166 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -41,13 +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 be24b86..368fff4 100644
--- a/static/css/logo.css
+++ b/static/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/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 a06ad18..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,21 +67,21 @@ p {
 /* Links */
 
 a:link, a:visited {
-    color: var(--fg);
+    color: var(--link);
 }
 
 a:hover, a:active {
-    color: var(--bright-fg);
+    color: var(--hover);
 }
 
 /* Lists */
 ul {
-    margin: 1rem 0;
+    margin: 0 0 1.5rem 0;
     padding-left: 1.25rem;
 }
 
 ol {
-    margin: 1rem 0;
+    margin: 0 0 1.5rem 0;
     padding-left: 1.75rem;
 }
 
@@ -94,11 +94,29 @@ 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 {
+  margin: 0;
+  font-weight: bold;
+}
+
+dd {
+  margin: 0 0 0 1.5rem;
+  font-style: italic;
+}
+
+dd + dt {
+  margin-top: 1.5rem;
+}
+
+dl {
+  margin: 0 0 1.5rem 0;
 }
 
 /* Blockquotes */
@@ -111,7 +129,7 @@ blockquote::before {
     position: absolute;
     left: -1.5rem;
     content: ">";
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
 .twitter-tweet::before {
@@ -123,14 +141,15 @@ blockquote::before {
 /* Code */
 pre,
 code, 
-kbd {
-    overflow-x: auto;
-    background: var(--dark-bg) !important;
+kbd,
+samp {
+    background: var(--inner-bg) !important;
     font-family: var(--font-monospace);
-    color: var(--bright-bg);
+    color: var(--off-fg);
 }
 
 pre {
+    overflow-x: auto;
     padding: 1.5rem;
     margin: 0 0 1.5rem 0;
 }
@@ -144,20 +163,22 @@ strong {
 /* Highlighting */
 ::selection,
 mark {
-    background-color: var(--yellow);
+    background-color: var(--highlight);
     color: var(--bg);
 }
 
 /* Other typographic elements */
 hr {
     border: 0;
+    margin-bottom: 1.5rem;
 }
 
 hr:after {
     content: '---';
-    color: var(--bright-bg);
+    color: var(--muted);
 }
 
+
 /* Prevent super/sub from affecting line height */
 sup, sub {
     vertical-align: baseline;
@@ -185,3 +206,9 @@ th:first-child, td:first-child {
 th {
     text-align: inherit;
 }
+
+/* Figures */
+img {
+    max-width: 100%;
+    height: auto;
+}