A website theme for the static site generator Zola.
Written to produce clean, semantic, simple-to-read HTML and CSS. The aim is for a novice to press F12 and be able to understand what is going on. No div-soup, No javascript, no third party frameworks.
Used at jasonfry.co.uk.
Demo available at whispers-on-parchment.jasonfry.co.uk
No support for taxonomy.
- Adding in your own things to
<head>(e.g. favicons), your own CSS. - Adding some content to the footer
- Adding something to the end of the body, like analytics. Create a file like the following in
templates/index.html.
If you don't want to include the default CSS, then remove the line {{ super() }}
{% extends "parchment/templates/index.html" %}
{% block head %}
{{ super() }}
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<style>
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
<style>
{% endblock head %}
{% block footer %}
<p>Created by a human</p>
{% if config.generate_feed %}
<p>
<a
href="{{ get_url(path=config.feed_filename) }}"
title="subscribe - rss feed"
>rss</a
>
</p>
{% endif %}
{% endblock footer %}
{% block body_end %}
<script
src="https://tinylytics.app/embed/your-code.js"
defer
></script>
{% endblock body_end %}The color scheme is based on Solarized and has both a dark and light theme included, that will follow the browser / OS setting. The colors are set with CSS variables, which you can override by setting your own CSS in head block.
:root {
--background: white;
--background-highlights: white;
--primary: black;
--secondary: blue;
}
@media (prefers-color-scheme: dark) {
:root {
--background: black;
--background-highlights: black;
--primary: white;
--secondary: cyan;
}
}The following optional things are available to set in the config.toml file.
[extra]
head_title = "My Custom <head> Title"
[[extra.footer_menu]]
[[extra.footer_menu.links]]
text = "jf theme, by Jason Fry"
href = "https://jasonfry.co.uk"
[[extra.footer_menu.links]]
text = "Made With Zola"
href = "https://getzola.org"There is a block to add things after the nav that appears at the bottom of posts.
templates/page.html
{% extends "parchment/templates/page.html" %}
{% block after_post_nav %}
<p>Reply via email - my first name @ my website address</p>
{% endblock after_post_nav %}Everything is set with CSS REMs, so just change the HTML element's font size using CSS:
html { font-size: 32px; }