/* aleste.net/blog -- on top of /_home/style.css, which it shares the header,
   the colours and the reply form with. Generated into aleste/blog/ by
   tools/blog/blog.py; edit it there. */

/* The reactions and comments start hidden and blog.js shows them once it
   has something to put in them. Any display: set below would otherwise
   beat the browser's own [hidden] rule and show them regardless -- four
   buttons that do nothing, whenever react.php is down. */
body.blog [hidden] {
  display: none !important;
}

/* The width of the reading column, padding included: 880px of text and
   pictures. The header, the footer and the posts all keep to it. Wide
   enough that a chart or a slide is still legible in it. */
body.blog { --column: 920px; }

/* On the home page the header floats over the sunset, so it is absolutely
   placed. There is no sunset here, and floating it would put it over the
   title -- so on the blog it takes its own room. */
body.blog .top {
  position: relative;
  /* The home page's header is 1080 wide, for its grid of cards. Here it
     keeps to the reading column instead, so the wordmark lines up with
     the title rather than floating to its left on a wide screen. */
  max-width: var(--column);
}

/* The footer, likewise: the reading column, not the home page's 1080. Its
   rule is drawn across the text only, so it lines up with the rules
   between posts rather than overhanging them by the padding. */
body.blog .foot {
  max-width: var(--column);
  border-top: 0;
  position: relative;
}
body.blog .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(20px, env(safe-area-inset-left));
  right: max(20px, env(safe-area-inset-right));
  border-top: 1px solid var(--line);
}

.section-link {
  margin-left: 14px;
  color: var(--muted);
}
.section-link:hover { color: var(--text); }

/* One readable column. The pictures take its whole width with square
   corners, and their words sit underneath them, as on the rest of the
   site. */
main.post,
main.posts {
  max-width: var(--column);
}

.post h1,
.posts h1 {
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.01em;
  margin: 36px 0 6px;
}

.post-date {
  color: var(--muted);
  margin: 0 0 28px;
}

.post article { font-size: 17px; line-height: 1.7; }
.post article p { margin: 0 0 1.1em; }
.post article h2 { font-size: 22px; margin: 1.8em 0 .5em; }
.post article h3 { font-size: 18px; margin: 1.5em 0 .4em; }
.post article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.post article ul,
.post article ol { padding-left: 1.3em; margin: 0 0 1.1em; }
/* A "> " block is a box: for the thing a reader must not miss, like a
   disclaimer. Square corners and a hard edge, as with the pictures. */
.post article blockquote {
  margin: 0 0 1.1em;
  padding: 14px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.post article blockquote p { margin: 0; }
.post article hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.post article code {
  font: 14px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  background: var(--panel);
  padding: 1px 5px;
}
.post article pre {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 12px 14px;
  overflow-x: auto;
}
.post article pre code { background: none; padding: 0; }

.post figure { margin: 1.6em 0; }
.post figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
}
/* Every picture links to its largest copy. */
.post figure a.full { display: block; cursor: zoom-in; }

/* Pixel art, marked by the generator: the browser scales it by repeating
   pixels too, rather than smoothing the edges the picture is made of. */
img.pixels { image-rendering: pixelated; }

.post figcaption {
  color: var(--muted);
  font-size: 14px;
  margin-top: 8px;
}

/* --- reactions -------------------------------------------------------- */

.reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 10px;
}
.react {
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.react:hover { border-color: #3b465f; }
.react[aria-pressed="true"] { border-color: var(--accent); }
.react:disabled { cursor: default; }
.react-face { font-size: 18px; line-height: 1; }
.react-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.react-n:empty { display: none; }
.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- comments --------------------------------------------------------- */

.comments { margin: 34px 0 0; }
.comments h2 { font-size: 20px; margin: 0 0 12px; }
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.comment-who { font-weight: 600; }
.comment-when { color: var(--muted); margin-left: 8px; font-size: 14px; }
.comment-body { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* --- the reply form's one addition ------------------------------------ */

.post .leave { margin-top: 34px; }
.note-consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 14px;
  color: var(--muted);
  cursor: pointer;
}
.note-consent input { width: 18px; height: 18px; margin: 0; }

.post-back { margin: 34px 0 0; }
.post-back a { color: var(--muted); }
.post-back a:hover { color: var(--text); }

/* --- the list of posts ------------------------------------------------- */

.post-list { list-style: none; margin: 24px 0 0; padding: 0; }
.post-list li { border-top: 1px solid var(--line); }
.post-card { display: block; padding: 20px 0; }
.post-thumb {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--panel);
}
.post-card-date { display: block; color: var(--muted); font-size: 14px; }
.post-card-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0 6px;
}
.post-card:hover .post-card-title { color: var(--accent); }
.post-card-teaser { display: block; color: var(--muted); }

.empty { color: var(--muted); margin-top: 24px; }