feat: Demo updates

I guess it's ready to be shown to Masto folks!

_includes/footer.html

@@ -4,6 +4,6 @@
   <p><a href="{{ site.sourceurl }}">Website source</a></p>
 
   <small>
-    Powered by <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://codeberg.org/daudix-UFO/duckquill-source">Duckquill</a>
+    Powered by <a href="https://jekyllrb.com">Jekyll</a> and <a href="https://daudix-ufo.codeberg.page/duckquill">Duckquill</a>
   </small>
 </footer>

_posts/2023-08-30-the-quill-of-duck.md

@@ -3,6 +3,7 @@ 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:
 ---
@@ -11,7 +12,19 @@ comments:
 
 ## The what?
 
-This is a Duckquill post example, this post has nothing but a bunch of text and random formattings, acting like a demo.
+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
+
+Since you are here, lemme tell ya some nice tricks about creating posts
+
+First, the naming. The URLs are very picky about them, so you shouldn't use spaces in them, and preferebly any other "special" character, if you managed to have a lot of posts with ugly names, you can use `rename.sh <DIR>` to fix the mess quickly, it works for any files really, useful for renaming assets.
+
+The first thing in the name of post should be publicaion date, it should be in ISO 8601 format. On \*nix you can use `date -I` to quickly get one.
+
+Now to the front matter, front matter in Jekyll is the weird thing at the top of Markdown file, that has 3 dashes at start and end. It includes needed info about your post so Jekyll can cook it properly. The important ones are `layout` that tells if the page are plain one or post, `title` with... well you get it, `tags` and `toc` that if exists or set to `true` will make Jekyll generate table of contents at top of the post.
+
+Now to the _Stanley!_
 
 ## The Stanley!
 
@@ -21,6 +34,8 @@ _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}
 
+<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
+
 Employee `#427`'s job was simple: he sat at his desk in Room `427` and he pushed buttons on a keyboard.
 
 Orders came to him through a monitor on his desk telling him what buttons to push, how long to push them, and in what order.

_sass/custom.scss

