/* ==========================================================================
   Index - two columns, every measure a share of the screen's width so the
   proportions are the same on every screen:

     | cover        | posts (three quarters)          |
     | site title   |                                 |
     | description  |                                 |
     | links        |                                 |
     | index        |                                 |

   The bar (a quarter; a third on a phone) stays in view while the posts scroll, and scrolls on
   its own when it's taller than the screen. The index is every post, by
   title (its date when it has none). Each post's content keeps to two
   thirds of its column; the line under it runs to the right edge.
   ========================================================================== */

:root {
  --type: max(11px, 1vw);       /* 17px on a 1712px screen; never below 11px on a phone */
  --pad: 0.55vw;                /* the bar sits just off the left edge */
  --gap: 1.17vw;                /* picture to line, line to next title */
  --gutter: 2vw;                /* between the bar's text and the posts */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); /* exactly a quarter and three quarters, whatever is in them */
  align-items: start;
  font-family: monospace, monospace; /* doubled: stops browsers shrinking generic monospace */
  font-size: var(--type);
  line-height: 1.34;
  color: #111;
  background: #fff;
  overflow-x: hidden;
}

/* Every link in the text colour, underlined in the accent (in black without one). */
a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent, currentColor); }
p { margin: 0; }

/* The bar: cover, title, description, links, then the index. */
.bar {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 0.6vw var(--gutter) 0.6vw var(--pad);
  overflow-wrap: anywhere;
}
/* Cover size setting: the bar's width at medium, half at small. */
.site-cover {
  display: block;
  width: calc(100% * var(--cover-scale, 1));
  max-width: 100%;
  height: auto;
  margin-bottom: 1em;
}
.site-title { font-weight: bold; }
.site-description { margin-top: 1em; }
.social-links { display: flex; flex-wrap: wrap; gap: 0 1ch; margin-top: 1em; font-size: inherit; }
.index { margin-top: 2.68em; }
/* One line each: a title too long for the bar is cut with "…", to the bar's width as the screen resizes. */
.index a { display: block; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.index a:hover { text-decoration: underline; text-decoration-color: var(--accent, currentColor); } /* the text stays black, its underline the accent */

/* Posts: the other two thirds; their content keeps to two thirds of that. */
.posts { padding-top: 0.6vw; min-width: 0; }
.post { width: calc(100% * 2 / 3); }

/* Phones: the bar a third, the posts two thirds, their content filling all of it. */
@media (max-width: 700px) {
  body { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* All of it, less the same gap from the right edge as the bar's from the
     left; the line under each post still runs to the edge. */
  .post { width: auto; margin-right: var(--pad); }
}
.post-title { font-weight: bold; }
.post-title span { text-decoration: underline; } /* the title, not the # after it */
.post-title .post-link { text-decoration: none; }
.post-date { color: rgb(17 17 17 / 0.6); } /* faded text only, so the # keeps its full accent */
.post-link { color: var(--accent, inherit); } /* the # (Show a # link): in the accent */
.post-body { margin-top: 1.34em; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 1.34em; }
.post-body > :last-child { margin-bottom: 0; }

.post-image,
.post-video,
.post > .captioned img { display: block; width: 100%; height: auto; margin-top: 0.4em; }
.post-file { display: inline-block; margin-top: 0.4em; }

hr {
  margin: var(--gap) 0;
  border: 0;
  border-top: 1px solid var(--accent, #666); /* the accent; grey without one */
}

.empty-state { padding-top: 0.4em; }