1
0
Fork
You've already forked hugo-theme-readable
0
Hugo theme built using readable.css from Freedom to Write
  • CSS 57.7%
  • HTML 42.3%
2024年06月19日 19:08:45 +00:00
.github Skip prereleases of readable.css in the CI workflow ( #21 ) 2024年02月26日 20:49:12 -06:00
archetypes old work pushed 2023年01月30日 13:14:33 -06:00
docs Remove all the links that mention github in theme.toml + Fix Documentation 2024年06月19日 14:01:47 -05:00
layouts Change Footer logic to account for .Site.Copyright and other methods ( #24 ) 2024年06月13日 13:50:33 -05:00
static/css Update to readable.css v1.1.0 ( #13 ) 2023年05月02日 16:15:28 -05:00
LICENSE old work pushed 2023年01月30日 13:14:33 -06:00
README.md Fix Starter template link 2024年06月18日 19:22:34 -05:00
theme.toml Remove all the links that mention github in theme.toml + Fix Documentation 2024年06月19日 14:01:47 -05:00

hugo-theme-readable

Readable is a theme for the static-site generator Hugo using the readable.css framework built by Freedom to Write.

Shoutout to Benjamin Hollon for his amazing work building this CSS framework and making it so simple to use.

Want to check out a demo? (coming soon)

demo image

Installation

To add this theme to an existing Hugo site, start by adding this repo as a submodule in the site's themes folder.

git submodule add https://codeberg.org/Freedom-to-Write/hugo-theme-readable themes/readable

Then, update your config file to be using the new theme. For example, if you are using config.toml, the line should become:

theme = 'readable'

If you don't have an existing site, feel free to use the provided starter template to quickly get your website online.

For more information on starting a Hugo website and using custom themes, refer to the Hugo documentation.

Usage

Freedom to Write has provided some awesome guides on writing HTML that works automatically with the formatting of Readable. For a complete HTML page guide on writing custom pages, see Overall Structure. For some neat tips that may make life easier working with this style sheet, read Quick Tips.

Shortcodes

aside

You can use the aside shortcode to signify content that is slightly off-topic in regard to the rest of the post.

Here's how it compares to a blockquote:

> This is a blockquote.
>
> This is a default **markdown** element and supports formatting inside it.
{{< aside >}}
This is an aside element.
You can use **markdown** formatting inside it.
{{</ aside >}}

The above code generates the following output:

Comparing a blockquote to an aside. The blockquote has a thin bar on it's left, while the aside element is inside a nice box with rounded corners.

video

You can use the video shortcode to embed a video player in your post.

{{< video source="https://test-videos.co.uk/vids/bigbuckbunny/mp4/av1/1080/Big_Buck_Bunny_1080_10s_5MB.mp4" type="video/mp4" caption="Of course it's Big Buck Bunny!" >}}

A still from an embedded video with controls in a post.

Sources can be remote or static content from your website. You can find the supported file types here.

Notes

  • Benjamin loves when new sites and projects pop up using the readable.css framework!