jone.rs/content/donate/index.md

+++ title = "Mods" [extra] toc = true toc_inline = true toc_ordered = true +++

Mods enhance/change some Duckquill visuals. They are updated alongside Duckquill to ensure that you don't need to manually update them every release.

[extra]
styles = ["mods.css"]

Background Image

Want to set some nice image as a background? We got you covered:

body {
    background-image: var(--bg-overlay), url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

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:

@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));
    }
}

Classic Article List

Prefer the less fancy look of the article list used in Duckquill some time ago (to some extent)? It can be done with the classic-article-list mod:

@use "../themes/duckquill/sass/mods/classic-article-list";

Classic Navbar

You can make navbar have more traditional look by using the classic-nav mod:

@use "../themes/duckquill/sass/mods/classic-nav";

Or you can make it sticked to top but not full-width with the sticked-nav mod:

{% alert(note=true) %} Not compatible with the classic-nav mod. {% end %}

@use "../themes/duckquill/sass/mods/sticked-nav";

Classic Strikethrough

The default strikethrough style is too much? It can be fixed using the classic-del mod:

@use "../themes/duckquill/sass/mods/classic-del";

Modern Headings

Default headings might not fit your taste, that's understandable. They can be made boring fixed with the modern-headings mod:

@use "../themes/duckquill/sass/mods/modern-headings";

Modern Horizontal Rule

Don't like that fancy horizontal rule? Make it more modern with the modern-hr mod:

@use "../themes/duckquill/sass/mods/modern-hr";

No Edge Highlight

Hate the skeuomorphic edge highlight on all semi-transparent elements? Let's get rid of it using the no-edge-highlight mod:

@use "../themes/duckquill/sass/mods/no-edge-highlight";