/* Looks like raw HTML (browser-default fonts and link colours) but reads better:
   a left-hand bar, a readable line length, spacing, and phone support. */
:root { color-scheme: light dark; }
/* Flush top-left with the browser's default 8px margin, like a raw HTML page. */
body {
  display: flex;
  gap: 2em;
  line-height: 1.5;
}

/* Left-hand bar */
.sidebar {
  flex: 0 0 14em;
  align-self: flex-start;
  position: sticky;
  top: 8px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding-right: 1em;
  border-right: 1px solid GrayText;
}
.sidebar .name { font-weight: bold; }
.sidebar nav { margin: 1em 0 1.5em; }
.sidebar nav a { display: block; }
.sidebar nav a[aria-current="page"] { font-weight: bold; }
.sidebar h2 { font-size: 1em; margin: 1.5em 0 0.3em; }
.sidebar ul { margin: 0; padding-left: 1.2em; }
.sidebar li { margin-bottom: 0.4em; line-height: 1.35; }
.recent time { display: block; }

/* Main column */
.content { flex: 1; min-width: 0; max-width: 40em; }
main h1 { line-height: 1.2; margin-top: 0; }
time, .date, .muted, footer { color: GrayText; font-size: small; }
.posts { padding-left: 1.2em; }
.posts li { margin-bottom: 0.5em; }
.posts time { margin-right: 0.5em; }
img { max-width: 100%; height: auto; }
pre { overflow-x: auto; }
footer { margin-top: 4em; }

/* Phones: the bar sits above the post */
@media (max-width: 720px) {
  body { display: block; }
  .sidebar { position: static; padding: 0 0 1em; margin-bottom: 1.5em; border-right: 0; border-bottom: 1px solid GrayText; }
  .sidebar nav { margin: 0.5em 0 0; }
  .sidebar nav a { display: inline; margin-right: 1em; }
  /* The recent list would push the post far down; the Posts link lists them all. */
  .recent-posts { display: none; }
}