1185 lines
25 KiB
CSS
1185 lines
25 KiB
CSS
/*
|
|
Theme Name: Commander1024 2026
|
|
Theme URI: https://www.commander1024.de/
|
|
Description: A clean, retro-tech inspired classic WordPress theme.
|
|
Author: Commander1024
|
|
Version: 1.0.0
|
|
Text Domain: c1024-2026
|
|
License: GNU General Public License v2 or later
|
|
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
|
*/
|
|
|
|
/* Self-hosted typefaces: keep these paths relative to the theme stylesheet. */
|
|
@font-face {
|
|
font-family: "Alpha Lyrae";
|
|
src: url("fonts/AlphaLyrae-Medium.woff2") format("woff2");
|
|
font-weight: 500;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("fonts/crimson-pro-latin-wght-normal.woff2") format("woff2");
|
|
font-weight: 200 900;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Crimson Pro";
|
|
src: url("fonts/crimson-pro-latin-wght-italic.woff2") format("woff2");
|
|
font-weight: 200 900;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Berkeley Mono";
|
|
src: url("fonts/BerkeleyMono-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Berkeley Mono";
|
|
src: url("fonts/BerkeleyMono-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Public fallback for systems that cannot load the privately licensed Berkeley Mono. */
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
src: url("fonts/SourceCodePro-Regular.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
src: url("fonts/SourceCodePro-Bold.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
src: url("fonts/SourceCodePro-Italic.woff2") format("woff2");
|
|
font-weight: 400;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
@font-face {
|
|
font-family: "Source Code Pro";
|
|
src: url("fonts/SourceCodePro-BoldItalic.woff2") format("woff2");
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-display: swap;
|
|
}
|
|
|
|
/* Shared palette, layout, and code tokens; dark mode overrides the same names below. */
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #f8f5f0;
|
|
--surface: #fffdf9;
|
|
--text: #1d1b19;
|
|
--muted: #706a63;
|
|
--line: #d8d0c6;
|
|
--accent: #c3480b;
|
|
--accent-hover: #8f3508;
|
|
/* Monokai Light tokens use darker variants for accessible contrast on a light panel. */
|
|
--monokai-bg: #faf8f5;
|
|
--monokai-border: #d5d0c8;
|
|
--monokai-text: #272822;
|
|
--monokai-comment: #75716a;
|
|
--monokai-pink: #c4265e;
|
|
--monokai-green: #4f7902;
|
|
--monokai-yellow: #9a6700;
|
|
--monokai-purple: #7653b7;
|
|
--monokai-cyan: #007c91;
|
|
--shadow: 0 10px 30px rgba(45, 34, 25, 0.08);
|
|
--content: 760px;
|
|
--wide: 1180px;
|
|
}
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #171615;
|
|
--surface: #22201e;
|
|
--text: #eee8e1;
|
|
--muted: #b9afa5;
|
|
--line: #4a4540;
|
|
--accent: #f07a3c;
|
|
--accent-hover: #ff9d6a;
|
|
--monokai-bg: #272822;
|
|
--monokai-border: #3e3d32;
|
|
--monokai-text: #f8f8f2;
|
|
--monokai-comment: #75715e;
|
|
--monokai-pink: #f92672;
|
|
--monokai-green: #a6e22e;
|
|
--monokai-yellow: #e6db74;
|
|
--monokai-purple: #ae81ff;
|
|
--monokai-cyan: #66d9ef;
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
/* Automatic mode (and no saved preference) follows the operating-system color scheme. */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]),
|
|
:root[data-theme="auto"] {
|
|
color-scheme: dark;
|
|
--bg: #171615;
|
|
--surface: #22201e;
|
|
--text: #eee8e1;
|
|
--muted: #b9afa5;
|
|
--line: #4a4540;
|
|
--accent: #f07a3c;
|
|
--accent-hover: #ff9d6a;
|
|
--monokai-bg: #272822;
|
|
--monokai-border: #3e3d32;
|
|
--monokai-text: #f8f8f2;
|
|
--monokai-comment: #75715e;
|
|
--monokai-pink: #f92672;
|
|
--monokai-green: #a6e22e;
|
|
--monokai-yellow: #e6db74;
|
|
--monokai-purple: #ae81ff;
|
|
--monokai-cyan: #66d9ef;
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: "Crimson Pro", Georgia, serif;
|
|
font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
|
|
font-weight: 400;
|
|
line-height: 1.55;
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration-thickness: 0.08em;
|
|
text-underline-offset: 0.14em;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--accent-hover);
|
|
}
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
.screen-reader-text {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
.screen-reader-text:focus {
|
|
z-index: 100000;
|
|
top: 5px;
|
|
left: 5px;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0.5rem 1rem;
|
|
margin: 0;
|
|
overflow: visible;
|
|
clip: auto;
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.site-header {
|
|
position: sticky;
|
|
z-index: 20;
|
|
top: 0;
|
|
background: color-mix(in srgb, var(--bg) 92%, transparent);
|
|
border-bottom: 1px solid var(--line);
|
|
backdrop-filter: blur(12px);
|
|
transition: transform 0.25s ease;
|
|
}
|
|
.site-header.is-hidden {
|
|
transform: translateY(-105%);
|
|
}
|
|
.header-inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.25rem;
|
|
max-width: var(--wide);
|
|
min-height: 4.6rem;
|
|
padding: 0.75rem 1.5rem;
|
|
margin: auto;
|
|
}
|
|
.site-branding {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.custom-logo-link {
|
|
display: inline-flex;
|
|
max-height: 42px;
|
|
}
|
|
.custom-logo {
|
|
width: auto;
|
|
max-height: 42px;
|
|
}
|
|
.site-title {
|
|
display: inline-block;
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-family: "Alpha Lyrae", sans-serif;
|
|
font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
|
|
font-weight: 500;
|
|
letter-spacing: 0.035em;
|
|
text-decoration: none;
|
|
}
|
|
.site-description {
|
|
margin: 0.1rem 0 0;
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.07em;
|
|
}
|
|
.primary-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.3rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.primary-menu a {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.primary-menu a:hover,
|
|
.primary-menu .current-menu-item > a {
|
|
color: var(--accent);
|
|
}
|
|
.header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
}
|
|
.icon-button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 2.2rem;
|
|
height: 2.2rem;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: transparent;
|
|
color: var(--text);
|
|
}
|
|
.icon-button:hover,
|
|
.icon-button:focus {
|
|
background: var(--surface);
|
|
color: var(--accent);
|
|
}
|
|
.icon {
|
|
width: 1.15rem;
|
|
height: 1.15rem;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
stroke-width: 1.8;
|
|
}
|
|
.search-panel {
|
|
position: absolute;
|
|
top: calc(100% + 1px);
|
|
right: max(1rem, calc((100vw - var(--wide)) / 2));
|
|
width: min(420px, calc(100vw - 2rem));
|
|
padding: 1rem;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
box-shadow: var(--shadow);
|
|
transform: translateY(-0.5rem);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transition: 0.18s;
|
|
}
|
|
.search-panel.is-open {
|
|
transform: none;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
.search-form {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
.search-field {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding: 0.55rem 0.7rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 2px;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
.button,
|
|
.search-submit,
|
|
input[type="submit"] {
|
|
padding: 0.55rem 0.9rem;
|
|
border: 1px solid var(--accent);
|
|
border-radius: 2px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
.menu-toggle {
|
|
display: none;
|
|
}
|
|
.site-main {
|
|
max-width: var(--content);
|
|
padding: 3.5rem 1.5rem 5rem;
|
|
margin: auto;
|
|
}
|
|
.page-header {
|
|
max-width: var(--content);
|
|
padding: 3.5rem 1.5rem 0;
|
|
margin: auto;
|
|
}
|
|
.page-title,
|
|
.entry-title,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-family: "Alpha Lyrae", sans-serif;
|
|
font-weight: 500;
|
|
line-height: 1.16;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
.page-title {
|
|
margin: 0;
|
|
font-size: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
|
|
}
|
|
.error-title {
|
|
margin: 0;
|
|
font-size: clamp(4rem, 2.7rem + 5vw, 7rem);
|
|
font-feature-settings: "ss05" 1, "liga" 1;
|
|
}
|
|
.archive-description {
|
|
color: var(--muted);
|
|
}
|
|
.post-card {
|
|
padding: 2.25rem 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.post-card:first-child {
|
|
padding-top: 0;
|
|
}
|
|
.entry-meta,
|
|
.entry-footer,
|
|
.taxonomy {
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.035em;
|
|
}
|
|
.entry-meta a,
|
|
.entry-footer a {
|
|
color: inherit;
|
|
}
|
|
.entry-title {
|
|
margin: 0.35rem 0 0.8rem;
|
|
font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.75rem);
|
|
}
|
|
.entry-title a {
|
|
color: var(--text);
|
|
text-decoration: none;
|
|
}
|
|
.entry-title a:hover {
|
|
color: var(--accent);
|
|
}
|
|
.entry-summary p {
|
|
margin-bottom: 0;
|
|
}
|
|
.entry-thumbnail {
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
/* Separate a leading article/page image from the body text that follows it. */
|
|
.single .entry-thumbnail,
|
|
.page .entry-content > .wp-block-image:first-child,
|
|
.page .entry-content > figure:first-child,
|
|
.page .entry-content > .wp-block-gallery:first-child {
|
|
margin-bottom: 3rem;
|
|
}
|
|
.entry-thumbnail img {
|
|
width: 100%;
|
|
border-radius: 2px;
|
|
}
|
|
.post-categories,
|
|
.tags-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.4rem;
|
|
margin: 0.7rem 0;
|
|
}
|
|
.post-categories a,
|
|
.tags-links a {
|
|
padding: 0.18rem 0.45rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: 999px;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
.post-categories a:hover,
|
|
.tags-links a:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
.single .entry-header,
|
|
.page .entry-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
.single .entry-title,
|
|
.page .entry-title {
|
|
font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
|
|
}
|
|
.entry-content {
|
|
font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
|
|
}
|
|
.entry-content > * {
|
|
margin-top: 0;
|
|
margin-bottom: 1.3em;
|
|
}
|
|
|
|
/* Keep prose readable while allowing selected page and post identity elements to escape its measure. */
|
|
.entry-content > .alignwide,
|
|
.page-header,
|
|
.single .entry-header,
|
|
.single .entry-thumbnail,
|
|
.single .entry-footer {
|
|
/* Page/article identity and featured media use the same breakout geometry as a Wide Gutenberg block. */
|
|
width: min(var(--wide), calc(100vw - 3rem));
|
|
max-width: none;
|
|
margin-left: 50%;
|
|
margin-right: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.entry-content > .alignfull {
|
|
width: 100vw;
|
|
max-width: 100vw;
|
|
margin-left: 50%;
|
|
margin-right: 0;
|
|
transform: translateX(-50%);
|
|
}
|
|
.entry-content h2 {
|
|
margin-top: 2em;
|
|
font-size: 1.55em;
|
|
}
|
|
.entry-content h3 {
|
|
margin-top: 1.8em;
|
|
font-size: 1.25em;
|
|
}
|
|
.entry-content ul,
|
|
.entry-content ol {
|
|
padding-left: 1.3em;
|
|
}
|
|
.entry-content blockquote {
|
|
padding: 0.35rem 1.25rem;
|
|
border-left: 4px solid var(--accent);
|
|
margin-left: 0;
|
|
color: var(--muted);
|
|
font-style: italic;
|
|
}
|
|
.entry-content pre {
|
|
padding: 1rem 1.2rem;
|
|
overflow: auto;
|
|
border-radius: 2px;
|
|
font-size: 0.8em;
|
|
}
|
|
.entry-content code {
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
/* Prevent <code> inside <pre> from applying the compact inline-code scale twice. */
|
|
.entry-content pre code {
|
|
font-size: inherit;
|
|
}
|
|
.entry-content :not(pre) > code {
|
|
padding: 0.1em 0.3em;
|
|
border-radius: 2px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
}
|
|
|
|
/* Monokai Light/Dark tokens follow the active site color mode. */
|
|
.entry-content pre,
|
|
.entry-content pre.wp-block-code,
|
|
.entry-content .wp-block-code {
|
|
border: 1px solid var(--monokai-border);
|
|
background: var(--monokai-bg);
|
|
color: var(--monokai-text);
|
|
}
|
|
|
|
/* Syntax Highlighting Code Block uses Highlight.js classes inside the core Code block. */
|
|
.entry-content .wp-block-code code.hljs,
|
|
.entry-content .wp-block-code .hljs {
|
|
display: block;
|
|
padding: 0;
|
|
background: transparent !important;
|
|
color: var(--monokai-text) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-comment {
|
|
color: var(--monokai-comment) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-keyword,
|
|
.entry-content .wp-block-code .hljs-selector-tag,
|
|
.entry-content .wp-block-code .hljs-literal,
|
|
.entry-content .wp-block-code .hljs-name,
|
|
.entry-content .wp-block-code .hljs-tag {
|
|
color: var(--monokai-pink) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-title,
|
|
.entry-content .wp-block-code .hljs-section,
|
|
.entry-content .wp-block-code .hljs-built_in,
|
|
.entry-content .wp-block-code .hljs-function .hljs-title {
|
|
color: var(--monokai-green) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-string,
|
|
.entry-content .wp-block-code .hljs-quote,
|
|
.entry-content .wp-block-code .hljs-link,
|
|
.entry-content .wp-block-code .hljs-type {
|
|
color: var(--monokai-yellow) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-number,
|
|
.entry-content .wp-block-code .hljs-regexp,
|
|
.entry-content .wp-block-code .hljs-meta {
|
|
color: var(--monokai-purple) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-attribute,
|
|
.entry-content .wp-block-code .hljs-attr,
|
|
.entry-content .wp-block-code .hljs-symbol,
|
|
.entry-content .wp-block-code .hljs-variable,
|
|
.entry-content .wp-block-code .hljs-template-variable {
|
|
color: var(--monokai-cyan) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-addition {
|
|
color: var(--monokai-green) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .hljs-deletion {
|
|
color: var(--monokai-pink) !important;
|
|
}
|
|
|
|
.entry-content .wp-block-code .shcb-line-numbers .shcb-loc::before {
|
|
border-right-color: var(--monokai-border);
|
|
color: var(--monokai-comment);
|
|
}
|
|
.wp-block-image,
|
|
.entry-content figure {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.wp-caption-text {
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
.wp-block-separator {
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
/* Gutenberg block treatments that need more than the shared theme.json tokens. */
|
|
.wp-element-caption,
|
|
.entry-content figcaption {
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.wp-block-button__link,
|
|
.wp-element-button {
|
|
border: 1px solid var(--accent);
|
|
border-radius: 2px;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.04em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wp-block-button__link:hover,
|
|
.wp-block-button__link:focus,
|
|
.wp-element-button:hover,
|
|
.wp-element-button:focus {
|
|
border-color: var(--accent-hover);
|
|
background: var(--accent-hover);
|
|
color: #fff;
|
|
}
|
|
|
|
.is-style-outline > .wp-block-button__link {
|
|
background: transparent;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.wp-block-table {
|
|
overflow-x: auto;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.wp-block-table table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.wp-block-table th,
|
|
.wp-block-table td {
|
|
padding: 0.55em 0.7em;
|
|
border: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
.wp-block-table th {
|
|
background: var(--surface);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.wp-block-quote__citation,
|
|
.wp-block-pullquote__citation,
|
|
.wp-block-quote cite,
|
|
.wp-block-pullquote cite {
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace !important;
|
|
font-size: 1rem;
|
|
font-style: normal;
|
|
}
|
|
|
|
.wp-block-pullquote {
|
|
padding: 2rem 0;
|
|
border-top: 2px solid var(--accent);
|
|
border-bottom: 2px solid var(--accent);
|
|
color: var(--text);
|
|
text-align: left;
|
|
}
|
|
|
|
.wp-block-pullquote blockquote {
|
|
max-width: var(--content);
|
|
padding: 0;
|
|
border: 0;
|
|
margin: 0 auto;
|
|
color: inherit;
|
|
font-family: "Alpha Lyrae", sans-serif;
|
|
font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.75rem);
|
|
font-style: normal;
|
|
}
|
|
|
|
.wp-block-cover__inner-container {
|
|
max-width: var(--content);
|
|
}
|
|
|
|
.wp-block-gallery .wp-element-caption {
|
|
margin: 0.5rem 0 0;
|
|
}
|
|
|
|
.wp-block-media-text {
|
|
gap: clamp(1rem, 3vw, 2.5rem);
|
|
}
|
|
|
|
.wp-block-group.has-background,
|
|
.wp-block-columns.has-background {
|
|
padding: clamp(1.25rem, 4vw, 3rem);
|
|
}
|
|
.hero {
|
|
position: relative;
|
|
display: grid;
|
|
min-height: min(65vh, 760px);
|
|
overflow: hidden;
|
|
background: #171615;
|
|
color: #fff;
|
|
}
|
|
.hero-video {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.hero::after {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(90deg, rgba(0, 0, 0, 0.74), rgba(0, 0, 0, 0.2));
|
|
content: "";
|
|
}
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
align-self: end;
|
|
max-width: var(--wide);
|
|
width: 100%;
|
|
padding: clamp(4rem, 13vw, 10rem) 1.5rem 3.5rem;
|
|
margin: auto;
|
|
}
|
|
.hero-eyebrow {
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
color: #f09b72;
|
|
}
|
|
.hero-title {
|
|
max-width: 1024px;
|
|
margin: 0.45rem 0;
|
|
font-family: "Alpha Lyrae", sans-serif;
|
|
/* Use another, more glitchy font subset */
|
|
font-feature-settings: "ss02" 1, "liga" 1;
|
|
font-size: clamp(2.8rem, 7vw, 6rem);
|
|
font-weight: 500;
|
|
line-height: 0.98;
|
|
}
|
|
.hero-text {
|
|
max-width: 600px;
|
|
margin: 0;
|
|
font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.6rem);
|
|
}
|
|
.hero + .site-main {
|
|
padding-top: 3rem;
|
|
}
|
|
.pagination,
|
|
.post-navigation {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-top: 2.5rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--line);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
}
|
|
/* Archive and search pagination follows the wide page-title alignment. */
|
|
.pagination {
|
|
width: min(var(--wide), calc(100vw - 3rem));
|
|
max-width: none;
|
|
margin-left: 50%;
|
|
margin-right: 0;
|
|
transform: translateX(-50%);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.pagination .nav-links {
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
min-height: 1.8em;
|
|
gap: 0.8rem;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Keep the numbered sequence centered independently of the available directional links. */
|
|
.pagination .prev,
|
|
.pagination .next {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
.pagination .prev {
|
|
left: 0;
|
|
}
|
|
|
|
.pagination .next {
|
|
right: 0;
|
|
}
|
|
|
|
/* Previous/next article navigation uses the same wide treatment as archive pagination. */
|
|
.post-navigation {
|
|
width: min(var(--wide), calc(100vw - 3rem));
|
|
max-width: none;
|
|
margin-left: 50%;
|
|
margin-right: 0;
|
|
transform: translateX(-50%);
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.post-navigation .nav-links {
|
|
display: flex;
|
|
width: 100%;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.post-navigation .nav-next {
|
|
margin-left: auto;
|
|
text-align: right;
|
|
}
|
|
|
|
/* Keep link decoration on the title only, leaving the directional markers clean. */
|
|
.post-navigation a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.post-navigation .post-navigation-title {
|
|
text-decoration-line: underline;
|
|
text-decoration-thickness: 0.08em;
|
|
text-underline-offset: 0.14em;
|
|
}
|
|
|
|
.post-navigation .nav-previous a::before,
|
|
.post-navigation .nav-next a::after {
|
|
color: var(--accent);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
.post-navigation .nav-previous a::before {
|
|
margin-right: 0.5em;
|
|
content: "◂";
|
|
}
|
|
|
|
.post-navigation .nav-next a::after {
|
|
margin-left: 0.5em;
|
|
content: "▸";
|
|
}
|
|
.page-numbers {
|
|
padding: 0.25rem;
|
|
}
|
|
.page-numbers.current {
|
|
color: var(--accent);
|
|
}
|
|
.comments-area {
|
|
margin-top: 4rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.comment-list,
|
|
.comment-list .children {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
/* Replies are nested by a subtle rule instead of default ordered-list numbering. */
|
|
.comment-list .children {
|
|
margin: 0 0 0 1.25rem;
|
|
padding-left: 1.25rem;
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
.comment-body {
|
|
padding: 1.75rem 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.comment-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8rem;
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.comment-avatar {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
flex: 0 0 auto;
|
|
border-radius: 2px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.comment-identity {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: 0.35rem 0.65rem;
|
|
}
|
|
|
|
.comment-author {
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.comment-author a,
|
|
.comment-published,
|
|
.comment-edit-link a,
|
|
.comment-actions a {
|
|
color: inherit;
|
|
}
|
|
|
|
.comment-published::before {
|
|
color: var(--accent);
|
|
content: "·";
|
|
margin-right: 0.65rem;
|
|
}
|
|
|
|
.comment-content {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.comment-content > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.comment-awaiting-moderation {
|
|
margin: 1rem 0 0;
|
|
color: var(--accent);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.comment-actions {
|
|
margin-top: 1.25rem;
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.comment-form label,
|
|
.comment-form .logged-in-as,
|
|
.comment-form .comment-notes,
|
|
.comment-form .form-submit {
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
.comment-form input:not([type="submit"]),
|
|
.comment-form textarea {
|
|
width: 100%;
|
|
padding: 0.55rem;
|
|
border: 1px solid var(--line);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
}
|
|
.site-footer {
|
|
padding: 2.5rem 1.5rem;
|
|
border-top: 1px solid var(--line);
|
|
color: var(--muted);
|
|
font-family: "Berkeley Mono", "Source Code Pro", monospace;
|
|
font-size: 1rem;
|
|
}
|
|
.footer-inner {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
max-width: var(--wide);
|
|
margin: auto;
|
|
}
|
|
.footer-menu {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.footer-menu a {
|
|
color: inherit;
|
|
}
|
|
.not-found {
|
|
text-align: center;
|
|
}
|
|
.not-found .search-form {
|
|
max-width: 380px;
|
|
margin: 2rem auto;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.header-inner {
|
|
min-height: 4rem;
|
|
padding: 0.55rem 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.menu-toggle {
|
|
display: grid;
|
|
}
|
|
.primary-navigation {
|
|
order: 4;
|
|
width: 100%;
|
|
display: none;
|
|
}
|
|
.site-header.menu-open .primary-navigation {
|
|
display: block;
|
|
}
|
|
.primary-menu {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
gap: 0.9rem;
|
|
padding: 0.8rem 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
.site-description {
|
|
display: none;
|
|
}
|
|
.site-main {
|
|
padding: 2.5rem 1rem 4rem;
|
|
}
|
|
.page-header {
|
|
padding: 2.5rem 1rem 0;
|
|
}
|
|
.hero-content {
|
|
padding: 6rem 1rem 2.5rem;
|
|
}
|
|
.hero {
|
|
min-height: 55vh;
|
|
}
|
|
.footer-inner {
|
|
flex-direction: column;
|
|
}
|
|
.entry-content {
|
|
font-size: 1.25rem;
|
|
}
|
|
}
|
|
/* Desktop submenus are positioned from their parent; nested menus fly out to the side. */
|
|
.primary-menu li {
|
|
position: relative;
|
|
}
|
|
|
|
.primary-menu .sub-menu {
|
|
position: absolute;
|
|
z-index: 30;
|
|
top: calc(100% + 0.8rem);
|
|
left: -0.9rem;
|
|
display: block;
|
|
min-width: 13rem;
|
|
padding: 0.6rem;
|
|
margin: 0;
|
|
list-style: none;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
box-shadow: var(--shadow);
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(-0.4rem);
|
|
transition:
|
|
opacity 0.16s ease,
|
|
transform 0.16s ease,
|
|
visibility 0.16s;
|
|
}
|
|
.primary-menu li:hover > .sub-menu,
|
|
.primary-menu li:focus-within > .sub-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
.primary-menu .sub-menu li + li {
|
|
margin-top: 0.15rem;
|
|
}
|
|
.primary-menu .sub-menu a {
|
|
display: block;
|
|
padding: 0.45rem 0.5rem;
|
|
white-space: nowrap;
|
|
}
|
|
.primary-menu .sub-menu a:hover,
|
|
.primary-menu .sub-menu a:focus {
|
|
background: var(--bg);
|
|
}
|
|
/* On small screens, expose the menu hierarchy inline instead of relying on hover. */
|
|
@media (max-width: 760px) {
|
|
.primary-menu .sub-menu {
|
|
position: static;
|
|
display: block;
|
|
min-width: 0;
|
|
padding: 0.35rem 0 0.1rem 1rem;
|
|
margin: 0.35rem 0 0;
|
|
border: 0;
|
|
border-left: 1px solid var(--line);
|
|
box-shadow: none;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: none;
|
|
}
|
|
.primary-menu .sub-menu a {
|
|
padding: 0.25rem 0;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
.primary-menu > li.menu-item-has-children > a::after {
|
|
display: inline-block;
|
|
margin-left: 0.45em;
|
|
content: "▾";
|
|
color: var(--accent);
|
|
font-size: 1.45em;
|
|
line-height: 0.4;
|
|
vertical-align: -0.2em;
|
|
}
|
|
.primary-menu .sub-menu > li.menu-item-has-children > a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
.primary-menu .sub-menu > li.menu-item-has-children > a::after {
|
|
content: "▸";
|
|
color: var(--accent);
|
|
font-size: 1.45em;
|
|
line-height: 0.4;
|
|
}
|
|
.primary-menu .sub-menu .sub-menu {
|
|
top: -0.6rem;
|
|
left: calc(100% - 1px);
|
|
}
|
|
@media (max-width: 760px) {
|
|
.primary-menu > li.menu-item-has-children > a::after,
|
|
.primary-menu .sub-menu > li.menu-item-has-children > a::after {
|
|
content: "▾";
|
|
}
|
|
.primary-menu .sub-menu .sub-menu {
|
|
position: static;
|
|
margin: 0.35rem 0 0;
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
.site-branding {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
.site-description {
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Keep the sticky header below WordPress's admin bar at each core bar height. */
|
|
body.admin-bar .site-header {
|
|
top: 32px;
|
|
}
|
|
@media (max-width: 782px) {
|
|
body.admin-bar .site-header {
|
|
top: 46px;
|
|
}
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|