diff --git a/.gitignore b/.gitignore deleted file mode 100644 index b9e7186..0000000 --- a/.gitignore +++ /dev/null @@ -1,5 +0,0 @@ -_site/ -.sass-cache/ -.jekyll-cache/ -.jekyll-metadata -.gem \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml deleted file mode 100644 index 7404d2a..0000000 --- a/.gitlab-ci.yml +++ /dev/null @@ -1,9 +0,0 @@ -image: jekyll/jekyll - -pages: - script: - - bundle install - - bundle exec jekyll build -d public - artifacts: - paths: - - public diff --git a/.woodpecker.yml b/.woodpecker.yml deleted file mode 100644 index 5b64e00..0000000 --- a/.woodpecker.yml +++ /dev/null @@ -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 \ No newline at end of file diff --git a/404.md b/404.md deleted file mode 100644 index ea62e9f..0000000 --- a/404.md +++ /dev/null @@ -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](){: .inline-button} [File an issue]({{site.issuesurl}}) -{: .dialog-buttons} diff --git a/Dockerfile b/Dockerfile deleted file mode 100644 index 37031a9..0000000 --- a/Dockerfile +++ /dev/null @@ -1,5 +0,0 @@ -FROM jekyll/jekyll - -COPY Gemfile* ./ - -RUN chmod -R a+w . && bundle install \ No newline at end of file diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 6b40d1c..0000000 --- a/Gemfile +++ /dev/null @@ -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" \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index e215406..0000000 --- a/Gemfile.lock +++ /dev/null @@ -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 diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000..7aa0771 --- /dev/null +++ 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. diff --git a/README.md b/README.md index 78499e5..7e17617 100644 --- 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 diff --git a/_config.yml b/_config.yml deleted file mode 100644 index abea9c9..0000000 --- a/_config.yml +++ /dev/null @@ -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" diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index 1327efe..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/_includes/head.html b/_includes/head.html deleted file mode 100644 index eb7736f..0000000 --- a/_includes/head.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %} - - - - - - - - - - - - - - - - - - diff --git a/_layouts/compress.html b/_layouts/compress.html deleted file mode 100644 index bb34487..0000000 --- a/_layouts/compress.html +++ /dev/null @@ -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 %}{% 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: "" %}{% 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 "" %}{% endif %}{% unless _pre_before contains "" 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 = " ;; ;" | 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 %}
Step Bytes
raw {{ content | size }}{% if _profile_endings %}
endings {{ _profile_endings }}{% endif %}{% if _profile_startings %}
startings {{ _profile_startings }}{% endif %}{% if _profile_comments %}
comments {{ _profile_comments }}{% endif %}{% if _profile_collapse %}
collapse {{ _profile_collapse }}{% endif %}{% if _profile_clippings %}
clippings {{ _profile_clippings }}{% endif %}
{% endif %}{% endif %} diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index 5acdf12..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: compress ---- - - - - - {% include head.html %} - - - - {% include navigation.html %} - -
- {{ content }} -
- - {% include footer.html %} - - - - diff --git a/_layouts/post.html b/_layouts/post.html deleted file mode 100644 index de8dd0c..0000000 --- a/_layouts/post.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -layout: default ---- - -

{{ page.title }}

- - - - {% if page.tags %} - {% if page.tags.size > 0 %} - • {{ page.tags | join: ', ' }} - {% endif %} - {% endif %} - - -{% if page.archive %} -
-

⚠ Archived

- {{ page.archive | markdownify }} -
-{% endif %} - -{% if page.trigger %} -
-

⚠ Trigger Warning

- {{ page.trigger | markdownify }} -
-{% endif %} - -{% if page.disclaimer %} -
-

⚠ Disclaimer(s)

- {{ page.disclaimer | markdownify }} -
-{% endif %} - -{% if page.toc %} -

Table of Contents

- {{ content | toc }} -{% else %} - {{ content }} -{% endif %} - -{%- if page.comments -%} - {%- if page.comments.id -%} - {%- include comments.html -%} -
- {%- endif -%} -{%- endif -%} - -{% if page.next %} -

Read Next

- - {{ page.next.title }} - -{% endif %} - -{% if page.previous %} -

Read Previous

- - {{ page.previous.title }} - -{% endif %} - -

- Go to top - File an issue -

diff --git a/_layouts/posts.html b/_layouts/posts.html deleted file mode 100644 index f1e4b6a..0000000 --- a/_layouts/posts.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -layout: default ---- - -{{ content }} -

{{ page.title }}

-{{ page.description }} - -{% for post in site.posts %} -
-

- - {{ post.title }} - -

