/* travellight, wearing the same clothes as the fund site.
 *
 * Same vocabulary deliberately: odd/even/high/fore/back, rgb triplets, and the
 * hard offset shadow. Anything learned about one stylesheet applies to the
 * other, and a colour can be carried across by name.
 *
 * No Tailwind here. The look is a dozen colours and a shadow, and a build step
 * between having a thought and publishing it is a tax on the writing.
 *
 * ---------------------------------------------------------------------------
 * THEMES
 *
 * Every colour lives in this block and nowhere else. Add a theme by copying one
 * and changing the numbers; select it with THEME=<name> in the environment.
 *
 * Triplets rather than hex so a colour can be used at partial opacity --
 * rgb(var(--color-high) / 40%) -- which hex cannot do without being restated.
 *
 * Space separated, not comma separated. Both work for rgb(var(--x)), and only
 * this one works for rgb(var(--x) / 40%): the comma form expands to
 * rgb(1, 2, 3 / 40%), which mixes two syntaxes, so the browser drops the whole
 * declaration. It does that silently, and the rule simply does not apply --
 * which is how a gradient came to be written, served, and never drawn.
 * --------------------------------------------------------------------------- */

html[data-theme='hot'] {
    --color-back: 255 255 255;
    --color-fore: 206 240 246;
    --color-contrast: 246 253 255;
    --color-odd: 255 255 255;
    --color-even: 240 253 255;
    --color-odd-hover: 255 232 179;
    --color-even-hover: 255 232 179;
    --color-high: 255 242 211;
    --color-peak: 255 242 211;
    --color-accent: 255 242 211;
    --color-title: 51 51 51;
    --color-text: 51 51 51;
    /* Not fund's 51,51,51. There a link sits in a row that is obviously a
       control; in a paragraph of prose an unstyled link is invisible, which is
       the one thing a blog cannot afford. */
    --color-links: 28 87 122;
    --color-muted: 119 119 119;
    --color-disabled: 153 153 153;
    --color-button: 208 217 255;
    --color-button-hover: 255 232 211;
    --color-strong: 250 167 88;
    --color-shadow: 120 143 153;
    --color-rule: 214 228 234;
}

html[data-theme='cold'] {
    --color-back: 51 51 51;
    --color-fore: 195 218 228;
    --color-contrast: 246 253 255;
    --color-odd: 172 204 219;
    --color-even: 195 218 228;
    --color-odd-hover: 219 187 172;
    --color-even-hover: 228 195 195;
    --color-high: 201 228 195;
    --color-peak: 255 239 197;
    --color-accent: 255 212 163;
    --color-title: 255 255 255;
    --color-text: 34 34 34;
    --color-links: 22 70 99;
    --color-muted: 90 105 112;
    --color-disabled: 140 150 155;
    --color-button: 255 239 197;
    --color-button-hover: 255 212 163;
    --color-strong: 199 91 57;
    --color-shadow: 120 143 153;
    --color-rule: 150 180 195;
}

/* For writing at night, which is when most of it happens. */
html[data-theme='dark'] {
    --color-back: 22 22 20;
    --color-fore: 30 31 29;
    --color-contrast: 38 39 36;
    --color-odd: 30 31 29;
    --color-even: 36 37 34;
    --color-odd-hover: 46 47 43;
    --color-even-hover: 46 47 43;
    --color-high: 52 54 48;
    --color-peak: 52 54 48;
    --color-accent: 52 54 48;
    --color-title: 232 230 225;
    --color-text: 226 224 218;
    --color-links: 138 180 208;
    --color-muted: 150 147 140;
    --color-disabled: 110 108 103;
    --color-button: 60 62 56;
    --color-button-hover: 74 76 68;
    --color-strong: 217 150 100;
    --color-shadow: 70 72 66;
    --color-rule: 58 60 54;
}

/* --------------------------------------------------------------------------- */

* { box-sizing: border-box; }

/* Square, like fund. The shadow does the work a rounded corner would, and the
   two together read as indecision. */
input, textarea, button, table, .panel { border-radius: 0; }

body {
    margin: 0;
    background: rgb(var(--color-back));
    color: rgb(var(--color-text));
    font: 14px/1.6 verdana, helvetica, arial, sans-serif;
}

/* The shell: a panel of --fore on --back, offset shadow, 90% wide. Straight
   from fund's Layout. */
.shell { width: 90%; margin: 0 auto; }

.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
}

.wordmark {
    font-size: 1.25rem;
    font-weight: bold;
    color: rgb(var(--color-title) / 90%);
    text-decoration: none;
    text-shadow: 1px 1px 0 rgb(var(--color-shadow));
}

