jb-ssg-site/static/main.css

:root {
    --black: #000000;
    --charcoal: #38383b;
    --light-gray: #dedede;
    --petrol: #476c77;
    --off-white: #fdfdfd;
    --gothic: 'Didact Gothic', sans-serif;
    --garamond: 'Cormorant Garamond', serif;
}

html {
    font-size: 18px;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--petrol);
}

.header-banner-container {
    background-color: var(--petrol);
    font-family: var(--gothic);
}

header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 15px 50px;
    color: var(--off-white);
}

header .titles {
    display: flex;
    align-items: baseline;
    column-gap: 15px;
}

header .titles * {
    margin: 0;
}

header .titles h1 {
    letter-spacing: 0.175em;
}

header .titles h2 {
    font-size: 18px;
    letter-spacing: 0.15em;
}

nav ul {
    display: flex;
    column-gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a,
nav a:visited {
    letter-spacing: 0.1em;
    color: var(--light-gray);
    text-decoration: none;
}

nav a:hover {
    color: var(--off-white);
}

.banner {
    display: flex;
    align-items: center;
    color: var(--off-white);
}

.banner > * {
    width: 100%;
    padding: 15px 50px 30px;
}

.banner-text {
    letter-spacing: 0.15em;
}

main {
    background-color: var(--off-white);
    display: flex;
    flex-direction: column;
    align-items: center;
}

article {
    font-family: var(--garamond);
    letter-spacing: 0.05em;
    padding: 50px 25px;
    max-width: 70ch;
    text-align: justify;
}

article h1 {
    font-size: 2em;
}

article h2 {
    font-size: 1.75em;
}

article h3 {
    font-size: 1.5em;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 20px 50px;
    background-color: var(--petrol);
    color: var(--off-white);
    font-family: var(--garamond);
}

footer .social-icons {
    display: flex;
    column-gap: 30px;
}

footer svg {
    height: 48px;
    fill: var(--light-gray);
}

footer svg:hover {
    fill: var(--off-white);
}

input,
textarea,
button {
    border-radius: 3px;
}

.headshot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headshot {
    width: 100%;
}

.biography-banner .blurb-container {
    display: flex;
    flex-direction: column;
    row-gap: 36px;
}

.biography-banner .blurb-container > * {
    margin: 0;
}

.biography-banner .blurb-container p {
    font-size: 36px;
}

.biography-banner .blurb-container p#jesse-brault-name {
    letter-spacing: 0.15em;
    font-size: 54px;
}

.biography-banner .blurb-container button {
    border: 1px solid var(--charcoal);
    background-color: var(--light-gray);
    width: 150px;
    height: 40px;
    font-family: var(--gothic);
    font-size: 18px;
}

.biography-banner .blurb-container button:hover {
    background-color: var(--off-white);
    cursor: pointer;
}

.compositions {
    min-width: min(100%, 700px);
}

.composition-categories {
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}

.composition-listings > * {
    border-top: 1px solid var(--light-gray);
}

.composition-listings:last-child {
    border-bottom: 1px solid var(--light-gray);
}

.composition-listing {
    padding-block: 20px;
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-areas:
        'r1 date'
        'r2 .'
        'r3 .';
    row-gap: 10px;
}

.composition-listing .info-row-1 {
    grid-area: r1;
    display: flex;
    align-items: baseline;
    column-gap: 10px;
}

.composition-listing .info-row-1 .title {
    margin: 0;
    font-size: 1.5em;
}

.composition-listing .info-row-1 .title a {
    color: var(--charcoal);

    &:hover {
        color: hsl(from var(--charcoal) h s l / 0.75);
    }
}

.composition-listing .info-row-1 .sub-title {
    margin: 0;
}

.composition-listing .info-row-2 {
    grid-area: r2;
}

.composition-listing .info-row-3 {
    grid-area: r3;
}

.composition-listing .date-column {
    grid-area: date;
    align-self: center;
    justify-self: center;
    font-size: 1.25em;
}

.contact-banner article.social-media-links {
    font-family: var(--gothic);
}

.contact-banner article.social-media-links h1 {
    font-size: 36px;
    color: var(--light-gray);
}

.contact-banner div.social-media-links {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 20px;
}

.contact-banner a {
    display: contents;
    color: var(--light-gray);
    fill: var(--light-gray);
    text-decoration: none;
}

.contact-banner a:hover {
    & span {
        color: var(--off-white);
    }
    & svg {
        fill: var(--off-white);
    }
}

.contact-banner a:visited {
    & span {
        color: var(--off-white);
    }
    & svg {
        fill: var(--off-white);
    }
}

.contact-banner svg {
    height: 72px;
    justify-self: center;
}

.contact-banner a span {
    font-size: 27px;
    justify-self: stretch;
}

article.contact {
    min-width: 500px;
    max-width: 50%;
    padding: 50px;
}

form.contact {
    width: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.contact .control {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.contact .control * {
    width: 100%;
}

.contact .control input,
.contact .control textarea {
    min-height: 40px;
    font-family: var(--garamond);
    font-size: 18px;
    padding: 5px;
    border: 1px solid var(--charcoal);
}

.contact .control textarea {
    min-height: 160px;
}

.contact .control input[type='submit'] {
    background-color: var(--petrol);
    color: var(--off-white);
    height: 60px;
}

.contact .control input[type='submit']:hover {
    background-color: rgba(from var(--petrol) r g b / 0.5);
    cursor: pointer;
}

.contact .control .message {
    margin: 0;
}