diff --git a/NEWS.md b/NEWS.md index e3aa2d0..37d7584 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,7 +1,16 @@ # risotto (development version) -* Fix overflow of code blocks with line numbers (#41) -* Add descriptions to sidebar of list pages, where defined in the frontmatter of `_index.md` (#55) +# risotto 0.4.0 + +* Added descriptions to sidebar of list pages, where defined in the frontmatter of `_index.md` (#55) +* Made sidebar sticky, avoiding overflow for long tables of contents (#51) +* Added convenience classes for colours, e.g. `.base00` and `.bg-base00`. +* Fixed overflow of code blocks with line numbers (#41) +* Fixed invalid HTML in page header (#64) +* Updated FontAwesome to 6.5.1 (#63) + * Please note that future versions will probably not include FontAwesome by default +* Updated Academicons to 1.9.4 (#63) + * Please note that future versions will probably not include Academicons by default # risotto 0.3.0 diff --git a/README.md b/README.md index c90ff60..91919c2 100644 --- a/README.md +++ b/README.md @@ -10,19 +10,25 @@ risotto is a minimalist, responsive [hugo](https://gohugo.io) theme inspired by ![Screenshot of the risotto theme](https://raw.githubusercontent.com/joeroe/risotto/master/images/screenshot.png) +## Features + +* Plain, semantic HTML with no Javascript +* Plain CSS – no frameworks, no preprocessors, just simple and easy-to-customise stylesheets +* Uses [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) for native responsive behaviour without arbitrary breakpoints +* Comes with [16 built-in colour schemes](#colour-schemes) based on popular terminal themes plus the ability to use custom themes using the [base16 system](https://github.com/monicfenga/base16-styles) + ## Install -The easiest way to install the theme is to clone this repository into your site's `themes` directory: +The easiest way to install the theme is to [download the latest release](https://github.com/joeroe/risotto/releases/tag/release) and extract it to your project's `themes/` directory. +You can also clone this repository into your site's `themes` directory and checkout the latest release: ```shell -git clone https://github.com/joeroe/risotto themes/risotto +git clone https://github.com/joeroe/risotto themes/risotto && cd themes/risotto +rit checkout $(git tag -l | grep '^v[0-9.]*$' | sort -V | tail -n 1) ``` -If your site is already a git repository, you can add the theme as a submodule instead: - -```shell -git submodule add https://github.com/joeroe/risotto.git themes/risotto -``` +Note that this will not work if your site is itself a git repository. +In that case, you can add the theme as a [git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), but this is not recommended due to the difficulty of tracking a specific release. ## Update @@ -33,19 +39,15 @@ cd themes/risotto git pull ``` -Or, if you added it as a git submodule: - -```shell -git submodule update --remote -``` +Otherwise, simply [download the latest release](https://github.com/joeroe/risotto/releases/tag/release) and extract it to your project's `themes/` directory, replacing the old version. ## Configure -To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `config.yaml` respectively. +To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `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 schemes risotto uses the [base16 framework](https://github.com/chriskempson/base16) to define colour schemes that can be used with the `theme.palette` parameter. A selection of 16 palettes (10 dark, 6 light) are bundled with the theme: `apprentice`, `base16-dark`, `base16-light`, `dracula`, `gruvbox-dark`, `gruvbox-light`, `material`, `papercolor-dark`, `papercolor-light`, `solarized-dark`, `solarized-light`, `tender`, `tokyo-night-dark`, `tokyo-night-light`, `windows-95` and `windows-95-light`. @@ -57,28 +59,36 @@ The easiest way to use other base16 styles is to place .css file from https://gi Or to define a wholly custom theme, you will need to define the following CSS variables for the following base16 colours (see [base16-dark.css](blob/main/static/css/palettes/base16-dark.css) for an example): -| 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          |          |          |
+| 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).
 Note that not all colours are currently used in the theme.
 