.panel {
    background: rgb(var(--color-fore));
    box-shadow: 5px 5px 0 0 rgb(var(--color-shadow));
    padding: 1.25rem;
    margin-bottom: 2rem;
}

a { color: rgb(var(--color-links)); }

.nav { display: flex; gap: 1rem; font-size: 0.85rem; }

/* A heading that sits in its own block of --high, the way every section title
   in fund does. */
.heading {
    display: inline-block;
    background: rgb(var(--color-high));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
    padding: 0.4rem 0.6rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
}

/* Reading -------------------------------------------------------------- */

.post, .post-list, .empty, .login { max-width: 40rem; }

.post h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.2rem; }
.post time, .post-list time { display: block; color: rgb(var(--color-muted)); font-size: 0.8rem; }

.post img { max-width: 100%; height: auto; }
.post pre {
    overflow-x: auto;
    padding: 0.8rem 0.9rem;
    background: rgb(var(--color-contrast));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
    font-size: 0.85rem;
}
.post code { font-family: ui-monospace, "Courier New", monospace; }
.post blockquote {
    margin-left: 0;
    padding: 0.1rem 0 0.1rem 0.9rem;
    border-left: 3px solid rgb(var(--color-strong));
    color: rgb(var(--color-muted));
}
.post table { border-collapse: collapse; width: 100%; }
.post th { background: rgb(var(--color-high)); }
.post th, .post td { padding: 0.4rem 0.6rem; text-align: left; }
.post tbody tr:nth-child(odd) { background: rgb(var(--color-odd)); }
.post tbody tr:nth-child(even) { background: rgb(var(--color-even)); }

.post-list { list-style: none; padding: 0; margin: 0; }

/* Cards, like the featured post above them, and spaced so each one's shadow
   falls on the panel rather than on the card below it.
   
   One background rather than the alternating pair fund uses. Striping is what
   makes a dense run of rows readable; once the rows are separated cards with a
   gap between them, two colours read as meaning something they do not. */
.post-list li {
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.75rem;
    background: rgb(var(--color-odd));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
}

.post-list li:last-child { margin-bottom: 0; }
.post-list li:hover { background: rgb(var(--color-odd-hover)); }
.post-list a { font-weight: 600; text-decoration: none; }

/* Writing -------------------------------------------------------------- */

.editor-bar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 0.8rem; }

.title-input {
    flex: 1 1 16rem;
    font: inherit;
    font-size: 1.05rem;
    padding: 0.45rem 0.6rem;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
}

.publish { display: flex; gap: 0.5rem; align-items: center; font-size: 0.8rem; }
.publish-at, .publish button {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
}
.publish button {
    cursor: pointer;
    font-weight: 600;
    background: rgb(var(--color-button));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
}
.publish button:hover { background: rgb(var(--color-button-hover)); }
/* The one that does not change what readers see is quieter, so the eye lands on
   publish. */
.publish button.secondary {
    font-weight: 400;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-muted));
}

.panes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 60rem) { .panes { grid-template-columns: 1fr 1fr; } }

.markdown {
    min-height: 26rem;
    padding: 0.8rem 0.9rem;
    font: 13px/1.65 ui-monospace, "Courier New", monospace;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
    resize: vertical;
}

.preview {
    padding: 0.8rem 0.9rem;
    background: rgb(var(--color-contrast));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
    overflow-x: auto;
}
.preview > :first-child { margin-top: 0; }

.post-table { border-collapse: collapse; width: 100%; }
.post-table th { background: rgb(var(--color-high)); }
.post-table th, .post-table td { text-align: left; padding: 0.5rem 0.6rem; font-size: 0.85rem; }
.post-table tbody tr:nth-child(odd) { background: rgb(var(--color-odd)); }
.post-table tbody tr:nth-child(even) { background: rgb(var(--color-even)); }
.post-table tbody tr:nth-child(odd):hover { background: rgb(var(--color-odd-hover)); }
.post-table tbody tr:nth-child(even):hover { background: rgb(var(--color-even-hover)); }

