satchlj.com/themes/zenn/sass/_base.scss

html {
    font-size: 16px;
}

body {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    font-family: $font-base;
    background-color: $color-main-bg;
    transition: background-color 0.2s ease;
}

a {
    display: inline-block;
    color: $color-link;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
    text-decoration: none;
    outline: 0;
    margin: 0 -0.15em;
    padding: 0 0.15em;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;

    &:hover {
        color: $color-link-hover;
    }
    &:focus {
        background-color: rgba($color-link, 0.1);
    }
    &:active {
        background-color: rgba($color-link-hover, 0.2);
    }
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.5em;
}

h4 {
    font-size: 1.25em;
}

main {
    #{headings(1,6)} {
        font-family: $font-main;
        color: $color-header;
        transition: color 0.2s ease-in-out;

        a {
            color: $color-header;

            &:hover {
                color: rgba($color-header, 0.7);
            }
            &:focus {
                background-color: rgba($color-header, 0.1);
            }
            &:active {
                background-color: rgba($color-header, 0.2);
            }
        }
    }
}

p {
    line-height: 1.5;
}

hr {
    border: 0.25em solid $color-main-bg-alt;
    border-radius: 0.25em;
    margin: 2em 5em;
}

.color-header {
    color: $color-header;
}

// Block all CSS transitions inside elements having this class
// Used on page load, to prevent weird CSS transition-on-load behaviour
.notransition * {
  transition: none !important;
}