- - - {% if post.tags %} - {% if post.tags.size > 0 %} - • {{ post.tags | join: ', ' }} - {% endif %} - {% endif %} - -
-{% endfor %} diff --git a/_layouts/tags.html b/_layouts/tags.html deleted file mode 100644 index a8d22b5..0000000 --- a/_layouts/tags.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -layout: default ---- - -{{ content }} -

{{ page.title }}

-{{ page.description }} - -{% for tag in site.tags %} -

{{ tag[0] }}

- -{% endfor %} diff --git a/_sass/custom.scss b/_sass/custom.scss deleted file mode 100644 index 0839664..0000000 --- a/_sass/custom.scss +++ /dev/null @@ -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); - } - } - } - } -} diff --git a/_sass/fonts.scss b/_sass/fonts.scss deleted file mode 100644 index a3efb47..0000000 --- a/_sass/fonts.scss +++ /dev/null @@ -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"); -} diff --git a/_sass/rouge-github.scss b/_sass/rouge-github.scss deleted file mode 100644 index 1a6dd03..0000000 --- a/_sass/rouge-github.scss +++ /dev/null @@ -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; -} diff --git a/_sass/variables.scss b/_sass/variables.scss deleted file mode 100644 index f3acf18..0000000 --- a/_sass/variables.scss +++ /dev/null @@ -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); - } -} diff --git a/apple-touch-icon.png b/apple-touch-icon.png deleted file mode 100644 index 5932cfd..0000000 Binary files a/apple-touch-icon.png and /dev/null differ diff --git a/assets/card.png b/assets/card.png deleted file mode 100644 index 77fbc00..0000000 Binary files a/assets/card.png and /dev/null differ diff --git a/assets/card.svg b/assets/card.svg deleted file mode 100644 index c1b9d96..0000000 --- a/assets/card.svg +++ /dev/null @@ -1,125 +0,0 @@ - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - Duckquill - Duckquill - diff --git a/assets/css/style.scss b/assets/css/style.scss deleted file mode 100644 index 946bfdc..0000000 --- a/assets/css/style.scss +++ /dev/null @@ -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"; diff --git a/config.toml b/config.toml new file mode 100644 index 0000000..cd370ef --- /dev/null +++ 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" diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..19295ba --- /dev/null +++ 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 favorite drink 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 diff --git a/content/blog/_index.md b/content/blog/_index.md new file mode 100644 index 0000000..676d150 --- /dev/null +++ b/content/blog/_index.md @@ -0,0 +1,5 @@ ++++ +sort_by = "date" +template = "blog_list.html" +page_template = "blog.html" ++++ diff --git a/_posts/2023-08-30-the-quill-of-duck.md b/content/blog/the-quill-of-duck/index.md similarity index 54% rename from _posts/2023-08-30-the-quill-of-duck.md rename to content/blog/the-quill-of-duck/index.md index ec9dad5..6ddc9bd 100644 --- a/_posts/2023-08-30-the-quill-of-duck.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 ` 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)
The Office where Stanley works, it has yellow floor and beige walls
Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard. diff --git a/assets/posts/2023-08-31/quill.png b/content/blog/the-quill-of-duck/quill.png similarity index 100% rename from assets/posts/2023-08-31/quill.png rename to content/blog/the-quill-of-duck/quill.png diff --git a/assets/posts/2023-08-31/The_Office.webp b/content/blog/the-quill-of-duck/the-office.webp similarity index 100% rename from assets/posts/2023-08-31/The_Office.webp rename to content/blog/the-quill-of-duck/the-office.webp diff --git a/content/demo/comments.md b/content/demo/comments.md new file mode 100644 index 0000000..153abfd --- /dev/null +++ b/content/demo/comments.md @@ -0,0 +1,6 @@ ++++ +template = "blog.html" +title = "ActivityPub/​Fediverse comments demo" +[extra.comments] +id = "110896168682002971" ++++ diff --git a/demo.md b/content/demo/index.md similarity index 51% rename from demo.md rename to content/demo/index.md index 3093913..7a3e059 100644 --- a/demo.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 front matter - -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.
Name
@@ -135,27 +138,58 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i The final element. ``` -### Details +### Extra -
I may be a spoiler, I may be a long text, I may be anything. +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 - +Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks. -
+##### 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, cute text that doesn't catch attention. +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 ASCII 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) */}} +``` -
+{{ 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 ASCII
+```
+{% end %}
 
-### Pixel-art without anti-aliasing
+### Captions
+
+Media can have additional text description using the `
` HTML tag.
 
 ```
-{:.pixels}
+![Image](image.pmg)
+
The image caption

 ```
 
-![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)
 
The Office where Stanley works, it has yellow floor and beige walls

 
-### Video
+### Accordion
 
-Everything above can be applied to videos too.
+

+  I can be a spoiler, I can be a long text, I could be anything.
 
-{:.media.full}
+_Quack-quack!_
 
-
Red flower wakes up

+![Cute duck](https://i.imgur.com/EEVSKgV.jpg)
+
+

+
+### Small
+
+Small, cute text that doesn't catch attention.
+
+### Abbreviation
+
+The ASCII art are awesome!
 
 ### Keyboard shortcut
 
@@ -236,28 +252,33 @@ Everything above can be applied to videos too.
 
 ⌘ Super + Space
 
+### Highlighted
+
+You know what? I'm gonna say some very important stuff, so important that even **bold** is not enough.
+
 ### Link to page (rightwards arrow)
 
 ```
-{:.page-link}
+Link to page
 ```
 
-[Link to page](demo-page.md){:.page-link}
+Link to page
 
 ### Link to site (up-rightwards arrow)
 
 ```
-{:.site-link}
+Link to site
 ```
 
-[Link to site](https://example.org){:.site-link}
+Link to site
 
 ### Buttons
 
 ```
-[Go to top](#top){: .inline-button}
-[File an issue]({{site.issuesurl}})
-{: .dialog-buttons}
+

+  Go to top
+  File an issue
+

 ```
 
-> Look at the end of page xD
+> Look at the end of this page xD
diff --git a/content/demo/page.md b/content/demo/page.md
new file mode 100644
index 0000000..3188457
--- /dev/null
+++ b/content/demo/page.md
@@ -0,0 +1,10 @@
++++
++++
+
+# Welcome to the cake party!
+
+
+
+Sadly, the cake is a _lie_
+
+Go Crying
diff --git a/demo-comments.md b/demo-comments.md
deleted file mode 100644
index 4c23ef9..0000000
--- a/demo-comments.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: post
-title: "ActivityPub/​Fediverse comments demo"
-toc: false
-comments:
-  id: 110896168682002971
----
\ No newline at end of file
diff --git a/demo-page.md b/demo-page.md
deleted file mode 100644
index 27a554b..0000000
--- a/demo-page.md
+++ /dev/null
@@ -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}
diff --git a/favicon.png b/favicon.png
deleted file mode 100644
index 08d8a66..0000000
Binary files a/favicon.png and /dev/null differ
diff --git a/index.md b/index.md
deleted file mode 100644
index 668d476..0000000
--- a/index.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: default
----
-
-
-      _          _          _          _          _
-    >(')____,  >(')____,  >(')____,  >(')____,  >(') ___,
-      (` =~~/    (` =~~/    (` =~~/    (` =~~/    (` =~~/
-jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
-

-
-# 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 favorite drink and let's start!
-
-## Preparation
-
-This template needs a CI 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
diff --git a/local.sh b/local.sh
deleted file mode 100755
index db77e21..0000000
--- a/local.sh
+++ /dev/null
@@ -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
diff --git a/posts.md b/posts.md
deleted file mode 100644
index c887724..0000000
--- a/posts.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-layout: posts
-title: Posts
-description: Index of all posts published to date.
----
-
-
-
-  __
- (`/\
- `=\/\ __...--~~~~~-._   _.-~~~~~--...__
-  `=\/\               \ /               \\
-   `=\/                V                 \\
-   //_\___--~~~~~~-._  |  _.-~~~~~~--...__\\
-  //  ) (..----~~~~._\ | /_.~~~~----.....__\\
- ===( INK )==========\\|//====================
-__ejm\___/________dwb`---`_____________________
-

diff --git a/rename.sh b/rename.sh
deleted file mode 100755
index 3af0690..0000000
--- a/rename.sh
+++ /dev/null
@@ -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"
diff --git a/_sass/comments.scss b/sass/_comments.scss
similarity index 91%
rename from _sass/comments.scss
rename to sass/_comments.scss
index 23e1bb5..bfa08a5 100644
--- 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;
       }
     }
diff --git a/sass/_custom.scss b/sass/_custom.scss
new file mode 100644
index 0000000..e69de29
diff --git a/sass/_fonts.scss b/sass/_fonts.scss
new file mode 100644
index 0000000..b019144
--- /dev/null
+++ 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");
+}
diff --git a/sass/_gnome-hig.scss b/sass/_gnome-hig.scss
new file mode 100644
index 0000000..1533d53
--- /dev/null
+++ 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);
+}
\ No newline at end of file
diff --git a/_sass/main.scss b/sass/_main.scss
similarity index 57%
rename from _sass/main.scss
rename to sass/_main.scss
index e544c5d..ee635cc 100644
--- 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;
+}
diff --git a/sass/_scanlines.scss b/sass/_scanlines.scss
new file mode 100644
index 0000000..4228516
--- /dev/null
+++ 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%; }
+  }
+}
diff --git a/sass/_variables.scss b/sass/_variables.scss
new file mode 100644
index 0000000..f3577c0
--- /dev/null
+++ 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};
+  }
+}
diff --git a/sass/style.scss b/sass/style.scss
new file mode 100644
index 0000000..b70049f
--- /dev/null
+++ 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);
diff --git a/assets/404.png b/static/404.png
similarity index 100%
rename from assets/404.png
rename to static/404.png
diff --git a/static/apple-touch-icon.png b/static/apple-touch-icon.png
new file mode 100644
index 0000000..b0b42ca
Binary files /dev/null and b/static/apple-touch-icon.png differ
diff --git a/apple-touch-icon.svg b/static/apple-touch-icon.svg
similarity index 97%
rename from apple-touch-icon.svg
rename to static/apple-touch-icon.svg
index 19ee356..f6b92c6 100644
--- a/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" />
+image/svg+xmlDuckquillDuckquill
diff --git a/favicon.aseprite b/static/favicon.aseprite
similarity index 100%
rename from favicon.aseprite
rename to static/favicon.aseprite
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000..2fb591e
Binary files /dev/null and b/static/favicon.png differ
diff --git a/assets/fonts/Inter.var.woff2 b/static/fonts/inter.woff2
similarity index 100%
rename from assets/fonts/Inter.var.woff2
rename to static/fonts/inter.woff2
diff --git a/static/fonts/jetbrains-mono-italic.woff2 b/static/fonts/jetbrains-mono-italic.woff2
new file mode 100644
index 0000000..e2a9d2c
Binary files /dev/null and b/static/fonts/jetbrains-mono-italic.woff2 differ
diff --git a/static/fonts/jetbrains-mono.woff2 b/static/fonts/jetbrains-mono.woff2
new file mode 100644
index 0000000..41967ae
Binary files /dev/null and b/static/fonts/jetbrains-mono.woff2 differ
diff --git a/static/robots.txt b/static/robots.txt
new file mode 100644
index 0000000..7454473
--- /dev/null
+++ 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: /
diff --git a/static/syntax-theme-dark.css b/static/syntax-theme-dark.css
new file mode 100644
index 0000000..a18f9ba
--- /dev/null
+++ 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;
+}
diff --git a/static/syntax-theme-light.css b/static/syntax-theme-light.css
new file mode 100644
index 0000000..40ea69e
--- /dev/null
+++ 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;
+}
diff --git a/tags.md b/tags.md
deleted file mode 100644
index d59bf3c..0000000
--- a/tags.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-layout: tags
-title: Tags
-description: Index of all tags, of all posts.
----
-
-
-        _
-       | ]
-     .-|=====-.
-     | | TAGS |   
-     |________|___
-          ||
-          ||
-          ||   www                %%%
-   vwv    ||   )_(,;;;,        ,;,\_/ www
-   )_(    ||   \|/ \_/         )_(\|  (_)
-   \|   \ || /\\|/  |/         \| \|// | 
-___\|//jgs||//_\V/_\|//_______\\|//V/\\|/__
-

diff --git a/templates/404.html b/templates/404.html
new file mode 100644
index 0000000..176559a
--- /dev/null
+++ b/templates/404.html
@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+
+
Document Not Found

+
+
The requested page could not be found. If you feel this is not normal, then you create an issue on the {{ config.extra.hosting }}.

+
+

+  Go Back
+  File an issue
+

+{% endblock content %}
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..2466916
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,15 @@
+
+
+
+{% include "includes/head.html" ignore missing -%}
+
+
+  {% include "includes/nav.html" ignore missing -%}
+  

+  {% block custom %}{%- endblock -%}
+  {% block content %}{%- endblock -%}
+  

+  {% include "includes/footer.html" ignore missing -%}
+
+
+
diff --git a/templates/blog.html b/templates/blog.html
new file mode 100644
index 0000000..561b26a
--- /dev/null
+++ b/templates/blog.html
@@ -0,0 +1,104 @@
+{% extends "base.html" %}
+
+{% block content %}
+
{{ page.title }}

+
+{%- if page.date %}
+  
+    
+    
+    {%- if page.taxonomies %}
+      {%- for name, taxon in page.taxonomies %}
+        •
+        {%- for item in taxon %}
+          
+            
+              
+            
+            {{ item }}
+           
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  
+{%- endif %}
+
+{% if page.extra.archive %}
+  

+    
⚠ Archived

+    {{ page.extra.archive | markdown | safe }}
+  

+{% endif %}
+
+{% if page.extra.trigger %}
+  

+    
⚠ Trigger Warning

+    {{ page.extra.trigger | markdown | safe }}
+  

+{% endif %}
+
+{% if page.extra.disclaimer %}
+  

+    
⚠ Disclaimer(s)

+    {{ page.extra.disclaimer | markdown | safe }}
+  

+{% endif %}
+
+{% if page.extra.toc %}
+  

+    Table of Contents
+  

+  
    
+  {% for h1 in page.toc %}
+    
  • 
+      {{ h1.title }}
+      {% if h1.children %}
+        
+      {% endif %}
+    
    • 
+  {% endfor %}
+  

+{% endif %}
+
+{{ page.content | safe }}
+
+{% if page.extra.comments.id %}
+  {% include "includes/comments.html" %}
+  

+{% endif %}
+
+{% if page.lower or page.higher %}
+  {% if page.lower %}
+  

+    Read Next
+  

+  
+    {{ page.lower.title }}
+  
+  {% endif %}
+  {% if page.higher %}
+  

+    Read Previous
+  

+  
+    {{ page.higher.title }}
+  
+  {% endif %}
+{% endif %}
+
+

+  Go to top
+  File an issue
+

+{% endblock content %}
diff --git a/templates/blog_list.html b/templates/blog_list.html
new file mode 100644
index 0000000..d883aa5
--- /dev/null
+++ b/templates/blog_list.html
@@ -0,0 +1,41 @@
+{% extends "base.html" %}
+
+{% block content %}
+
{{ config.extra.blog_title }}

+
+
{{ config.extra.blog_description }}

+
+
+  Filter by tag
+  

+  From newest to oldest ↓
+
+
+{% for page in section.pages %}
+

+  

+    {{ page.title }}
+  

+  
+    
+    {%- if page.taxonomies %}
+      {%- for name, taxon in page.taxonomies %}
+      •
+        {%-for item in taxon %}
+        
+          
+            
+          
+          {{ item }}
+         
+        {%- endfor %}
+      {%- endfor %}
+    {%- endif %}
+  
+

+{% endfor %} {% endblock content %}
diff --git a/_includes/comments.html b/templates/includes/comments.html
similarity index 86%
rename from _includes/comments.html
rename to templates/includes/comments.html
index 7a2a301..13e9e2c 100644
--- a/_includes/comments.html
+++ b/templates/includes/comments.html
@@ -1,61 +1,50 @@
 
 
-{% 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 %}
 
 

   
Comments

-  
Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/​Fediverse account. Known non-private replies are displayed below.

+  
Comment on this blog post by publicly replying to this Mastodon post using a Mastodon or other ActivityPub/Fediverse account. Known non-private replies are displayed below.

 
   

-    
No known comments, yet. Reply to this Mastodon post to add your own!

+    
Press the button below to load comments if they exist, if not, be the first!

     
+    Load comments…
   

 
   
-  
 

diff --git a/templates/includes/footer.html b/templates/includes/footer.html
new file mode 100644
index 0000000..e780b67
--- /dev/null
+++ b/templates/includes/footer.html
@@ -0,0 +1,21 @@
+

+  {% if config.extra.footer.show_copyright %}
+  
© {{ config.title }}, 2023

+  {% endif %}
+
+  {% if config.extra.footer.show_source %}
+  
Website source

+  {% endif %}
+
+  {% if config.extra.footer.show_powered_by %}
+  
Powered by Zola and Duckquill

+  {% endif %}
+
+  {% if config.extra.footer.show_johnvert %}
+  
+    
Johnvertisement
+      
+    

+  
+  {% endif %}
+

diff --git a/templates/includes/head.html b/templates/includes/head.html
new file mode 100644
index 0000000..03408b1
--- /dev/null
+++ b/templates/includes/head.html
@@ -0,0 +1,20 @@
+
+  
+  
+  
+  
+
+  {% block title %}{{ config.title }}{% endblock title %}
+
+  
+
+  
+  
+  
+
+  
+  
+  
+  
+  
+
diff --git a/_includes/navigation.html b/templates/includes/nav.html
similarity index 51%
rename from _includes/navigation.html
rename to templates/includes/nav.html
index 66ef862..11910de 100644
--- a/_includes/navigation.html
+++ b/templates/includes/nav.html
@@ -1,19 +1,25 @@
-