.state { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.state-draft { color: rgb(var(--color-muted)); }
.state-scheduled { color: rgb(var(--color-strong)); font-weight: 600; }
.state-published { color: rgb(var(--color-text)); }

.login { display: flex; flex-direction: column; gap: 0.6rem; max-width: 18rem; }
.login input, .login button {
    font: inherit;
    padding: 0.45rem 0.6rem;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
}
.login button {
    cursor: pointer;
    font-weight: 600;
    background: rgb(var(--color-button));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
}

.failure { color: rgb(var(--color-strong)); font-size: 0.85rem; font-weight: 600; }
.empty { color: rgb(var(--color-muted)); }

/* Code highlighting. Chroma emits classes under this prefix -- see
   render/chroma.go -- so colours live here and a post is never re-rendered to
   change them. */
.chroma-k, .chroma-kd, .chroma-kn, .chroma-kp, .chroma-kr, .chroma-kt { color: #8b3fa8; }
.chroma-s, .chroma-s1, .chroma-s2, .chroma-sb, .chroma-sc { color: #3f7f3f; }
.chroma-c, .chroma-c1, .chroma-cm, .chroma-cs { color: rgb(var(--color-muted)); font-style: italic; }
.chroma-nf, .chroma-nx { color: #2f5fb0; }
.chroma-m, .chroma-mi, .chroma-mf { color: #8a5a1a; }

html[data-theme='dark'] .chroma-k, html[data-theme='dark'] .chroma-kd,
html[data-theme='dark'] .chroma-kn, html[data-theme='dark'] .chroma-kp,
html[data-theme='dark'] .chroma-kr, html[data-theme='dark'] .chroma-kt { color: #c678dd; }
html[data-theme='dark'] .chroma-s, html[data-theme='dark'] .chroma-s1,
html[data-theme='dark'] .chroma-s2, html[data-theme='dark'] .chroma-sb,
html[data-theme='dark'] .chroma-sc { color: #98c379; }
html[data-theme='dark'] .chroma-nf, html[data-theme='dark'] .chroma-nx { color: #61afef; }
html[data-theme='dark'] .chroma-m, html[data-theme='dark'] .chroma-mi,
html[data-theme='dark'] .chroma-mf { color: #d19a66; }

/* Pictures ------------------------------------------------------------- */

.post-header {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    box-shadow: 5px 5px 0 0 rgb(var(--color-shadow));
}

/* Clear of the panes above it. Flush against the editor the picture reads as
   part of the preview rather than as a control of its own. */
.header-image { margin-top: 2rem; }

.header-thumb {
    display: block;
    /* A thumbnail. The picture is shown at its real size on the post itself,
       and at that size here it pushes the controls off the screen. */
    max-width: 16rem;
    width: 100%;
    height: auto;
    margin-bottom: 0.75rem;
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
}

.image-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

.image-form input[type="file"] { font: inherit; font-size: 0.8rem; }

.alt-input {
    flex: 1 1 14rem;
    font: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
}

.header-image button {
    font: inherit;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    font-weight: 600;
    background: rgb(var(--color-button));
    color: rgb(var(--color-text));
    border: 1px solid rgb(var(--color-rule));
    box-shadow: 3px 3px 0 0 rgb(var(--color-shadow));
}

.header-image button.secondary {
    font-weight: 400;
    background: rgb(var(--color-odd));
    color: rgb(var(--color-muted));
}

.hint { color: rgb(var(--color-muted)); font-size: 0.75rem; margin: 0.4rem 0 0; }

/* The newest post, opened up ------------------------------------------- */

/* The same card the list below is made of, at a larger size. Sitting straight
   on the panel it read as a different kind of object from the posts underneath
   it, when it is the same kind of object with more of it showing. */
.featured {
    background: rgb(var(--color-odd));
    padding: 1rem;
    margin-bottom: 2rem;
    /* The deeper of the two shadows fund uses, so this reads as the one thing
       on the page rather than as the first of many equal ones. */
    box-shadow: 5px 5px 0 0 rgb(var(--color-shadow));
}

/* Inset, with the card's padding all the way round it. Bleeding it to the top
   and left edges left the picture touching two sides and not the others, which
   reads as a mistake rather than as a decision. */
.featured .post-header {
    width: 100%;
    margin: 0 0 1rem;
    box-shadow: none;
}

/* Link coloured, like every other post title on the page. */
.featured h1 { margin-top: 0; }
.featured h1 a { text-decoration: none; color: rgb(var(--color-links)); }

/* The last of the visible text fades into the card, so there is a reason to
   look for the link rather than only a link to find.
   
   Positioned above its own wrapper rather than over the body of the post: the
   chunks arrive as siblings, so a fade fixed to the first one would stay where
   the reading began. Sitting on the control means it moves with it.
   
   Hidden from screen readers -- it is a gradient standing in for "there is more
   below", and the button beside it already says that in words. */
.more-wrap { position: relative; }

.fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 4.5rem;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgb(var(--color-odd) / 0%),
        rgb(var(--color-odd) / 85%) 70%,
        rgb(var(--color-odd)));
}

/* A link, not a button. It continues the paragraph above it rather than being a
   thing to do to the page, and at full width with a shadow it competed with the
   post for attention.
   
   Still a <button> in the markup: it acts on the page rather than going
   anywhere, so it should be one for anybody navigating by keyboard or reading
   with a screen reader. Only the appearance changes. */
.more {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0;
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    color: rgb(var(--color-links));
    background: none;
    border: 0;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.more:hover { color: rgb(var(--color-strong)); }