Look: Terminal theme (panr/hugo-theme-terminal v4.2.6), adapted to the museum
Theme vendored unmodified in themes/terminal; base, head, header, footer and post templates rewritten in its markup; museum components restyled in assets/css/museum.css. Embedded forum threads follow the same colours. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ
This commit is contained in:
Claude Opus 5.5
@@ -1,174 +0,0 @@
|
||||
:root {
|
||||
--bg: #f6f3ea;
|
||||
--panel: #fffdf7;
|
||||
--text: #24221d;
|
||||
--muted: #6b665a;
|
||||
--line: #d9d2bf;
|
||||
--accent: #9a3412;
|
||||
--header: #2b2a26;
|
||||
--header-text: #f6f3ea;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #1b1a17;
|
||||
--panel: #24231f;
|
||||
--text: #e8e4d8;
|
||||
--muted: #a39d8d;
|
||||
--line: #3b3932;
|
||||
--accent: #f0a070;
|
||||
--header: #111110;
|
||||
--header-text: #e8e4d8;
|
||||
}
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
}
|
||||
a { color: var(--accent); }
|
||||
img { max-width: 100%; height: auto; }
|
||||
main, .site-footer { max-width: 1000px; margin: 0 auto; padding: 16px; }
|
||||
h1 { font-size: 1.7rem; line-height: 1.2; margin: 0.3em 0 0.6em; }
|
||||
h2 { font-size: 1.2rem; margin: 1.6em 0 0.5em; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
|
||||
small, .meta, .note, .crumbs { color: var(--muted); }
|
||||
.crumbs { font-size: 0.9rem; margin: 0; }
|
||||
|
||||
.site-header {
|
||||
background: var(--header);
|
||||
color: var(--header-text);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 24px;
|
||||
align-items: center;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.site-header a { color: inherit; text-decoration: none; }
|
||||
.brand { font-family: ui-monospace, "Courier New", monospace; font-weight: 700; letter-spacing: 1px; }
|
||||
.brand span { opacity: 0.6; }
|
||||
.site-header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
|
||||
.site-header nav a { opacity: 0.8; padding: 2px 0; border-bottom: 2px solid transparent; }
|
||||
.site-header nav a:hover, .site-header nav a.active { opacity: 1; border-color: var(--accent); }
|
||||
.site-footer { color: var(--muted); font-size: 0.85rem; border-top: 1px solid var(--line); margin-top: 32px; }
|
||||
|
||||
.content { overflow-wrap: anywhere; }
|
||||
.content table { max-width: 100%; }
|
||||
.logo { max-height: 48px; width: auto; vertical-align: middle; margin-right: 12px; background: #fff; padding: 2px; }
|
||||
.main-image { float: right; max-width: 45%; margin: 0 0 12px 16px; }
|
||||
@media (max-width: 600px) { .main-image { float: none; max-width: 100%; margin: 0 0 12px; display: block; } }
|
||||
|
||||
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
|
||||
.tabs a {
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
border: 1px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.tabs a:hover { background: var(--panel); }
|
||||
.tabs a.active { background: var(--panel); border-color: var(--line); font-weight: 600; margin-bottom: -1px; }
|
||||
|
||||
table { border-collapse: collapse; }
|
||||
.specs, .list { width: 100%; clear: both; margin: 16px 0; background: var(--panel); }
|
||||
.specs th, .specs td, .list th, .list td { padding: 6px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
|
||||
.specs th { width: 30%; font-size: 0.8rem; letter-spacing: 0.5px; color: var(--muted); }
|
||||
.list { table-layout: fixed; }
|
||||
.list :is(th, td):first-child { width: 45%; }
|
||||
.list :is(th, td):nth-child(2) { width: 12%; }
|
||||
.list :is(th, td):nth-child(4) { width: 15%; }
|
||||
.list { font-size: 0.95rem; }
|
||||
@media (max-width: 600px) { .list :is(th, td):nth-child(4) { display: none; } }
|
||||
.list thead th { font-size: 0.8rem; letter-spacing: 0.5px; color: var(--muted); }
|
||||
.content th { padding: 6px 10px; text-align: left; }
|
||||
.sortable th { cursor: pointer; user-select: none; white-space: nowrap; }
|
||||
.sortable th:hover, .sortable th:focus-visible { color: var(--text, inherit); 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; }
|
||||
|
||||
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
|
||||
.gallery figure, .thumbs a, .card, .comments li {
|
||||
margin: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
.gallery img { display: block; margin: 0 auto 8px; }
|
||||
.gallery figcaption strong, .gallery figcaption em { display: block; }
|
||||
.gallery figcaption div { font-size: 0.9rem; margin-top: 6px; overflow-wrap: anywhere; }
|
||||
|
||||
.thumbs, .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
|
||||
.thumbs a, .card { text-decoration: none; color: var(--text); display: block; }
|
||||
.thumbs img { display: block; width: 100%; height: 120px; object-fit: cover; margin-bottom: 6px; }
|
||||
.thumbs span, .card span { font-size: 0.85rem; color: var(--muted); display: block; }
|
||||
.card strong { display: block; color: var(--accent); }
|
||||
|
||||
.browse, .letters { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0; list-style: none; }
|
||||
.columns { columns: 220px; padding-left: 18px; }
|
||||
.links { padding-left: 18px; }
|
||||
.entries dt { font-weight: 600; margin-top: 12px; }
|
||||
.entries dd { margin: 2px 0 0; }
|
||||
.timeline { list-style: none; 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; 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: 24px; }
|
||||
|
||||
.posts { display: grid; gap: 16px; }
|
||||
.post-summary {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 280px) 1fr;
|
||||
gap: 16px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
}
|
||||
.post-summary:not(:has(.post-image)) { grid-template-columns: 1fr; }
|
||||
.post-summary .post-image img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; }
|
||||
.post-summary h3 { margin: 0 0 2px; font-size: 1.15rem; }
|
||||
.post-summary .meta { margin: 0 0 8px; font-size: 0.85rem; }
|
||||
.post-summary p:last-child { margin-bottom: 0; }
|
||||
.post-banner { display: block; width: 100%; max-height: 420px; object-fit: cover; margin: 0 0 16px; border-radius: 4px; }
|
||||
@media (max-width: 600px) { .post-summary { grid-template-columns: 1fr; } }
|
||||
|
||||
.site-header .search { margin-left: auto; }
|
||||
.site-header .search input {
|
||||
width: 180px;
|
||||
max-width: 100%;
|
||||
padding: 4px 10px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.site-header .search input::placeholder { color: inherit; opacity: 0.6; }
|
||||
.site-header .search input:focus { outline: none; border-color: var(--accent); background: rgba(255, 255, 255, 0.2); }
|
||||
/* Pagefind result list, in the site colours */
|
||||
#search {
|
||||
--pagefind-ui-primary: var(--accent);
|
||||
--pagefind-ui-text: var(--text);
|
||||
--pagefind-ui-background: var(--panel);
|
||||
--pagefind-ui-border: var(--line);
|
||||
--pagefind-ui-tag: var(--bg);
|
||||
--pagefind-ui-border-width: 1px;
|
||||
--pagefind-ui-border-radius: 4px;
|
||||
--pagefind-ui-image-border-radius: 2px;
|
||||
--pagefind-ui-font: inherit;
|
||||
--pagefind-ui-scale: 0.85;
|
||||
}
|
||||
#search mark { background: none; color: inherit; font-weight: 700; }
|
||||
|
||||
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 24px 0 0; }
|
||||
.pager a, .pager .current { padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; background: var(--panel); }
|
||||
.pager .current { font-weight: 700; border-color: var(--accent); }
|
||||
|
||||
.forum-thread { display: block; width: 100%; min-height: 400px; border: 0; }
|
||||
.comments-section { clear: both; margin-top: 32px; }
|
||||
@@ -0,0 +1,135 @@
|
||||
/* 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 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; } }
|
||||
.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; }
|
||||
Reference in New Issue
Block a user