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


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

## Background Image

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

![background image](https://files.catbox.moe/no8vfc.png)

```scss
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:

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

## 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:

![classic article list](https://files.catbox.moe/yf5feo.png)

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

## Classic Navbar

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

![classic navabr](https://files.catbox.moe/ga4dmv.png)

```scss
@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 %}

![sticked navabr](https://files.catbox.moe/bfu3p7.png)

```scss
@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:

![plain strikethrough](https://files.catbox.moe/y2tbwm.png)

```scss
@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:

![boring headings](https://files.catbox.moe/6ok740.png)

```scss
@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:

![modern horizontal rule](https://files.catbox.moe/qyqzoy.png)

```scss
@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:

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