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  -## 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" . -}}
{{ .Site.Copyright | markdownify }}
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"