blog/content/tricks/index.md

+++
title = "Tricks"
+++

# Tricks

Several lesser known Duckquill thingies.

<small>If you have some, please consider sharing them here.</small>

## Table of Contents

- [Styling](#styling)
  - [Navbar](#navbar)
  - [Headings](#headings)
  - [Strikethrough](#strikethrough)
  - [Edge Highlights](#edge-highlights)
  - [Horizontal Rules](#horizontal-rules)
  - [Background Image](#background-image)

## Styling

Duckquill is pretty easy to restyle with just a few lines of SCSS in the [appropriate location](@/_index.md#custom-stylesheets). Let's see some examples.

### Navbar

You can make navbar have more traditional look:

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

```scss
#site-nav {
    top: 0;
    margin-block-start: 0;
    box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
    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);
        }

    }

    #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/vr62lb.png)

```scss
#site-nav {
    top: 0;
    margin-block-start: 0;
    box-shadow: 0 0.75rem 1.5rem -1rem rgb(0 0 0 / 0.5);
    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;
    font-size: 3rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.75rem;
}
```

### 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 {
    border-block-start: 0.25rem solid var(--fg-muted-2);
    width: 50%;

    &::after {
        display: none;
    }
}
```

### Background Image

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

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

```scss
@import "../themes/duckquill/sass/_variables.scss";

@include theme-variables using ($theme) {
    @if $theme == "dark" {
        --bg-color: linear-gradient(rgb(0 0 0 / 0.9), rgb(0 0 0 / 0.9));
    }

    @else {
        --bg-color: linear-gradient(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.8));
    }
}

body {
    background: var(--bg-color), center / cover no-repeat fixed url("https://images.unsplash.com/photo-1523712999610-f77fbcfc3843?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
}
```

Most of the time contrast should be okay, but what if it's not? Simply adjust the opacity of `--bg-color` based on your needs.