blog/src/styles/base.scss

@import 'variables';

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

html {
    font-size: $font-size-root;
    background: $body-background-color;
}

body {
    font-family: $font-family-base;
    font-weight: $font-weight-base;
    font-size: $font-size-base;
    line-height: $line-height;
    color: $font-color-base;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga', 'kern';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    background: $body-background-color;
    transition: background .6s $easing;

    &.dark {
        background-color: $body-background-color--dark;
        color: $text-color--dark;
    }
}

p,
ul,
ol {
    margin: 0 0 $spacer;
}

// Headings
/////////////////////////////////////

h1 {
    font-size: $font-size-h1;
}

h2 {
    font-size: $font-size-h2;
}

h3 {
    font-size: $font-size-h3;
}

h4 {
    font-size: $font-size-h4;
}

h5 {
    font-size: $font-size-h5;
}

h6 {
    font-size: $font-size-h6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: $font-family-headings;
    line-height: $line-height-headings;
    color: $color-headings;
    font-weight: $font-weight-headings;
    margin: 0 0 $spacer;
    letter-spacing: -.02em;

    .dark & {
        color: $color-headings--dark;
    }
}

// Links
/////////////////////////////////////

a {
    color: $brand-cyan;
    text-decoration: none;
    transition: .2s ease-out;

    &:hover,
    &:focus {
        color: lighten($brand-cyan, 10%);
        transform: translate3d(0, -.1rem, 0);
    }
}

// Media
/////////////////////////////////////

img,
video,
svg {
    max-width: 100%;
    height: auto;
    margin: 0;
}

#___gatsby {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}