website/_sass/_custom.scss

// custom default properties for normal tags
html {
    scroll-behavior: smooth
}

blockquote {
    font-family: "Georgia", $base-font-family;
    border-left: $brand-color solid 5px;
    color: $grey-color-dark;
    font-style: italic;
    padding: 1em;
    word-spacing: 1px;
}

h1, h2, h3, h4, h5, h6 {
    code {
        font-size: 1em;
    }
}

hr {
    margin: 2em 0;
}

img {
    height: auto;
    max-width: 100%;
    padding: 1em 0;
}

iframe {
    margin: 1.5em 0;
    max-width: 100%;
}

li > ul, li > ol, ul > li, ol > li {
    margin-bottom: 1em;
}

ul.social-media-list > li, #list-container > ul > li {
    margin: 0;
}

// Table custom properties
table:not(.rouge-table) {
    th {
        background: linear-gradient(to bottom, lighten($brand-color, 25%), $brand-color_l);
        color: $super-platinum;
    }
    tr {
        overflow: auto;
        code {
            color: $text-color;
        }
        &:nth-child(odd) {
            background: linear-gradient(to right, $brand-color_d, $brand-color);
            color: $super-platinum;
        }
        &:nth-child(even) {
            background: linear-gradient(to right, $brand-color_d, $brand-color_l);
            color: $super-platinum;
        }
    }
}

.table {
    margin: 1em 0;
    overflow-x: auto;
    table {
        margin: 0;
    }
    @include media-query($on-palm) {
        height: 300px;
    }
}

// code syntax table
figure.highlight {
    border: 1px solid $grey-color-light;
    border-radius: 3px;
    background-color: #eef;

    * {
        border: 0;
        margin: 0;
    }

    td.gutter.gl {
        border-right: 1px solid $grey-color-light;

        > pre.lineno {
            padding-left: 0;
        }
    }
}

.mathjax {
    &-text {
        font-family: "Georgia", $base-font-family;
    }
}

// custom properties for several layout items
#personal-logo {
    width: 29px;
    height: auto;
    padding: 0;
}

// Specific parts in content
.word-definition {
    text-decoration: underline;
}

code.fileName {
    color: darken($code-keywords, 10%);
}

.dt-updated, .reading-minutes {
    color: $grey-color;
    font-size: $small-font-size;
    margin-top: 0;
}