+You you use these colours directly in content using the convenience classes `.baseXX` and `.bg-baseXX`.
+For example:
+
+```html
+Yellow text
+Text highlighted in green
+```
+
 ## Favicon
 
 risotto will automatically use favicons placed in the `static/` directory.
diff --git a/exampleSite/content/post/markdown-syntax.md b/exampleSite/content/post/markdown-syntax.md
index 06990d7..dcbab1b 100644
--- a/exampleSite/content/post/markdown-syntax.md
+++ b/exampleSite/content/post/markdown-syntax.md
@@ -14,6 +14,7 @@ categories = [
 ]
 series = ["Themes Guide"]
 aliases = ["migrate-from-jekyl"]
+toc = true
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 77abf32..23274ed 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,10 +2,6 @@
     

         
{{ .Title | markdownify }}

     

-    {{ if .Params.toc }}
-    
-    {{ end }}
     

         {{ .Content }}
     

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7ee6434..268455a 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,2 @@
-{{- partial "lang.html" . -}}
 
{{ .Site.Copyright | markdownify }}

 
diff --git a/static/css/layout.css b/static/css/layout.css
index d249166..06f69e7 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -4,10 +4,10 @@
     max-width: 64rem;
     margin: 1rem auto;
     display: grid;
-    grid-template-areas: 
-      "header" 
-      "body" 
-      "aside" 
+    grid-template-areas:
+      "header"
+      "body"
+      "aside"
       "footer";
     grid-template-columns: minmax(0, 1fr); /* https://css-tricks.com/preventing-a-grid-blowout/ */
     grid-row-gap: 2rem;
@@ -49,6 +49,11 @@
 .page__aside {
     grid-area: aside;
     color: var(--off-fg);
+    position: sticky;
+    top: 1rem;
+    right: 1rem;
+    overflow-y: auto;
+    max-height: 95vh;
 }
 
 /* Footer */
diff --git a/static/css/typography.css b/static/css/typography.css
index fcf63b6..086cd40 100644
--- a/static/css/typography.css
+++ b/static/css/typography.css
@@ -219,3 +219,37 @@ img {
     height: auto;
 }
 
+/* Colour classes */
+.base00 { color: var(--base00); }
+.base01 { color: var(--base01); }
+.base02 { color: var(--base02); }
+.base03 { color: var(--base03); }
+.base04 { color: var(--base04); }
+.base05 { color: var(--base05); }
+.base06 { color: var(--base06); }
+.base07 { color: var(--base07); }
+.base08 { color: var(--base08); }
+.base09 { color: var(--base09); }
+.base0A { color: var(--base0A); }
+.base0B { color: var(--base0B); }
+.base0C { color: var(--base0C); }
+.base0D { color: var(--base0D); }
+.base0E { color: var(--base0E); }
+.base0F { color: var(--base0F); }
+
+.bg-base00 { background-color: var(--base00); }
+.bg-base01 { background-color: var(--base01); }
+.bg-base02 { background-color: var(--base02); }
+.bg-base03 { background-color: var(--base03); }
+.bg-base04 { background-color: var(--base04); }
+.bg-base05 { background-color: var(--base05); }
+.bg-base06 { background-color: var(--base06); }
+.bg-base07 { background-color: var(--base07); }
+.bg-base08 { background-color: var(--base08); }
+.bg-base09 { background-color: var(--base09); }
+.bg-base0A { background-color: var(--base0A); }
+.bg-base0B { background-color: var(--base0B); }
+.bg-base0C { background-color: var(--base0C); }
+.bg-base0D { background-color: var(--base0D); }
+.bg-base0E { background-color: var(--base0E); }
+.bg-base0F { background-color: var(--base0F); }
diff --git a/theme.toml b/theme.toml
index 265e16e..ad5f777 100644
--- a/theme.toml
+++ b/theme.toml
@@ -8,7 +8,6 @@ demosite = "https://risotto.joeroe.io"
 
 tags = ["responsive", "minimal", "dark mode"]
 features = []
-min_version = "0.41.0"
 
 [author]
   name = "Joe Roe"