website/assets/css/museum.css

/* Old-Computers.com on top of the Terminal theme (themes/terminal): the museum's own components,
   drawn with the theme's three colours. Change the palette in assets/css/terminal.css. */
:root {
  --text: var(--foreground);
  --bg: var(--background);
  --panel: color-mix(in srgb, var(--foreground) 5%, transparent);
  --line: color-mix(in srgb, var(--foreground) 22%, transparent);
  --muted: color-mix(in srgb, var(--foreground) 65%, transparent);
}

/* layout: wider than the theme's blog column, for the listing tables */
.container.center { max-width: 1100px; }
@media (max-width: 684px) { .container { padding: 20px; } }
.page { flex: 1; width: 100%; }
.content { display: block; overflow-wrap: anywhere; }
.page > h1:first-child, .page > article > h1:first-child { margin-top: 10px; }
h2 { border-bottom: 1px dotted var(--accent); padding-bottom: 6px; margin-top: 40px; }
small, .meta, .note, .crumbs { color: var(--muted); }
.crumbs { font-size: 0.9rem; margin: 10px 0 0; }
.crumbs + h1 { margin-top: 10px; }

/* header: active section, search box */
.navigation-menu a { text-decoration: none; }
.navigation-menu a:hover { text-decoration: underline; }
.navigation-menu a.active { background: var(--accent); color: var(--background); padding: 2px 6px; }
.navigation-menu .search input { width: 16ch; padding: 2px 8px; border-color: var(--accent); }
.navigation-menu .search { flex: 0 0 auto; margin-left: 20px; }
@media (max-width: 684px) {
  .navigation-menu { margin: 15px 0 0; }
  .navigation-menu .search { flex: 1; margin-left: 0; }
  .navigation-menu .search input { width: 100%; padding: 6px 10px; }
}
.navigation-menu .search input::placeholder { color: var(--muted); }
.footer p { margin: 4px 0; white-space: normal; }
.footer .copyright { flex-direction: column; }

/* images: the theme frames every image heavily; keep that for post covers only */
img { height: auto; border-width: 1px; padding: 4px; border-color: var(--line); }
.post-cover { border: 8px solid var(--accent); padding: 8px; width: 100%; max-height: 420px; object-fit: cover; margin: 20px 0; }
.on-list .post-cover { max-height: 260px; }
.post-image { display: block; }
.content img { display: inline-block; vertical-align: middle; margin: 4px 0; }
.maker-logo { display: inline-block; max-height: 48px; width: auto; vertical-align: middle; margin: 0 12px 0 0; background: #fff; padding: 2px; }
.main-image { float: right; max-width: 45%; margin: 0 0 12px 16px; background: #fff; }
@media (max-width: 600px) { .main-image { float: none; max-width: 100%; margin: 0 0 12px; display: block; } }

/* machine tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 20px; border-bottom: 1px solid var(--accent); }
.tabs a { padding: 4px 10px; text-decoration: none; }
.tabs a::before { content: "["; opacity: 0.5; }
.tabs a::after { content: "]"; opacity: 0.5; }
.tabs a:hover { background: var(--panel); }
.tabs a.active { background: var(--accent); color: var(--background); font-weight: bold; }

/* tables */
table, th, td { border-width: 1px; border-color: var(--line); padding: 6px 10px; }
.content table { max-width: 100%; }
.specs, .list { width: 100%; clear: both; margin: 16px 0; background: var(--panel); }
.specs th, .specs td, .list th, .list td { text-align: left; vertical-align: top; }
.specs th { width: 30%; font-size: 0.8rem; color: var(--accent); }
.list { table-layout: fixed; font-size: 0.9rem; }
.list :is(th, td):first-child { width: 42%; }
.list :is(th, td):nth-child(2) { width: 10%; }
.list :is(th, td):nth-child(4) { width: 17%; }
@media (max-width: 600px) { .list :is(th, td):nth-child(4) { display: none; } }
@media (max-width: 600px) {
  /* the year must stay on one line */
  .list :is(th, td):nth-child(2) { width: 7ch; padding-left: 6px; padding-right: 6px; }
  .list :is(th, td):first-child { width: 50%; }
}
.list thead th { font-size: 0.8rem; color: var(--accent); }
.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable th:hover, .sortable th:focus-visible { text-decoration: underline; }
.sortable th::after { content: " ↕"; opacity: 0.4; }
.sortable th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
.sortable th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }

/* galleries, thumbnails, cards */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gallery figure, .thumbs a, .card, .comments li {
  margin: 0;
  width: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 10px;
}
.gallery img { display: block; margin: 0 auto 8px; background: #fff; }
.gallery figure figcaption { background: none; color: inherit; text-align: left; margin: 0; padding: 0; font-size: 0.9rem; }
.gallery figcaption strong { display: block; color: var(--accent); }
.gallery figcaption em { display: block; }
.gallery figcaption div { margin-top: 6px; overflow-wrap: anywhere; }
.gallery figcaption p { margin: 6px 0; }

.thumbs, .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 20px 0; }
.thumbs a, .card { text-decoration: none; color: var(--text); display: block; }
.thumbs a:hover, .card:hover { border-color: var(--accent); }
.thumbs img { display: block; width: 100%; height: 120px; object-fit: cover; margin: 0 0 6px; padding: 0; border: 0; background: #fff; }
.thumbs span, .card span { font-size: 0.85rem; color: var(--muted); display: block; }
.card strong { display: block; color: var(--accent); }
.card strong::before { content: "> "; }

/* lists */
.browse, .letters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 20px 0; padding: 0; list-style: none; }
.letters a { text-decoration: none; }
.letters a::before { content: "["; opacity: 0.5; }
.letters a::after { content: "]"; opacity: 0.5; }
.columns { columns: 260px; margin-left: 0; padding-left: 2ch; list-style: none; }
.columns li::before, .links li::before { content: "-"; position: absolute; left: -2ch; color: var(--accent); }
.links { margin-left: 0; padding-left: 2ch; list-style: none; }
.entries dt { font-weight: bold; margin-top: 14px; color: var(--accent); }
.entries dd { margin: 2px 0 0; }
.timeline { list-style: none; margin-left: 0; padding: 0; }
.timeline li { padding: 6px 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.timeline time { min-width: 130px; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; }
.comments { list-style: none; margin-left: 0; padding: 0; }
.comments li { margin-bottom: 12px; overflow-wrap: anywhere; }
.comments .meta { margin: 0 0 6px; font-size: 0.9rem; }
.prev-next { display: flex; justify-content: space-between; gap: 16px; margin-top: 30px; }
.prev-next a { text-decoration: none; }

/* posts: the theme's own markup; pagination with page numbers */
.posts .post:first-child { padding-top: 10px; }
.post-author a { color: inherit; }
.pagination .current { color: var(--accent); font-weight: bold; }

/* Pagefind result list, in the theme colours */
#search {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--foreground);
  --pagefind-ui-background: var(--background);
  --pagefind-ui-border: var(--accent);
  --pagefind-ui-tag: var(--panel);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: 0;
  --pagefind-ui-image-border-radius: 0;
  --pagefind-ui-font: inherit;
  --pagefind-ui-scale: 0.85;
  margin-top: 20px;
}
#search mark { background: none; color: var(--accent); font-weight: bold; }
#search img { border: 0; padding: 0; margin: 0; }
#search ul, #search ol { margin: 0; }
#search button { border-width: 1px; }

.forum-thread { display: block; width: 100%; min-height: 400px; border: 1px solid var(--line); }
.comments-section { clear: both; margin-top: 40px; }