diff --git a/README.md b/README.md index 1ce882c..586b50c 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ See the live demo (of the default configuration) here: https://pawroman.github.io/zola-theme-terminimal/ -Tested with Zola v0.16.1. Please note that earlier versions might not work because of breaking changes across Zola versions. +Tested with Zola v0.17.2. Please note that earlier versions might not work because of breaking changes across Zola versions. #### Fork disclaimer @@ -18,49 +18,18 @@ https://github.com/panr/hugo-theme-terminal Many thanks for that outstanding original theme, Radek! -## Changes compared to the original theme +For more information about this fork and the differences to the original theme, please see: +[Changes compared to the original theme](#changes-compared-to-the-original-theme) below. -- Slight changes in the layout and styling. - - Content has been centered (instead of left-aligned). - - The header stripes have been spaced out. - - Tweaks to pagination, especially on mobile (small screens). - - The post title underline is dashed instead of doubly-dotted. - - All links are underlined, as per - [Brutalist Web Design Guidelines](https://www.brutalist-web.design/). - - Tweaks to header font sizes. - - Minor footer tweaks. +## Versioning -- Absolutely **no JavaScript**. - - No JavaScript needed to pre-process anything. - Zola with its Sass pre-processor is the only dependency. - - There's no menu trigger. - - Things load crazy fast, as it's all static content. - - Prism.js syntax highlighting is not supported (you can use - [Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)). - -- All references to social media (e.g. Twitter, OpenGraph) have been removed. - -- All references to external URLs (e.g. Google CDN) have been removed. - This theme's static assets are meant to be served from where it's hosted. - -- [Hack](https://github.com/source-foundry/Hack) is the default font. - -- The default color theme is blue (original uses orange). - -### New features - -- You can pick the accent color as well as background color. - There's a new `dark` background. See [Configuration](#configuration) - below for details. -- Active "section" links will change color indicating the - active section. This is all static, done at template level. +This theme used to be non-versioned, e.g. you'd pull the master branch, and occasionally new features or fixes would +be released. -## Features retained from the original +Starting from version v1.0.0, the project adopted [Semantic Versioning](https://semver.org/). -- 5 color themes, depending on your preference: - blue (default), green, orange, pink, red. -- The shortcodes `image` and `figure` (See [Shortcodes](#shortcodes)). -- Fully responsive. +Please check the [GitHub releases](https://github.com/pawroman/zola-theme-terminimal/releases) to see a change log +and work out if there's any breaking changes. ## How to start @@ -117,7 +86,7 @@ Example: Same as `image`, but with a few extra optional arguments: -- **`caption`** +- **`caption`** (supports markdown) - **`caption_position`** (center \[default\] | left | right) - **`caption_style`** @@ -128,12 +97,44 @@ Example: style="width: 25%;", position="right", caption_position="left", - caption="Ferris, the (unofficial) Rust mascot", - caption_style="font-weight: bold; font-style: italic;") }} + caption="**Ferris**, the (unofficial) Rust mascot", + caption_style="font-style: italic;") }} +``` + +## OpenGraph + +To add an image to a post, set the `og_image` extra option to the desired image +in the same directory of the markdown file: + +```toml +[extra] +og_image = "colocated_image.png" +``` + +Additionally, for the section pages and for posts to have a fallback image, add +`default_og_image` to the `[extra]` section: + +```toml +[extra] +default_og_image = "static/ocean.jpg" ``` ## Configuration +### Only show the post's description + +On each post you can specify the following: + +```toml +description = "test description" + +[extra] +show_only_description = true +``` + +This will render `test description` under this +particular post on the homepage instead of a summary. + ### Colors Both the accent colors and background colors are @@ -149,13 +150,14 @@ of your `config.toml`: [extra] # One of: blue, green, orange, pink, red. -# Defaults to blue. +# Defaults to blue. +# Append -light for light themes, e.g. blue-light +# Or append -auto, e.g. blue-auto accent_color = "green" -# One of: blue, dark, green, orange, pink, red. -# Enabling dark background will also modify primary font color -# to be darker. -# Defaults to accent color (or, if not accent color specified, to blue). +# One of: blue, dark, green, orange, pink, red, light, auto +# Enabling dark background will also modify primary font color to be darker. +# Defaults to accent color (or, if not accent color specified, to blue). background_color = "dark" ``` @@ -366,6 +368,52 @@ base template, `index.html`, create file like this in `templates/index.html`: If you spot any bugs or wish to contribute new features, please create a new [Pull Request](https://github.com/pawroman/zola-theme-terminimal/pulls). +## Changes compared to the original theme + +This theme has been forked from https://github.com/panr/hugo-theme-terminal + +- Slight changes in the layout and styling. + - Content has been centered (instead of left-aligned). + - The header stripes have been spaced out. + - Tweaks to pagination, especially on mobile (small screens). + - The post title underline is dashed instead of doubly-dotted. + - All links are underlined, as per + [Brutalist Web Design Guidelines](https://www.brutalist-web.design/). + - Tweaks to header font sizes. + - Minor footer tweaks. + +- Absolutely **no JavaScript**. + - No JavaScript needed to pre-process anything. + Zola with its Sass pre-processor is the only dependency. + - There's no menu trigger. + - Things load crazy fast, as it's all static content. + - Prism.js syntax highlighting is not supported (you can use + [Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)). + +- All references to social media (e.g. Twitter) have been removed. + +- All references to external URLs (e.g. Google CDN) have been removed. + This theme's static assets are meant to be served from where it's hosted. + +- [Hack](https://github.com/source-foundry/Hack) is the default font. + +- The default color theme is blue (original uses orange). + +### New features + +- You can pick the accent color as well as background color. + There's a new `dark` background. See [Configuration](#configuration) + below for details. +- Active "section" links will change color indicating the + active section. This is all static, done at template level. + +### Features retained from the original + +- 5 color themes, depending on your preference: + blue (default), green, orange, pink, red. +- The shortcodes `image` and `figure` (See [Shortcodes](#shortcodes)). +- Fully responsive. + ## License Copyright © 2019 Paweł Romanowski (pawroman) diff --git a/config.toml b/config.toml index 7af0f3d..cfcceca 100644 --- a/config.toml +++ b/config.toml @@ -5,6 +5,12 @@ title = "Zola Terminimal theme" # Sass compilation is required compile_sass = true +# The theme supports feeds (RSS and ATOM) +generate_feed = true + +# Use `rss.xml` for RSS feeds and `atom.xml` for ATOM. +feed_filename = "atom.xml" + # Optional: enable tags taxonomies = [ {name = "tags"} @@ -19,11 +25,12 @@ highlight_theme = "boron" # One of: blue, green, orange, pink, red. # Defaults to blue. +# Append -light for light themes, e.g. blue-light +# Or append -auto, e.g. blue-auto accent_color = "blue" -# One of: blue, dark, green, orange, pink, red. -# Enabling dark background will also modify primary font color -# to be darker. +# One of: blue, dark, green, orange, pink, red, light, auto +# Enabling dark background will also modify primary font color to be darker. # Defaults to accent color (or, if not accent color specified, to blue). background_color = "blue" @@ -89,3 +96,8 @@ use_full_hack_font = false # # Note that the main (index) page only has the main title. page_titles = "main_only" + +# Optional: default image to use for OpenGraph. +# If the page doesnt set og_image, use this one as fallback. Usefull +# for indexes and taxonomies' pages. +#default_og_image = "static/ocean.jpg" diff --git a/content/welcome-terminimal-theme.md b/content/welcome-terminimal-theme.md index 32a356e..d7bda16 100644 --- a/content/welcome-terminimal-theme.md +++ b/content/welcome-terminimal-theme.md @@ -77,7 +77,7 @@ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png", style="width: 25%;", position="center", caption_position="left", - caption="Ferris, the (unofficial) Rust mascot", + caption="**Ferris**, the (unofficial) Rust mascot", caption_style="font-weight: bold; font-style: italic;") ``` @@ -85,8 +85,8 @@ figure(src="http://rustacean.net/assets/rustacean-flat-gesture.png", style="width: 25%;", position="center", caption_position="left", - caption="Ferris, the (unofficial) Rust mascot", - caption_style="font-weight: bold; font-style: italic;") }} + caption="**Ferris**, the (unofficial) Rust mascot", + caption_style="font-style: italic;") }} --- diff --git a/sass/color/background_auto.scss b/sass/color/background_auto.scss new file mode 100644 index 0000000..e1cab79 --- /dev/null +++ b/sass/color/background_auto.scss @@ -0,0 +1,14 @@ +:root { + + @media (prefers-color-scheme: light) { + --background: white; + + --color: #101010; + } + + @media (prefers-color-scheme: dark) { + --background: #101010; + + --color: #A9B7C6; + } +} diff --git a/sass/color/background_light.scss b/sass/color/background_light.scss new file mode 100644 index 0000000..ac41318 --- /dev/null +++ b/sass/color/background_light.scss @@ -0,0 +1,3 @@ +:root { + --background: #f0f0f0; +} diff --git a/sass/color/blue-auto.scss b/sass/color/blue-auto.scss new file mode 100644 index 0000000..bf20e33 --- /dev/null +++ b/sass/color/blue-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(35,176,255); + --accent-alpha-70: rgba(35,176,255,.7); + --accent-alpha-20: rgba(35,176,255,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/sass/color/blue-light.scss b/sass/color/blue-light.scss new file mode 100644 index 0000000..c41d839 --- /dev/null +++ b/sass/color/blue-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(32,128,192); + --accent-alpha-70: rgba(32,128,192,.7); + --accent-alpha-20: rgba(32,128,192,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/sass/color/green-auto.scss b/sass/color/green-auto.scss new file mode 100644 index 0000000..2eb5e12 --- /dev/null +++ b/sass/color/green-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(120,226,160); + --accent-alpha-70: rgba(120,226,160,.7); + --accent-alpha-20: rgba(120,226,160,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/sass/color/green-light.scss b/sass/color/green-light.scss new file mode 100644 index 0000000..9ee64f3 --- /dev/null +++ b/sass/color/green-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(24, 192, 128); + --accent-alpha-70: rgba(24, 192, 128,.7); + --accent-alpha-20: rgba(24, 192, 128,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/sass/color/orange-auto.scss b/sass/color/orange-auto.scss new file mode 100644 index 0000000..3c19ce4 --- /dev/null +++ b/sass/color/orange-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(255,168,106); + --accent-alpha-70: rgba(255,168,106,.7); + --accent-alpha-20: rgba(255,168,106,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/sass/color/orange-light.scss b/sass/color/orange-light.scss new file mode 100644 index 0000000..6f7b8f9 --- /dev/null +++ b/sass/color/orange-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(240,128,48); + --accent-alpha-70: rgba(240,128,48,.7); + --accent-alpha-20: rgba(240,128,48,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} \ No newline at end of file diff --git a/sass/color/pink-auto.scss b/sass/color/pink-auto.scss new file mode 100644 index 0000000..705c706 --- /dev/null +++ b/sass/color/pink-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(238,114,241); + --accent-alpha-70: rgba(238,114,241,.7); + --accent-alpha-20: rgba(238,114,241,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/sass/color/pink-light.scss b/sass/color/pink-light.scss new file mode 100644 index 0000000..aa8437c --- /dev/null +++ b/sass/color/pink-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(224,64,192); + --accent-alpha-70: rgba(224,64,192); + --accent-alpha-20: rgba(224,64,192,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/sass/color/red-auto.scss b/sass/color/red-auto.scss new file mode 100644 index 0000000..a0016f2 --- /dev/null +++ b/sass/color/red-auto.scss @@ -0,0 +1,29 @@ +:root { + @media (prefers-color-scheme: dark) { + --accent: rgb(255,98,102); + --accent-alpha-70: rgba(255,98,102,.7); + --accent-alpha-20: rgba(255,98,102,.2); + + --background: #101010; + --color: #f0f0f0; + --border-color: rgba(255,240,224,.125); + + div.logo { + color: black; + } + + } + @media (prefers-color-scheme: light) { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + + --background: white; + --color: #201030; + --border-color: rgba(0,0,16,.125); + + div.logo { + color: white; + } + } +} diff --git a/sass/color/red-light.scss b/sass/color/red-light.scss new file mode 100644 index 0000000..d2f0e4c --- /dev/null +++ b/sass/color/red-light.scss @@ -0,0 +1,12 @@ +:root { + --accent: rgb(240,48,64); + --accent-alpha-70: rgba(240,48,64,.7); + --accent-alpha-20: rgba(240,48,64,.2); + + --background: white; + --color: #1D212C; + --border-color: rgba(0, 0, 0, .1); + div.logo { + color: white; + } +} diff --git a/templates/404.html b/templates/404.html index b081fbc..cc2ba6e 100644 --- a/templates/404.html +++ b/templates/404.html @@ -1,7 +1,7 @@ {% extends "index.html" %} {% block title %} -404 +404 | {{ config.title }} {% endblock title %} {% block header_menu %} diff --git a/templates/index.html b/templates/index.html index 223c348..8b67c98 100644 --- a/templates/index.html +++ b/templates/index.html @@ -11,8 +11,15 @@ {%- block title %}{{ config.title }}{% endblock title -%} {{ head_macros::head(config=config) }} + {%- block open_graph %}{{ head_macros::open_graph(config=config) }}{% endblock open_graph -%} + {%- if config.generate_feed %} - + {%- if "rss" in config.feed_filename %} + {% set feed_type = 'rss+xml' %} + {%- else %} + {% set feed_type = 'atom+xml' %} + {% endif -%} + {% endif -%} {%- if config.extra.favicon %} @@ -66,7 +73,8 @@ {%- for page in show_pages %}
{{ post_macros::header(page=page) }} - {{ post_macros::content(page=page, summary=true) }} + + {{ post_macros::content(page=page, summary=true, show_only_description=page.extra.show_only_description | default(value=false)) }}
{% endfor -%} {% else %} + {#- full content -#}
{{ page.content | safe }}
@@ -28,31 +33,33 @@ {% macro earlier_later(page) %} - {%- if config.extra.enable_post_view_navigation and page.lower or page.higher %} -