@import "normalize.css";

:root {
    /* https://design.wikimedia.org/style-guide/visual-style_typography.html */
    --sans-serif: 'Source Sans Pro',-apple-system, BlinkMacSystemFont,
                  'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;
    --serif: 'Source Serif Pro','Linux Libertine', Georgia, Times, serif;
    --monospace: 'Source Code Pro', 'Menlo', 'Consolas', 'Liberation Mono',
                 'Courier New', monospace;
    --background: #fafafa;
    --accent-background: #eeeeee;
    --text: black;
    --subtitle: #696969;
    --anchor: #4682B4; /* steelblue */
    --comment: #909090;
    --subtle: #d0d0d0;
    --strong: #606060;
    --subtle-border: 1pt solid var(--subtle);
    --strong-border: 1pt solid var(--strong);
    --pre-font-size: 0.9rem;
    --basic-margin: 25pt;
    --basic-margin-2x: 50pt;
    --readable-width: 46rem;
    --header-footer-padding: 6pt;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

/*** Links ***/

a {
    color: var(--anchor);
}

nav.site > a:first-child {
    color: black;
}

nav a,
td.post a {
    text-decoration: none;
}

nav a:hover,
div.tag-list a:hover,
td.post a:hover {
    text-decoration: underline;
}

div.tag-list > a {
    padding: 1pt 5pt;
    break-inside: avoid;
    text-decoration: none;
    background: white;
    border: 1pt solid steelblue;
}

div.tag-list > a.selected {
    background: steelblue;
    color: white;
}

/*** Body ***/

body {
    background: var(--background);
    color: var(--text);
    font-family: var(--serif);
    line-height: 1.5;
    font-size: 1rem;
    /* Use flex so we can put the footer at the bottom of the
       viewport when there's not enough content to fill it. */
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

header {
    padding: var(--header-footer-padding) 0;
    background: var(--accent-background);
    border-bottom: var(--subtle-border);
}

main {
    margin: var(--basic-margin) auto;
    width: var(--readable-width);
    max-width: calc(100vw - var(--basic-margin-2x));
    flex-grow: 1; /* grow to push the footer down if necessary */
}

footer {
    padding: var(--header-footer-padding);
    background: var(--accent-background);
    border-top: var(--subtle-border);
    text-align: center;
    font-family: var(--sans-serif);
}

div.bio {
    display: flex;
    gap: var(--basic-margin);
}

#avatar {
    width: 180pt;
    height: 180pt;
    margin: auto;
}

/*** Nav ***/

nav {
    display: flex; /* logo left, nav-links right */
    justify-content: space-between;
    margin: auto;
    font-family: var(--sans-serif);
    font-size: 120%;
    width: var(--readable-width);
    max-width: calc(100vw - 2em);
}

#logo {
    height: 22pt;
    width: auto;
}

div.nav-links {
    display: flex;
    gap: 1.25rem;
}

/*** Headings ***/

h1:first-child, h2:first-child {
    margin-top:0;
}

h1, h2, h3 {
    margin: 1.5rem 0 1rem 0;
    font-weight: 600;
    line-height: 1.1;
}

h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 110%; }

h1:has(+ .post-subheader) {
    margin-bottom: 0.25rem;
}

/*** Img ***/

img {
    display: block;
    width: 100%;
}

/*** List ***/

ol, ul {
    margin-left: 1rem;
}

/*** Text ***/

p { margin: 1rem 0; }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

strong {
    font-weight: bold;
}

blockquote {
    border-left: 2pt solid var(--subtle);
}

blockquote > p {
    padding-left: 2rem;
}

.date { color: #666; }

.copyright {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0.5em;
}

/*** Code ***/

span.comment {
    color: var(--comment);
    font-style: italic;
}

span.string {
    color: #555;
}

span.symbol {
    font-style: normal;
}

pre, code {
    font-family: var(--monospace);
}

p code, span code, li code {
    background: var(--accent-background);
    padding: 0px 2px;
    white-space: nowrap;
}

pre {
    background: var(--accent-background);
    padding: 8pt;
    font-size: var(--pre-font-size);
    line-height: 1.4;
    overflow: auto;
    border-left: 3pt solid var(--subtle);
    margin: 1rem 0;
}

/*** Posts ***/

div.post-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10pt;
    line-height: 1.3;
    padding-bottom: 0.5rem;
    margin-bottom: var(--basic-margin);
    border-bottom: 1pt solid var(--subtle);
}

div.tag-list {
    display: flex;
    gap: 5pt;
    flex-wrap: wrap;
    line-height: 1.3rem;
    font-family: var(--sans-serif);
    font-variant: small-caps;
    font-size: 90%;
}

table {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}

td.date {
    width: 11ch;
    margin-right: 1rem;
}

td.post {
    overflow:hidden;
    white-space:nowrap;
    text-overflow: ellipsis;
}

div.post img {
    margin: var(--basic-margin) auto;
}

/*** Figure ***/

figure {
    width: 100%;
    break-inside: avoid;
}

figcaption {
    padding: 0.5em 0.5em 0 0.5em;
    text-align: center;
    font-size: 90%;
}

/*** Galleries ***/

nav.image-nav {
    justify-content: center;
    gap: 1rem;
    margin: 10pt auto;
    font-variant: small-caps;
    font-size: larger;
}

div.presenter {
    margin: 0 var(--basic-margin) var(--basic-margin);
    display: flex;
    flex: 1;
    position: relative;
}

img.presented {
    margin: auto;
    border: 2pt solid black;
    width: auto;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

div.artwork,
div.photos {
    margin: var(--basic-margin);
    columns: 6 330px;
    column-gap: var(--basic-margin);
}

div.photos img {
    margin-bottom: var(--basic-margin);
    border: var(--strong-border);
    height: auto;
}

div.artwork figure {
    margin-bottom: var(--basic-margin);
}

div.artwork img {
    border: var(--strong-border);
    height: auto;
}

/*** Media ***/

@media screen and (max-width: 600px) {
    :root {
        --basic-margin: 15pt;
        --basic-margin-2x: 30pt;
    }

    header {
        padding-bottom: 4pt;
    }

    nav.site {
        flex-direction: column;
        align-items: center;
    }

    div.post-subheader {
        flex-direction: column;
        align-items: revert;
    }

    div.copyright {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    div.bio { flex-direction: column; }

    span.license-spacer { display: none; }
}

@media print {
    body { display: revert; }

    main, nav {
        width: revert;
        max-width: revert;
    }

    div.artwork, div.photos {
        column-count: revert;
        column-width: 120px;
    }

    img.presented {
        position: revert;
    }
}