6.2 KiB
Duckquill
Duckquill is a modern, pretty, and clean (and very opinionated) Zola theme that has the purpose of greatly simplifying the process of rolling up your blog. It aims to provide all the needed options for comfortable writing, keeping the balance of it being simple.
Duckquill is made based on needs of my website, if you need some feature/configuration that doesn't exist feel free to open an issue or better yet, pull request!
Installation
First, download this theme to your themes
directory:
git clone https://git.exozy.me/daudix/duckquill.git themes/duckquill
...or add as submodule for easy updating (recommended if you already have git setup on site):
git submodule init
git submodule add https://git.exozy.me/daudix/duckquill.git themes/duckquill
and then enable it in your config.toml
:
theme = "duckquill"
Options
Duckquill offers some configuration options to make it fit you better (but that doesn't make it less opinionated).
Custom CSS
You can add your own or override existing styles in the sass/custom.scss
of your site, if for some reason overridden class are not respected, try using !important
. You can import styles from Duckquill using @use "../themes/duckquill/sass/NEEDED_FILE.scss";
.
Accent color
Duckquill respects chosen accent color everywhere, you can use any HEX color code you want
First, change the accent color in config.toml
:
[extra]
accent_color = "#HEX_COLOR_CODE"
Then, paste the following code inside sass/custom.scss
(inside your site, not the theme):
@use "sass:color";
$accent-color: #HEX_COLOR_CODE;
$accent-color-20: color.scale($accent-color, $alpha: -80%);
$crt-bg: radial-gradient(
color.scale($accent-color, $lightness: -80%),
color.scale($accent-color, $lightness: -90%)
);
$bg-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
$bg-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
$glow:
0 0 0 1px color.scale($accent-color, $alpha: -95%),
0 2px 6px 2px color.scale($accent-color, $alpha: -95%),
0 4px 24px 4px color.scale($accent-color, $alpha: -90%);
:root {
--accent-color-20: #{$accent-color-20};
--accent-color: #{$accent-color};
--background: #{$bg-l};
--crt-bg: #{$crt-bg};
--glow: #{$glow};
}
@media (prefers-color-scheme: dark) {
:root {
--background: #{$bg-d};
}
}
Set any color in $accent-color
and reload, the accent color should be used now. This is a hack that is needed until Zola will be able to use config.toml
inside Sass.
[extra]
variables:
accent_color
: Accent color used in some browsers set in metadata, see #accent-coloranimated_favicon
: Specify if the favicon are animated GIF (true, false)blog_title
: The title of the blogblog_description
: The description of the blog, displayed right under the blog titledate_format
: Allows setting custom date format in Tera format, all available variables are listed here. Does not apply to commentshosting
: Where the website source are located, used on 404 pageissues_url
: Link to site bug tracker, if presentsource_url
: Link to site source (not built site)nav_links
: Links used in navigation bar
The nav_links
are set like so:
[extra]
nav_links = [
{url = "https://example.org", name = "Example"},
{url = "https://mstdn.social", name = "Mastodon"},
]
[extra.footer]
variables:
johnvert_ref
: Site URL withouthttps://
part or trailing slashes, e.gexample.org
. Works only ifshow_johnvert
are set totrue
show_copyright
: Whether to display© Duckquill, 2023
. (true, false)show_johnvert
: Whether to display Johnvertisement. (true, false)show_powered_by
: Whether to displayPowered by Zola and Duckquill
. (true, false)show_source
: Whether to displayWebsite source
link. (true, false)
[extra.comments]
variables:
host
: Mastodon home server, e.gmstdn.social
user
: Mastodon username, e.gDaudix
token
: Mastodon app token, e.gjTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ
. Can be left empty, but in this case only first 60 comments will be loaded, instructions on how to get one are available here
These values are also used in the <head>
for Mastodon verification.
Test pages
Contribute
If you want to improve Duckquill in any way, feel free to open an issue, or even better, a pull request! I'm happy about every contribution!
The main repo is https://git.exozy.me/daudix/duckquill, but since only exozy.me members can open issues and pull requests, there is two-way mirror at https://next.forgejo.org/daudix-UFO/duckquill, you can open issues and pull requests there just fine.
Credits
Special thanks ♥
- Jakub Steiner for an awesome OS Component Website, on top of which this whole thing is built
- Cassidy James for an awesome Mastodon-powered Comments
- Mehdi for an awesome CSS Scanlines
- dwb, ejm and jgs for awesome ASCII art
- Everyone who supported me and said good stuff <3