/* Theme Name: NOROUTE.ZINE Theme URI: https://example.com/noroute-zine Author: Dan's home lab Author URI: https://example.com Description: A phrack/2600-style cybersecurity zine theme. Monospace-forward, dark by default with a light mode, a swappable accent color, generative ASCII "glyphfield" thumbnails, and a Customizer-driven look. Pluggable: every theme function is overridable and the design is child-theme friendly. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: noroute-zine Tags: blog, one-column, two-columns, custom-menu, custom-colors, dark-mode, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, full-width-template */ /* ───────────────────────────────────────────────────────────────────────── TOKENS Accent + fonts are also written inline in by the Customizer so there is no flash; these are the static fallbacks + the light-mode overrides. ───────────────────────────────────────────────────────────────────────── */ :root { --bg: #0a0a0a; --fg: #e8e6e1; --dim: #8a8780; --faint: #555149; --rule: #2a2a2a; --paper: #111; --paper2: #161616; --inv-fg: #0a0a0a; --inv-bg: #e8e6e1; --accent: #00ff88; --accent-ink: #001a0c; --font-h: 'Fira Code', ui-monospace, monospace; --font-b: 'Fira Code', ui-monospace, monospace; --maxw: 1180px; --readw: 700px; } [data-mode="light"] { --bg: #ece9e0; --fg: #1a1a1a; --dim: #5b574d; --faint: #a39e91; --rule: #c9c4b6; --paper: #f4f1e8; --paper2: #e3dfd1; --inv-fg: #ece9e0; --inv-bg: #1a1a1a; --accent-ink: #f5fff8; } /* ───────────────────────────────────────────────────────────────────────── BASE ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-b); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "calt", "liga"; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } ::selection { background: var(--accent); color: var(--accent-ink); } h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 700; letter-spacing: -0.01em; margin: 0; } a { color: inherit; } hr { border: none; height: 1px; background: var(--rule); margin: 0; } /* skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; font-family: var(--font-h); font-size: 12px; } .skip-link:focus { left: 8px; top: 8px; } /* layout shells */ .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .read { max-width: var(--readw); margin-left: auto; margin-right: auto; } /* ───────────────────────────────────────────────────────────────────────── PLATES / RULES / GLYPHS ───────────────────────────────────────────────────────────────────────── */ .plate { border: 1px solid var(--rule); background: var(--paper); } .plate--accent { border-color: var(--accent); } .dot-rule { height: 1px; background-image: radial-gradient(circle, var(--dim) 1px, transparent 1.2px); background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 50%; opacity: .65; } .dash-rule { height: 1px; background-image: linear-gradient(to right, var(--dim) 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x; } .glyphfield { margin: 0; font-family: 'Fira Code', ui-monospace, monospace; font-size: 12px; line-height: 1.05; letter-spacing: 0.04em; color: var(--accent); white-space: pre; overflow: hidden; user-select: none; } .mono-caps { font-family: var(--font-h); text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: var(--dim); } /* link underline */ .link { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; cursor: pointer; } .link:hover { background: var(--accent); color: var(--accent-ink); border-bottom-color: transparent; } button { font: inherit; color: inherit; background: transparent; border: 1px solid var(--rule); padding: 6px 10px; cursor: pointer; } button:hover { border-color: var(--accent); color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── TOP BAR ───────────────────────────────────────────────────────────────────────── */ .topbar { border-bottom: 1px solid var(--rule); background: var(--bg); position: sticky; top: 0; z-index: 10; } .topbar__inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-h); font-size: 12px; letter-spacing: 0.04em; } .brand { text-decoration: none; color: var(--fg); display: flex; align-items: center; gap: 10px; } .brand__mark { color: var(--accent); } .brand__name { font-weight: 600; } .topnav { display: flex; align-items: center; gap: 22px; } .topnav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .topnav a { color: var(--dim); text-decoration: none; border-bottom: 1px dashed transparent; } .topnav a:hover, .topnav .current-menu-item > a { color: var(--accent); border-bottom-color: currentColor; } .menu-toggle { display: none; } /* ───────────────────────────────────────────────────────────────────────── MASTHEAD ───────────────────────────────────────────────────────────────────────── */ .masthead { padding: 90px 0 70px 0; } .masthead__kicker { margin-bottom: 28px; color: var(--accent); } .masthead__title { font-family: var(--font-h); font-size: clamp(56px, 9vw, 116px); line-height: 0.92; letter-spacing: -0.04em; font-weight: 700; margin: 0; } .masthead__title .dot { color: var(--accent); } .masthead__tagline { margin-top: 36px; font-family: var(--font-b); font-size: 16.5px; line-height: 1.6; color: var(--dim); max-width: 560px; margin-bottom: 0; } .masthead__tagline strong { color: var(--fg); font-weight: inherit; } /* ───────────────────────────────────────────────────────────────────────── SECTION HEADER ───────────────────────────────────────────────────────────────────────── */ .sec-head { display: flex; align-items: center; gap: 14px; } .sec-head__label { font-family: var(--font-h); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); white-space: nowrap; } .sec-head__rule { flex: 1; } .sec-head__right { font-family: var(--font-h); font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.12em; } /* ───────────────────────────────────────────────────────────────────────── FEATURED ───────────────────────────────────────────────────────────────────────── */ .featured { margin-top: 8px; } .featured__link { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 56px; align-items: start; text-decoration: none; color: inherit; } .featured__art { padding: 18px; background: var(--paper); border: 1px solid var(--rule); position: relative; overflow: hidden; transition: border-color 160ms; aspect-ratio: 36 / 20; } .featured__link:hover .featured__art { border-color: var(--accent); } .featured__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .art-cap { position: absolute; bottom: 14px; left: 18px; font-family: var(--font-h); font-size: 10px; color: var(--accent); letter-spacing: 0.12em; } .featured__body { padding-top: 8px; } .featured__kicker { color: var(--accent); } .featured__title { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin-top: 18px; margin-bottom: 24px; letter-spacing: -0.02em; font-weight: 700; max-width: 18ch; } .featured__excerpt { font-size: 16.5px; line-height: 1.65; color: var(--dim); max-width: 56ch; margin: 0; } .featured__meta { display: flex; align-items: center; gap: 18px; margin-top: 32px; font-family: var(--font-h); font-size: 12px; color: var(--dim); } .featured__meta .go { color: var(--accent); } .featured__meta .sep { color: var(--faint); } /* ───────────────────────────────────────────────────────────────────────── DISPATCH GRID + CARD ───────────────────────────────────────────────────────────────────────── */ .recent { margin-top: 110px; } .grid { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .card { display: flex; flex-direction: column; text-decoration: none; color: inherit; padding: 4px 0; } .card__art { position: relative; background: var(--paper); padding: 14px; height: 168px; overflow: hidden; border: 1px solid var(--rule); transition: border-color 160ms; } .card:hover .card__art { border-color: var(--accent); } .card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card__body { padding: 22px 2px 0 2px; display: flex; flex-direction: column; gap: 12px; } .card__kicker { color: var(--dim); } .card__title { font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; } .card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--dim); margin: 0; } .card__meta { margin-top: 6px; font-family: var(--font-h); font-size: 11px; color: var(--dim); } /* TOC list (archive variant) */ .toc { margin: 52px 0 24px 0; } .toc__list { margin-top: 18px; } .toc__row { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px dotted var(--rule); text-decoration: none; color: var(--fg); font-family: var(--font-h); } .toc__row:last-child { border-bottom: none; } .toc__row:hover { background: var(--paper); color: var(--accent); } .toc__id { color: var(--accent); min-width: 42px; font-weight: 600; } .toc__kicker { flex: 0 0 auto; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; min-width: 120px; } .toc__title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .toc__time { flex: 0 0 auto; color: var(--dim); font-size: 12px; } .toc__date { flex: 0 0 auto; color: var(--faint); font-size: 12px; min-width: 96px; text-align: right; } /* ───────────────────────────────────────────────────────────────────────── SINGLE POST / READING VIEW ───────────────────────────────────────────────────────────────────────── */ .backbar { padding: 40px 0 8px; display: flex; align-items: center; gap: 14px; font-family: var(--font-h); font-size: 12px; } .backbar .sep { color: var(--faint); } .backbar .file { color: var(--dim); } .post-head { max-width: calc(var(--readw) + 64px); margin: 70px auto 0; padding: 0 32px; } .post-head__kicker { color: var(--accent); margin-bottom: 22px; } .post-head__title { font-size: clamp(34px, 4vw, 50px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; margin: 0; } .post-head__excerpt { font-size: 17.5px; line-height: 1.6; color: var(--dim); margin-top: 26px; margin-bottom: 0; } .post-head__byline { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--font-h); font-size: 12px; color: var(--dim); } .post-head__byline .by { color: var(--accent); } .post-head__byline .sep { color: var(--faint); } .post-figure { max-width: var(--maxw); margin: 48px auto 0; padding: 0 32px; } .post-figure img { width: 100%; border: 1px solid var(--rule); } .article { max-width: calc(var(--readw) + 64px); margin: 48px auto 0; padding: 0 32px; } /* ── post body typography (the WP content) ── */ .post-body { font-size: 16px; line-height: 1.7; } .post-body > *:first-child { margin-top: 0; } .post-body p { margin: 14px 0; } .post-body h2, .post-body h3, .post-body h4 { font-family: var(--font-h); letter-spacing: -0.01em; } .post-body h2 { font-size: 22px; margin-top: 38px; margin-bottom: 14px; } .post-body h2::before { content: "## "; color: var(--accent); } .post-body h3 { font-size: 18px; margin-top: 30px; margin-bottom: 10px; } .post-body h3::before { content: "### "; color: var(--accent); } .post-body a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; } .post-body a:hover { background: var(--accent); color: var(--accent-ink); border-bottom-color: transparent; } .post-body strong { font-weight: 700; } .post-body ul, .post-body ol { padding-left: 0; list-style: none; margin: 14px 0; } .post-body ul li, .post-body ol li { padding: 4px 0 4px 22px; position: relative; font-size: 16px; line-height: 1.6; } .post-body ul li::before { content: "→"; position: absolute; left: 0; color: var(--accent); } .post-body ol { counter-reset: noroute-ol; } .post-body ol li { counter-increment: noroute-ol; } .post-body ol li::before { content: counter(noroute-ol) "."; position: absolute; left: 0; color: var(--accent); font-family: var(--font-h); } .post-body blockquote { border-left: 2px solid var(--accent); background: var(--paper2); padding: 12px 16px; margin: 22px 0; font-size: 15px; font-style: italic; color: var(--fg); } .post-body blockquote p { margin: 0; } .post-body blockquote p:first-child::before { content: "! "; color: var(--accent); font-style: normal; } .post-body hr { background: none; height: 1px; margin: 32px 0; background-image: linear-gradient(to right, var(--dim) 50%, transparent 50%); background-size: 8px 1px; background-repeat: repeat-x; } .post-body img, .post-body figure { margin: 28px 0; } .post-body figure img { border: 1px solid var(--rule); } .post-body figcaption { font-family: var(--font-h); font-size: 11px; color: var(--dim); margin-top: 8px; text-align: center; } /* code */ .post-body pre, pre.code { background: var(--paper2); border-left: 2px solid var(--accent); padding: 16px 18px; overflow-x: auto; font-family: 'Fira Code', ui-monospace, monospace; font-size: 13.5px; line-height: 1.65; margin: 28px 0; color: var(--fg); font-variant-ligatures: contextual; } .post-body code, code { font-family: 'Fira Code', ui-monospace, monospace; font-size: 0.92em; } .post-body :not(pre) > code { background: var(--paper2); padding: 1px 5px; border: 1px solid var(--rule); color: var(--accent); } .post-body pre code { background: none; padding: 0; border: 0; color: inherit; } pre.code .c { color: var(--dim); font-style: italic; } pre.code .k { color: var(--accent); } pre.code .s { color: var(--fg); opacity: .85; } pre.code .n { color: var(--fg); } pre.code .p { color: var(--dim); } /* WP alignment + media */ .alignleft { float: left; margin: 6px 24px 18px 0; } .alignright { float: right; margin: 6px 0 18px 24px; } .aligncenter { margin-left: auto; margin-right: auto; } .alignwide { width: min(var(--maxw), 100vw - 64px); margin-left: calc(50% - min(var(--maxw), 100vw - 64px)/2); } .alignfull { width: 100vw; margin-left: calc(50% - 50vw); } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-family: var(--font-h); font-size: 11px; color: var(--dim); margin-top: 8px; } .sticky, .gallery { margin-bottom: 1.5em; } .wp-block-image figcaption { text-align: center; } /* tags / footnote line under content */ .post-tags { max-width: calc(var(--readw) + 64px); margin: 36px auto 0; padding: 0 32px; font-family: var(--font-h); font-size: 12px; color: var(--dim); display: flex; gap: 12px; flex-wrap: wrap; } .post-tags a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; } /* ── prev / next ── */ .continue { max-width: calc(var(--readw) + 64px); margin: 90px auto 0; padding: 0 32px; } .continue__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; } .navcard { display: block; border: 1px solid var(--rule); padding: 14px 16px; text-decoration: none; color: inherit; background: var(--paper); } .navcard:hover { border-color: var(--accent); } .navcard--empty { border: 1px dashed var(--rule); color: var(--faint); font-family: var(--font-h); font-size: 12px; } .navcard--next { text-align: right; } .navcard__label { color: var(--accent); margin-bottom: 8px; } .navcard__title { font-size: 14px; line-height: 1.3; margin-bottom: 6px; } .navcard__meta { font-family: var(--font-h); font-size: 11px; color: var(--dim); } /* ───────────────────────────────────────────────────────────────────────── COMMENTS ───────────────────────────────────────────────────────────────────────── */ .comments { max-width: calc(var(--readw) + 64px); margin: 90px auto 0; padding: 0 32px; } .comments__title { font-family: var(--font-h); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .commentlist { list-style: none; margin: 28px 0 0; padding: 0; } .commentlist ol.children { list-style: none; margin: 0 0 0 24px; padding: 0; border-left: 1px dotted var(--rule); padding-left: 18px; } .comment-body { padding: 16px 0; border-bottom: 1px dotted var(--rule); } .comment-author { font-family: var(--font-h); font-size: 13px; } .comment-author .fn { color: var(--fg); font-style: normal; font-weight: 600; } .comment-author .says { display: none; } .comment-meta { font-family: var(--font-h); font-size: 11px; color: var(--faint); margin: 4px 0 10px; } .comment-meta a { color: var(--faint); text-decoration: none; } .comment-content { font-size: 15px; line-height: 1.65; } .comment-content p { margin: 8px 0; } .reply { font-family: var(--font-h); font-size: 11px; margin-top: 8px; } .reply a { color: var(--accent); text-decoration: none; border-bottom: 1px dashed currentColor; } .comment-respond { margin-top: 36px; } .comment-reply-title { font-family: var(--font-h); font-size: 16px; margin-bottom: 16px; } .comment-form label { display: block; font-family: var(--font-h); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 6px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; background: var(--paper); color: var(--fg); border: 1px solid var(--rule); padding: 10px 12px; font-family: var(--font-b); font-size: 14px; margin-bottom: 16px; } .comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--accent); } .comment-form .form-submit input { background: var(--accent); color: var(--accent-ink); border: none; padding: 10px 18px; font-family: var(--font-h); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; } .no-comments { font-family: var(--font-h); font-size: 12px; color: var(--dim); } /* ───────────────────────────────────────────────────────────────────────── PAGINATION ───────────────────────────────────────────────────────────────────────── */ .pagination { max-width: var(--maxw); margin: 70px auto 0; padding: 0 32px; display: flex; justify-content: center; gap: 8px; font-family: var(--font-h); font-size: 13px; flex-wrap: wrap; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--rule); text-decoration: none; color: var(--fg); } .pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); } .pagination .page-numbers.current { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); } .pagination .page-numbers.dots { border-color: transparent; } /* ───────────────────────────────────────────────────────────────────────── 404 / SEARCH / ARCHIVE HEADER ───────────────────────────────────────────────────────────────────────── */ .page-head { padding: 70px 0 10px; } .page-head__kicker { color: var(--accent); margin-bottom: 18px; } .page-head__title { font-size: clamp(34px, 5vw, 64px); line-height: 1.0; letter-spacing: -0.03em; font-weight: 700; margin: 0; } .page-head__desc { margin-top: 22px; font-size: 16px; color: var(--dim); max-width: 60ch; } .search-form { display: flex; gap: 0; margin-top: 28px; max-width: 480px; } .search-form input[type="search"] { flex: 1; background: var(--paper); color: var(--fg); border: 1px solid var(--rule); border-right: none; padding: 12px 14px; font-family: var(--font-b); font-size: 15px; } .search-form input[type="search"]:focus { outline: none; border-color: var(--accent); } .search-form button { border: 1px solid var(--accent); color: var(--accent-ink); background: var(--accent); padding: 0 18px; font-family: var(--font-h); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; } .error-404-art { margin: 40px 0; } /* ───────────────────────────────────────────────────────────────────────── WIDGETS (footer / sidebar areas if used) ───────────────────────────────────────────────────────────────────────── */ .widget { margin-bottom: 36px; font-size: 14px; } .widget-title { font-family: var(--font-h); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px; } .widget ul { list-style: none; margin: 0; padding: 0; } .widget ul li { padding: 5px 0; border-bottom: 1px dotted var(--rule); } .widget a { color: var(--fg); text-decoration: none; } .widget a:hover { color: var(--accent); } /* ───────────────────────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 140px; padding-top: 32px; padding-bottom: 56px; border-top: 1px solid var(--rule); font-family: var(--font-h); font-size: 12px; color: var(--dim); display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; } .site-footer__copy strong { color: var(--fg); font-weight: inherit; } .site-footer__links { display: flex; gap: 22px; } /* scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--rule); } ::-webkit-scrollbar-track { background: transparent; } /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE ───────────────────────────────────────────────────────────────────────── */ @media (max-width: 880px) { .shell { padding: 0 20px; } .post-head, .article, .post-figure, .post-tags, .continue, .comments, .pagination { padding-left: 20px; padding-right: 20px; } .featured__link { grid-template-columns: 1fr; gap: 28px; } .grid { grid-template-columns: 1fr; } .masthead { padding: 60px 0 50px; } .recent { margin-top: 80px; } .toc__kicker { display: none; } .continue__grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .topnav ul { gap: 14px; } .post-head__byline { font-size: 11px; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }