cheesy/moku/static/moku.css

@import url('https://fonts.googleapis.com/css2?family=Solway:wght@400;700&display=swap');

:root {
    --tangerine: #F7A278;
    --orange: #c94c10;
    --champagne: #FDE4D8;
    --dusty-champagne: #EFC6B8;
    --charcoal: #626262;

    --emoji-picker-rounding: 6px;
    --emoji-picker-label: #774519;
    --emoji-picker-marker: #b9712f;

    --image-max-size: 324px;

    --font-family: 'Solway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

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

html {
    font-size: 62.5%;
    line-height: 1.5;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--champagne);
    font-size: 1.6rem;
    line-height: 1.4;
    max-width: 768px;
    margin-inline: auto;
    padding: 2.4rem 1.2rem;
    font-family: var(--font-family);
}

.mt {
    margin-block-start: 1.6rem;
}

.mb {
    margin-block-end: 1.6rem;
}

.mx {
    margin-inline: 1.2rem;
}

.my {
    margin-block: 1.6rem;
}

.small {
    font-size: 1.4rem;
}

.subtle {
    color: var(--charcoal);
}

a.subtle {
    font-weight: normal;
}

a.subtle:hover {
    color: var(--orange);
}

.messages {
    margin-block-end: 1.6rem;
    display: grid;
    row-gap: .8rem;
    font-size: 1.5rem;
}

.messages li.success::before {
    content: "✅ ";
}

.messages li.error::before {
    content: "❌ ";
}

.messages li.info::before {
    content: "ℹ️ ";
}

button.logout {
    border: none;
    outline: none;
    background: none;
    display: inline;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-family);
}

a, button.logout {
    color: var(--orange);
    font-weight: bold;
    text-decoration: none;
    text-decoration-skip-ink: none;
    text-underline-offset: 2px;
}

a:hover, button.logout:hover {
    text-decoration: wavy underline;
}

.user-content {
    word-break: break-word;
}

.profile h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--orange);
}

.avatar {
    border-radius: 8px;
}

aside .avatar {
    max-width: 100%;
}

dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 1.2rem;
    column-gap: 1.8rem;
}

dl > div {
    display: grid;
    grid-template-rows: auto 1fr;
}

dl dt {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--charcoal);
}

dl > .double {
    grid-column: 1 / span 2;
}

form .errors {
    font-size: 1.5rem;
    display: grid;
    margin-block-end: .8rem;
}

form .errors::before {
    content: "fix these and we're good to go:";
    font-size: 1.4rem;
    color: var(--charcoal);
    margin-block-end: .4rem;
}

form .errors li::before {
    content: "❌ ";
}

form .errors li {
    text-transform: lowercase;
}

form:not(.logout) {
    display: grid;
    row-gap: .8rem;
}

form.auth {
    max-width: 378px;
}

form .field {
    display: grid;
    row-gap: .4rem;
}

form .field .field-button {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: .8rem;
}

form .checkbox {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    column-gap: .8rem;
}

form .field .help {
    color: var(--charcoal);
    font-size: 1.4rem;
}

form input:not([name$="-clear"]),
form select {
    width: 100%;
}

form textarea {
    height: 6ch;
    resize: vertical;
}

form input[type=text],
form input[type=password],
form input[type=email],
form textarea,
form select {
    padding: .4rem .2rem;
    font-size: 1.4rem;
    font-family: var(--font-family);
    border: 1px solid var(--charcoal);
    border-radius: 3px;
    background: var(--champagne);
}

form input[type=text]:focus,
form input[type=password]:focus,
form input[type=email]:focus,
form textarea:focus,
form select:focus {
    background: white;
    outline: 2px solid var(--tangerine);
}

form .emoji-picker {
    display: grid;
    margin-block-end: .8rem;
}

form .emoji-picker details:first-of-type summary {
    border-top-right-radius: var(--emoji-picker-rounding);
    border-top-left-radius: var(--emoji-picker-rounding);
}

form .emoji-picker details:last-of-type:not([open]) summary {
    border-bottom-right-radius: var(--emoji-picker-rounding);
    border-bottom-left-radius: var(--emoji-picker-rounding);
}

form .emoji-picker details summary {
    background: var(--dusty-champagne);
    color: var(--emoji-picker-label);
    font-size: 1.4rem;
    font-weight: bold;
    padding: .4rem .6rem;
    user-select: none;
    cursor: default;
}

form .emoji-picker details summary::marker {
    color: var(--emoji-picker-marker);
}

