_extra.scss

hr {
    border: 0;
    height: 1px;
    margin: 32px 0;
    background-color: #bfbfbf;
}

li {
    // For consistency with other elements.
    margin: 15px 0;
}

pre>code {
    // To avoid grey background on code blocks.
    background-color: inherit;
}

.site-header {
    // To avoid a thick black line on top of the page.
    border-top: none;

    // To center the site's title.
    text-align: center;
}

.site-title {
    // To center the site's title.
    float: none;
    padding: 0;
}

.intro {
    color: #ffffff;
    background-color: $brand-color;
    margin-top: -30px;
    padding: 32px 0;
    border-bottom: 1px solid #e8e8e8;
    text-align: center;

    .intro-icons svg {
        width: 92px;
        height: 92px;
    }

    .intro-lead {
        font-weight: bold;
        font-size: 1.5em;
    }

    a {
        color: white;
        font-weight: bold;
    }
}

.home {
    margin-top: 32px;
}

.social-links {
    list-style: none;
    margin: 0;

    li {
        margin-bottom: 4px;

        a {
            color: $grey-color;
        }
    }
}

.anchor {
    visibility: hidden;
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
    visibility: visible;
}

.post-content p img {
    display: block;
    box-sizing: border-box;
    margin: 16px auto;
    padding: 8px;
    border: 1px solid #e8e8e8;
}

.post-link {
    display: inline-block;
}

.post-list li h3 {
    margin-bottom: 0;
}

input, button {
    font-size: inherit;
}

input {
    min-width: 0; // Allow the input to shrink on small devices.
}

a.btn, // Trick to increase the specificity and win against rules such as a:visited
.btn {
    text-decoration: none;
    border-radius: 3px;
    font-weight: 600;
    border: none;
    box-sizing: border-box;
    display: inline-block;
    padding: 0.4em 2em;
    transition: background-color 125ms;

    background-color: $brand-color;
    color: $background-color;
    border-color: $background-color;

    &:hover {
        color: lighten($background-color, 10);
        background-color: lighten($brand-color, 5);
    }

    &:active {
        background-color: darken($brand-color, 5);
    }
}

input[type=email] {
    border-radius: 3px;
    border: 1px solid $brand-color;
    box-sizing: border-box;
    padding: .4em;
}

// A hack for image captions.
// See https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll
img+em,
a:first-child+em:last-child,
video+em {
    display: block;
    text-align: center;
    color: $grey-color;
}

.email-form {
    display: grid;
    margin-top: $spacing-unit;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: .6em 1em;
    background-color: color-mix(in oklab, $brand-color 20%, #fff);
    padding: $spacing-unit * .5;
    align-items: center;
    border-radius: 3px;

    .email-form__icon {
        width: 5em;
        height: 5em;
        --icon-stroke-color: #{$brand-color};
        --icon-fill-color: rgba(255, 255, 255, .4);
    }

    .email-form__description {
        max-width: 18em;
    }

    .email-form__input {
        grid-column: 1 / 3;
    }
}

.email-input {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 5px;
    
    label {
        grid-column: 1 / 3;
        font-size: .8em;
    }
}