_type.scss

/* TYPOGRAPHY */

/* FONT IMPORT */

// I use Google Fonts & Fontify for simplicity's sake. I may embed fonts manually in the future, if I see performance problems.

// I use the Rubik family for body text, and IBM Plex Mono for prefortmatted text, code examples, and blockquotes. Teko gets used for Headings.

// This setup allows typefaces to change size as you make the screen wider or smaller.

:root {
    font-size: clamp(var(--min-font-size), calc(1rem + ((1vw - 7.68px) * 0.3472)), var(--max-font-size));
    min-height: 0vw;
}

/* Base Styles */

body {
    font-family: var(--body-font);
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-color-1);
}

p {
    margin-bottom: 1.15rem;
}

strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* HEADINGS */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: normal;
    line-height: 1.15;
    margin: 1.05rem 0 1.05rem;
}

h1 {
    margin-top: 0;
    font-size: 2.488em;
}

h2 {
    font-size: 2.074em;
}

h3 {
    font-size: 1.728em;
}

h4 {
    font-size: 1.44em;
}

h5 {
    font-size: 1.2em;
}

small, .text_small {
    font-size: var(--small-text);
}

/* GENERAL ALIGNMENTS */

p,
ul,
ol,
pre,
table,
blockquote {
    margin-bottom: 1.5em;
    margin-top: 0em;
}

ul ul,
ol ol,
ul ol,
ol ul {
    margin-bottom: 0em;
    margin-top: 0em;
}

hr,
.hr {
    border: 1px solid;
    margin: -1px 0;
}

sub,
sup {
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* LISTS */

  // All lists placed in a body of text (such as an article) must be wrapped in any element with the .content class. ie <article class="content">

  // Nice, simple styling for unordered lists.

.content ul {
    list-style: circle;
    padding-left: 1.5em;

        li {
            &::marker {
                color: var(--primary-color);
            }

            p:last-child {
                margin: 0 !important;
            }
    }
}

.content {

    ol {
        list-style: decimal;
        padding-left: 1.5em;

        li {
            &::marker {
                color: var(--primary-color);
                font-style: italic;
            }

            p:last-child {
                margin: 0 !important;
            }
        }
    }
}

/* LINKS */

a {
    color: var(--primary-color);

    &:hover {
        color: var(--link-hover);
    }
}

/* SUP & SUB */

sup, sub {
    font-size: .7em;
}