feat: Rewrite in Zola

2023-10-13 00:55:20 +00:00 · 2023-10-13 00:55:20 +00:00 · 36926a0b79
commit 36926a0b79
parent e94ef3caf7
80 changed files with 2029 additions and 1588 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +0,0 @@
-_site/
-.sass-cache/
-.jekyll-cache/
-.jekyll-metadata
-.gem
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,9 +0,0 @@
-image: jekyll/jekyll
-
-pages:
-  script:
-    - bundle install
-    - bundle exec jekyll build -d public
-  artifacts:
-    paths:
-      - public
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -1,33 +0,0 @@
-# Uses https://codeberg.org/Codeberg-CI/examples/src/branch/main/Jekyll/jekyll.yml
-
-steps:
-  build:
-    # Use the official jekyll build container
-    image: jekyll/jekyll
-    secrets: [ cbtoken, cbmail ]
-    commands:
-      # Avoid permission denied errors
-      - chmod -R a+w .
-      # Set up git in a working way
-      - git config --global --add safe.directory /woodpecker/src/codeberg.org/daudix-UFO/duckquill-source/_site
-      - git config --global user.email "$CBMAIL"
-      - git config --global user.name "CI Builder"
-      - git config --global init.defaultBranch pages
-      # clone and move the target repo
-      - git clone -b pages https://codeberg.org/daudix-UFO/duckquill.git
-      - mv duckquill _site
-      - chmod -R a+w _site
-      - cd _site
-      # Prepare for push
-      - git remote set-url origin https://$CBTOKEN@codeberg.org/daudix-UFO/duckquill.git
-      - cd ..
-      # Run Jekyll build stage
-      - bundle install
-      - bundle exec jekyll build
-      # Only needed for custom domains
-      # - cp domains _site/.domains
-      # Push to target
-      - cd _site
-      - git add --all
-      - git commit -m "Woodpecker CI Jekyll Build at $( env TZ=Europe/Berlin date +"%Y-%m-%d %X %Z" )"
-      - git push
--- a/404.md
+++ b/404.md
@ -1,13 +0,0 @@
---
-layout: default
-permalink: /404.html
---
-
-![404]({{site.baseurl}}/assets/404.png){:.full.pixels}
-
-# Document Not Found
-
-The requested page could not be found. If you feel this is not normal, then you create an issue on the {{ site.hosting }}.
-
-[Go Back](<javascript:window.history.go(-1);>){: .inline-button} [File an issue]({{site.issuesurl}})
-{: .dialog-buttons}
--- a/5
+++ b/5
@ -1,5 +0,0 @@
-FROM jekyll/jekyll
-
-COPY Gemfile* ./
-
-RUN chmod -R a+w . && bundle install
--- a/16
+++ b/16
@ -1,16 +0,0 @@
-source 'https://rubygems.org'
-
-group :jekyll_plugins do
-  gem 'jekyll-default-layout'
-  gem 'jekyll-feed'
-  gem 'jekyll-loading-lazy'
-  gem 'jekyll-optional-front-matter'
-  gem 'jekyll-readme-index'
-  gem 'jekyll-relative-links'
-  gem 'jekyll-sass-converter', '~> 2.2'
-  gem 'jekyll-sitemap'
-  gem 'jekyll-titles-from-headings'
-  gem 'jekyll-toc'
-end
-
-gem "webrick"
--- a/Gemfile.lock
+++ b/Gemfile.lock
@ -1,102 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.5)
-      public_suffix (>= 2.0.2, < 6.0)
-    colorator (1.1.0)
-    concurrent-ruby (1.2.2)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.15.5)
-    forwardable-extended (2.6.0)
-    http_parser.rb (0.8.0)
-    i18n (1.14.1)
-      concurrent-ruby (~> 1.0)
-    jekyll (4.3.2)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-default-layout (0.1.5)
-      jekyll (>= 3.0, < 5.0)
-    jekyll-feed (0.17.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-loading-lazy (0.1.1)
-      jekyll (>= 3.0, < 5.0)
-      nokogiri (>= 1.10, < 2.0)
-    jekyll-optional-front-matter (0.3.2)
-      jekyll (>= 3.0, < 5.0)
-    jekyll-readme-index (0.3.0)
-      jekyll (>= 3.0, < 5.0)
-    jekyll-relative-links (0.7.0)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-sass-converter (2.2.0)
-      sassc (> 2.0.1, < 3.0)
-    jekyll-sitemap (1.4.0)
-      jekyll (>= 3.7, < 5.0)
-    jekyll-titles-from-headings (0.5.3)
-      jekyll (>= 3.3, < 5.0)
-    jekyll-toc (0.18.0)
-      jekyll (>= 3.9)
-      nokogiri (~> 1.12)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.4.0)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    liquid (4.0.4)
-    listen (3.8.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.4.0)
-    nokogiri (1.15.4-x86_64-linux)
-      racc (~> 1.4)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (5.0.3)
-    racc (1.7.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.10.1)
-      ffi (~> 1.0)
-    rexml (3.2.6)
-    rouge (4.1.3)
-    safe_yaml (1.0.5)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    unicode-display_width (2.4.2)
-    webrick (1.8.1)
-
-PLATFORMS
-  x86_64-linux-musl
-
-DEPENDENCIES
-  jekyll-default-layout
-  jekyll-feed
-  jekyll-loading-lazy
-  jekyll-optional-front-matter
-  jekyll-readme-index
-  jekyll-relative-links
-  jekyll-sass-converter (~> 2.2)
-  jekyll-sitemap
-  jekyll-titles-from-headings
-  jekyll-toc
-  webrick
-
-BUNDLED WITH
-   2.3.25
--- a/LICENSE.txt
+++ b/LICENSE.txt
@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Daudix UFO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,42 +1,102 @@
-# Duckquill 🦆🪶
+# Duckquill

 [![Please don't upload to GitHub](https://nogithub.codeberg.page/badge.svg)](https://nogithub.codeberg.page)
 [![status-badge](https://ci.codeberg.org/api/badges/12567/status.svg)](https://ci.codeberg.org/repos/12567)

-[Duckquill](https://daudix-ufo.codeberg.page/duckquill/) is a modern, pretty, and clean [Jekyll](https://jekyllrb.com) template that has the purpose of greatly simplifying the process of rolling up your blog. It aims to let you write simple markdown pages and deploy them to Codeberg or GitLab Pages.
+[Duckquill](https://codeberg.org/daudix-UFO/duckquill) is a modern, pretty, and clean (and very opinionated) [Zola](https://www.getzola.org) 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.

-## Usage
+## Installation

-### 🧪️ Test pages
+First download this theme to your `themes` directory:

- [Demo page](https://daudix-ufo.codeberg.page/duckquill/demo/)
- [Cake Party!](https://daudix-ufo.codeberg.page/duckquill/demo-page/)
- [ActivityPub/Fediverse comments demo](https://daudix-ufo.codeberg.page/duckquill/demo-comments/)
-
-### 🏗️ Build static files
-
-```shell
-./local.sh build
+```sh
+cd themes
+git clone https://codeberg.org/daudix-UFO/duckquill-source.git
 ```

-### ⏱️ Watch static files and serve
+...or add as submodule for easy updating (recommended if you already have git setup on site):

-```shell
-./local.sh serve
+sh
+```
+cd themes
+git submodule add https://codeberg.org/daudix-UFO/duckquill.git
 ```

-_Building guide were shamelessly taken from [here](https://talk.jekyllrb.com/t/local-testing-of-existing-github-jekyll-site/7459/4)_
+and then enable it in your `config.toml`:

-_Initial script (`local.sh`) were taken from [here](https://kuros.in/docker/docker-jekyll-container-to-serve-locally)_
-
-### 🏷️ Rename posts to web-friendly format
-
-```shell
-./rename.sh posts
+```
+theme = "duckquill"
 ```

-## ❤️ Special thanks
+## 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`, if for some reason overridden class are not respected, try using `!important`. This file is empty by default so you should not have issues with doing the `git pull`.
+
+### 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, also change it in `sass/_variables.scss`:
+
+```
+$accent-color: #HEX_COLOR_CODE;
+```
+
+### `[extra]` variables:
+
+- `accent_color`: Accent color used in some browsers set in metadata, for actual accent color see `sass/_variables.scss`
+- `blog_title`: The title of the blog, used in `/blog`
+- `blog_description`: The description of the blog, displayed right under the blog title
+- `date_format`: Allows setting custom date format in [Tera](https://keats.github.io/tera) format, all available variables are listed [here](https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html). Does not apply to comments
+- `hosting`: Where the website source are located, used on 404 page
+- `issues_url`: Link to site bug tracker, if present
+- `source_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 without `https://` part or trailing slashes, e.g `example.org`. Works only if `show_johnvert` are set to `true`
+- `show_copyright`: Whether to display `© Duckquill, 2023`. (true, false)
+- `show_johnvert`: Whether to display [Johnvertisement](https://john.citrons.xyz). (true, false)
+- `show_powered_by`: Whether to display `Powered by Zola and Duckquill`. (true, false)
+- `show_source`: Whether to display `Website source` link. (true, false)
+
+### `[extra.comments]` variables:
+
+- `host`: Mastodon home server, e.g `mstdn.social`
+- `user`: Mastodon username, e.g `Daudix`
+- `token`: Mastodon app token, e.g `jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ`. Can be left empty, but in this case only first 60 comments will be loaded, instructions on how to get one are available [here](https://github.com/cassidyjames/cassidyjames.github.io/blob/47c449a0083113ea5be8d215beb6650ac64929e4/_config.yaml#L48-L52)
+
+## Test pages
+
+- [Demo page](https://duckquill.exozy.me/demo)
+- [Cake Party!](https://duckquill.exozy.me/demo/page)
+- [ActivityPub/Fediverse comments demo](https://duckquill.exozy.me/demo/comments)
+
+## Special thanks ♥

 - [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Mehdi](https://codepen.io/meduzen) for an awesome [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
 - dwb, ejm and jgs for awesome ASCII art
--- a/_config.yml
+++ b/_config.yml
@ -1,69 +0,0 @@
-# Site settings
-title: Duckquill
-baseurl:
-  "" # the subpath of your site, e.g. /blog
-  # usually empty. necessary for building absolute URIs
-  # for metadata header
-url: "https://daudix-ufo.codeberg.page" # the base hostname & protocol for your site
-sourceurl: "https://codeberg.org/daudix-UFO/duckquill-source" # "edit this website" link in the footer
-hosting: "Codeberg" # the hosting of your site, e.g Codeberg
-description: "Duckquill blog template."
-issuesurl: "https://codeberg.org/daudix-UFO/duckquill-source/issues" # issue tracker for website
-permalink: /:title/
-primary-color: "#ffa348" # used in iOS theme. further color customization in _sass/variables.scss
-
-# Mastodon-powered commenting.
-# See https://github.com/cassidyjames/cassidyjames.github.io/blob/main/_config.yaml#L31-L70
-# Values can be overridden in front-matter, e.g.
-# for multi-author blogs or guest posts.
-comments:
-  # Your Mastodon API host; this should be where you have an account
-  host: mstdn.social
-
-  # Optional; vanity domain if configured; host will be used if omitted
-  domain:
-
-  # Used to determine who the original/verified poster is; role may be expanded
-  # in the future (e.g. for moderation)
-  username: Daudix
-
-  # Optional; required to fetch more than 60 replies to any given blog post.
-  # Application access token with read:statuses scope; NOTE: IF INCLUDED, ANYONE
-  # WILL BE ABLE TO READ THE ASSOCIATED ACCOUNT'S PRIVATE STATUSES. It is highly
-  # recommended to use a dedicated bot/API account to create an application with
-  # scope read:statuses.
-  token: jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ
-
-  # Additional verified usernames in username@example.com format. If they are on
-  # the host listed above, OMIT the @example.com
-  verified:
-
-# Build settings
-markdown: kramdown
-timezone: UTC
-exclude: [Gemfile, Gemfile.lock, Dockerfile, local.sh, rename.sh, README.md]
-
-compress_html:
-  blanklines: true
-
-feed:
-  tags:
-    path: "feed/tags/"
-plugins:
-  - jekyll-default-layout
-  - jekyll-feed
-  - jekyll-loading-lazy
-  - jekyll-optional-front-matter
-  - jekyll-readme-index
-  - jekyll-relative-links
-  - jekyll-sitemap
-  - jekyll-titles-from-headings
-  - jekyll-toc
-defaults:
-  - scope:
-      path: "_posts"
-      type: "posts"
-    values:
-      layout: "default"
-      author: "Duckquill"
-      destination: "posts"
--- a/_includes/footer.html
+++ b/_includes/footer.html
@ -1,9 +0,0 @@
-<footer class="site-footer">
-  <p title="Last built at {{ site.time }} ">&copy; {{ site.title }}, 2023</p>
-
-  <p><a href="{{ site.sourceurl }}">Website source</a></p>
-
-  <small>
-    Powered by <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://daudix-ufo.codeberg.page/duckquill">Duckquill</a>
-  </small>
-</footer>
--- a/_includes/head.html
+++ b/_includes/head.html
@ -1,25 +0,0 @@
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="{{ site.primary-color }}"><!-- primary color -->
-
-  <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
-
-  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
-
-  <link rel="stylesheet" href="{{ "/assets/css/style.css" | prepend: site.baseurl }}" />
-  
-  <link rel="icon" type="image/gif" href="{{ "/favicon.png" | prepend: site.baseurl }}" />
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ "/apple-touch-icon.png" | prepend: site.baseurl }}" />
-
-  <!-- Open Graph -->
-  <meta property="og:title" content="{{ site.title }}" />
-  <meta property="og:url" content="{{ site.url }}" />
-  <meta property="og:description" content="{{ site.description }}" />
-  <meta property="og:image" content="{{ "/assets/card.png" | prepend: site.baseurl | prepend: site.url }}" />
-  <meta property="og:image:width" content="600" />
-  <meta property="og:image:height" content="400" />
-  <meta property="og:image:alt" content="A card with Duckquill written on it" />
-</head>
--- a/_layouts/compress.html
+++ b/_layouts/compress.html
@ -1,10 +0,0 @@
---
-# Jekyll layout that compresses HTML
-# v3.1.0
-# http://jch.penibelst.de/
-# © 2014–2015 Anatol Broder
-# MIT License
---
-
-{% capture _LINE_FEED %}
-{% endcapture %}{% if site.compress_html.ignore.envs contains jekyll.environment or site.compress_html.ignore.envs == "all" %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% assign _profile = site.compress_html.profile %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% if _profile and _endings %}{% assign _profile_endings = _content | size | plus: 1 %}{% endif %}{% for _element in site.compress_html.startings %}{% capture _start %}<{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _start %}{% endfor %}{% if _profile and site.compress_html.startings %}{% assign _profile_startings = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.comments == "all" %}{% assign _comments = "<!-- -->" | split: " " %}{% else %}{% assign _comments = site.compress_html.comments %}{% endif %}{% if _comments.size == 2 %}{% capture _comment_befores %}.{{ _content }}{% endcapture %}{% assign _comment_befores = _comment_befores | split: _comments.first %}{% for _comment_before in _comment_befores %}{% if forloop.first %}{% continue %}{% endif %}{% capture _comment_outside %}{% if _carry %}{{ _comments.first }}{% endif %}{{ _comment_before }}{% endcapture %}{% capture _comment %}{% unless _carry %}{{ _comments.first }}{% endunless %}{{ _comment_outside | split: _comments.last | first }}{% if _comment_outside contains _comments.last %}{{ _comments.last }}{% assign _carry = false %}{% else %}{% assign _carry = true %}{% endif %}{% endcapture %}{% assign _content = _content | remove_first: _comment %}{% endfor %}{% if _profile %}{% assign _profile_comments = _content | size | plus: 1 %}{% endif %}{% endif %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% assign _pres_after = "" %}{% if _pres.size != 0 %}{% if site.compress_html.blanklines %}{% assign _lines = _pres.last | split: _LINE_FEED %}{% capture _pres_after %}{% for _line in _lines %}{% assign _trimmed = _line | split: " " | join: " " %}{% if _trimmed != empty or forloop.last %}{% unless forloop.first %}{{ _LINE_FEED }}{% endunless %}{{ _line }}{% endif %}{% endfor %}{% endcapture %}{% else %}{% assign _pres_after = _pres.last | split: " " | join: " " %}{% endif %}{% endif %}{% capture _content %}{{ _content }}{% if _pre_before contains "</pre>" %}<pre{{ _pres.first }}</pre>{% endif %}{% unless _pre_before contains "</pre>" and _pres.size == 1 %}{{ _pres_after }}{% endunless %}{% endcapture %}{% endfor %}{% if _profile %}{% assign _profile_collapse = _content | size | plus: 1 %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{% if _profile and _clippings %}{% assign _profile_clippings = _content | size | plus: 1 %}{% endif %}{{ _content }}{% if _profile %} <table id="compress_html_profile_{{ site.time | date: "%Y%m%d" }}" class="compress_html_profile"> <thead> <tr> <td>Step <td>Bytes <tbody> <tr> <td>raw <td>{{ content | size }}{% if _profile_endings %} <tr> <td>endings <td>{{ _profile_endings }}{% endif %}{% if _profile_startings %} <tr> <td>startings <td>{{ _profile_startings }}{% endif %}{% if _profile_comments %} <tr> <td>comments <td>{{ _profile_comments }}{% endif %}{% if _profile_collapse %} <tr> <td>collapse <td>{{ _profile_collapse }}{% endif %}{% if _profile_clippings %} <tr> <td>clippings <td>{{ _profile_clippings }}{% endif %} </table>{% endif %}{% endif %}
--- a/_layouts/default.html
+++ b/_layouts/default.html
@ -1,22 +0,0 @@
---
-layout: compress
---
-
-<!DOCTYPE html>
-<html>
-
-  {% include head.html %}
-
-  <body>
-
-    {% include navigation.html %}
-
-    <div class="container">
-      {{ content }}
-    </div>
-
-    {% include footer.html %}
-
-  </body>
-
-</html>
--- a/_layouts/post.html
+++ b/_layouts/post.html
@ -1,68 +0,0 @@
---
-layout: default
---
-
-<h1>{{ page.title }}</h1>
-
-<small>
-  <time datetime="{{ page.date | date: "%Y-%m-%d" }}">{{ page.date | date_to_long_string }}</time>
-  {% if page.tags %}
-    {% if page.tags.size > 0 %}
-      • {{ page.tags | join: ', ' }}
-    {% endif %}
-  {% endif %}
-</small>
-
-{% if page.archive %}
-  <div class="highlighter-rouge statement-container archive">
-    <h2>⚠ Archived</h2>
-    {{ page.archive | markdownify }}
-  </div>
-{% endif %}
-
-{% if page.trigger %}
-  <div class="highlighter-rouge statement-container trigger">
-    <h2>⚠ Trigger Warning</h2>
-    {{ page.trigger | markdownify }}
-  </div>
-{% endif %}
-
-{% if page.disclaimer %}
-  <div class="highlighter-rouge statement-container disclaimer">
-    <h2>⚠ Disclaimer(s)</h2>
-    {{ page.disclaimer | markdownify }}
-  </div>
-{% endif %}
-
-{% if page.toc %}
-  <h2>Table of Contents</h2>
-  {{ content | toc }}
-{% else %}
-  {{ content }}
-{% endif %}
-
-{%- if page.comments -%}
-  {%- if page.comments.id -%}
-    {%- include comments.html -%}
-    <hr>
-  {%- endif -%}
-{%- endif -%}
-
-{% if page.next %}
-  <h2>Read Next</h2>
-  <a href="{{ site.baseurl }}{{ page.next.url }}" class="page-link">
-    {{ page.next.title }}
-  </a>
-{% endif %}
-
-{% if page.previous %}
-  <h2>Read Previous</h2>
-  <a href="{{ site.baseurl }}{{ page.previous.url }}" class="page-link">
-    {{ page.previous.title }}
-  </a>
-{% endif %}
-
-<p class="dialog-buttons">
-  <a href="#top" class="inline-button">Go to top</a>
-  <a href="{{ site.issuesurl }}">File an issue</a>
-</p>
--- a/_layouts/posts.html
+++ b/_layouts/posts.html
@ -1,25 +0,0 @@
---
-layout: default
---
-
-{{ content }}
-<h1>{{ page.title }}</h1>
-{{ page.description }}
-
-{% for post in site.posts %}
-  <article>
-    <h2>
-      <a href="{{ site.baseurl }}{{ post.url }}" class="page-link">
-        {{ post.title }}
-      </a>
-    </h2>
-    <small>
-      <time datetime="{{ post.date | date: "%Y-%m-%d" }}">{{ post.date | date_to_long_string }}</time>
-      {% if post.tags %}
-        {% if post.tags.size > 0 %}
-          • {{ post.tags | join: ', ' }}
-        {% endif %}
-      {% endif %}
-    </small>
-  </article>
-{% endfor %}
--- a/_layouts/tags.html
+++ b/_layouts/tags.html
@ -1,16 +0,0 @@
---
-layout: default
---
-
-{{ content }}
-<h1>{{ page.title }}</h1>
-{{ page.description }}
-
-{% for tag in site.tags %}
-  <h3>{{ tag[0] }}</h3>
-  <ul>
-    {% for post in tag[1] %}
-      <li><a href="{{ site.baseurl }}{{ post.url }}" class="page-link">{{ post.title }}</a></li>
-    {% endfor %}
-  </ul>
-{% endfor %}
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@ -1,20 +0,0 @@
-/* Custom styles/overrides */
-
-/* Fix contrast of OP badge/instance in comments (remove if color with higher contrast are used as accent) */
-section#comments {
-  .comment {
-    .avatar-link {
-      &.op::after {
-        color: var(--dark4);
-      }
-    }
-
-    .author {
-      .instance {
-        &.op {
-          color: var(--dark4);
-        }
-      }
-    }
-  }
-}
--- a/_sass/fonts.scss
+++ b/_sass/fonts.scss
@ -1,8 +0,0 @@
-/* Typography */
-@font-face {
-  font-family: "InterVar";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: oblique italic 0deg 10deg;
-  src: url("../fonts/Inter.var.woff2?v=4.0") format("woff2");
-}
--- a/_sass/rouge-github.scss
+++ b/_sass/rouge-github.scss
@ -1,217 +0,0 @@
-.highlight table td {
-  padding: 5px;
-}
-.highlight table pre {
-  margin: 0;
-}
-.highlight .cm {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cp {
-  color: #999999;
-  font-weight: bold;
-}
-.highlight .c1 {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cs {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-.highlight .c,
-.highlight .cd {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-.highlight .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-.highlight .ge {
-  color: #000000;
-  font-style: italic;
-}
-.highlight .gr {
-  color: #aa0000;
-}
-.highlight .gh {
-  color: #999999;
-}
-.highlight .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-.highlight .go {
-  color: #888888;
-}
-.highlight .gp {
-  color: #555555;
-}
-.highlight .gs {
-  font-weight: bold;
-}
-.highlight .gu {
-  color: #aaaaaa;
-}
-.highlight .gt {
-  color: #aa0000;
-}
-.highlight .kc {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kd {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kn {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kp {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kr {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kt {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .k,
-.highlight .kv {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .mf {
-  color: #009999;
-}
-.highlight .mh {
-  color: #009999;
-}
-.highlight .il {
-  color: #009999;
-}
-.highlight .mi {
-  color: #009999;
-}
-.highlight .mo {
-  color: #009999;
-}
-.highlight .m,
-.highlight .mb,
-.highlight .mx {
-  color: #009999;
-}
-.highlight .sb {
-  color: #d14;
-}
-.highlight .sc {
-  color: #d14;
-}
-.highlight .sd {
-  color: #d14;
-}
-.highlight .s2 {
-  color: #d14;
-}
-.highlight .se {
-  color: #d14;
-}
-.highlight .sh {
-  color: #d14;
-}
-.highlight .si {
-  color: #d14;
-}
-.highlight .sx {
-  color: #d14;
-}
-.highlight .sr {
-  color: #009926;
-}
-.highlight .s1 {
-  color: #d14;
-}
-.highlight .ss {
-  color: #990073;
-}
-.highlight .s {
-  color: #d14;
-}
-.highlight .na {
-  color: #008080;
-}
-.highlight .bp {
-  color: #999999;
-}
-.highlight .nb {
-  color: #0086b3;
-}
-.highlight .nc {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .no {
-  color: #008080;
-}
-.highlight .nd {
-  color: #3c5d5d;
-  font-weight: bold;
-}
-.highlight .ni {
-  color: #800080;
-}
-.highlight .ne {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nf {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nl {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nn {
-  color: #555555;
-}
-.highlight .nt {
-  color: #000080;
-}
-.highlight .vc {
-  color: #008080;
-}
-.highlight .vg {
-  color: #008080;
-}
-.highlight .vi {
-  color: #008080;
-}
-.highlight .nv {
-  color: #008080;
-}
-.highlight .ow {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .o {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .w {
-  color: #bbbbbb;
-}
-.highlight {
-  background-color: transparent;
-}
--- a/_sass/variables.scss
+++ b/_sass/variables.scss
@ -1,126 +0,0 @@
-:root {
-  /* GNOME Color Palette */
-  --blue1: rgb(153, 193, 241);
-  --blue2: rgb(98, 160, 234);
-  --blue3: rgb(53, 132, 228);
-  --blue4: rgb(28, 113, 216);
-  --blue5: rgb(26, 95, 180);
-  --green1: rgb(143, 240, 164);
-  --green2: rgb(87, 227, 137);
-  --green3: rgb(51, 209, 122);
-  --green4: rgb(46, 194, 126);
-  --green5: rgb(38, 162, 105);
-  --yellow1: rgb(249, 240, 107);
-  --yellow2: rgb(248, 228, 92);
-  --yellow3: rgb(246, 211, 45);
-  --yellow4: rgb(245, 194, 17);
-  --yellow5: rgb(229, 165, 10);
-  --orange1: rgb(255, 190, 111);
-  --orange2: rgb(255, 163, 72);
-  --orange3: rgb(255, 120, 0);
-  --orange4: rgb(230, 97, 0);
-  --orange5: rgb(198, 70, 0);
-  --red1: rgb(246, 97, 81);
-  --red2: rgb(237, 51, 59);
-  --red3: rgb(224, 27, 36);
-  --red4: rgb(192, 28, 40);
-  --red5: rgb(165, 29, 45);
-  --purple1: rgb(220, 138, 221);
-  --purple2: rgb(192, 97, 203);
-  --purple3: rgb(145, 65, 172);
-  --purple4: rgb(129, 61, 156);
-  --purple5: rgb(97, 53, 131);
-  --brown1: rgb(205, 171, 143);
-  --brown2: rgb(181, 131, 90);
-  --brown3: rgb(152, 106, 68);
-  --brown4: rgb(134, 94, 60);
-  --brown5: rgb(99, 69, 44);
-  --light1: rgb(255, 255, 255);
-  --light2: rgb(246, 245, 244);
-  --light3: rgb(222, 221, 218);
-  --light4: rgb(192, 191, 188);
-  --light5: rgb(154, 153, 150);
-  --dark1: rgb(119, 118, 123);
-  --dark2: rgb(94, 92, 100);
-  --dark3: rgb(61, 56, 70);
-  --dark4: rgb(36, 31, 49);
-  --dark5: rgb(0, 0, 0);
-
-  /* General Setup */
-  --border: var(--light3);
-  --border-radius: 0.75rem;
-  --border-radius-small: 0.5rem;
-  --accent-color: var(--orange2);
-  --secondary-accent-color: var(--purple4);
-  --text: var(--dark4);
-  --background: var(--bg1);
-  --content-width: 720px;
-
-  /* Custom Color Palette */
-  --bg1: rgb(250, 250, 250);
-  --bg2: rgb(255, 255, 255);
-  --bg3: rgb(75, 75, 75);
-
-  --fg01: rgba(0, 0, 0, 0.01);
-  --fg03: rgba(0, 0, 0, 0.03);
-  --fg05: rgba(0, 0, 0, 0.05);
-  --fg07: rgba(0, 0, 0, 0.07);
-  --fg09: rgba(0, 0, 0, 0.09);
-  --fg40: rgba(0, 0, 0, 0.4);
-  --fg50: rgba(0, 0, 0, 0.5);
-
-  --nav-bg: rgba(255, 255, 255, 0.5);
-
-  --purple-bg: rgba(145, 65, 172, 0.1);
-  --purple-fg: rgb(145, 65, 172);
-  --red-bg: rgba(224, 27, 36, 0.1);
-  --red-fg: rgb(224, 27, 36);
-  --yellow-bg: rgba(156, 110, 3, 0.1);
-  --yellow-fg: rgb(156, 110, 3);
-  --orange-bg: rgba(255, 120, 0, 0.1);
-  --orange-fg: rgb(255, 120, 0);
-
-  /* Custom Variables */
-  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
-    0 2px 6px 2px rgba(0, 0, 0, 0.03);
-  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.03),
-    0 2px 6px 2px rgba(0, 0, 0, 0.09), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
-  --glow: var(--accent-color) -6px 0 12px,
-    var(--secondary-accent-color) 6px 0 12px;
-
-  --transition: 200ms;
-  --transition-longer: 400ms;
-  --transition-long: 800ms;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-
-    --text: var(--light2);
-    --background: var(--bg3);
-
-    --fg01: rgba(255, 255, 255, 0.01);
-    --fg03: rgba(255, 255, 255, 0.03);
-    --fg05: rgba(255, 255, 255, 0.05);
-    --fg07: rgba(255, 255, 255, 0.07);
-    --fg09: rgba(255, 255, 255, 0.09);
-    --fg40: rgba(255, 255, 255, 0.4);
-    --fg50: rgba(255, 255, 255, 0.5);
-
-    --bg1: rgb(36, 36, 36);
-    --bg2: rgb(30, 30, 30);
-    --bg3: rgb(11, 11, 11);
-
-    --nav-bg: rgba(0, 0, 0, 0.5);
-
-    --purple-bg: rgba(220, 138, 221, 0.1);
-    --purple-fg: rgb(220, 138, 221);
-    --red-bg: rgba(226, 97, 81, 0.1);
-    --red-fg: rgb(246, 97, 81);
-    --yellow-bg: rgba(248, 228, 92, 0.1);
-    --yellow-fg: rgb(248, 228, 92);
-    --orange-bg: rgba(255, 190, 111, 0.1);
-    --orange-fg: rgb(255, 190, 111);
-  }
-}
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
--- a/assets/card.png
+++ b/assets/card.png
--- a/assets/card.svg
+++ b/assets/card.svg
@ -1,125 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   id="svg10448"
-   version="1.1"
-   viewBox="0 0 600 400.00003"
-   height="400.00003"
-   width="600"
-   sodipodi:docname="card.svg"
-   inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
-   inkscape:export-filename="card.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <sodipodi:namedview
-     id="namedview109"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="false"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="true"
-     inkscape:deskcolor="#1f1f1f"
-     showgrid="false"
-     inkscape:zoom="1.0833333"
-     inkscape:cx="300"
-     inkscape:cy="200.30769"
-     inkscape:window-width="1280"
-     inkscape:window-height="731"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg10448">
-    <inkscape:grid
-       id="grid1"
-       units="px"
-       originx="0"
-       originy="0"
-       spacingx="1"
-       spacingy="1"
-       empcolor="#0099e5"
-       empopacity="0.30196078"
-       color="#0099e5"
-       opacity="0.14901961"
-       empspacing="5"
-       dotted="false"
-       gridanglex="30"
-       gridanglez="30"
-       visible="false" />
-  </sodipodi:namedview>
-  <defs
-     id="defs10442">
-    <rect
-       x="124.22399"
-       y="179.45601"
-       width="417.94308"
-       height="156.17259"
-       id="rect1" />
-    <linearGradient
-       id="linearGradient3935">
-      <stop
-         style="stop-color:#ffa348;stop-opacity:1;"
-         offset="0"
-         id="stop3931" />
-      <stop
-         style="stop-color:#813d9c;stop-opacity:1;"
-         offset="1"
-         id="stop3933" />
-    </linearGradient>
-    <linearGradient
-       xlink:href="#linearGradient3935"
-       id="linearGradient3937"
-       x1="0"
-       y1="0"
-       x2="600"
-       y2="400"
-       gradientUnits="userSpaceOnUse" />
-    <rect
-       x="124.22399"
-       y="179.45601"
-       width="417.94308"
-       height="156.17259"
-       id="rect2" />
-  </defs>
-  <metadata
-     id="metadata10445">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <rect
-     y="0"
-     x="0"
-     width="600"
-     id="rect965"
-     height="400"
-     style="fill:url(#linearGradient3937);fill-opacity:1" />
-  <text
-     xml:space="preserve"
-     id="text2"
-     style="font-style:normal;font-variant:normal;font-weight:800;font-stretch:normal;font-size:64px;line-height:1.25;font-family:Cantarell;-inkscape-font-specification:'Cantarell Ultra-Bold';letter-spacing:-4.5px;white-space:pre;shape-inside:url(#rect2);display:inline;fill:#000000;fill-opacity:0.2;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
-     transform="translate(50.191385,-15.679866)"><tspan
-       x="124.22461"
-       y="236.92788"
-       id="tspan3">Duckquill</tspan></text>
-  <text
-     xml:space="preserve"
-     id="text1"
-     style="font-style:normal;font-variant:normal;font-weight:800;font-stretch:normal;font-size:64px;line-height:1.25;font-family:Cantarell;-inkscape-font-specification:'Cantarell Ultra-Bold';letter-spacing:-4.5px;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#ffffff;fill-opacity:1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round"
-     transform="translate(46.191385,-19.679866)"><tspan
-       x="124.22461"
-       y="236.92788"
-       id="tspan4">Duckquill</tspan></text>
-</svg>
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@ -1,20 +0,0 @@
---
---
-
-/* 
-
-    Duckquill
-    ====================
-
-    based on OS Component Website which shamelessly stolen CSS from systemd
-    https://github.com/jimmac/os-component-website
-    https://github.com/systemd/systemd/tree/main/docs
-
-*/
-
-@import "variables";
-@import "fonts";
-@import "main";
-@import "rouge-github";
-@import "comments";
-@import "custom";
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,47 @@
+title = "Duckquill"
+base_url = "https://duckquill.exozy.me"
+description = "Modern, pretty, and clean theme"
+
+compile_sass = true
+minify_html = true
+generate_feed = true
+feed_filename = "atom.xml"
+build_search_index = false
+
+taxonomies = [
+  {name = "tags", feed = true},
+]
+
+[markdown]
+highlight_code = true
+highlight_theme = "css"
+highlight_themes_css = [
+  { theme = "solarized-dark", filename = "syntax-theme-dark.css" },
+  { theme = "solarized-light", filename = "syntax-theme-light.css" },
+]
+smart_punctuation = true
+
+[extra]
+accent_color = "#ff7800"
+blog_title = "Writings of Duck's Feet"
+blog_description = "Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo"
+date_format = "%d %B %Y"
+hosting = "Codeberg"
+issues_url = "https://codeberg.org/daudix-UFO/duckquill/issues"
+source_url = "https://codeberg.org/daudix-UFO/duckquill"
+nav_links = [
+  {url = "https://codeberg.org/daudix-UFO/duckquill", name = "Repo"},
+  {url = "blog", name = "Blog"},
+]
+
+[extra.footer]
+johnvert_ref = "daudix.exozy.me"
+show_copyright = true
+show_johnvert = false
+show_powered_by = true
+show_source = true
+
+[extra.comments]
+host = "mstdn.social"
+user = "Daudix"
+token = "jTNX9pAV8XEPBby0cPWF6CmGY60kkIy4vidggfxXmoQ"
--- a/content/_index.md
+++ b/content/_index.md
@ -0,0 +1,70 @@
+++
+++
+
+{% crt() %}
+```
+      _          _          _          _          _
+    >(')____,  >(')____,  >(')____,  >(')____,  >(') ___,
+      (` =~~/    (` =~~/    (` =~~/    (` =~~/    (` =~~/
+jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
+```
+{% end %}
+
+# Duckquill
+
+[Duckquill](https://codeberg.org/daudix-UFO/duckquill) is a modern, pretty, and clean (and very opinionated) [Zola](https://www.getzola.org) 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.
+
+Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
+
+- Pretty, yet lightweight. No JavaScript are used.
+- For a very pleasant look, the colors are tinted with an accent color.
+- Proper favicon for modern browsers and Apple device icons.
+- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/SharePreview/) to test.
+- Local copy of the amazing [Inter](https://rsms.me/inter/) and [JetBrains Mono](https://www.jetbrains.com/lp/mono/) fonts. No slowdowns pulling from external hosting.
+- Mobile friendly, with proper dark variant.
+- [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
+
+> See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. Oh and [comments demo](@/demo/comments.md) for showcase of Mastodon-powered comments.
+
+Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</abbr> and let's start!
+
+## Getting started
+
+> If you already have Zola site with Git skip to step #3
+
+Setting up Zola blog with Duckquill is very simple and consists of the following steps:
+
+1. [Install Zola](https://www.getzola.org/documentation/getting-started/installation/) and create default site:
+
+```sh
+zola init blog
+```
+
+2. Initialize Git:
+
+```sh
+git init
+```
+
+3. Add Duckquill as Git submodule for easy updating:
+
+```
+git submodule add https://codeberg.org/daudix-UFO/duckquill.git themes
+```
+
+4. Edit `config.toml` and enable Duckquill theme:
+
+```
+theme = "duckquill"
+```
+
+Voilà! now it's just a matter of changing some settings and writing your first post.
+
+See project's [README](https://codeberg.org/daudix-UFO/duckquill#duckquill) for all available configuration variables and [Zola docs](https://www.getzola.org/documentation/) for everything else.
+
+## Special thanks ♥
+
+- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
+- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered Comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
+- [Mehdi](https://codepen.io/meduzen) for an awesome [CSS Scanlines](https://codepen.io/meduzen/pen/zxbwRV)
+- dwb, ejm and jgs for awesome ASCII art
--- a/content/blog/_index.md
+++ b/content/blog/_index.md
@ -0,0 +1,5 @@
+++
+sort_by = "date"
+template = "blog_list.html"
+page_template = "blog.html"
+++
--- a/content/blog/the-quill-of-duck/index.md
+++ b/content/blog/the-quill-of-duck/index.md
@ -1,39 +1,36 @@
---
-layout: post
-title: "The Quill of Duck"
-tags: Demo Test
-toc: true
-disclaimer: "See [demo](../demo) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments."
-comments:
-  id:
---
+++
+title = "The Quill of Duck"
+date = 2023-08-31
+[taxonomies]
+tags = ["Demo", "Test"]
+[extra]
+toc = true
+disclaimer = """
+See [demo](/demo) for showcase of all Duckquill possibilities, this page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments.
+"""
+[extra.comments]
+id = ""
+++

-![Quill](/assets/posts/2023-08-31/quill.png){:.full.media.hover}
+![Quill](quill.png)

 ## The what?

 This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo.

-## Some info for ya
+## Some info

-Since you are here, lemme tell ya some nice tricks about creating posts
-
-First, the naming. The URLs are very picky about them, so you shouldn't use spaces in them, and preferebly any other "special" character, if you managed to have a lot of posts with ugly names, you can use `rename.sh <DIR>` to fix the mess quickly, it works for any files really, useful for renaming assets.
-
-The first thing in the name of post should be publicaion date, it should be in ISO 8601 format. On \*nix you can use `date -I` to quickly get one.
-
-Now to the front matter, front matter in Jekyll is the weird thing at the top of Markdown file, that has 3 dashes at start and end. It includes needed info about your post so Jekyll can cook it properly. The important ones are `layout` that tells if the page are plain one or post, `title` with... well you get it, `tags` and `toc` that if exists or set to `true` will make Jekyll generate table of contents at top of the post.
+Well, open this file and look at how it's made, it includes all the essential front matter stuff.

 Now to the _Stanley!_

-## The Stanley!
+## The _Stanley_!

 This is the story of a man named _Stanley_.

 _Stanley_ worked for a company in a big building where he was Employee `#427`.

-![The Office](/assets/posts/2023-08-31/The_Office.webp){:.full.media.hover}
-
+![The Office](the-office.webp)
 <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>

 Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard.
--- a/content/blog/the-quill-of-duck/quill.png
+++ b/content/blog/the-quill-of-duck/quill.png
--- a/content/blog/the-quill-of-duck/the-office.webp
+++ b/content/blog/the-quill-of-duck/the-office.webp
--- a/content/demo/comments.md
+++ b/content/demo/comments.md
@ -0,0 +1,6 @@
+++
+template = "blog.html"
+title = "ActivityPub/Fediverse comments demo"
+[extra.comments]
+id = "110896168682002971"
+++
--- a/content/demo/index.md
+++ b/content/demo/index.md
@ -1,24 +1,20 @@
---
-layout: post
-title: "Demo page"
-toc: false
-archive: "This page is, in fact, not archived, meaning it will receive content updates."
-trigger: "This page contains blackjack and hookers, and bad jokes such as this one."
-disclaimer: "
- All tricks in this page are performed by lab boys, don't try this at home.
-
+++
+template = "blog.html"
+title = "Demo Page"
+[extra]
+archive = "This page is, in fact, not archived, meaning it will receive content updates."
+trigger = "This page contains blackjack and hookers, and bad jokes such as this one."
+disclaimer = """
+- All tricks in this page are performed by the lab boys, don't try this at home.
 - Don't expose yourself to 4000° kelvin.
-
 - Don't take party escort submission position.
+- Don't interact with asbestos and moon rocks.
+"""
+++

- Don't interact with asbestos and moon rocks."
---
+Text can be **bold**, _italic_, or ~~strikethrough~~.

-> For ^these banners see page source <abbr title="The thingy wrapped in three dashes at very top of Markdown document">front matter</abbr>
-
-Text can be **bold**, _italic_, or ~~strikethrough~~, it can also be _**thick**_.
-
-[Link to another page](demo-page.md){:.page-link}
+[Link to another page](@/demo/page.md).

 There should be whitespace between paragraphs.

@ -72,7 +68,7 @@ end
 | ok           | good `oreos`      | hmm   |
 | ok           | good `zoute` drop | yumm  |

-### There's a horizontal rule below this
+### There's a horizontal rule below this.

 ---

@ -85,10 +81,10 @@ end

 ### And an ordered list:

-1.  Item one
-1.  Item two
-1.  Item three
-1.  Item four
+1. Item one
+1. Item two
+1. Item three
+1. Item four

 ### And a nested list:

@ -106,15 +102,22 @@ end
  - level 2 item
 - level 1 item

+### Here is a checkboxes:
+
+- [ ] Milk
+- [x] Eggs
+- [x] Flour
+- [ ] Coffee
+
 ### Small image

-![Codeberg icon](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png)
+{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/icon/png/codeberg-logo_icon_blue-64x64.png", alt="Codeberg icon", transparent=true, no_hover=true) }}

 ### Large image

-![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png)
+{{ image(url="https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png", alt="Codeberg horizontal", transparent=true, no_hover=true) }}

-### Definition lists can be used with HTML syntax
+### Definition lists can be used with HTML syntax.

 <dl>
 <dt>Name</dt>
@ -135,27 +138,58 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
 The final element.
 ```

-### Details
+### Extra

-<details><summary>I may be a spoiler, I may be a long text, I may be anything.</summary>
+Alright now that the generic (slightly extended) ~~Jekyll~~ Zola demo page have ended, we can get to the custom stuff, which believe me, are neat.

-Quack-quack!
+#### Shortcodes

-<img class="full media" src="https://random-d.uk/api/randomimg">
+Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks.

-</details>
+##### Image

-### Small
+By default images come with styling, such as round corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.

-<small>Small, cute text that doesn't catch attention.</small>
+Available variables are:

-### Abbreviation
+- `url`: URL to an image.
+- `url_min`: URL to compressed version of an image, original can be opened by clicking on the image.
+- `alt`: Alt text, same as if the text were inside square brackets in Markdown.
+- `full`: Forces image/video to be full-width.
+- `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
+- `transparent`: Removes rounded corners and shadow, useful for transparent images.
+- `no_hover`: Removes zoom on hover.

-The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
+Variables should be comma-separated and be inside the brackets.

-### Special ASCII style
+```
+{{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
+```

-<pre class="ascii">
+{{ image(url="https://i.imgur.com/Fr1ImW9.png", alt="Portal Gun blueprint", no_hover=true) }}
+
+##### Video
+
+Same as images, but with a few differences: `no_hover` and `url_min` are not available.
+
+```
+{{/* video(url="video.webm", alt="This is a video") */}}
+```
+
+{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
+
+##### CRT
+
+Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks.
+
+```
+{%/* crt() */%}
+-> Markdown code block <-
+{%/* end */%}
+```
+
+{% crt() %}
+```
 _____________________________________________
 |.'',        Public_Library_Halls         ,''.|
 |.'.'',                                 ,''.'.|
@ -176,57 +210,39 @@ The <abbr title="American Standard Code for Information Interchange">ASCII</abbr
 |.'.','         /%%%%%%%%%%%%%\         ','.'.|
 |.','          /%%%%%%%%%%%%%%%\          ','.|
 |;____________/%%%%%Spicer%%%%%%\____________;|
-</pre>
+```
+{% end %}

-### Pixel-art without anti-aliasing
+### Captions
+
+Media can have additional text description using the `<figcaption>` HTML tag.

 ```
-{:.pixels}
+![Image](image.pmg)
+<figcaption>The image caption</figcaption>
 ```

-![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.pixels}
-
-[Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}
-
-### Full-width image/video
-
-```
-{:.full}
-```
-
-### Shadow and rounded corners on image/video
-
-```
-{:.media}
-```
-
-### ...With zoom on hover
-
-```
-{:.media.hover}
-```
-
-### All together!
-
-```
-{:.full.media.hover}
-```
-
-![Portal Gun blueprint](https://i.imgur.com/Fr1ImW9.png){:.full.media.hover}
-
-### Image descriptions
-
-![The Office](https://i.imgur.com/ImMAXM3.png){:.media.full}
-
+![The Office](https://i.imgur.com/ImMAXM3.png)
 <figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>

-### Video
+### Accordion

-Everything above can be applied to videos too.
+<details>
+  <summary>I can be a spoiler, I can be a long text, I could be anything.</summary>

-<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>{:.media.full}
+_Quack-quack!_

-<figcaption>Red flower wakes up</figcaption>
+![Cute duck](https://i.imgur.com/EEVSKgV.jpg)
+
+</details>
+
+### Small
+
+<small>Small, cute text that doesn't catch attention.</small>
+
+### Abbreviation
+
+The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!

 ### Keyboard shortcut

@ -236,28 +252,33 @@ Everything above can be applied to videos too.

 <kbd>⌘ Super</kbd> + <kbd>Space</kbd>

+### Highlighted
+
+You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
+
 ### Link to page (rightwards arrow)

 ```
-{:.page-link}
+<a class="page-link" href="demo/demo-page">Link to page</a>
 ```

-[Link to page](demo-page.md){:.page-link}
+<a class="link-page" href="demo/page">Link to page</a>

 ### Link to site (up-rightwards arrow)

 ```
-{:.site-link}
+<a class="site-link" href="https://example.org">Link to site</a>
 ```

-[Link to site](https://example.org){:.site-link}
+<a class="link-site" href="https://example.org">Link to site</a>

 ### Buttons

 ```
-[Go to top](#top){: .inline-button}
-[File an issue]({{site.issuesurl}})
-{: .dialog-buttons}
+<p class="dialog-buttons">
+  <a class="inline-button" href="#top">Go to top</a>
+  <a href="{{site.issuesurl}}">File an issue</a>
+</p>
 ```

-> Look at the end of page xD
+> Look at the end of this page xD
--- a/content/demo/page.md
+++ b/content/demo/page.md
@ -0,0 +1,10 @@
+++
+++
+
+# Welcome to the cake party!
+
+<img class="transparent no-hover" style="width:50%" src="https://i.imgur.com/ZS4LFj8.png"/>
+
+Sadly, the cake is a _lie_
+
+<a class="inline-button" href="demo">Go Crying</a>
--- a/demo-comments.md
+++ b/demo-comments.md
@ -1,7 +0,0 @@
---
-layout: post
-title: "ActivityPub/Fediverse comments demo"
-toc: false
-comments:
-  id: 110896168682002971
---
--- a/demo-page.md
+++ b/demo-page.md
@ -1,12 +0,0 @@
---
-layout: default
-title: "Cake Party!"
---
-
-# Welcome to the cake party!
-
-![](https://i.imgur.com/ZS4LFj8.png){: width="50%"}
-
-Sadly, the cake is a _lie_
-
-[Go Crying](demo.md){: .inline-button}
--- a/favicon.png
+++ b/favicon.png
--- a/index.md
+++ b/index.md
@ -1,63 +0,0 @@
---
-layout: default
---
-
-<pre class="ascii">
-      _          _          _          _          _
-    >(')____,  >(')____,  >(')____,  >(')____,  >(') ___,
-      (` =~~/    (` =~~/    (` =~~/    (` =~~/    (` =~~/
-jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
-</pre>
-
-# Duckquill
-
-[Duckquill](https://codeberg.org/daudix-UFO/duckquill-source) is a modern, pretty, and clean [Jekyll](https://jekyllrb.com) template that has the purpose of greatly simplifying the process of rolling up your blog. It aims to let you write simple markdown pages and deploy them to Codeberg or GitLab Pages.
-
-Edit a bit of metadata and tweak some of the included graphics and have a blog up in minutes!
-
- Pretty, yet lightweight. No JavaScript are used.
- Proper favicon for modern browsers and Apple device icons.
- Mastodon, Lemmy and other social media meta cards for easy sharing. Try [Share Preview](https://apps.gnome.org/app/com.rafaelmardojai.SharePreview) to test.
- Local copy of the amazing [Inter font](https://rsms.me/inter/). No slowdowns pulling from external hosting.
- Mobile friendly, with proper dark variant included.
- [jekyll-compress-html](https://github.com/penibelst/jekyll-compress-html) and [jekyll-loading-lazy](https://github.com/gildesmarais/jekyll-loading-lazy) are included for better experience on slow networks.
- [github-pages](https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/about-github-pages-and-jekyll#plugins)-like experience without actual `github-pages` plugin, since it has a lot of useless stuff like default Jekyll themes, plus some GitHub-specific stuff.
- [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon). Comment using any ActivityPub service by replying to Mastodon post.
-
-> See [demo](demo.md) for showcase of all Duckquill possibilities. Oh and [comments demo](demo-comments.md) for showcase of Mastodon-powered comments.
-
-Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</abbr> and let's start!
-
-## Preparation
-
-This template needs a <abbr title="Continuous Integration – Practice of automating the integration of code changes from multiple contributors into a single software project">CI</abbr> to be built and deployed, using either Codeberg or GitLab Pages are recommended. For Codeberg Pages I've written a [blog post](https://daudix-ufo.codeberg.page/blog/migration-from-github-to-codeberg/#github-pages--codeberg-pages) on step-by-step guide how to get the CI working.
-
-There is an included `.woodpecker.yml` and `.gitlab-ci.yml` that should be easy to adjust to your situation. For additional info see [Codeberg Pages](https://docs.codeberg.org/codeberg-pages/) and [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) docs.
-
-## Getting started
-
-This template includes some useful utilities to make your life easier and keep you sane (looking at you, ruby stuff).
-
-The process of setting up the site locally consists of:
-
- [Install Podman](https://podman.io/docs/installation). On [Fedora Silverblue](https://fedoraproject.org/silverblue) it's already installed
-
- Run `local.sh build` to create a Podman container that uses official Jekyll image, download and install all needed Gems and build the site locally.
-
- Edit the [Jekyll](https://jekyllrb.com) config file -- `_config.yml`.
-
- Replace all mentions and links of `Daudix` and `Duckquill` with yours.
-
- Replace or edit all the graphics. Using [Inkscape](https://inkscape.org) are recommended. If you want to reduce the SVGs size, use [svgo](https://github.com/svg/svgo).
-
- Add/override styles by doing so in `_sass/custom.scss`. doing this instead of modifying styles directly are strongly recommended, as it will allow you to update Duckquill easily.
-
- Test the site locally. Run `local.sh serve`.
-
- `git commit` your changes and push to your remote repo for automatic deployment.
-
-## Special thanks ♥
-
- [Jakub Steiner](https://jimmac.eu) for an awesome [OS Component Website](https://jimmac.github.io/os-component-website), on top of which this whole thing is built
- [Cassidy James](https://cassidyjames.com) for an awesome [Mastodon-powered comments](https://cassidyjames.com/blog/fediverse-blog-comments-mastodon)
- dwb, ejm and jgs for awesome ASCII art
--- a/local.sh
+++ b/local.sh
@ -1,57 +0,0 @@
-#!/usr/bin/env bash
-
-# Script for building and serving Jekyll site locally
-
-check_command() {
-    if ! command -v "$1" &>/dev/null; then
-        echo -e "\033[1;31m$1 is not installed, install $1 to continue\033[0m"
-        exit 1
-    fi
-}
-
-check_command "podman"
-
-set -e
-
-case $1 in
-    'build')
-
-cat << "EOF"
- __           __ __     __ __                       
-|  |--.--.--.|__|  |.--|  |__|.-----.-----.         
-|  _  |  |  ||  |  ||  _  |  ||     |  _  |__ __ __ 
-|_____|_____||__|__||_____|__||__|__|___  |__|__|__|
-                                    |_____|         
-
-EOF
-
-        echo -e "\e[1;32mBuilding Podman image\e[0m"
-        podman build --tag pages .
-
-        echo -e "\e[1;32mBuilding Jekyll site\e[0m"
-        podman run \
-            -it --rm --volume="$PWD:/srv/jekyll:Z" \
-            -w /srv/jekyll -p 4000:4000 pages \
-            bundle exec jekyll build
-    ;;
-    'serve')
-
-cat << "EOF"
-                         __                       
-.-----.-----.----.--.--.|__|.-----.-----.         
-|__ --|  -__|   _|  |  ||  ||     |  _  |__ __ __ 
-|_____|_____|__|  \___/ |__||__|__|___  |__|__|__|
-                                  |_____|         
-
-EOF
-
-        echo -e "\e[1;32mBuilding Podman image\e[0m"
-        podman build --tag pages .
-
-        echo -e "\e[1;32mBuilding Jekyll site\e[0m"    
-        podman run \
-            -it --rm --volume="$PWD:/srv/jekyll:Z" \
-            -w /srv/jekyll -p 4000:4000 pages \
-            bundle exec jekyll serve --incremental --livereload --host 0.0.0.0
-    ;;
-esac
--- a/posts.md
+++ b/posts.md
@ -1,18 +0,0 @@
---
-layout: posts
-title: Posts
-description: Index of all posts published to date.
---
-
-<pre class="ascii">
-
-  __
- (`/\
- `=\/\ __...--~~~~~-._   _.-~~~~~--...__
-  `=\/\               \ /               \\
-   `=\/                V                 \\
-   //_\___--~~~~~~-._  |  _.-~~~~~~--...__\\
-  //  ) (..----~~~~._\ | /_.~~~~----.....__\\
- ===( INK )==========\\|//====================
-__ejm\___/________dwb`---`_____________________
-</pre>
--- a/rename.sh
+++ b/rename.sh
@ -1,52 +0,0 @@
-#!/usr/bin/env bash
-
-# Made by ChatGPT and countless tweak requests
-# Script for renaming files to be web-friendly (kebab-case without special characters)
-
-# Function to rename files
-rename_files() {
-  local dir="$1"
-  cd "$dir" || exit 1
-
-  for file in *; do
-    if [ -f "$file" ]; then
-      # Get the file extension (if any)
-      ext=""
-      if [[ $file == *.* ]]; then
-        ext=".${file##*.}"
-        new_name="${file%$ext}"
-      else
-        new_name="$file"
-      fi
-
-      # Normalize non-ASCII characters to their closest ASCII representation and remove consecutive dashes
-      new_name=$(echo "$new_name" | sed 's/[^[:alnum:]\.]/-/g; s/[[:space:]_]\+/-/g; s/-\+/-/g')
-
-      # Remove leading and trailing dashes
-      new_name="${new_name#-}"
-      new_name="${new_name%-}"
-
-      # Convert the filename to lowercase
-      new_name="${new_name,,}"
-
-      # Add back the file extension (if any)
-      new_name="$new_name$ext"
-
-      # Check if the new name is different from the old one
-      if [ "$file" != "$new_name" ]; then
-        mv -i "$file" "$new_name"
-        echo "Renamed: $file -> $new_name"
-      fi
-    fi
-  done
-}
-
-# Check if a directory argument is provided, otherwise use the current directory
-if [ $# -eq 1 ]; then
-  target_directory="$1"
-else
-  target_directory="."
-fi
-
-# Call the function with the specified directory
-rename_files "$target_directory"
--- a/sass/_comments.scss
+++ b/sass/_comments.scss
@ -1,4 +1,3 @@
-/* Comments */
 section#comments {
  .comment {
    display: grid;
@ -16,12 +15,13 @@ section#comments {

    .avatar-link {
      grid-area: avatar;
+      width: 4rem;
      height: 4rem;
      position: relative;
-      width: 4rem;

      .avatar {
-        margin: unset;
+        all: unset;
+        display: block;
        background-color: var(--bg2);
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
@ -86,9 +86,7 @@ section#comments {
      @extend small;

      font-size: smaller;
-      opacity: 0.9;
      grid-area: time;
-      line-height: 1.5rem;

      &.edited::after {
        content: " *";
@ -127,7 +125,9 @@ section#comments {
        transition: var(--transition);

        img {
-          margin: unset;
+          all: unset;
+          display: block;
+          max-width: 100%;          
        }

        &:hover {
@ -156,7 +156,7 @@ section#comments {
      }
    }

-    // Hide the card from the shared post
+    Hide the card from the shared post
    &:first-of-type .card {
      display: none;
    }
@ -172,7 +172,6 @@ section#comments {
      .boosts {
        cursor: default;
        font-weight: 600;
-        font-variation-settings: "wght" 600; /* needed for webkit */
        font-size: 90%;
        padding: 0.4rem 1rem;
        border-radius: var(--border-radius);
@ -189,7 +188,6 @@ section#comments {
      .faves {
        cursor: default;
        font-weight: 600;
-        font-variation-settings: "wght" 600; /* needed for webkit */
        font-size: 90%;
        padding: 0.4rem 1rem;
        border-radius: var(--border-radius);
@ -205,11 +203,11 @@ section#comments {
    }

    .emoji {
-      margin: unset;
+      all: unset;
      display: inline;
+      width: 1.25rem;
      height: 1.25rem;
      vertical-align: middle;
-      width: 1.25rem;
    }

    .invisible {
@ -223,7 +221,7 @@ section#comments {
    details {
      summary {
        background-image: linear-gradient(
-            90deg,
+            to right,
            transparent,
            transparent 0.4rem,
            var(--bg2) 0.4rem,
@ -238,11 +236,9 @@ section#comments {
            var(--accent-color) 0.3rem,
            var(--accent-color) 0.6rem
          );
-        border-radius: var(--border-radius-small);
-        color: inherit;
+        border-radius: var(--border-radius);
        cursor: pointer;
        box-shadow: var(--shadow);
-        margin-top: 0.925rem;
        padding: 1rem;
      }
    }
--- a/sass/_custom.scss
+++ b/sass/_custom.scss
--- a/sass/_fonts.scss
+++ b/sass/_fonts.scss
@ -0,0 +1,23 @@
+@font-face {
+  font-family: "Inter";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique italic 0deg 10deg;
+  src: url("/fonts/inter.woff2?v=4.0") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  src: url("/fonts/jetbrains-mono.woff2?v=2.304") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  src: url("/fonts/jetbrains-mono-italic.woff2?v=2.304") format("woff2");
+}
--- a/sass/_gnome-hig.scss
+++ b/sass/_gnome-hig.scss
@ -0,0 +1,47 @@
+:root {
+  --blue1: rgb(153, 193, 241);
+  --blue2: rgb(98, 160, 234);
+  --blue3: rgb(53, 132, 228);
+  --blue4: rgb(28, 113, 216);
+  --blue5: rgb(26, 95, 180);
+  --green1: rgb(143, 240, 164);
+  --green2: rgb(87, 227, 137);
+  --green3: rgb(51, 209, 122);
+  --green4: rgb(46, 194, 126);
+  --green5: rgb(38, 162, 105);
+  --yellow1: rgb(249, 240, 107);
+  --yellow2: rgb(248, 228, 92);
+  --yellow3: rgb(246, 211, 45);
+  --yellow4: rgb(245, 194, 17);
+  --yellow5: rgb(229, 165, 10);
+  --orange1: rgb(255, 190, 111);
+  --orange2: rgb(255, 163, 72);
+  --orange3: rgb(255, 120, 0);
+  --orange4: rgb(230, 97, 0);
+  --orange5: rgb(198, 70, 0);
+  --red1: rgb(246, 97, 81);
+  --red2: rgb(237, 51, 59);
+  --red3: rgb(224, 27, 36);
+  --red4: rgb(192, 28, 40);
+  --red5: rgb(165, 29, 45);
+  --purple1: rgb(220, 138, 221);
+  --purple2: rgb(192, 97, 203);
+  --purple3: rgb(145, 65, 172);
+  --purple4: rgb(129, 61, 156);
+  --purple5: rgb(97, 53, 131);
+  --brown1: rgb(205, 171, 143);
+  --brown2: rgb(181, 131, 90);
+  --brown3: rgb(152, 106, 68);
+  --brown4: rgb(134, 94, 60);
+  --brown5: rgb(99, 69, 44);
+  --light1: rgb(255, 255, 255);
+  --light2: rgb(246, 245, 244);
+  --light3: rgb(222, 221, 218);
+  --light4: rgb(192, 191, 188);
+  --light5: rgb(154, 153, 150);
+  --dark1: rgb(119, 118, 123);
+  --dark2: rgb(94, 92, 100);
+  --dark3: rgb(61, 56, 70);
+  --dark4: rgb(36, 31, 49);
+  --dark5: rgb(0, 0, 0);
+}
--- a/sass/_main.scss
+++ b/sass/_main.scss
@ -6,29 +6,31 @@

 html,
 body {
+  font-size: 16px;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  scrollbar-color: var(--fg50) transparent;
+  accent-color: var(--accent-color);
+}
+
+@media only screen and (max-device-width: 480px) {
+  html,
+  body {
+    font-size: 14px;
+  }
 }

 body {
-  font-size: 16px;
-  font-family: "InterVar", sans-serif;
+  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--background);
-  /* ⇩⇩ put footer at the bottom for short pages, such as the 404 ⇩⇩ */
+  // ⇩⇩ put footer at the bottom for short pages, such as the 404 ⇩⇩
  display: grid;
  min-height: 100vh;
-  grid-template-rows: auto minmax(auto, 1fr) auto; /* header, stuff, footer */
-}
-
-@media only screen and (max-device-width: 480px) {
-  body {
-    font-size: 14px;
-  }
+  grid-template-rows: auto minmax(auto, 1fr) auto; // header, stuff, footer
 }

@media (prefers-color-scheme: dark) {
@ -37,7 +39,30 @@ body {
  }
 }

-/* Layout */
+::selection {
+  color: var(--background);
+  background-color: var(--accent-color);
+}
+
+:target {
+  scroll-margin-top: 25vh;
+  animation: fade-in-out var(--transition-long);
+  animation-delay: 1s;
+}
+
+@keyframes fade-in-out {
+  0% {
+    color: initial;
+  }
+  50% {
+    color: var(--accent-color);
+  }
+  100% {
+    color: initial;
+  }
+}
+
+// LAYOUT
 .container {
  width: 80%;
  margin-left: auto;
@ -46,30 +71,12 @@ body {
 }

@media only screen and (max-device-width: 480px) {
-  /*mobile*/
+  // MOBILE
  .container {
    width: 90%;
  }
 }

-:target {
-  scroll-margin-top: 25vh;
-  animation: glow-in-out var(--transition-long);
-  animation-delay: 1s;
-}
-
-@keyframes glow-in-out {
-  0% {
-    text-shadow: none;
-  }
-  50% {
-    text-shadow: var(--glow);
-  }
-  100% {
-    text-shadow: none;
-  }
-}
-
 h1,
 h2,
 h3,
@ -79,21 +86,14 @@ h6 {
  margin: 3rem 0 1rem;
  font-weight: 600;
  line-height: 1.25;
-  font-variation-settings: "wght" 600; /* needed for webkit */
 }

 h1 {
-  font-size: 1.5rem;
-}
-
-@media screen and (min-width: 640px) {
-  h1 {
-    font-size: 1.6rem;
-  }
+  font-size: 2em;
 }

 h2 {
-  font-size: 1.2rem;
+  font-size: 1.4em;
 }

 a {
@ -101,7 +101,6 @@ a {
  text-decoration: none;
  color: var(--accent-color);
  cursor: pointer;
-  font-variation-settings: "wght" 600; /* needed for webkit */
 }

 a:hover {
@ -174,9 +173,17 @@ kbd {
 }

 kbd:active {
+  background-color: var(--fg07);
+  border: 1px solid var(--fg09);
  box-shadow: inset 0 0px 0 var(--fg09);
  vertical-align: bottom;
-  filter: contrast(0.2);
+}
+
+mark {
+  padding: 2px 6px;
+  border-radius: var(--border-radius-small);
+  background-color: var(--marked);
+  color: var(--accent-color);
 }

 figcaption {
@ -188,7 +195,18 @@ figcaption {
  font-size: smaller;
 }

-/* Tables */
+details {
+  background-color: var(--bg2);
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  padding: 1rem;
+
+  &>summary {
+    cursor: pointer;
+  }
+}
+
+// TABLES
 table {
  border-collapse: collapse;
  border-spacing: 0;
@ -217,143 +235,125 @@ th {
  padding: 0;
 }

-/* Make tables vertically aligned to the top */
+// MAKE TABLES VERTICALLY ALIGNED TO THE TOP
 tbody td {
  vertical-align: top;
 }

 /* Media */
-img {
-  display: block;
-  margin: 2rem auto;
-  max-width: 100%;
-}
-
-img.full {
-  width: 100%;
-}
-
-img.pixels {
-  image-rendering: crisp-edges; /* older firefox browsers */
-  image-rendering: pixelated;
-}
-
+img,
 video {
  display: block;
  margin: 2rem auto;
  max-width: 100%;
-}
-
-video.full {
-  width: 100%;
-}
-
-video.pixels {
-  image-rendering: crisp-edges; /* older firefox browsers */
-  image-rendering: pixelated;
-}
-
-.media {
-  border-radius: var(--border-radius-small);
+  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
 }

-.media.hover {
+img {
  transition: var(--transition-longer);
 }

-.media.hover:hover {
+img:not(.no-hover):hover {
  transform: scale(125%);
-  border-radius: unset;
+  border-radius: 0;
  box-shadow: var(--shadow-raised);
 }

@media only screen and (max-device-width: 480px) {
-  /*mobile*/
-  .media.hover:hover {
+  // MOBILE
+  img:not(.no-hover):hover {
    transform: scale(110%);
  }
 }

-/* Navbar */
-.nav-container {
-  display: block;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: var(--content-width);
+.full {
+  width: 100%;
 }

-.nav {
+.pixels {
+  image-rendering: crisp-edges; /* older firefox browsers */
+  image-rendering: pixelated;
+}
+
+.transparent {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+// NAVBAR
+.site-nav {
  position: sticky;
-  top: 0;
+  top: 1rem;
  z-index: 1;
-  background-color: var(--nav-bg);
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  border-bottom: 1px solid var(--fg07);
+  width: 80%;
+  max-width: var(--content-width);
+  margin: 1rem auto;
+  border-radius: var(--border-radius-big);
+  background-color: var(--fg05);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow);
  overflow: auto;
+
+  ul {
+    list-style-type: none;
+    margin: 1rem 0 0;
+    padding: 0;
+    text-align: center;
+  }
+
+  li {
+    color: var(--fg50);
+    display: inline-block;
+  }
+
+  a {
+    display: inline-block;
+    font-size: 0.9rem;
+    padding: 0.4rem 1rem;
+    border-radius: var(--border-radius);
+    background-color: transparent;
+    color: var(--fg50);
+    transition: var(--transition);
+    text-decoration: none;
+  }
+
+  a:hover {
+    background-color: var(--fg05);
+    color: var(--accent-color);
+  }
+
+  a.site-nav-title {
+    line-height: normal;
+    font-size: 1.2rem;
+  }
+
+  svg {
+    transform: translateY(-0.125rem) translateX(-0.125rem);
+  }
 }

-.nav-container {
-  margin: 0.5rem auto;
+@media only screen and (max-device-width: 480px) {
+  .site-nav {
+    position: static;
+    width: 90%;
+  }
+}
+
+.site-nav-container {
+  display: block;
+  margin: 0.5rem 0.5rem;
  position: relative;
  text-align: center;
 }

-.nav-title {
-  color: var(--fg50);
-  display: inline-block;
-  margin: 0;
-}
-
-.nav-title:hover {
-  text-decoration: underline;
-}
-
-.nav ul {
-  list-style-type: none;
-  margin: 1rem 0 0;
-  padding: 0;
-  text-align: center;
-}
-
-.nav li {
-  color: var(--fg50);
-  display: inline-block;
-}
-
-.nav a {
-  display: inline-block;
-  font-weight: 900;
-  font-size: 90%;
-  padding: 0.4rem 1rem;
-  border-radius: var(--border-radius);
-  background-color: transparent;
-  color: var(--fg50);
-  /* transition: var(--transition); */
-}
-
-.nav a:hover {
-  background-color: var(--fg05);
-  /* box-shadow: var(--glow); */
-}
-
-.nav svg {
-  fill: var(--fg50);
-  height: 1rem;
-  width: 1rem;
-  vertical-align: middle;
-  transform: translateY(-0.125rem);
-}
-
@media (min-width: 640px) {
-  .nav-container {
+  .site-nav-container {
    text-align: left;
  }

-  .nav ul {
+  .site-nav ul {
    bottom: 0;
    position: absolute;
    right: 0;
@ -368,16 +368,29 @@ video.pixels {
  margin-top: 4rem;
 }

-/* Link arrows */
-.page-link::after {
+.site-footer {
+  details {
+    all: unset;
+  }
+}
+
+// LINK ARROWS
+.link-page::after {
  content: " →";
 }

-.site-link::after {
+.link-site::after {
  content: " ↗";
 }

-/* Buttons */
+// CENTER LINK ICONS VERTICALLY
+.link-icon {
+  height: 1rem;
+  width: 1rem;
+  vertical-align: middle;
+}
+
+// BUTTONS
 .dialog-buttons {
  display: flex;
  flex-direction: row;
@ -388,96 +401,107 @@ video.pixels {

 .inline-button {
  display: inline-block;
-  font-weight: 900;
-  font-size: 90%;
+  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: var(--border-radius);
  background-color: var(--fg05);
  color: var(--text);
 }

-/* ASCII */
-.ascii {
-  line-height: normal;
-  margin: 3rem 0 1rem;
-  padding: 2px 1rem;
-  max-width: 80vw;
-  overflow-x: auto;
-  transition: var(--transition-long);
+// CRT
+.crt {
+  margin: 1rem 0 1rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);
+  background: var(--crt-bg);

-  background: linear-gradient(to top, var(--text) 0%, transparent 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -moz-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  -moz-text-fill-color: transparent;
-}
-
-.ascii:hover {
-  -webkit-text-fill-color: var(--text);
-  -moz-text-fill-color: var(--text);
-  text-shadow: var(--glow);
-}
-
-@media only screen and (max-device-width: 480px) {
-  /*mobile*/
-  .ascii {
-    max-width: 90vw;
+  pre {
+    text-shadow: var(--accent-color) 0 0 12px;
+    color: var(--accent-color);
+    padding: 1rem 1rem;
+    margin: unset;
+    background-color: unset;
+    background-image: unset;
+    background-size: unset;
+    background-position: unset;
+    box-shadow: unset;
+  }
+  
+  a {
+    color: var(--accent-color);
+    text-decoration: underline;
  }
 }

-@media only screen and (max-device-width: 640px) {
-  /*mobile*/
-  .ascii {
-    display: none;
+.cursor {
+  animation: blicking 1s infinite;
+}
+
+@keyframes blicking {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
  }
 }

-@media (prefers-color-scheme: dark) {
-  .highlight {
-    filter: contrast(0.4) saturate(2);
-  }
+// CODE
+pre,
+code {
+  font-family: "JetBrains Mono", monospace;
 }

-/* Code Blocks */
-.highlighter-rouge {
+pre {
  line-height: normal;
  margin: 1rem 0 1rem;
-  padding: 2px 1rem;
-  border-radius: var(--border-radius-small);
-  background-color: var(--bg2);
-  max-width: 80vw;
+  padding: 1rem 1rem;
+  border-radius: var(--border-radius);
+  max-width: 100vw;
  overflow-x: auto;
  box-shadow: var(--shadow);
+  background-image: linear-gradient(var(--fg03) 1px, transparent 1px),
+    linear-gradient(90deg, var(--fg03) 1px, transparent 1px);
+  background-size: 10px 10px, 10px 10px;
+  background-position: -1px -1px, -1px -1px;
 }

-@media only screen and (max-device-width: 480px) {
-  /*mobile*/
-  .highlighter-rouge {
-    max-width: 90vw;
-  }
+pre code {
+  background-color: unset;
+  border-radius: unset;
+  color: unset;
+  padding: unset;
 }

-.highlighter-rouge * {
-  background-color: transparent;
-}
-
-/* Inline Code */
-code.highlighter-rouge {
+code {
  padding: 2px 6px;
+  border-radius: var(--border-radius-small);
  background-color: var(--fg07);
  color: var(--red-fg);
  box-shadow: none;
 }

-/* Statements */
+// STATEMENTS
 .statement-container {
  margin: 1rem 0 1rem;
-  line-height: normal;
-}
+  padding: 1rem 1rem;
+  border-radius: var(--border-radius);
+  box-shadow: var(--shadow);

-.statement-container h2 {
-  margin: inherit;
+  h2 {
+    margin: 0 0 1rem;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  ul {
+    margin: 0;
+  }
 }

 .archive {
@ -494,3 +518,11 @@ code.highlighter-rouge {
  background-color: var(--yellow-bg);
  color: var(--yellow-fg);
 }
+
+.johnvertisement {
+  margin: 0 auto;
+  display: block;
+  width: min(728px, 100vw);
+  height: min(90px, 12.367vw);
+  border: none;
+}
--- a/sass/_scanlines.scss
+++ b/sass/_scanlines.scss
@ -0,0 +1,99 @@
+// REGULAR SCANLINES SETTINGS
+
+// width of 1 scanline (min.: 1px)
+$scan-width: 2px;
+
+// emulates a damage-your-eyes bad pre-2000 CRT screen ♥ (true, false)
+$scan-crt: true;
+
+// frames-per-second (should be > 1), only applies if $scan-crt: true;
+$scan-fps: 60;
+
+// scanline-color (rgba)
+$scan-color: rgba(black, 0.2);
+
+// set z-index on 8, like in ♥ 8-bits ♥, or…
+// set z-index on 2147483648 or more to enable scanlines on Chrome fullscreen (doesn't work in Firefox or IE);
+// $scan-z-index: 2147483648;
+
+// MOVING SCANLINE SETTINGS
+
+// moving scanline (true, false)
+$scan-moving-line: true;
+
+// opacity of the moving scanline
+$scan-opacity: 0.75;
+
+// MIXINS
+
+// apply CRT animation: @include scan-crt($scan-crt);
+@mixin scan-crt($scan-crt) {
+  @if $scan-crt == true {
+    animation: scanlines 1s steps($scan-fps) infinite;
+  } @else {
+    animation: none;
+  }
+}
+
+// apply CRT animation: @include scan-crt($scan-crt);
+@mixin scan-moving($scan-moving-line) {
+  @if $scan-moving-line == true {
+    animation: scanline 6s linear infinite;
+  } @else {
+    animation: none;
+  }
+}
+
+// CSS .scanlines CLASS
+.scanlines {
+  position: relative;
+  overflow: hidden; // only to animate the unique scanline
+
+  &:before,
+  &:after {
+    display: block;
+    pointer-events: none;
+    content: "";
+    position: absolute;
+  }
+
+  // unique scanline travelling on the screen
+  &:before {
+    // position: absolute;
+    // bottom: 100%;
+    width: 100%;
+    height: $scan-width * 1;
+    // z-index: $scan-z-index + 1;
+    background: $scan-color;
+    opacity: $scan-opacity;
+    // animation: scanline 6s linear infinite;
+    @include scan-moving($scan-moving-line);
+  }
+
+  // the scanlines, so!
+  &:after {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    // z-index: $scan-z-index;
+    background: linear-gradient(to bottom, transparent 50%, $scan-color 51%);
+    background-size: 100% $scan-width * 2;
+    @include scan-crt($scan-crt);
+  }
+}
+
+// ANIMATE UNIQUE SCANLINE
+@keyframes scanline {
+  0% {
+    transform: translate3d(0, 200000%, 0);
+    // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
+  }
+}
+
+@keyframes scanlines {
+  0% {
+    background-position: 0 50%;
+    // bottom: 0%; // to have a continuous scanline move, use this line (here in 0% step) instead of transform and write, in &:before, { position: absolute; bottom: 100%; }
+  }
+}
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@ -0,0 +1,105 @@
+@use "sass:color";
+
+$accent-color: #ff7800;
+
+$crt-bg-l: radial-gradient(
+  color.mix($accent-color, black, 30%),
+  color.mix($accent-color, black, 20%)
+);
+
+$crt-bg-d: radial-gradient(
+  color.mix($accent-color, black, 20%),
+  color.mix($accent-color, black, 10%)
+);
+
+$bg1-l: color.mix($accent-color, rgb(250, 250, 250), 10%);
+$bg2-l: color.mix($accent-color, rgb(255, 255, 255), 20%);
+$bg3-l: color.mix($accent-color, rgb(75, 75, 75), 30%);
+
+$bg1-d: color.mix($accent-color, rgb(36, 36, 36), 15%);
+$bg2-d: color.mix($accent-color, rgb(30, 30, 30), 10%);
+$bg3-d: color.mix($accent-color, rgb(11, 11, 11), 5%);
+
+$marked: color.scale($accent-color, $alpha: -80%);
+
+:root {
+  // GENERAL SETUP
+  --accent-color: #{$accent-color};
+  --text: var(--dark4);
+  --background: var(--bg1);
+  --border: rgba(120, 120, 120, 0.4);
+  --border-radius: 0.75rem;
+  --border-radius-big: 1.2rem;
+  --border-radius-small: 0.5rem;
+  --content-width: 720px;
+
+  // CUSTOM COLOR PALETTE
+  --bg1: #{$bg1-l};
+  --bg2: #{$bg2-l};
+  --bg3: #{$bg3-l};
+
+  --fg01: rgba(0, 0, 0, 0.01);
+  --fg03: rgba(0, 0, 0, 0.03);
+  --fg05: rgba(0, 0, 0, 0.05);
+  --fg07: rgba(0, 0, 0, 0.07);
+  --fg09: rgba(0, 0, 0, 0.09);
+  --fg40: rgba(0, 0, 0, 0.4);
+  --fg50: rgba(0, 0, 0, 0.5);
+
+  --purple-bg: rgba(145, 65, 172, 0.1);
+  --purple-fg: rgb(145, 65, 172);
+  --red-bg: rgba(224, 27, 36, 0.1);
+  --red-fg: rgb(224, 27, 36);
+  --yellow-bg: rgba(156, 110, 3, 0.1);
+  --yellow-fg: rgb(156, 110, 3);
+  --orange-bg: rgba(255, 120, 0, 0.1);
+  --orange-fg: rgb(255, 120, 0);
+
+  --crt-bg: #{$crt-bg-l};
+
+  --marked: #{$marked};
+
+  // CUSTOM VARIABLES
+  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07),
+    0 2px 6px 2px rgba(0, 0, 0, 0.03);
+  --shadow-raised: 0 0 0 1px rgba(0, 0, 0, 0.06),
+    0 2px 6px 2px rgba(0, 0, 0, 0.14), 0 4px 12px 4px rgba(0, 0, 0, 0.06);
+  --drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
+    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+
+  --transition: 200ms;
+  --transition-longer: 400ms;
+  --transition-long: 800ms;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+
+    --text: var(--light2);
+    --background: var(--bg3);
+
+    --fg01: rgba(255, 255, 255, 0.01);
+    --fg03: rgba(255, 255, 255, 0.03);
+    --fg05: rgba(255, 255, 255, 0.05);
+    --fg07: rgba(255, 255, 255, 0.07);
+    --fg09: rgba(255, 255, 255, 0.09);
+    --fg40: rgba(255, 255, 255, 0.4);
+    --fg50: rgba(255, 255, 255, 0.5);
+
+    --bg1: #{$bg1-d};
+    --bg2: #{$bg2-d};
+    --bg3: #{$bg3-d};
+
+    --purple-bg: rgba(220, 138, 221, 0.1);
+    --purple-fg: rgb(220, 138, 221);
+    --red-bg: rgba(226, 97, 81, 0.1);
+    --red-fg: rgb(246, 97, 81);
+    --yellow-bg: rgba(248, 228, 92, 0.1);
+    --yellow-fg: rgb(248, 228, 92);
+    --orange-bg: rgba(255, 190, 111, 0.1);
+    --orange-fg: rgb(255, 190, 111);
+
+    --crt-bg: #{$crt-bg-d};
+  }
+}
--- a/sass/style.scss
+++ b/sass/style.scss
@ -0,0 +1,21 @@
+/* 
+
+    Duckquill
+    ====================
+
+    based on OS Component Website which shamelessly stolen CSS from systemd
+    https://github.com/jimmac/os-component-website
+    https://github.com/systemd/systemd/tree/main/docs
+    scanlines.scss are taken from https://codepen.io/meduzen/pen/zxbwRV
+
+*/
+
+@use "variables";
+@use "gnome-hig";
+@use "fonts";
+@use "main";
+@use "comments";
+@use "scanlines";
+@use "custom";
+@import "syntax-theme-dark.css" (prefers-color-scheme: dark);
+@import "syntax-theme-light.css" (prefers-color-scheme: light);
--- a/static/404.png
+++ b/static/404.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/apple-touch-icon.svg
+++ b/static/apple-touch-icon.svg
@ -28,11 +28,11 @@
     inkscape:deskcolor="#1f1f1f"
     inkscape:document-units="px"
     showgrid="false"
-     inkscape:zoom="2.7222222"
+     inkscape:zoom="2.7777778"
     inkscape:cx="90"
     inkscape:cy="90"
-     inkscape:window-width="1280"
-     inkscape:window-height="731"
+     inkscape:window-width="1366"
+     inkscape:window-height="699"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
@ -63,10 +63,10 @@
         id="stop64" /></linearGradient><linearGradient
       id="linearGradient1"
       inkscape:collect="always"><stop
-         style="stop-color:#ffa348;stop-opacity:1;"
+         style="stop-color:#ff7800;stop-opacity:1;"
         offset="0"
         id="stop1" /><stop
-         style="stop-color:#813d9c;stop-opacity:1;"
+         style="stop-color:#9141ac;stop-opacity:1;"
         offset="1"
         id="stop2" /></linearGradient><linearGradient
       inkscape:collect="always"
--- a/static/card.png
+++ b/static/card.png
--- a/static/card.svg
+++ b/static/card.svg
--- a/static/favicon.aseprite
+++ b/static/favicon.aseprite
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/assets/fonts/Inter.var.woff2
+++ b/assets/fonts/Inter.var.woff2
--- a/static/fonts/jetbrains-mono-italic.woff2
+++ b/static/fonts/jetbrains-mono-italic.woff2
--- a/static/fonts/jetbrains-mono.woff2
+++ b/static/fonts/jetbrains-mono.woff2
--- a/static/robots.txt
+++ b/static/robots.txt
@ -0,0 +1,68 @@
+# Based on https://seirdy.one/robots.txt
+
+# The next three are borrowed from https://www.videolan.org/robots.txt
+
+# "This robot collects content from the Internet for the sole purpose of
+# helping educational institutions prevent plagiarism. [...] we compare
+# student papers against the content we find on the Internet to see if we
+# can find similarities." (http://www.turnitin.com/robot/crawlerinfo.html)
+#  --> fuck off.
+User-Agent: TurnitinBot
+Disallow: /
+
+# "NameProtect engages in crawling activity in search of a wide range of
+# brand and other intellectual property violations that may be of interest
+# to our clients." (http://www.nameprotect.com/botinfo.html)
+#  --> fuck off.
+User-Agent: NPBot
+Disallow: /
+
+# "iThenticateÂ® is a new service we have developed to combat the piracy
+# of intellectual property and ensure the originality of written work for
+# publishers, non-profit agencies, corporations, and newspapers."
+# (http://www.slysearch.com/)
+#  --> fuck off.
+User-Agent: SlySearch
+Disallow: /
+
+# BLEXBot assists internet marketers to get information on the link structure
+# of sites and their interlinking on the web, to avoid any technical and
+# possible legal issues and improve overall online experience.
+# (http://webmeup-crawler.com/)
+# --> fuck off.
+User-Agent: BLEXBot
+Disallow: /
+
+# Providing Intellectual Property professionals with superior brand protection
+# services by artfully merging the latest technology with expert analysis.
+# (https://www.checkmarknetwork.com/spider.html/)
+# "The Internet is just way to big to effectively police alone." (ACTUAL quote)
+# --> fuck off.
+User-agent: CheckMarkNetwork/1.0 (+https://www.checkmarknetwork.com/spider.html)
+Disallow: /
+
+# Stop trademark violations and affiliate non-compliance in paid search.
+# Automatically monitor your partner and affiliates’ online marketing to
+# protect yourself from harmful brand violations and regulatory risks.
+# We regularly crawl websites on behalf of our clients to ensure content
+# compliance with brand and regulatory guidelines.
+# (https://www.brandverity.com/why-is-brandverity-visiting-me)
+# --> fuck off.
+User-agent: BrandVerity/1.0
+Disallow: /
+
+# Eat shit, OpenAI and others.
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: GPTBot
+Disallow: /
+User-agent: CCBot
+Disallow: /
+User-agent: Google-Extended
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-agent: Omgili
+Disallow: /
+User-agent: FacebookBot
+Disallow: /
--- a/static/syntax-theme-dark.css
+++ b/static/syntax-theme-dark.css
@ -0,0 +1,283 @@
+/*
+ * theme "Solarized (dark)" generated by syntect
+ */
+
+.z-code {
+ color: #839496;
+ background-color: #002b36;
+}
+
+.z-comment, .z-meta.z-documentation {
+ color: #586e75;
+}
+.z-string {
+ color: #2aa198;
+}
+.z-string.z-regexp {
+ color: #2aa198;
+}
+.z-constant.z-character.z-escape {
+ color: #dc322f;
+}
+.z-constant.z-numeric {
+ color: #6c71c4;
+}
+.z-variable {
+ color: #268bd2;
+}
+.z-variable.z-function {
+ color: #b58900;
+}
+.z-variable.z-language {
+ color: #d33682;
+}
+.z-keyword {
+ color: #859900;
+}
+.z-meta.z-import .z-keyword, .z-keyword.z-control.z-import, .z-keyword.z-control.z-import.z-from, .z-keyword.z-other.z-import, .z-keyword.z-control.z-at-rule.z-include, .z-keyword.z-control.z-at-rule.z-import {
+ color: #cb4b16;
+}
+.z-keyword.z-operator.z-comparison, .z-keyword.z-operator.z-assignment, .z-keyword.z-operator.z-arithmetic {
+ color: #657b83;
+}
+.z-storage {
+ color: #859900;
+}
+.z-storage.z-modifier {
+ color: #93a1a1;
+}
+.z-keyword.z-control.z-class, .z-entity.z-name, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class {
+ color: #b58900;
+}
+.z-entity.z-other.z-inherited-class {
+ color: #268bd2;
+}
+.z-entity.z-other.z-attribute-name {
+ color: #b58900;
+}
+.z-support, .z-support.z-type, .z-support.z-class {
+ color: #859900;
+}
+.z-entity.z-name.z-function {
+ color: #b58900;
+}
+.z-punctuation.z-definition.z-variable {
+ color: #859900;
+}
+.z-constant, .z-constant.z-language, .z-meta.z-preprocessor {
+ color: #b58900;
+}
+.z-entity.z-name.z-section {
+ color: #cb4b16;
+}
+.z-support.z-function.z-construct, .z-keyword.z-other.z-new {
+ color: #dc322f;
+}
+.z-constant.z-character, .z-constant.z-other {
+ color: #cb4b16;
+}
+.z-entity.z-name.z-tag {
+ color: #268bd2;
+}
+.z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag.z-end {
+ color: #586e75;
+}
+.z-support.z-function {
+ color: #859900;
+}
+.z-punctuation.z-separator.z-continuation {
+ color: #dc322f;
+}
+.z-storage.z-type {
+ color: #268bd2;
+}
+.z-support.z-type.z-exception {
+ color: #cb4b16;
+}
+.z-keyword.z-other.z-special-method {
+ color: #cb4b16;
+}
+.z-invalid {
+ background-color: #6e2e32;
+}
+.z-string.z-quoted.z-double, .z-string.z-quoted.z-single {
+ color: #2aa198;
+}
+.z-punctuation.z-definition.z-string {
+ color: #839496;
+}
+.z-meta.z-brace.z-square, .z-punctuation.z-section.z-brackets {
+ color: #268bd2;
+}
+.z-meta.z-brace.z-round, .z-meta.z-brace.z-curly, .z-punctuation.z-section, .z-punctuation.z-section.z-block, .z-punctuation.z-definition.z-parameters, .z-punctuation.z-section.z-group {
+ color: #657b83;
+}
+.z-support.z-constant.z-color, .z-invalid.z-deprecated.z-color.z-w3c-non-standard-color-name.z-scss {
+ color: #b58900;
+}
+.z-meta.z-selector.z-css {
+ color: #657b83;
+}
+.z-entity.z-name.z-tag.z-css, .z-entity.z-name.z-tag.z-scss, .z-source.z-less .z-keyword.z-control.z-html.z-elements, .z-source.z-sass .z-keyword.z-control.z-untitled {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-class {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-id {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-pseudo-class, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-class {
+ color: #268bd2;
+}
+.z-text.z-html.z-basic .z-meta.z-tag.z-other.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-any.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-block.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-inline.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-structure.z-any.z-html, .z-text.z-html.z-basic .z-source.z-js.z-embedded.z-html, .z-punctuation.z-separator.z-key-value.z-html {
+ color: #657b83;
+}
+.z-text.z-html.z-basic .z-entity.z-other.z-attribute-name.z-html, .z-meta.z-tag.z-xml .z-entity.z-other.z-attribute-name {
+ color: #b58900;
+}
+.z-keyword.z-other.z-special-method.z-ruby {
+ color: #859900;
+}
+.z-variable.z-other.z-constant.z-ruby {
+ color: #b58900;
+}
+.z-constant.z-other.z-symbol.z-ruby {
+ color: #2aa198;
+}
+.z-keyword.z-other.z-special-method.z-ruby {
+ color: #cb4b16;
+}
+.z-meta.z-array .z-support.z-function.z-construct.z-php {
+ color: #b58900;
+}
+.z-entity.z-name.z-function.z-preprocessor.z-c, .z-meta.z-preprocessor.z-c.z-include, .z-meta.z-preprocessor.z-macro.z-c {
+ color: #cb4b16;
+}
+.z-meta.z-preprocessor.z-c.z-include .z-string.z-quoted.z-other.z-lt-gt.z-include.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-begin.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-end.z-c {
+ color: #2aa198;
+}
+.z-other.z-package.z-exclude, .z-other.z-remove {
+ color: #dc322f;
+}
+.z-other.z-add {
+ color: #2aa198;
+}
+.z-punctuation.z-section.z-group.z-tex, .z-punctuation.z-definition.z-arguments.z-begin.z-latex, .z-punctuation.z-definition.z-arguments.z-end.z-latex, .z-punctuation.z-definition.z-arguments.z-latex {
+ color: #dc322f;
+}
+.z-meta.z-group.z-braces.z-tex {
+ color: #b58900;
+}
+.z-string.z-other.z-math.z-tex {
+ color: #b58900;
+}
+.z-variable.z-parameter.z-function.z-latex {
+ color: #cb4b16;
+}
+.z-punctuation.z-definition.z-constant.z-math.z-tex {
+ color: #dc322f;
+}
+.z-text.z-tex.z-latex .z-constant.z-other.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-character.z-math.z-tex {
+ color: #2aa198;
+}
+.z-string.z-other.z-math.z-tex {
+ color: #b58900;
+}
+.z-punctuation.z-definition.z-string.z-begin.z-tex, .z-punctuation.z-definition.z-string.z-end.z-tex {
+ color: #dc322f;
+}
+.z-keyword.z-control.z-label.z-latex, .z-text.z-tex.z-latex .z-constant.z-other.z-general.z-math.z-tex {
+ color: #2aa198;
+}
+.z-variable.z-parameter.z-definition.z-label.z-latex {
+ color: #dc322f;
+}
+.z-support.z-function.z-be.z-latex {
+ color: #859900;
+}
+.z-support.z-function.z-section.z-latex {
+ color: #cb4b16;
+}
+.z-support.z-function.z-general.z-tex {
+ color: #2aa198;
+}
+.z-keyword.z-control.z-ref.z-latex {
+ color: #2aa198;
+}
+.z-storage.z-type.z-class.z-python, .z-storage.z-type.z-function.z-python, .z-storage.z-modifier.z-global.z-python {
+ color: #859900;
+}
+.z-support.z-type.z-exception.z-python {
+ color: #b58900;
+}
+.z-meta.z-scope.z-for-in-loop.z-shell, .z-variable.z-other.z-loop.z-shell {
+ color: #93a1a1;
+}
+.z-meta.z-scope.z-case-block.z-shell, .z-meta.z-scope.z-case-body.z-shell {
+ color: #93a1a1;
+}
+.z-punctuation.z-definition.z-logical-expression.z-shell {
+ color: #dc322f;
+}
+.z-storage.z-modifier.z-c++ {
+ color: #859900;
+}
+.z-support.z-function.z-perl {
+ color: #268bd2;
+}
+.z-meta.z-diff, .z-meta.z-diff.z-header {
+ color: #586e75;
+}
+.z-meta.z-diff.z-range {
+ color: #268bd2;
+}
+.z-markup.z-deleted {
+ color: #dc322f;
+}
+.z-markup.z-changed {
+ color: #b58900;
+}
+.z-markup.z-inserted {
+ color: #859900;
+}
+.z-markup.z-warning {
+ color: #b58900;
+}
+.z-markup.z-error {
+ color: #dc322f;
+}
+.z-markup.z-heading, .z-punctuation.z-definition.z-heading.z-markdown {
+ color: #b58900;
+font-weight: bold;
+}
+.z-markup.z-quote {
+ color: #859900;
+}
+.z-markup.z-italic {
+font-style: italic;
+}
+.z-markup.z-bold {
+font-weight: bold;
+}
+.z-markup.z-underline.z-link.z-markdown, .z-meta.z-link.z-reference .z-constant.z-other.z-reference.z-link.z-markdown {
+ color: #2aa198;
+}
+.z-constant.z-other.z-reference.z-link.z-markdown {
+ color: #6c71c4;
+}
+.z-meta.z-paragraph.z-markdown .z-meta.z-dummy.z-line-break {
+ background-color: #586e75;
+}
+.z-brackethighlighter.z-all {
+ color: #586e75;
+}
+.z-entity.z-name.z-filename.z-find-in-files {
+ color: #2aa198;
+}
+.z-constant.z-numeric.z-line-number.z-find-in-files {
+ color: #586e75;
+}
+.z-variable.z-other.z-readwrite.z-js, .z-variable.z-other.z-object.z-js, .z-variable.z-other.z-constant.z-js {
+ color: #839496;
+}
--- a/static/syntax-theme-light.css
+++ b/static/syntax-theme-light.css
@ -0,0 +1,283 @@
+/*
+ * theme "Solarized (light)" generated by syntect
+ */
+
+.z-code {
+ color: #657b83;
+ background-color: #fdf6e3;
+}
+
+.z-comment, .z-meta.z-documentation {
+ color: #93a1a1;
+}
+.z-string {
+ color: #2aa198;
+}
+.z-string.z-regexp {
+ color: #2aa198;
+}
+.z-constant.z-character.z-escape {
+ color: #dc322f;
+}
+.z-constant.z-numeric {
+ color: #6c71c4;
+}
+.z-variable {
+ color: #268bd2;
+}
+.z-variable.z-function {
+ color: #b58900;
+}
+.z-variable.z-language {
+ color: #d33682;
+}
+.z-keyword {
+ color: #859900;
+}
+.z-meta.z-import .z-keyword, .z-keyword.z-control.z-import, .z-keyword.z-control.z-import.z-from, .z-keyword.z-other.z-import, .z-keyword.z-control.z-at-rule.z-include, .z-keyword.z-control.z-at-rule.z-import {
+ color: #cb4b16;
+}
+.z-keyword.z-operator.z-comparison, .z-keyword.z-operator.z-assignment, .z-keyword.z-operator.z-arithmetic {
+ color: #657b83;
+}
+.z-storage {
+ color: #859900;
+}
+.z-storage.z-modifier {
+ color: #586e75;
+}
+.z-keyword.z-control.z-class, .z-entity.z-name, .z-entity.z-name.z-class, .z-entity.z-name.z-type.z-class {
+ color: #b58900;
+}
+.z-entity.z-other.z-inherited-class {
+ color: #268bd2;
+}
+.z-entity.z-other.z-attribute-name {
+ color: #b58900;
+}
+.z-support, .z-support.z-type, .z-support.z-class {
+ color: #859900;
+}
+.z-entity.z-name.z-function {
+ color: #b58900;
+}
+.z-punctuation.z-definition.z-variable {
+ color: #859900;
+}
+.z-constant, .z-constant.z-language, .z-meta.z-preprocessor {
+ color: #b58900;
+}
+.z-entity.z-name.z-section {
+ color: #cb4b16;
+}
+.z-support.z-function.z-construct, .z-keyword.z-other.z-new {
+ color: #dc322f;
+}
+.z-constant.z-character, .z-constant.z-other {
+ color: #cb4b16;
+}
+.z-entity.z-name.z-tag {
+ color: #268bd2;
+}
+.z-punctuation.z-definition.z-tag.z-html, .z-punctuation.z-definition.z-tag.z-begin, .z-punctuation.z-definition.z-tag.z-end {
+ color: #93a1a1;
+}
+.z-support.z-function {
+ color: #859900;
+}
+.z-punctuation.z-separator.z-continuation {
+ color: #dc322f;
+}
+.z-storage.z-type {
+ color: #268bd2;
+}
+.z-support.z-type.z-exception {
+ color: #cb4b16;
+}
+.z-keyword.z-other.z-special-method {
+ color: #cb4b16;
+}
+.z-invalid {
+ background-color: #ec9489;
+}
+.z-string.z-quoted.z-double, .z-string.z-quoted.z-single {
+ color: #2aa198;
+}
+.z-punctuation.z-definition.z-string {
+ color: #839496;
+}
+.z-meta.z-brace.z-square, .z-punctuation.z-section.z-brackets {
+ color: #268bd2;
+}
+.z-meta.z-brace.z-round, .z-meta.z-brace.z-curly, .z-punctuation.z-section, .z-punctuation.z-section.z-block, .z-punctuation.z-definition.z-parameters, .z-punctuation.z-section.z-group {
+ color: #657b83;
+}
+.z-support.z-constant.z-color, .z-invalid.z-deprecated.z-color.z-w3c-non-standard-color-name.z-scss {
+ color: #b58900;
+}
+.z-meta.z-selector.z-css {
+ color: #657b83;
+}
+.z-entity.z-name.z-tag.z-css, .z-entity.z-name.z-tag.z-scss, .z-source.z-less .z-keyword.z-control.z-html.z-elements, .z-source.z-sass .z-keyword.z-control.z-untitled {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-class {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-id {
+ color: #b58900;
+}
+.z-entity.z-other.z-attribute-name.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-element, .z-entity.z-other.z-attribute-name.z-pseudo-class, .z-entity.z-other.z-attribute-name.z-tag.z-pseudo-class {
+ color: #268bd2;
+}
+.z-text.z-html.z-basic .z-meta.z-tag.z-other.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-any.z-html, .z-text.z-html.z-basic .z-meta.z-tag.z-block.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-inline.z-any, .z-text.z-html.z-basic .z-meta.z-tag.z-structure.z-any.z-html, .z-text.z-html.z-basic .z-source.z-js.z-embedded.z-html, .z-punctuation.z-separator.z-key-value.z-html {
+ color: #657b83;
+}
+.z-text.z-html.z-basic .z-entity.z-other.z-attribute-name.z-html, .z-meta.z-tag.z-xml .z-entity.z-other.z-attribute-name {
+ color: #b58900;
+}
+.z-keyword.z-other.z-special-method.z-ruby {
+ color: #859900;
+}
+.z-variable.z-other.z-constant.z-ruby {
+ color: #b58900;
+}
+.z-constant.z-other.z-symbol.z-ruby {
+ color: #2aa198;
+}
+.z-keyword.z-other.z-special-method.z-ruby {
+ color: #cb4b16;
+}
+.z-meta.z-array .z-support.z-function.z-construct.z-php {
+ color: #b58900;
+}
+.z-entity.z-name.z-function.z-preprocessor.z-c, .z-meta.z-preprocessor.z-c.z-include, .z-meta.z-preprocessor.z-macro.z-c {
+ color: #cb4b16;
+}
+.z-meta.z-preprocessor.z-c.z-include .z-string.z-quoted.z-other.z-lt-gt.z-include.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-begin.z-c, .z-meta.z-preprocessor.z-c.z-include .z-punctuation.z-definition.z-string.z-end.z-c {
+ color: #2aa198;
+}
+.z-other.z-package.z-exclude, .z-other.z-remove {
+ color: #dc322f;
+}
+.z-other.z-add {
+ color: #2aa198;
+}
+.z-punctuation.z-section.z-group.z-tex, .z-punctuation.z-definition.z-arguments.z-begin.z-latex, .z-punctuation.z-definition.z-arguments.z-end.z-latex, .z-punctuation.z-definition.z-arguments.z-latex {
+ color: #dc322f;
+}
+.z-meta.z-group.z-braces.z-tex {
+ color: #b58900;
+}
+.z-string.z-other.z-math.z-tex {
+ color: #b58900;
+}
+.z-variable.z-parameter.z-function.z-latex {
+ color: #cb4b16;
+}
+.z-punctuation.z-definition.z-constant.z-math.z-tex {
+ color: #dc322f;
+}
+.z-text.z-tex.z-latex .z-constant.z-other.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-other.z-general.z-math.z-tex, .z-constant.z-character.z-math.z-tex {
+ color: #2aa198;
+}
+.z-string.z-other.z-math.z-tex {
+ color: #b58900;
+}
+.z-punctuation.z-definition.z-string.z-begin.z-tex, .z-punctuation.z-definition.z-string.z-end.z-tex {
+ color: #dc322f;
+}
+.z-keyword.z-control.z-label.z-latex, .z-text.z-tex.z-latex .z-constant.z-other.z-general.z-math.z-tex {
+ color: #2aa198;
+}
+.z-variable.z-parameter.z-definition.z-label.z-latex {
+ color: #dc322f;
+}
+.z-support.z-function.z-be.z-latex {
+ color: #859900;
+}
+.z-support.z-function.z-section.z-latex {
+ color: #cb4b16;
+}
+.z-support.z-function.z-general.z-tex {
+ color: #2aa198;
+}
+.z-keyword.z-control.z-ref.z-latex {
+ color: #2aa198;
+}
+.z-storage.z-type.z-class.z-python, .z-storage.z-type.z-function.z-python, .z-storage.z-modifier.z-global.z-python {
+ color: #859900;
+}
+.z-support.z-type.z-exception.z-python {
+ color: #b58900;
+}
+.z-meta.z-scope.z-for-in-loop.z-shell, .z-variable.z-other.z-loop.z-shell {
+ color: #586e75;
+}
+.z-meta.z-scope.z-case-block.z-shell, .z-meta.z-scope.z-case-body.z-shell {
+ color: #586e75;
+}
+.z-punctuation.z-definition.z-logical-expression.z-shell {
+ color: #dc322f;
+}
+.z-storage.z-modifier.z-c++ {
+ color: #859900;
+}
+.z-support.z-function.z-perl {
+ color: #268bd2;
+}
+.z-meta.z-diff, .z-meta.z-diff.z-header {
+ color: #93a1a1;
+}
+.z-meta.z-diff.z-range {
+ color: #268bd2;
+}
+.z-markup.z-deleted {
+ color: #dc322f;
+}
+.z-markup.z-changed {
+ color: #b58900;
+}
+.z-markup.z-inserted {
+ color: #859900;
+}
+.z-markup.z-warning {
+ color: #b58900;
+}
+.z-markup.z-error {
+ color: #dc322f;
+}
+.z-markup.z-heading, .z-punctuation.z-definition.z-heading.z-markdown {
+ color: #b58900;
+font-weight: bold;
+}
+.z-markup.z-quote {
+ color: #859900;
+}
+.z-markup.z-italic {
+font-style: italic;
+}
+.z-markup.z-bold {
+font-weight: bold;
+}
+.z-markup.z-underline.z-link.z-markdown, .z-meta.z-link.z-reference .z-constant.z-other.z-reference.z-link.z-markdown {
+ color: #2aa198;
+}
+.z-constant.z-other.z-reference.z-link.z-markdown {
+ color: #6c71c4;
+}
+.z-meta.z-paragraph.z-markdown .z-meta.z-dummy.z-line-break {
+ background-color: #eee8d5;
+}
+.z-brackethighlighter.z-all {
+ color: #93a1a1;
+}
+.z-entity.z-name.z-filename.z-find-in-files {
+ color: #2aa198;
+}
+.z-constant.z-numeric.z-line-number.z-find-in-files {
+ color: #93a1a1;
+}
+.z-variable.z-other.z-readwrite.z-js, .z-variable.z-other.z-object.z-js, .z-variable.z-other.z-constant.z-js {
+ color: #657b83;
+}
--- a/tags.md
+++ b/tags.md
@ -1,20 +0,0 @@
---
-layout: tags
-title: Tags
-description: Index of all tags, of all posts.
---
-
-<pre class="ascii">
-        _
-       | ]
-     .-|=====-.
-     | | TAGS |   
-     |________|___
-          ||
-          ||
-          ||   www                %%%
-   vwv    ||   )_(,;;;,        ,;,\_/ www
-   )_(    ||   \|/ \_/         )_(\|  (_)
-   \|   \ || /\\|/  |/         \| \|// | 
-___\|//jgs||//_\V/_\|//_______\\|//V/\\|/__
-</pre>
--- a/templates/404.html
+++ b/templates/404.html
@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+<img src="404.png" class="full pixels transparent no-hover" />
+
+<h1>Document Not Found</h1>
+
+<p>The requested page could not be found. If you feel this is not normal, then you create an issue on the {{ config.extra.hosting }}.</p>
+
+<p class="dialog-buttons">
+  <a onclick="window.history.go(-1)" class="inline-button">Go Back</a>
+  <a href="{{ config.extra.issues_url }}">File an issue</a>
+</p>
+{% endblock content %}
--- a/templates/base.html
+++ b/templates/base.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+
+{% include "includes/head.html" ignore missing -%}
+
+<body>
+  {% include "includes/nav.html" ignore missing -%}
+  <div class="container">
+  {% block custom %}{%- endblock -%}
+  {% block content %}{%- endblock -%}
+  </div>
+  {% include "includes/footer.html" ignore missing -%}
+</body>
+
+</html>
--- a/templates/blog.html
+++ b/templates/blog.html
@ -0,0 +1,104 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ page.title }}</h1>
+
+{%- if page.date %}
+  <small>
+    <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+      {{- page.date | date(format=config.extra.date_format) -}}
+    </time>
+    
+    {%- if page.taxonomies %}
+      {%- for name, taxon in page.taxonomies %}
+        •
+        {%- for item in taxon %}
+          <a class="link-tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+            <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+              <path
+                fill="currentColor"
+                d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+              />
+            </svg>
+            {{ item }}
+          </a>&nbsp;
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  </small>
+{%- endif %}
+
+{% if page.extra.archive %}
+  <div class="statement-container archive">
+    <h2>⚠ Archived</h2>
+    {{ page.extra.archive | markdown | safe }}
+  </div>
+{% endif %}
+
+{% if page.extra.trigger %}
+  <div class="statement-container trigger">
+    <h2>⚠ Trigger Warning</h2>
+    {{ page.extra.trigger | markdown | safe }}
+  </div>
+{% endif %}
+
+{% if page.extra.disclaimer %}
+  <div class="statement-container disclaimer">
+    <h2>⚠ Disclaimer(s)</h2>
+    {{ page.extra.disclaimer | markdown | safe }}
+  </div>
+{% endif %}
+
+{% if page.extra.toc %}
+  <h2>
+    Table of Contents
+  </h2>
+  <ul>
+  {% for h1 in page.toc %}
+    <li>
+      <a href="{{ h1.permalink | safe }}">{{ h1.title }}</a>
+      {% if h1.children %}
+        <ul>
+          {% for h2 in h1.children %}
+            <li>
+              <a href="{{ h2.permalink | safe }}">{{ h2.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </li>
+  {% endfor %}
+  </ul>
+{% endif %}
+
+{{ page.content | safe }}
+
+{% if page.extra.comments.id %}
+  {% include "includes/comments.html" %}
+  <hr>
+{% endif %}
+
+{% if page.lower or page.higher %}
+  {% if page.lower %}
+  <h2>
+    Read Next
+  </h2>
+  <a class="link-page" href="{{ page.lower.permalink }}">
+    {{ page.lower.title }}
+  </a>
+  {% endif %}
+  {% if page.higher %}
+  <h2>
+    Read Previous
+  </h2>
+  <a class="link-page" href="{{ page.higher.permalink }}">
+    {{ page.higher.title }}
+  </a>
+  {% endif %}
+{% endif %}
+
+<p class="dialog-buttons">
+  <a href="#top" class="inline-button">Go to top</a>
+  <a href="{{ config.extra.issues_url }}">File an issue</a>
+</p>
+{% endblock content %}
--- a/templates/blog_list.html
+++ b/templates/blog_list.html
@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>{{ config.extra.blog_title }}</h1>
+
+<p>{{ config.extra.blog_description }}</p>
+
+<small>
+  <a class="link-page" href="{{ config.base_url }}/tags">Filter by tag</a>
+  <br />
+  From newest to oldest ↓
+</small>
+
+{% for page in section.pages %}
+<article>
+  <h2>
+    <a class="link-page" href="{{ page.permalink | safe }}">{{ page.title }}</a>
+  </h2>
+  <small>
+    <time datetime="{{ page.date | date(format='%+') }}" pubdate>
+      {{- page.date | date(format=config.extra.date_format) -}}
+    </time>
+    {%- if page.taxonomies %}
+      {%- for name, taxon in page.taxonomies %}
+      •
+        {%-for item in taxon %}
+        <a class="link-tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+          <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+            <path
+              fill="currentColor"
+              d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+            />
+          </svg>
+          {{ item }}
+        </a>&nbsp;
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  </small>
+</article>
+{% endfor %} {% endblock content %}
--- a/templates/includes/comments.html
+++ b/templates/includes/comments.html
@ -1,61 +1,50 @@
 <!--
-Taken from https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html
+Based on https://github.com/cassidyjames/cassidyjames.github.io/blob/99782788a7e3ba3cc52d6803010873abd1b02b9e/_includes/comments.html
 which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/commit/45f9750bb53b9f0f6f28399ce4d21785a3bb7d22/_includes/fediverse_comments.html
 -->

-{% if include.host %}
-  {% assign host = include.host %}
-{% elsif page.comments.host %}
-  {% assign host = page.comments.host %}
+{% if page.extra.comments.host %}
+  {% set host = page.extra.comments.host %}
 {% else %}
-  {% assign host = site.comments.host %}
+  {% set host = config.extra.comments.host %}
 {% endif %}

-{% if include.domain %}
-  {% assign domain = include.domain %}
-{% elsif page.comments.domain %}
-  {% assign domain = page.comments.domain %}
-{% elsif site.comments.domain %}
-  {% assign domain = site.comments.domain %}
+{% if page.extra.comments.domain %}
+  {% set domain = page.extra.comments.domain %}
+{% elif config.extra.comments.domain %}
+  {% set domain = config.extra.comments.domain %}
 {% else %}
-  {% assign domain = host %}
+  {% set domain = host %}
 {% endif %}

-{% if include.username %}
-  {% assign username = include.username %}
-{% elsif page.comments.username %}
-  {% assign username = page.comments.username %}
+{% if page.extra.comments.user %}
+  {% set username = page.extra.comments.user %}
 {% else %}
-  {% assign username = site.comments.username %}
+  {% set username = config.extra.comments.user %}
 {% endif %}

-{% if include.token %}
-  {% assign token = include.token %}
-{% elsif page.comments.token %}
-  {% assign token = page.comments.token %}
+{% if page.extra.comments.token %}
+  {% set token = page.extra.comments.token %}
 {% else %}
-  {% assign token = site.comments.token %}
+  {% set token = config.extra.comments.token %}
 {% endif %}

-{% if include.id %}
-  {% assign id = include.id %}
-{% else %}
-  {% assign id = page.comments.id %}
-{% endif %}
+{% set id = page.extra.comments.id %}

-{% if site.comments.verified %}
-  {% assign verified = site.comments.verified | jsonify %}
+{% if config.extra.comments.verified %}
+  {% set verified = config.extra.comments.verified | jsonify %}
 {% else %}
-  {% assign verified = "[]" %}
+  {% set verified = "[]" %}
 {% endif %}

 <section id="comments" class="article comments">
  <h2>Comments</h2>
-  <p>Comment on this blog post by publicly replying to <a href="https://{{ host }}/@{{ username }}/{{ id }}">this Mastodon post</a> using a Mastodon or other ActivityPub/&ZeroWidthSpace;Fediverse account. Known non-private replies are displayed below.</p>
+  <p>Comment on this blog post by publicly replying to <a href="https://{{ host }}/@{{ username }}/{{ id }}">this Mastodon post</a> using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.</p>

  <div id="comments-wrapper">
-    <p><small>No known comments, yet. Reply to <a href="https://{{ host }}/@{{ username }}/{{ id }}">this Mastodon post</a> to add your own!</small></p>
+    <p><small>Press the button below to load comments if they exist, if not, be the first!</small></p>
    <noscript><p>Loading comments relies on JavaScript. Try enabling JavaScript and reloading, or visit <a href="https://{{ host }}/@{{ username }}/{{ id }}">the original post</a> on Mastodon.</p></noscript>
+    <a onclick="loadComments()" class="inline-button">Load comments…</a>
  </div>

  <script>
@ -139,7 +128,6 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
                "alt",
                `@${ status.account.username }@${ instance } avatar`
              );
-              avatarImg.setAttribute("loading", "lazy");

              let avatarPicture = document.createElement("picture");
              avatarPicture.appendChild(avatarSource);
@ -268,8 +256,6 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
                      case "image":
                        mediaElement = document.createElement("img");
                        mediaElement.setAttribute("src", attachment.preview_url);
-                        mediaElement.setAttribute("loading", "lazy");
-                        mediaElement.className = "media hover";

                        if(attachment.description != null) {
                          mediaElement.setAttribute("alt", attachment.description);
@ -285,7 +271,6 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
                        mediaElement.setAttribute("autoplay", "");
                        mediaElement.setAttribute("playsinline", "");
                        mediaElement.setAttribute("loop", "");
-                        mediaElement.className = "media hover";

                        if(attachment.description != null) {
                          mediaElement.setAttribute("aria-title", attachment.description);
@ -304,11 +289,10 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
              } else if(
                status.card != null &&
                status.card.image != null &&
-                !status.card.url.startsWith("{{ site.url }}")
+                !status.card.url.startsWith("{{ config.base_url }}")
              ) {
                let cardImg = document.createElement("img");
                cardImg.setAttribute("src", status.card.image);
-                cardImg.setAttribute("loading", "lazy");

                let cardTitle = document.createElement("h5");
                cardTitle.innerHTML = status.card.title;
@ -389,7 +373,6 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
        img.setAttribute("title", `:${ emoji.shortcode }:`);
        img.setAttribute("width", "20");
        img.setAttribute("height", "20");
-        img.setAttribute("loading", "lazy");

        picture.appendChild(source);
        picture.appendChild(img);
@ -410,18 +393,4 @@ which were inspired by https://codeberg.org/jwildeboer/jwildeboersource/src/comm
      ;
    }
  </script>
-  <script>
-    const commentsSection = document.getElementById("comments");
-
-    const observer = new IntersectionObserver((entries) => {
-      entries.forEach(entry => {
-        if (entry.isIntersecting) {
-          loadComments();
-          observer.disconnect();
-        }
-      });
-    });
-
-    observer.observe(commentsSection);
-  </script>
 </section>
--- a/templates/includes/footer.html
+++ b/templates/includes/footer.html
@ -0,0 +1,21 @@
+<footer class="site-footer">
+  {% if config.extra.footer.show_copyright %}
+  <p title="Last built at {{ now() | date(format='%F %R %Z') }}">&copy; {{ config.title }}, 2023</p>
+  {% endif %}
+
+  {% if config.extra.footer.show_source %}
+  <p><a href="{{ config.extra.source_url }}">Website source</a></p>
+  {% endif %}
+
+  {% if config.extra.footer.show_powered_by %}
+  <p><small>Powered by <a href="https://www.getzola.org">Zola</a> and <a href="https://duckquill.exozy.me">Duckquill</a></small></p>
+  {% endif %}
+
+  {% if config.extra.footer.show_johnvert %}
+  <small>
+    <details><summary>Johnvertisement</summary>
+      <iframe class="johnvertisement" title="Johnvertisement" src="https://john.citrons.xyz/embed?ref={{ config.extra.footer.johnvert_ref }}"></iframe>
+    </details>
+  </small>
+  {% endif %}
+</footer>
--- a/templates/includes/head.html
+++ b/templates/includes/head.html
@ -0,0 +1,20 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="{{ config.extra.accent_color }}" />
+
+  <title>{% block title %}{{ config.title }}{% endblock title %}</title>
+
+  <link href="{{ get_url(path='style.css') }}" rel="stylesheet" />
+
+  <link rel="icon" type="image/gif" href="{{ config.base_url }}/favicon.gif" />
+  <link rel="icon" type="image/png" href="{{ config.base_url }}/favicon.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ config.base_url }}/apple-touch-icon.png" />
+
+  <!-- Open Graph -->
+  <meta property="og:title" content="{{ config.title }}" />
+  <meta property="og:url" content="{{ config.base_url }}" />
+  <meta property="og:description" content="{{ config.description }}" />
+  <meta property="og:image" content="{{ config.base_url }}/card.png" />
+</head>
--- a/templates/includes/nav.html
+++ b/templates/includes/nav.html
@ -1,19 +1,25 @@
-<nav class="nav">
-  <div class="nav-container">
-    <a href="{{ site.baseurl }}/">
-      <h2 class="nav-title">{{ site.title }}</h2>
+<nav class="site-nav">
+  <div class="site-nav-container">
+    <a class="site-nav-title" href="{{ config.base_url }}">
+      {{ config.title }}
    </a>
    <ul>
-      <li><a href="{{ '/' | prepend: relative_url }}">Home</a></li>
-      <li><a href="{{ '/posts' | prepend: site.baseurl }}">Posts</a></li>
-      <li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
-      <li><a href="{{ '/feed.xml' | prepend: site.baseurl }}">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+      {% for link in config.extra.nav_links %}
+      <li>
+        <a href="{{link.url}}">{{link.name}}</a>
+      </li>
+      {% endfor %}
+      <li>
+        <a href="{{ config.base_url }}/atom.xml">
+          <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
            <path
-              d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0" />
+              fill="currentColor"
+              d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0"
+            />
          </svg>
          Feed
-        </a></li>
+        </a>
+      </li>
    </ul>
  </div>
 </nav>
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ section.content | safe }}
+{% endblock content %}
--- a/templates/page.html
+++ b/templates/page.html
@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ page.content | safe }}
+{% endblock content %}
--- a/templates/section.html
+++ b/templates/section.html
@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block content %}
+{{ section.content | safe }}
+{% endblock content %}
--- a/templates/shortcodes/crt.html
+++ b/templates/shortcodes/crt.html
@ -0,0 +1,3 @@
+<div class="crt scanlines">
+  {{ body | markdown | safe }}
+</div>
--- a/templates/shortcodes/image.html
+++ b/templates/shortcodes/image.html
@ -0,0 +1,12 @@
+<a href="{{url}}">
+  <img
+    class="
+      {% if full %}full{% endif %}
+      {% if pixels %}pixels{% endif %}
+      {% if transparent %}transparent{% endif %}
+      {% if no_hover %}no-hover{% endif %}
+    "
+    {% if alt %}alt="{{alt}}"{% endif %}
+    src="{% if url_min %}{{url_min}}{% else %}{{url}}{% endif %}"
+  />
+</a>
--- a/templates/shortcodes/video.html
+++ b/templates/shortcodes/video.html
@ -0,0 +1,10 @@
+<video
+  class="
+    {% if full %}full{% endif %}
+    {% if pixels %}pixels{% endif %}
+    {% if transparent %}transparent{% endif %}
+  "
+  {% if alt %}alt="{{alt}}"{% endif %}
+  controls
+  src="{{url}}">
+</video>
--- a/templates/taxonomy_list.html
+++ b/templates/taxonomy_list.html
@ -0,0 +1,27 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>Tags</h1>
+<small> {{ terms | length }} tags in total </small>
+<article>
+  <br />
+  <br />
+  {% for tag in terms %}
+  <small>
+    <a
+      class="link-tag"
+      href="{{ get_taxonomy_url(kind='tags', name=tag.name) }}"
+    >
+      <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+        <path
+          fill="currentColor"
+          d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+        />
+      </svg>
+      {{ tag.name }}
+    </a>
+    <br />
+  </small>
+  {% endfor %}
+</article>
+{% endblock content %}
--- a/templates/taxonomy_single.html
+++ b/templates/taxonomy_single.html
@ -0,0 +1,40 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1>Posts with tag “{{ term.name }}”</h1>
+<small>
+  <a class="link-page" href="{{ config.base_url }}/tags">See all tags</a>
+  <br />
+  {{ term.pages | length }} posts in total
+</small>
+<article>
+  {% for page in term.pages %}
+  <h2>
+    <a class="link-page" href="{{ page.permalink | safe }}">
+      {{ page.title }}
+    </a>
+  </h2>
+  <small>
+    <time datetime='{{ page.date | date(format='%+') }}' pubdate>
+      {{- page.date | date(format=config.extra.date_format) -}}
+    </time>
+    {%- if page.taxonomies %}
+      {%- for name, taxon in page.taxonomies %}
+        •
+        {%- for item in taxon %}
+          <a class="link-tag" href="{{ get_taxonomy_url(kind=name, name=item) }}">
+            <svg class="link-icon" viewBox="0 0 16 16" width="16" height="16">
+              <path
+                fill="currentColor"
+                d="M4 0C1.785 0 0 1.785 0 4v3.09c0 .847.336 1.66.938 2.262l5.382 5.382c.93.934 2.43.934 3.36 0l4.965-4.964c.98-.98.98-2.56 0-3.54L9.227.812A2.777 2.777 0 0 0 7.266 0H4zm0 2h3.266c.207 0 .402.082.546.227l5.418 5.418a.512.512 0 0 1 0 .71L8.266 13.32a.38.38 0 0 1-.532 0L2.352 7.937A1.198 1.198 0 0 1 2 7.09V4c0-1.098.902-2 2-2zm.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"
+              />
+            </svg>
+            {{ item }}
+          </a>&nbsp;
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  </small>
+  {% endfor %}
+</article>
+{% endblock content %}
--- a/theme.toml
+++ b/theme.toml
@ -0,0 +1,13 @@
+name = "Duckquill"
+description = "Modern, pretty, and clean theme"
+license = "MIT"
+homepage = "https://codeberg.org/daudix-UFO/duckquill"
+min_version = "0.17.2"
+demo = "https://duckquill.exozy.me"
+
+[extra]
+
+[author]
+name = "David Lapshin"
+homepage = "https://daudix.exozy.me"
+