Mods

Table of Contents

• Background Image
• Classic Navbar
• Classic Strikethrough
• Modern Headings
• Modern Horizontal Rule
• No Edge Highlight

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

To enable these mods, you need to paste provided Sass to appropriate file, e.g sass/mods.scss under your website, then enable it in config.toml:

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

Background Image

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

@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.

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:

Note

Not compatible with the classic-nav mod.

@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";