blog/content/tricks/index.md

+++ title = "Tricks" +++

Tricks

Several lesser known Duckquill thingies.

If you have some, please consider sharing them here.

Table of Contents

• Styling
  • Navbar
  • Headings
  • Strikethrough
  • Edge Highlights
  • Horizontal Rules
  • Background Image

Styling

Duckquill is pretty easy to restyle with just a few lines of SCSS in the appropriate location. Let's see some examples.

Navbar

You can make navbar have more traditional look:

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

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

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:

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:

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

@include theme-variables using ($theme) {
    @else {
        --edge-highlight: 0 0 0 transparent;
    }
}

Horizontal Rules

Don't like that fancy horizontal rule? Let's make it more modern:

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:

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