form .emoji-picker ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: .2rem;
    row-gap: .2rem;
    justify-items: center;
    border: solid var(--dusty-champagne);
    border-width: 0 2px 0 2px;
    padding: .4rem;
}

form .emoji-picker details:last-of-type[open] ul {
    border-width: 0 2px 2px 2px;
    border-bottom-right-radius: var(--emoji-picker-rounding);
    border-bottom-left-radius: var(--emoji-picker-rounding);
}

form .emoji-picker ul li label {
    padding: .3rem;
}

form .emoji-picker ul li input[type=radio] {
    display: none;
}

form .emoji-picker ul li input[type=radio]:checked + label {
    outline: 3px solid var(--tangerine);
    border-radius: 4px;
}

form button[type=submit]:not(.logout) {
    padding: .4rem .6rem;
    font-size: 1.5rem;
    font-family: var(--font-family);
    background: var(--tangerine);
    border: 1px solid var(--orange);
    outline: none;
    border-radius: 4px;
}

header {
    display: grid;
    margin-block-end: 2.4rem;
}

header h1 {
    font-weight: bold;
    font-size: 2.4rem;
}

header h1 sup {
    vertical-align: super;
    font-size: 1.4rem;
    font-weight: normal;
}

header nav ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 1.2rem;
    row-gap: .8rem;
}

.blog {
    display: grid;
    row-gap: 2.4rem;
}

.blog > h2 {
    font-size: 2.2rem;
    font-weight: bold;
}

.blog-post {
    display: grid;
    row-gap: .4rem;
}

.blog-post > h3 {
    font-size: 2rem;
    font-weight: bold;
}

.blog-post .post-metadata {
    font-size: 1.4rem;
    color: var(--charcoal);
    margin-block-end: 1.2rem;
}

.grid-content {
    display: grid;
    row-gap: 1.2rem;
}

.grid-content main {
    display: grid;
    row-gap: 1.8rem;
}

.grid-content main article {
    padding: .8rem 1.8rem;
    border-left: 4px solid var(--tangerine);
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.2rem;
}

.grid-content main article .image {
    grid-column: 1 / span 2;
    margin-block-end: 1rem;
}

.grid-content main article .image img {
    max-width: 100%;
    max-height: var(--image-max-size);
    border-radius: 8px;
}

.grid-content main article .emoji {
    font-size: 2rem;
    padding-top: .8rem;
}

.grid-content main article .body {
    display: grid;
    row-gap: .2rem;
}

.grid-content main article .body .metadata {
    font-size: 1.4rem;
    color: var(--charcoal);
}

.grid-content main article .body .recipe {
    margin-block-start: .4rem;
}

.grid-content main article .body .recipe summary {
    font-size: 1.4rem;
    cursor: default;
    user-select: none;
}

.grid-content main article .body .recipe ol {
    font-size: 1.5rem;
    list-style: decimal;
    margin-block-start: 1rem;
    padding-inline-start: 3.4rem;
    border-left: 2px solid var(--tangerine);
}

.block {
    max-width: 528px;
    display: grid;
    row-gap: .8rem;
}

.block h2 {
    font-size: 2rem;
    font-weight: bold;
}

.block h3 {
    font-size: 1.8rem;
    font-weight: bold;
    margin-block-start: 1.2rem;
}

.block ul:not(.errors):not(.emoji-picker-group),
.block ol {
    padding-inline-start: 3.2rem;
    display: grid;
    row-gap: .4rem;
}

.block ul:not(.errors):not(.emoji-picker-group) {
    list-style: disc;
}

.block ol {
    list-style: decimal;
}

.block strong {
    font-weight: bold;
}

.block em {
    font-style: italic;
}

footer {
    margin-block-start: 1.8rem;
}

footer nav ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.2rem;
}

footer nav ul li.version {
    color: var(--charcoal);
    font-size: 1.4rem;
}

footer nav ul li a {
    font-size: 1.4rem;
    color: var(--charcoal);
}

footer nav ul li a:hover {
    color: var(--orange);
}

@media(min-width: 768px) {
    body {
        padding: 4rem 1.2rem 2.4rem 1.2rem;
    }

    header {
        grid-template-columns: auto 1fr;
        column-gap: 2.4rem;
        align-items: center;
    }

    header nav ul {
        justify-content: flex-end;
    }

    .grid-content {
        grid-template-columns: 214px 1fr;
        column-gap: 2.4rem;
        row-gap: 0;
        align-items: flex-start;
    }

    .grid-content main article .image img {
        max-width: var(--image-max-size);
    }
}