hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Spanish translation

Browse Source
This commit is contained in:
Ivan: SCHOOL EDITION
2024-09-25 10:47:26 +02:00
parent 93bf40d41c
commit f7b8f79cfc
11 changed files with 1541 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
content/_index.es.md Normal file
View File

@ -0,0 +1,295 @@
+++
insert_anchor_links = "right"
title = "Home"
+++
{% crt() %}
```
_ _ _ _ _
>(')____, >(')____, >(')____, >(')____, >(') ___,
(` =~~/ (` =~~/ (` =~~/ (` =~~/ (` =~~/
jgs~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~^`---'~^~^~
```
{% end %}
# Duckquill
Duckquill is an opinionated, modern, pretty, and clean [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 necessary options for comfortable writing, while keeping the balance of simplicity.
With it, you can change some configuration variables, tweak some of the included graphics, and have a nice blog up in minutes!
Some of the features Duckquill has to offer:
- Cute and informative social media cards for Discourse, Facebook, LinkedIn, Mastodon and more.
- [Mastodon-powered comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/); comment under a post by using your Mastodon account.
- Lightweight by default, powerful when needed; no mandatory JavaScript is used by default.
- Privacy respecting analytics using [GoatCounter](https://www.goatcounter.com), with support for self-hosting.
- Estimated read time of the post; put away those with short attention spans.
- Light/dark/system theme switcher (for some reason everyone likes these).
- Everything is tinted with the user-defined accent color for a pleasant look.
- GitHub-style alerts. Yes, they're pretty, but don't overuse them.
- Post banners; they're even used in the social media cards!
- YouTube/Vimeo shortcodes for easy video embedding.
- Tiny by default; only ~100kB. Take that, 5MB Medium!
- Customizable copyright text; you Better Quack Soul!
- Image styling via URL. Yes, you read that right.
- Useless CRT style that everyone seems to like.
- Fully localizeable, worry not, [it's pretty easy](#localization).
- Social links in the footer, with special styling.
- LaTeX markup support via the [KaTeX](https://katex.org) library.
- Emoji favicon if you're lazy to draw one.
- Copy button for code blocks.
- Search functionality.
{% alert(note=true) %}
Although Duckquill is made based on the needs of [my website](https://daudix.one), I am very open to feature requests as long as they are somewhat useful to others, so if you need a feature/configuration that does not exist, feel free to open an issue, or better yet, a pull request!
{% end %}
{% alert(tip=true) %}
If you use Duckquill and enjoy it, or just like my work, please consider [buying me a coffee](https://daudix.one/coffee/), it would mean the world to me ^^.
{% end %}
## Installation
First, if you already have Git setup, add this theme as a submodule:
```bash
git submodule init
git submodule add https://codeberg.org/daudix/duckquill.git themes/duckquill
```
Otherwise, simply clone it to your `themes` directory:
```bash
git clone https://codeberg.org/daudix/duckquill.git themes/duckquill
```
{% alert(important=true) %}
It is highly recommended to switch from the `main` branch to the latest release:
{% end %}
```bash
cd themes/duckquill
git checkout tags/v5.1.0
```
Then, enable it in your `config.toml`:
```toml
theme = "duckquill"
```
To update the theme, simply switch to a new tag:
```bash
git submodule update --remote --merge
cd themes/duckquill
git checkout tags/v5.1.0
```
{% alert(important=true) %}
Check the changelog for all versions after the one you are using; there may be breaking changes that require manual involvement.
{% end %}
## Options
Duckquill offers some configuration options to make it fit you better; most options have pretty descriptive comments, so it should be easy to understand what they do.
## Front Matter
Duckquill has some [front matter](https://www.getzola.org/documentation/content/page/#front-matter) variables that you can use by setting them in the `[extra]` section:
### Global
Configuration variables from `config.toml` that can be set/overriden per page/section:
- `default_theme`: Which theme should be used by default (light/dark).
- `accent_color`: Sets theme and [browser theme](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color) color.
- `accent_color_dark`: Ditto but for the dark theme. If not set regular variant will be used.
- `fix_contrast`: Whether to fix low contrast in text selection, checkboxes, etc. Use only if the default doesn't provide enough contrast, e.g. the accent color is set to yellow.
- `fix_contrast_dark`: Ditto but for the dark theme.
- `emoji_favicon`: Use emoji as a favicon. Only one emoji is being rendered, everything else is truncated.
- `styles`: Additional CSS styles; expects them to be in the `./static/` directory. If you are using Sass it will be generated there automatically.
- `scripts`: Additional JavaScript scripts; expects them to be in the `./static/` directory.
Other variables:
- `apple_touch_icon`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) Apple Touch Icon.
- `favicon`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) favicon.
- `card`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) metadata card.
- `archive`: Displays an archived message.
- `trigger`: Displays a trigger warning message.
- `disclaimer`: Displays a disclaimer message.
- `toc`: Enables table of contents. Only first 2 levels of headings are listed.
### Blog post specific:
- `banner`: Filename of the [colocated](https://www.getzola.org/documentation/content/overview/#asset-colocation) banner image. Recommended dimensions are 2:1 aspect ratio and 1920x960 resolution.
- `banner_pixels` Makes the banner use nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
- `archived`: Make the post visually stand out in the post list. Also accepts message as a value.
- `featured`: Ditto but doesn't accept message as a value.
- `hot`: Ditto.
- `poor`: Ditto.
In `[extra.comments]` section:
- `host`: The Mastodon server on which the post was posted.
- `user`: The username of the poster.
- `id`: ID of the post; the one in the URL.
### Localization
Duckquill ships with a localization system based on one used in [tabi](https://github.com/welpo/tabi), it's very easy to use and quite flexible at the same time.
To add a translation, simply create a file in your site's `i18n` directory called `LANG_CODE.toml`, e.g `fr.toml`. The language code should be either [ISO 639-1](https://localizely.com/iso-639-1-list/) or [BCP 47](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).
Inside that file, copy-paste one of the existing translations from Duckquill and adapt it to your needs. You can also check [tabi](https://github.com/welpo/tabi/tree/main/i18n) translation files for reference.
Additionally to translating Duckquill, you can also override the English stings by copy-pasting `en.toml` from Duckquill to the `i18n` directory of your website and adjusting the values to your liking.
### Custom Styles
To add your own or override existing styles, create a custom style and add it in the `config.toml`:
```toml
[extra]
styles = [
"YOUR_STYLE.css",
"ALSO_YOUR_STYLE.css"
]
```
Additional styles are expected it to be in the `static` directory. If you are using Sass they will be compiled there by default.
If for some reason overridden style is not respected, try using `!important` (don't use it unless needed). You can import styles from Duckquill using:
```scss
@use "../themes/duckquill/sass/NEEDED_FILE.scss";
```
You can also load styles per page/section by setting them inside page's front matter:
```toml
[extra]
styles = [
"YOUR_PAGE_STYLE.css"
]
```
### Accent Color
Duckquill respects chosen accent color everywhere. To use your own, simply change it in `config.toml`:
```toml
[extra]
accent_color = "#3584e4"
```
Additionally, you can set a separate color for dark mode:
```toml
[extra]
accent_color_dark = "#ff7800"
```
### Favicon
Files named `favicon.png` and `apple-touch-icon.png` are used as favicon and Apple Touch Icon respectively. For animated favicon you can use APNG with the `png` file extension.
## In the Wild
<details>
<summary>This list is starting to get long, so click on it to expand it.</summary>
- [agustinramirodiaz.github.io](https://agustinramirodiaz.github.io)
- [alavi.me](https://alavi.me)
- [amritcodes.xyz](https://amritcodes.xyz)
- [arfh.pages.dev](https://arfh.pages.dev)
- [bambalabs.co](https://www.bambalabs.co)
- [bano.dev](https://bano.dev)
- [benjaminandre.be](https://benjaminandre.be)
- [blog.digital-horror.co](https://blog.digital-horror.com)
- [blog.pansi21.xyz](https://blog.pansi21.xyz)
- [cabysm.github.io](https://cabysm.github.io)
- [daudix.one](https://daudix.one) <small>(obviously)</small>
- [daveparr.info](https://www.daveparr.info)
- [davepoltorak.com](https://davepoltorak.com)
- [enriquekesslerm.com](https://enriquekesslerm.com)
- [gregorni.gitlab.io](https://gregorni.gitlab.io)
- [harrypotterexplained.com](http://harrypotterexplained.com)
- [hyouteki.github.io](https://hyouteki.github.io)
- [ikergimenez.neocities.org](https://ikergimenez.neocities.org)
- [kaipeacock.com](https://kaipeacock.com)
- [luciengheerbrant.com](https://luciengheerbrant.com)
- [lukoktonos.com](http://www.lukoktonos.com)
- [matteorisso.github.io](https://matteorisso.github.io)
- [maxime.letemple.fr](https://maxime.letemple.fr)
- [mourelask.xyz](https://mourelask.xyz)
- [muelsyse.codeberg.page](https://muelsyse.codeberg.page)
- [mukuljoshi.xyz](https://mukuljoshi.xyz)
- [nbenedek.me](https://nbenedek.me)
- [nezumi.party](https://nezumi.party)
- [nisf.be](https://nisf.be)
- [nullpuppy.github.io](https://nullpuppy.github.io)
- [nutn-isc.gitlab.io](https://nutn-isc.gitlab.io/nutn-isc-website/)
- [orbitalmartian.codeberg.page](https://orbitalmartian.codeberg.page)
- [orzklv.uz](https://orzklv.uz)
- [penandink.work](https://penandink.work)
- [pyter.at](https://pyter.at)
- [rbd.gg](https://www.rbd.gg)
- [rerere.unlogic.co.uk](https://rerere.unlogic.co.uk)
- [rossjr.dev](https://rossjr.dev)
- [samienr.com](https://samienr.com)
- [shrimple.srht.site](https://shrimple.srht.site)
- [siddharthsabron.in](https://siddharthsabron.in)
- [skaven.org](https://skaven.org)
- [sorg.codeberg.page](https://sorg.codeberg.page)
- [sungsphinx.codeberg.page](https://sungsphinx.codeberg.page)
- [tmblog.pages.dev](https://tmblog.pages.dev)
- [treeniks.github.io](https://treeniks.github.io)
- [vikramxd.github.io](https://vikramxd.github.io)
- [voluxyy.github.io](https://voluxyy.github.io/portfolio/)
- Yours? <small>(feel free to [contact me](https://daudix.one/find/#contacts) or send a pull request)</small>
</details>
## In Credits
- [andreatitolo.com](https://www.andreatitolo.com/credits)
- [aplos.gxbs.me](https://aplos.gxbs.me)
- [archaeoramblings.com](https://www.archaeoramblings.com/credits)
- [oomfie.town](https://oomfie.town/credits)
## Assets Sources
All sources for Duckquill's assets are available [here](https://codeberg.org/daudix/archive/src/branch/main/duckquill/src) and licensed under CC BY-SA 4.0. The reason for not putting the sources in the same repo as Duckquill itself is simple: I want it to be as small as possible, so that repo cloning is fast and doesn't make the site significantly heavier; this is also why the demo uses remote images instead of local copies.
## Credits
- [Quill image used in the metadata card](https://commons.wikimedia.org/wiki/File:3quills.jpg)
## Tools Used
- [VSCodium](https://vscodium.com) - Free/Libre Open Source Software Binaries of VS Code
- [Capitalize](https://marketplace.visualstudio.com/items?itemName=viablelab.capitalize) - Title capitalization without random websites.
- [Even Better TOML](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml) - For `config.toml` basically.
- [Monokai Pro](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) - Awfully pretty theme.
- [PX to REM](https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem) - Easy conversion from PX to REM and vice versa.
- [SCSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss) - Not sure if it actually works. ¯\\\_(ツ)_/¯
- [Sort CSS](https://marketplace.visualstudio.com/items?itemName=piyushsarkar.sort-css-properties) - A lifesaver for long CSS properties.
- [Tera](https://marketplace.visualstudio.com/items?itemName=karunamurti.tera) - Tera template engine (the one Zola uses) support.
- [Firefox developer tools](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools) - Best of its kind.
As for the code formatter I use built-in VSCodium one. Prettier is good but I don't like how it tries to make code fit in a very narrow column, this can be changed of course, but built-in formatter does it's job so I don't bother doing so.
## Thanks To
- [Jakub Steiner](https://jimmac.eu) for the [OS Component Website](https://jimmac.github.io/os-component-website), which served as a starting point and inspiration.
- [Óscar](https://osc.garden) for [tabi](https://welpo.github.io/tabi/) and its [translation system](https://github.com/welpo/tabi/blob/main/templates/macros/translate.html).
- [Carl Schwan](https://carlschwan.eu) for the [Mastodon-powered Comments](https://carlschwan.eu/2020/12/29/adding-comments-to-your-static-blog-with-mastodon/).
- [Jonathan Neal](https://jonneal.dev) for the [normalize.css](https://csstools.github.io/normalize.css/).
- [GNOME design team](https://gitlab.gnome.org/Teams/Design) for the [icon development kit](https://gitlab.gnome.org/Teams/Design/icon-development-kit)
- [Modern Font Stacks](https://modernfontstacks.com) for the system font stack.
- [TheEvilSkeleton](https://tesk.page) for helping to improve the look and accessibility.
- [Dexter Reed](https://sungsphinx.codeberg.page) for being the first Duckquill user, preventing it from being axed.
- Everyone who supported me and said good stuff <3

9
content/blog/_index.es.md Normal file
View File

@ -0,0 +1,9 @@
+++
title = "Writings of Duck's Feet"
sort_by = "date"
template = "article_list.html"
page_template = "article.html"
paginate_by = 2
+++
Welcome to my quack'in blog, I quack about various stuff, but mostly I'm a demo

15
content/blog/drafted-post/index.es.md Normal file
View File

@ -0,0 +1,15 @@
+++
authors = ["John Draft"]
title = "Drafty Draft"
description = "Drafted post, very drafty."
date = 2024-04-29
draft = true
[taxonomies]
tags = ["Draft"]
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

16
content/blog/ipsum/index.es.md Normal file
View File

@ -0,0 +1,16 @@
+++
authors = ["John Ipsum"]
title = "Ipsum"
description = "Lorem ipsum dolor sit amet."
date = 1970-01-02
[taxonomies]
tags = ["Lorem", "Ipsum"]
[extra]
hot = true
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

18
content/blog/long-long-man/index.es.md Normal file
View File

@ -0,0 +1,18 @@
+++
authors = ["Looong Looong Man", "Alexander Maximilian Jonathan"]
title = "Loooooong Loooooong Loooooong Loooooong Loooooong Man"
description = "Pneumonoultramicroscopicsilicovolcanoconiosis supercalifragilisticexpialidocious pseudopseudohypoparathyroidism."
date = 2017-01-01
[taxonomies]
tags = ["Honorificabilitudinitatibus"]
[extra]
featured = true
+++
![Long Long Man](https://upload.wikimedia.org/wikipedia/en/e/ed/Long_Long_Man.jpeg#end#spoiler)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

16
content/blog/lorem/index.es.md Normal file
View File

@ -0,0 +1,16 @@
+++
authors = ["John Lorem"]
title = "Lorem"
description = "Lorem ipsum dolor sit amet."
date = 1970-01-01
[taxonomies]
tags = ["Lorem"]
[extra]
poor = true
+++
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea bona praeterita grata recordatione renovata delectant. Est.
Ullus investigandi veri, nisi inveneris, et quaerendi defatigatio turpis est, cum esset accusata et vituperata ab Hortensio. Qui liber cum et mortem contemnit, qua qui est imbutus quietus esse numquam potest. Praeterea.

99
content/blog/the-quill-of-duck/index.es.md Normal file
View File

@ -0,0 +1,99 @@
+++
authors = ["Duck Quack", "Scrooge McDuck"]
title = "The Quill of Duck"
description = "This is a Duckquill post example, this post has nothing but a bunch of text and random formatting, acting like a demo."
date = 2023-08-31
updated = "2024-06-21"
[taxonomies]
tags = ["Demo", "Test"]
[extra]
banner = "banner.webp"
toc = true
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.
"""
[extra.comments]
# Long thread with image
#
# host = "mastodon.social"
# user = "brownpau"
# id = "104529877688537579"
#
# Thread with multiple images per post
#
# host = "mastodon.blaede.family"
# user = "cassidy"
# id = "112774854109302186"
#
# Post on GoToSocial
#
# host = "alpha.polymaths.social"
# user = "orbitalmartian"
# id = "01J7ETKJ19FGBDQGS1ZWZ3KEPP"
#
# Post on Sharkey
#
# host = "is-a.wyvern.rip"
# user = "volpeon"
# id = "9qy755nsnu2c0hbc"
host = "toot.community"
user = "sungsphinx"
id = "111789185826519979"
+++
{% alert(tip=true) %}
Recommended banner dimensions are 2:1 aspect ratio and 1920x960 resolution.
Other sizes will also work, but will be cut off at the bottom/won't be high enough.
{% end %}
## 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
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_!
This is the story of a man named _Stanley_.
_Stanley_ worked for a company in a big building where he was Employee `#427`.
<figure>
![The Office](the-office.webp)
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
</figure>
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.
This is what Employee `#427` did every day of every month of every year, and although others may have considered it soul rending,
_Stanley_ relished every moment that the orders came in, as though he had been made exactly for this job.
And _Stanley_ was happy.
And then one day, something very peculiar happened.
Something that would forever change _Stanley_;
Something he would never quite forget.
He had been at his desk for nearly an hour when he had realized not one single order had arrived on the monitor for him to follow.
No one had shown up to give him instructions, call a meeting, or even say 'hi'. Never in all his years at the company had this happened, this complete isolation.
Something was very clearly wrong. Shocked, frozen solid, _Stanley_ found himself unable to move for the longest time.
But as he came to his wits and regained his senses, he got up from his desk and stepped out of his office.
All of his co-workers were gone. What could it mean? Stanley decided to go to the meeting room; perhaps he had simply missed a memo.

790
content/demo/index.es.md Normal file
View File

@ -0,0 +1,790 @@
+++
title = "Demo Page"
[extra]
archive = "This page is in fact not archived. It is only here to demonstrate the archival statement."
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.
"""
+++
## Markdown
Text can be **bold**, *italic*, ~~strikethrough~~, and ***~~all at the same time~~***.
[Link to another page](@/demo/page.md).
There should be whitespace between paragraphs[^1].
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
This is a normal paragraph[^2] following a header.
😭😂🥺🤣❤️✨🙏😍🥰😊
```
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.
```
> "Original content is original only for a few seconds before getting old"
> > Rule #21 of the internet
- Item 1
- Item 2
- Item 2.1
- Item 2.2
- Item 3
- `Item 4`
1. Perform step #1
2. Proceed to step #2
3. Conclude with step #3
- [ ] Milk
- [x] Eggs
- [x] Flour
- [ ] Coffee
- [x] Combustible lemons
[![Male mallard duck](https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Male_mallard_duck_2.jpg/800px-Male_mallard_duck_2.jpg)](https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg)
| Mare | Rating | Additional info |
| :----------- | :---------------- | :--------------- |
| Fluttershy | Best pone | Shy and adorable |
| Apple Jack | Good pone | Honest and nice |
| Pinkie Pie | Fun pone | Parties and ADHD |
| Twilight | Main pone | Neeerd |
| Rainbow Dash | Yes | Looks badass |
| Rarity | Fancy pone | Generous |
| Derpy Hooves | *M u f f i n s* | [REDACTED] |
```rust
let highlight = true;
```
```scss, linenos, linenostart=10, hl_lines=3-4 8-9, hide_lines=2 7
pre mark {
// If you want your highlights to take the full width
display: block;
color: currentcolor;
}
pre table td:nth-of-type(1) {
// Select a colour matching your theme
color: #6b6b6b;
font-style: italic;
}
```
***
## Extra
### KaTeX
Duckquill can render LaTeX using the [KaTeX](https://katex.org) library. It can be enabled using the `extra.katex` config variable.
```latex
$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$
```
$$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$
```latex
$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$
```
$\relax f(x) = \int_{-\infty}^\infty\hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$
### Shortcodes
Duckquill provides a few useful [shortcodes](https://www.getzola.org/documentation/content/shortcodes/) that simplify some tasks. They can be used on all pages.
#### Alerts
[GitHub-style](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) alerts. Simply wrap the text of desired alert inside the shortcode to get the desired look.
Available alert types:
- `note`: Useful information that users should know, even when skimming content.
- `tip`: Helpful advice for doing things better or more easily.
- `important`: Key information users need to know to achieve their goal.
- `warning`: Urgent info that needs immediate user attention to avoid problems.
- `caution`: Advises about risks or negative outcomes of certain actions.
```jinja2
{%/* alert(note=true) */%}
-> Alert text <-
{%/* end */%}
```
{% alert(note=true) %}
Useful information that users should know, even when skimming content.
{% end %}
{% alert(tip=true) %}
Helpful advice for doing things better or more easily.
{% end %}
{% alert(important=true) %}
Key information users need to know to achieve their goal.
{% end %}
{% alert(warning=true) %}
Urgent info that needs immediate user attention to avoid problems.
{% end %}
{% alert(caution=true) %}
Advises about risks or negative outcomes of certain actions.
{% end %}
#### Images and Videos
By default images and videos come with some generic styling, such as rounded corners and shadow. To fine-tune these, you can use shortcodes with different variable combinations.
Available variables are:
- `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 to be full-width.
- `full_bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.
- `start`: Float image to the start of paragraph and scale it down.
- `end`: Float image to the end of paragraph and scale it down.
- `pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
- `transparent`: Removes rounded corners and shadow, useful for images with transparency.
- `no_hover`: Removes zoom on hover.
- `spoiler`: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.
- `spoiler` with `solid`: Ditto, but makes the image completely hidden.
```jinja2
{{/* image(url="image.png", alt="This is an image" no_hover=true) */}}
```
<figure>
{{ image(url="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg", alt="Portal Gun blueprint", no_hover=true) }}
<figcaption>Image with an alt text and without zoom on hover</figcaption>
</figure>
<figure>
{{ image(url="https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg", url_min="https://upload.wikimedia.org/wikipedia/commons/3/38/JPEG_example_JPG_RIP_010.jpg", alt="The gravestone of J.P.G.", no_hover=true) }}
<figcaption>Image with compressed version, an alt text, and without zoom on hover</figcaption>
</figure>
<figure>
{{ image(url="https://files.catbox.moe/lk7nee.jpg", alt="Portal Gun blueprint", spoiler=true) }}
<figcaption>Image with an alt text, hidden behind a spoiler</figcaption>
</figure>
Alternatively, you can append the following URL anchors. It can be more handy in some cases, e.g. such images will render normally in any Markdown editor, opposed to the Zola shortcodes.
- `#full`: Forces image to be full-width.
- `#full-bleed`: Forces image to fill all the available screen width. Removes shadow, rounded corners and zoom on hover.
- `#start`: Float image to the start of paragraph and scale it down.
- `#end`: Float image to the end of paragraph and scale it down.
- `#pixels`: Uses nearest neighbor algorithm for scaling, useful for keeping pixel-art sharp.
- `#transparent`: Removes rounded corners and shadow, useful for images with transparency.
- `#no-hover`: Removes zoom on hover.
- `#spoiler`: Blurs image until hovered over/pressed on, useful for plot rich game screenshots.
- `#spoiler` with `#solid`: Ditto, but makes the image completely hidden.
<br />
<figure>
[![Toolbx header image](https://containertoolbx.org/assets/toolbx.gif#full#pixels#transparent#no-hover)](https://containertoolbx.org)
<figcaption>Full-width image with an alt text, pixel-art rendering, no shadow and rounded corners, and no zoom on hover</figcaption>
</figure>
<br />
![1966 Ford Mustang coupe white](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/1966_Ford_Mustang_coupe_white_003.jpg/320px-1966_Ford_Mustang_coupe_white_003.jpg#start)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur.
\
[![Picture of the magnificent lej da staz just before sunrise in october](https://images.unsplash.com/photo-1635410773896-da585e1fe138?q=80&w=2063&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D#full-bleed)](https://unsplash.com/photos/a-mountain-lake-surrounded-by-trees-and-snow-CqTOTZh5vrs)
For videos it's all the same except for a few differences: `no_hover` and `url_min` variables are not available.
```jinja2
{{/* video(url="video.webm", alt="This is a video") */}}
```
<figure>
{{ video(url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", alt="Red flower wakes up") }}
<figcaption>WebM video example from MDN</figcaption>
</figure>
<figure>
{{ video(url="https://upload.wikimedia.org/wikipedia/commons/transcoded/0/0e/Duckling_preening_%2881313%29.webm/Duckling_preening_%2881313%29.webm.720p.vp9.webm", alt="Duckling preening", full_bleed=true) }}
<figcaption>Duckling preening</figcaption>
</figure>
#### CRT
Alright, this one doesn't simplify anything, it just adds a CRT-like effect around Markdown code blocks.
```jinja2
{%/* crt() */%}
-> Markdown code block <-
{%/* end */%}
```
{% crt() %}
```
_____________________________________________
|.'', Public_Library_Halls ,''.|
|.'.'', ,''.'.|
|.'.'.'', ,''.'.'.|
|.'.'.'.'', ,''.'.'.'.|
|.'.'.'.'.| |.'.'.'.'.|
|.'.'.'.'.|===; ;===|.'.'.'.'.|
|.'.'.'.'.|:::|', ,'|:::|.'.'.'.'.|
|.'.'.'.'.|---|'.|, _______ ,|.'|---|.'.'.'.'.|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|,',',',',|---|',|'|???????|'|,'|---|,',',',',|
|.'.'.'.'.|:::|'.|'|???????|'|.'|:::|.'.'.'.'.|
|.'.'.'.'.|---|',' /%%%\ ','|---|.'.'.'.'.|
|.'.'.'.'.|===:' /%%%%%\ ':===|.'.'.'.'.|
|.'.'.'.'.|%%%%%%%%%%%%%%%%%%%%%%%%%|.'.'.'.'.|
|.'.'.'.',' /%%%%%%%%%\ ','.'.'.'.|
|.'.'.',' /%%%%%%%%%%%\ ','.'.'.|
|.'.',' /%%%%%%%%%%%%%\ ','.'.|
|.',' /%%%%%%%%%%%%%%%\ ','.|
|;____________/%%%%%Spicer%%%%%%\____________;|
```
{% end %}
There's also a `cursor` class that you can add to a span with e.g. `█` character to simulate the terminal cursor. It doesn't work from inside Markdown code blocks though.
#### YouTube
Allows to embed a YouTube video using youtube-nocookie.
Available variables are:
- `autoplay`: Whether the video should autoplay.
- `start`: On which second video should start.
```jinja2
{{/* youtube(id="0Da8ZhKcNKQ") */}}
```
{{ youtube(id="0Da8ZhKcNKQ") }}
#### Vimeo
Allows to embed a Vimeo video.
Available variables are:
- `autoplay`: Whether the video should autoplay.
```jinja2
{{/* vimeo(id="869483483") */}}
```
{{ vimeo(id="869483483") }}
### Description List (`<dl>`)
```html
<dl>
<dt>Something</dt>
<dd>And its description</dd>
</dl>
```
<dl>
<dt>Name</dt>
<dd>Godzilla</dd>
<dt>Born</dt>
<dd>1952</dd>
<dt>Birthplace</dt>
<dd>Japan</dd>
<dt>Color</dt>
<dd>Green</dd>
</dl>
### Form Input (`<input>`)
```html
<input type="checkbox" />
<label>Checkbox</label>
```
<ul>
<li>
<input type="checkbox" />
<label>&nbsp;Milk</label>
</li>
<li>
<input type="checkbox" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input type="checkbox" />
<label>&nbsp;Flour</label>
</li>
<li>
<input type="checkbox" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input type="checkbox" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul>
With `switch` class:
```html
<input class="switch" type="checkbox" />
<label>Checkbox</label>
```
<ul>
<li>
<input class="switch" type="checkbox" />
<label>&nbsp;Milk</label>
</li>
<li>
<input class="switch" type="checkbox" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input class="switch" type="checkbox" />
<label>&nbsp;Flour</label>
</li>
<li>
<input class="switch" type="checkbox" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input class="switch" type="checkbox" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul>
With `switch` and `big` classes:
```html
<input class="switch big" type="checkbox" />
<label>Checkbox</label>
```
<ul>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Milk</label>
</li>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input class="switch big" type="checkbox" />
<label>&nbsp;Flour</label>
</li>
<li>
<input class="switch big" type="checkbox" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input class="switch big" type="checkbox" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul>
With `radio` type:
```html
<input type="radio" name="test" />
<label>Radio</label>
```
<ul>
<li>
<input type="radio" name="test" />
<label>&nbsp;Milk</label>
</li>
<li>
<input type="radio" name="test" />
<label>&nbsp;Eggs</label>
</li>
<li>
<input type="radio" name="test" />
<label>&nbsp;Flour</label>
</li>
<li>
<input type="radio" name="test" checked />
<label>&nbsp;Coffee</label>
</li>
<li>
<input type="radio" name="test" disabled />
<label>&nbsp;Combustible lemons</label>
</li>
</ul>
With `color` type:
```html
<label>Color:</label>
<input type="color" value="#000000" />
```
<label for="color">Color:</label>
<input id="color" type="color" value="#b57edc" />
<label for="color">Disabled:</label>
<input id="color" type="color" value="#b57edc" disabled />
With `range` type:
```html
<input type="range" max="100" value="33">
```
<input type="range" max="100" value="33" id="range">
<!-- For the demo purposes only -->
<small id="range-value"></small>
<script type="text/javascript">
var slider = document.getElementById("range");
var output = document.getElementById("range-value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<!-- End -->
### Figure Captions (`<figcaption>`)
```markdown
<figure>
-> Whatever content <-
<figcaption>Caption of content above</figcaption>
</figure>
```
<figure>
![The Office](https://i.ibb.co/MPDJRsT/ImMAXM3.png)
<figcaption>The Office where Stanley works, it has yellow floor and beige walls</figcaption>
</figure>
### Accordion (`<details>`)
```markdown
<details>
<summary>Accordion title</summary>
-> Contents here <-
</details>
```
<details>
<summary>Reveal accordion</summary>
Get it? I know, it's an awful pun.
![Piano Accordion](https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/PianoAccordeon.jpg/916px-PianoAccordeon.jpg#transparent#no-hover)
</details>
### Side Comment (`<small>`)
```html
<small>Small, cute text that doesn't catch attention.</small>
```
<small>Small, cute text that doesn't catch attention.</small>
### Abbreviation (`<abbr>`)
```html
<abbr title="American Standard Code for Information Interchange">ASCII</abbr>
```
The <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art is awesome!
### Aside (`<aside>`)
```html
<aside>
-> Contents here <-
</aside>
```
<aside>
Quill and a parchment
<img class="transparent no-hover" style="margin-block-end: 0; border-radius: 0;" alt="Quill and a parchment" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg/326px-%D7%A7%D7%9C%D7%A3%2C_%D7%A0%D7%95%D7%A6%D7%94_%D7%95%D7%93%D7%99%D7%95.jpg" />
</aside>
A quill is a writing tool made from a moulted flight feather (preferably a primary wing-feather) of a large bird. Quills were used for writing with ink before the invention of the dip pen, the metal-nibbed pen, the fountain pen, and, eventually, the ballpoint pen.
As with the earlier reed pen (and later dip pen), a quill has no internal ink reservoir and therefore needs to periodically be dipped into an inkwell during writing. The hand-cut goose quill is rarely used as a calligraphy tool anymore because many papers are now derived from wood pulp and would quickly wear a quill down. However it is still the tool of choice for a few scribes who have noted that quills provide an unmatched sharp stroke as well as greater flexibility than a steel pen.
### Keyboard Input (`<kbd>`)
```html
<kbd>⌘ Command</kbd>.
```
To switch the keyboard layout, press <kbd>⌘ Super</kbd> + <kbd>Space</kbd>.
### Mark Text (`<mark>`)
```html
<mark>Marked text</mark>
```
You know what? I'm gonna say some <mark>very important</mark> stuff, so <mark>important</mark> that even **bold** is not enough.
### Deleted and Inserted Text (`<del>` and `<ins>`)
```html
<del>Something deleted</del> <ins>Something added</ins>
```
<del>Text deleted</del> <ins>Text added</ins>
### Progress Indicator (`<progress>`)
```html
<progress></progress>
<progress value="33" max="100"></progress>
```
<progress></progress>
<progress value="33" max="100"></progress>
### Sample Output (`<samp>`)
```html
<samp>Sample Output</samp>
```
<samp>Sample Output</samp>
### Inline Quotation (`<q>`)
```html
<q>Someone said something</q>
```
Blah blah <q>Inline Quote</q> hmm.
### Unarticulated Annotation (`<u>`)
```html
<u>Gmarrar mitsakes</u>
```
<u>Yeet</u> the <u>sus</u> drip while <u>vibing</u> with the <u>TikTok</u> <u>fam</u> on a cap-free boomerang.
### External Links
```html
<a class="external" href="https://example.org">External link</a>
```
<a class="external" href="https://example.org">Link to site</a>
### Spoilers
```html
<span class="spoiler">Some spoiler</span>
```
You know, <span class="spoiler">Duckquill is a pretty dumb name.</span> I know, crazy.
With `solid` class:
```html
<span class="spoiler solid">Some spoiler</span>
```
You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I know, crazy.
### Buttons Dialog
```html.j2
<div class="dialog-buttons">
<a class="inline-button" href="#top">Go to Top</a>
<a class="inline-button colored external" href="https://example.org">Example</a>
</div>
```
<div class="dialog-buttons">
<a class="inline-button" href="#top">Go to Top</a>
<a class="inline-button colored external" href="https://example.org">Example</a>
</div>
[^1]: Footnote
[^2]: [Footnote (link)](https://example.org)
<!-- For the demo purposes only -->
<div id="color-picker-container">
<small>Accent color:</small>
<br />
<input id="color-picker-light" type="color" value="#ff7800" />
<label for="color-picker-light">Light theme</label>
<br />
<input id="color-picker-dark" type="color" value="#ffa348" />
<label for="color-picker-dark">Dark theme</label>
<br />
<small>Fix contrast:</small>
<br />
<input id="contrast-color-light" class="switch" type="checkbox" />
<label for="contrast-color-light">Light theme</label>
<br />
<input id="contrast-color-dark" class="switch" type="checkbox" checked />
<label for="contrast-color-dark">Dark theme</label>
</div>
<style>
#color-picker-container {
-webkit-backdrop-filter: var(--blur);
position: fixed;
transform: translateX(calc(-100% + 1rem));
z-index: 1;
backdrop-filter: var(--blur);
transition: var(--transition);
inset-block-end: 1rem;
inset-inline-start: 0;
box-shadow: var(--edge-highlight), var(--shadow-glass);
border-start-end-radius: var(--rounded-corner);
border-end-end-radius: var(--rounded-corner);
background-color: var(--nav-bg);
padding: 0.5rem;
}
#color-picker-container:hover {
transform: none;
}
#color-picker-container label {
margin-inline-end: 0.25rem;
color: var(--fg-muted-4);
font-weight: bold;
}
:root[dir*="rtl"] #color-picker-container {
transform: translateX(calc(100% - 1rem));
}
:root[dir*="rtl"] #color-picker-container:hover {
transform: none;
}
#color-picker-light,
#color-picker-dark,
#contrast-color-light,
#contrast-color-dark {
margin-inline-end: 0.25rem;
}
</style>
<script type="text/javascript">
const colorPickerLight = document.querySelector("#color-picker-light");
const colorPickerDark = document.querySelector("#color-picker-dark");
const contrastCheckboxLight = document.querySelector("#contrast-color-light");
const contrastCheckboxDark = document.querySelector("#contrast-color-dark");
let accentColorLight = colorPickerLight.value;
let accentColorDark = colorPickerDark.value;
colorPickerLight.addEventListener("input", updateAccentColorLight);
colorPickerDark.addEventListener("input", updateAccentColorDark);
contrastCheckboxLight.addEventListener("change", updateStyles);
contrastCheckboxDark.addEventListener("change", updateStyles);
function updateAccentColorLight() {
accentColorLight = colorPickerLight.value;
updateStyles();
}
function updateAccentColorDark() {
accentColorDark = colorPickerDark.value;
updateStyles();
}
function updateStyles() {
const contrastColorLight = contrastCheckboxLight.checked;
const contrastColorDark = contrastCheckboxDark.checked;
let styleElement = document.getElementById("dynamic-styles");
if (!styleElement) {
styleElement = document.createElement("style");
styleElement.id = "dynamic-styles";
document.head.appendChild(styleElement);
}
let styles = `
:root {
--accent-color: ${accentColorLight};
}
[data-theme="dark"] {
--accent-color: ${accentColorDark};
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--accent-color: ${accentColorDark};
}
}
`;
if (contrastColorLight) {
styles += `
:root {
--contrast-color: rgb(0 0 0 / 0.8);
}
`;
} else {
styles += `
:root {
--contrast-color: #fff;
}
`;
}
if (contrastColorDark) {
styles += `
[data-theme="dark"] {
--contrast-color: rgb(0 0 0 / 0.8);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: rgb(0 0 0 / 0.8);
}
}
`;
} else {
styles += `
[data-theme="dark"] {
--contrast-color: #fff;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--contrast-color: #fff;
}
}
`;
}
styleElement.textContent = styles;
}
updateStyles();
</script>
<!-- End -->

11
content/demo/page.es.md Normal file
View File

@ -0,0 +1,11 @@
+++
title = "Cake Party"
+++
<img class="transparent no-hover" style="width: min(calc(var(--container-width) / 2), 100%)" src="https://i1.theportalwiki.net/img/0/0a/Portal_Cake.png"/>
Sadly, the cake is a _lie_
<div class="dialog-buttons">
<a class="inline-button" href="../">Go Crying</a>
</div>

190
content/tricks/index.es.md Normal file
View File

@ -0,0 +1,190 @@
+++
title = "Tricks"
[extra]
toc = true
+++
Several lesser known Duckquill thingies.
<small>If you have some, please consider sharing them here.</small>
## Styling
Duckquill is pretty easy to restyle with just a few lines of SCSS in the [appropriate location](@/_index.md#custom-styles). Let's see some examples.
### Navbar
You can make navbar have more traditional look:
![classic navabr](https://files.catbox.moe/ga4dmv.png)
```scss
#site-nav {
margin-block-start: 0;
inset-block-start: 0;
box-shadow: var(--shadow-glass);
border-radius: 0;
width: 100%;
max-width: 100%;
nav,
#search-container {
margin: 0 auto;
width: min(var(--container-width), 90%);
}
nav ul li {
a,
summary,
&#search button,
&#language-switcher details summary,
&#theme-switcher details summary {
border-radius: var(--rounded-corner);
}
}
#home {
margin-inline-end: auto;
}
.divider {
display: none;
}
#search-container {
#search-bar {
border-radius: var(--rounded-corner);
}
}
}
```
Or you can make it sticked to top but not full-width:
![sticked navabr](https://files.catbox.moe/bfu3p7.png)
```scss
#site-nav {
margin-block-start: 0;
inset-block-start: 0;
box-shadow: var(--shadow-glass);
border-radius: 0 0 calc(var(--rounded-corner) + 0.5rem) calc(var(--rounded-corner) + 0.5rem);
nav ul li {
a,
summary,
&#search button,
&#language-switcher details summary,
&#theme-switcher details summary {
border-radius: var(--rounded-corner);
}
}
#search-container {
#search-bar {
border-radius: var(--rounded-corner);
}
}
}
```
### Headings
Default headings might not fit your taste, that's understandable. Good thing is that we can ~~make them boring~~ fix them:
![boring headings](https://files.catbox.moe/6ok740.png)
```scss
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
font-family: var(--font-system-ui)
}
h1 {
font-weight: 900;
}
```
### Strikethrough
The default strikethrough style is too much? Let's sort this out:
![plain strikethrough](https://files.catbox.moe/y2tbwm.png)
```scss
del {
box-shadow: none;
border-radius: 0;
background-color: transparent;
padding: 0;
color: inherit;
}
```
### Edge Highlights
Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of them:
```scss
@import "../themes/duckquill/sass/_variables.scss";
@include theme-variables using ($theme) {
@if $theme == "light" {
--edge-highlight: 0 0 0 transparent;
}
}
```
### Horizontal Rules
Don't like that fancy horizontal rule? Let's make it more modern:
![modern horizontal rule](https://files.catbox.moe/qyqzoy.png)
```scss
hr {
box-shadow: var(--edge-highlight);
border: none;
border-radius: 999px;
background-color: var(--fg-muted-2);
width: 50%;
height: 0.25rem;
&::after {
display: none;
}
}
```
### Background Image
Want to set some nice image as a background? We got you covered:
![background image](https://files.catbox.moe/no8vfc.png)
```scss
@import "../themes/duckquill/sass/_variables.scss";
@include theme-variables using ($theme) {
@if $theme == "dark" {
--bg-overlay: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
}
@else {
--bg-overlay: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
}
}
body {
background: var(--bg-overlay), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
}
```
Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-overlay` based on your needs.

82
i18n/es.toml Normal file
View File

@ -0,0 +1,82 @@
# Shown in language picker for multi-language sites
language_name = "Español"
# Tera date format used for listing posts
# (post publication date, tag posts list...).
# Not used in comments, "date_locale" is used instead.
# See https://docs.rs/chrono/0.4.31/chrono/format/strftime/index.html
date_format = "%B %d, %Y"
date_locale = "es_ES"
# Menu items.
# Should match the names in config.extra.nav.links and config.extra.footer.links.
Links = "Enlaces"
Blog = "Blog"
Demo = "Demo"
Tricks = "Trucos"
Coffee = "Café"
all_tags = "Ver todas las etiquetas"
archived = "Archivado"
author = "Autor"
blog_post_author = "Autor del post"
boosts_from = "Boosts de"
by_author = "Por $AUTHOR"
caution = "Precaución"
comments = "Comentarios"
comments_description = "Puedes comentar en este post haciendo una respuesta pública en una cuenta de Mastodon u otra plataforma de ActivityPub/Fediverso. Respuestas no privadas serán mostrabas abajo."
comments_noscript = "Cargamos comentarios haciendo uso de JavaScript. Prueba a habilitarlo, en caso de no ya estarlo, o a recargar la página. Adicionalmente, puedes visitar el post original en Mastodon."
comments_qr = "Código QR al post de Mastodon"
copy_code = "Copiar código"
disclaimer = "Advertencia"
drafted = "Borrador"
faves_from = "Favoritos de"
featured = "Recomendado"
feed = "Feed"
file_an_issue = "Reportar un problema"
filter_by_tag = "Filtra por etiqueta"
first = "Primero"
go_to_top = "Ir hasta arriba"
hot = "Hot"
important = "Importante"
language = "Lenguaje"
last = "Último"
load_comments = "Cargar Commentarios"
loading = "Cargando"
many_minutes_read = "$NUMBER minutos leídos"
many_posts = "$NUMBER publicaciones en total"
many_tags = "$NUMBER etiquetas en total"
minutes_read = "$NUMBER minuto leído"
next = "Siguiente"
no_comments = "Sin comentarios aún :/"
note = "Nota"
one_posts = "$NUMBER publicación en total"
one_tags = "$NUMBER etiqueta en total"
open_post = "Abrir publicación"
poor = "Pobre"
posts = "$NUMBER publicaciones en total"
posts_with_tag = "Publicaciones con etiqueta"
powered_by = "Desarrollado por"
powered_by_and = "y"
previous = "Anterior"
published = "Publicado el"
reload = "Recargar"
repo = "Repositorio"
search = "Buscar"
search_for = "Buscar por"
share = "Compartir"
skip_to_content = "Saltar al contenido principal"
source = "Fuente del sitio web"
table_of_contents = "Tabla de contenido"
tags = "etiquetas"
tags_title = "Etiquetas"
theme = "Tema"
theme_dark = "Cambiar a tema oscuro"
theme_light = "Cambiar a tema claro"
theme_system = "Usar tema del sistema"
tip = "Consejo"
trigger_warning = "Advertencia de contenido"
updated = "Actualizado el"
view_comment = "Ver comentario en"
view_profile = "Ver perfil en"
warning = "Advertencia"