diff --git a/NEWS.md b/NEWS.md index 37d7584..e3aa2d0 100644 --- a/NEWS.md +++ b/NEWS.md @@ -1,16 +1,7 @@ # risotto (development version) -# 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 +* 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.3.0 diff --git a/README.md b/README.md index 91919c2..c90ff60 100644 --- a/README.md +++ b/README.md @@ -10,25 +10,19 @@ 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 [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: +The easiest way to install the theme is to clone this repository into your site's `themes` directory: ```shell -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) +git clone https://github.com/joeroe/risotto 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. +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 +``` ## Update @@ -39,15 +33,19 @@ cd themes/risotto git pull ``` -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. +Or, if you added it as a git submodule: + +```shell +git submodule update --remote +``` ## Configure -To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `config.yaml`. +To use the theme, add `theme = 'risotto'` to your site's `config.toml`, or `theme: risotto` to your `config.yaml` respectively. 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 schemes +### Colour palettes 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`. @@ -59,36 +57,28 @@ 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 dcbab1b..06990d7 100644
--- a/exampleSite/content/post/markdown-syntax.md
+++ b/exampleSite/content/post/markdown-syntax.md
@@ -14,7 +14,6 @@ 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 23274ed..77abf32 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,6 +2,10 @@
     

{{ .Title | markdownify }}

+ {{ if .Params.toc }} + + {{ end }}
{{ .Content }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 268455a..7ee6434 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,2 +1,3 @@ +{{- partial "lang.html" . -}} diff --git a/static/css/layout.css b/static/css/layout.css index 06f69e7..d249166 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,11 +49,6 @@ .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 086cd40..fcf63b6 100644 --- a/static/css/typography.css +++ b/static/css/typography.css @@ -219,37 +219,3 @@ 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 ad5f777..265e16e 100644 --- a/theme.toml +++ b/theme.toml @@ -8,6 +8,7 @@ demosite = "https://risotto.joeroe.io" tags = ["responsive", "minimal", "dark mode"] features = [] +min_version = "0.41.0" [author] name = "Joe Roe"