@@ -1,4 +1,6 @@
 /* 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 {

_sass/main.scss

@@ -179,6 +179,15 @@ kbd:active {
   filter: contrast(0.2);
 }
 
+figcaption {
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+  display: block;
+  text-align: center;
+  color: var(--fg50);
+  font-size: smaller;
+}
+
 /* Tables */
 table {
   border-collapse: collapse;
@@ -235,6 +244,15 @@ video {
   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);
   box-shadow: var(--shadow);

demo.md

@@ -14,6 +14,8 @@ disclaimer: "
 - Don't interact with asbestos and moon rocks."
 ---
 
+> For ^these banners see page source <abbr title="The thingy wrapped in three dashes at very top of Markdown document">front matter</abbr>
+
 Text can be **bold**, _italic_, or ~~strikethrough~~, it can also be _**thick**_.
 
 [Link to another page](../demo-page){:.page-link}
@@ -70,7 +72,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
 
 ---
 
@@ -112,7 +114,7 @@ end
 
 ![Codeberg horizontal](https://codeberg.org/Codeberg/Design/raw/branch/main/logo/horizontal/png/codeberg-logo_horizontal_blue-850x250.png)
 
-### Definition lists can be used with HTML syntax.
+### Definition lists can be used with HTML syntax
 
 <dl>
 <dt>Name</dt>
@@ -133,39 +135,100 @@ Long, single-line code blocks should not wrap. They should horizontally scroll i
 The final element.
 ```
 
-### Extra
+### Details
 
-Display pixel-art without filtering.
+<details><summary>I may be a spoiler, I may be a long text, I may be anything.</summary>
+
+Quack-quack!
+
+<img class="full media" src="https://random-d.uk/api/randomimg">
+
+</details>
+
+### Small
+
+<small>Small, cute text that doesn't catch attention.</small>
+
+### Abbreviation
+
+The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art are awesome!
+
+### Special ASCII style
+
+<pre class="ascii">
+ _____________________________________________
+|.'',        Public_Library_Halls         ,''.|
+|.'.'',                                 ,''.'.|
+|.'.'.'',                             ,''.'.'.|
+|.'.'.'.'',                         ,''.'.'.'.|
+|.'.'.'.'.|                         |.'.'.'.'.|
+|.'.'.'.'.|===;                 ;===|.'.'.'.'.|
+|.'.'.'.'.|:::|',             ,'|:::|.'.'.'.'.|
+|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
+|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
+|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
+|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
+|.'.'.'.'.|---|','   /%%%\   ','|---|.'.'.'.'.|
+|.'.'.'.'.|===:'    /%%%%%\    ':===|.'.'.'.'.|
+|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
+|.'.'.'.','       /%%%%%%%%%\       ','.'.'.'.|
+|.'.'.','        /%%%%%%%%%%%\        ','.'.'.|
+|.'.','         /%%%%%%%%%%%%%\         ','.'.|
+|.','          /%%%%%%%%%%%%%%%\          ','.|
+|;____________/%%%%%Spicer%%%%%%\____________;|
+</pre>
+
+### Pixel-art without anti-aliasing
 
 ```
 {:.pixels}
 ```
 
-![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.full.pixels}
+![Pixels](https://pixeljoint.com/files/icons/full/animation_rewinded_mostfinal.gif){:.pixels}
 
 [Source](https://pixeljoint.com/pixelart/15027.htm){:.site-link}
 
-Full-width.
+### Full-width image/video
 
 ```
 {:.full}
 ```
 
-Shadow and round corners.
+### Shadow and rounded corners on image/video
 
 ```
 {:.media}
 ```
 
-...With zoom on hover.
+### ...With zoom on hover
 
 ```
 {:.media.hover}
 ```
 
----
+### All together!
 
-Keyboard shortcuts.
+```
+{:.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}
+
+<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
+
+### Video
+
+Everything above can be applied to videos too.
+
+<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>{:.media.full}
+
+<figcaption>Red flower wakes up</figcaption>
+
+### Keyboard shortcut
 
 ```
 <kbd>⌘ Super</kbd> + <kbd>Space</kbd>
@@ -173,9 +236,7 @@ Keyboard shortcuts.
 
 <kbd>⌘ Super</kbd> + <kbd>Space</kbd>
 
----
+### Link to page (rightwards arrow)
-
-Link to page (rightwards arrow).
 
 ```
 {:.page-link}
@@ -183,7 +244,7 @@ Link to page (rightwards arrow).
 
 [Link to page](../markdown-page){:.page-link}
 
-Link to site (up-rightwards arrow).
+### Link to site (up-rightwards arrow)
 
 ```
 {:.site-link}
@@ -191,12 +252,12 @@ Link to site (up-rightwards arrow).
 
 [Link to site](https://example.org){:.site-link}
 
----
+### Buttons
-
-Buttons.
 
 ```
 [Go to top](#top){: .inline-button}
 [File an issue]({{site.issuesurl}})
 {: .dialog-buttons}
 ```
+
+> Look at the end of page xD

index.md

@@ -29,7 +29,7 @@ Make yourself a cup of your <abbr title="Coffee, tea, or water">favorite drink</
 
 ## Preparation
 
-This template needs a <abbr title="Continuous Integration – Practice of automating the integration of code changes from multiple contributors into a single software project">CI</abbr> to be built and deployed, I recommend using either Codeberg or GitLab Pages. 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.
+This template needs a <abbr title="Continuous Integration – Practice of automating the integration of code changes from multiple contributors into a single software project">CI</abbr> to be built and deployed, using either Codeberg or GitLab Pages are recommended. For Codeberg Pages I've written a [blog post](https://daudix-ufo.codeberg.page/blog/migration-from-github-to-codeberg/#github-pages--codeberg-pages) on step-by-step guide how to get the CI working.
 
 There is an included `.woodpecker.yml` and `.gitlab-ci.yml` that should be easy to adjust to your situation. For additional info see [Codeberg Pages](https://docs.codeberg.org/codeberg-pages/) and [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) docs.
 
@@ -49,6 +49,8 @@ The process of setting up the site locally consists of:
 
 - 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.