SHORTWAVE BETA
@import url(https://fonts.bunny.net/css?family=jetbrains-mono:400,400i,500,500i|inter:400,400i);
/* ===========================================================================
Shortwave Beta
A mono-first BearBlog theme built from QuietType's three-token architecture.
Design intent:
- sibling system, not QuietType variant
- terminal/logbook/radio transmission personality
- derived tokens only; no palette drift
=========================================================================== */
/* ===========================================================================
Tokens
=========================================================================== */
:root {
color-scheme: dark;
/* Core palette — change only these for new palettes */
--bg: #101316;
--text: #d8dedc;
--accent: #7fc7b5;
/* Layout + type */
--width: min(720px, 90vw);
--font-main: "JetBrains Mono", monospace;
--font-secondary: "JetBrains Mono", monospace;
--font-mono: "JetBrains Mono", monospace;
--font-sans: "Inter", system-ui, sans-serif;
--font-scale: 0.95rem;
--font-small: 0.9em;
/* UI */
--radius: 3px;
--link: var(--accent);
--space-block: 2rem;
/* Derived tokens — do not change per palette */
--muted: color-mix(in srgb, var(--text) 64%, transparent);
--border: color-mix(in srgb, var(--text) 18%, transparent);
--surface: color-mix(in srgb, var(--text) 7%, var(--bg));
--surface-strong: color-mix(in srgb, var(--text) 12%, var(--bg));
--code-bg: color-mix(in srgb, var(--text) 8%, #000);
--code-text: var(--text);
--visited: color-mix(in srgb, var(--accent) 60%, var(--text));
--title: color-mix(in srgb, var(--text) 92%, white);
}
/* ===========================================================================
Base Layout
=========================================================================== */
body {
max-width: var(--width);
margin: auto;
padding: 20px;
background: var(--bg);
color: var(--text);
font-family: var(--font-secondary);
font-size: var(--font-scale);
line-height: 1.55;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
}
main {
line-height: 1.65;
}
main p {
margin-block: 1em;
}
main ul,
main ol {
padding-left: 1.35em;
}
main li {
margin-block: 0.35em;
}
::selection {
background: color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--text);
}
/* ===========================================================================
Typography
=========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--title);
font-family: var(--font-main);
font-weight: 500;
line-height: 1.25;
}
h2,
h3,
h4,
h5,
h6 {
margin-block-start: 1.8em;
}
strong,
b {
color: var(--title);
font-weight: 500;
}
time,
.metas,
.tags,
small {
color: var(--muted);
font-family: var(--font-mono);
}
time {
font-size: 0.88em;
font-style: normal;
}
/* ===========================================================================
Links
=========================================================================== */
a {
color: var(--link);
border-bottom: 1px solid color-mix(in srgb, var(--accent) 75%, transparent);
text-decoration: none;
cursor: pointer;
}
a:hover {
background: var(--surface);
color: var(--text);
text-decoration: none;
}
a:visited {
color: var(--visited);
border-bottom-color: color-mix(in srgb, var(--visited) 70%, transparent);
}
/* External link marker, excluding same-site relative links */
a[href^="http"]::after {
content: "↗";
margin-left: 0.15em;
color: var(--muted);
font-size: 0.85em;
}
.title,
.title:hover,
header nav a,
footer a,
.pagination a {
border-bottom: 0;
}
.title::after,
header nav a::after,
footer a::after,
.pagination a::after {
content: none;
}
/* ===========================================================================
Header / Navigation
=========================================================================== */
header {
display: flex;
align-items: baseline;
gap: 1rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--border);
}
header nav {
display: flex;
gap: 0.4rem;
margin-left: auto;
}
.title h1 {
margin: 0;
color: var(--title);
font-size: 1.35em;
letter-spacing: -0.02em;
}
.title h1::before {
content: "~ ";
color: var(--accent);
}
nav a {
margin-right: 0;
}
header nav a {
display: inline-flex;
align-items: center;
gap: 0.35em;
padding: 0.2em 0.45em;
border: 1px solid transparent;
border-radius: var(--radius);
background: transparent;
color: var(--accent);
font-size: var(--font-small);
text-decoration: none;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
transform 0.12s ease;
}
header nav a:hover {
background: var(--surface);
border-color: var(--border);
color: var(--text);
transform: translateY(-1px);
}
header nav a:active {
transform: translateY(0);
}
header nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* ===========================================================================
Archive / Blog Index
=========================================================================== */
ul.blog-posts {
list-style: none;
padding: 0;
}
ul.blog-posts li {
display: block;
margin-bottom: 1.15rem;
padding-bottom: 1rem;
border-bottom: 1px dotted color-mix(in srgb, var(--border) 70%, transparent);
}
ul.blog-posts li:last-child {
border-bottom: 0;
}
ul.blog-posts li span {
display: block;
margin-bottom: 0.25rem;
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.75rem;
font-style: normal;
line-height: 1.2;
}
/* ul.blog-posts li span::before {
content: "✱ ";
color: var(--accent);
} */
.blog-posts li time {
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.75rem;
font-style: normal;
line-height: 1.2;
}
ul.blog-posts li a {
display: inline;
}
/* ===========================================================================
Tables / Media / Rules
=========================================================================== */
table {
width: 100%;
border-spacing: 0;
}
th,
td {
padding: 0.45rem 0.65rem;
border: 1px solid var(--border);
font-size: 0.95em;
}
th {
background: var(--surface);
color: var(--title);
font-weight: 500;
}
hr {
margin-block: 2rem;
border: 0;
border-top: 1px dashed var(--border);
}
img {
max-width: 100%;
border-radius: var(--radius);
}
.inline {
width: auto !important;
}
mark {
background: color-mix(in srgb, var(--accent) 35%, var(--bg));
color: var(--text);
}
/* ===========================================================================
Code
=========================================================================== */
code {
padding: 0.1em 0.25em;
border-radius: var(--radius);
background: var(--code-bg);
color: var(--code-text);
font-family: var(--font-mono);
font-size: 0.95em;
}
.highlight,
.code {
margin-block: 1em;
padding: 0.75rem 1rem;
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--code-bg);
color: var(--code-text);
}
.copy-code-button {
color: var(--text);
opacity: 0.6;
}
.copy-code-button:focus-visible {
opacity: 1;
}
@media (hover: hover) {
.highlight:hover .copy-code-button {
opacity: 0.8;
}
.copy-code-button:hover {
opacity: 1;
}
}
/* ===========================================================================
Quotes / Callouts
=========================================================================== */
blockquote {
margin-inline: 0;
padding: 0.1rem 0 0.1rem 1rem;
border-left: 2px solid var(--accent);
color: var(--muted);
font-style: italic;
}
.callout {
margin-block: 1rem;
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
}
.callout-accent,
.themed_callout {
background: color-mix(in srgb, var(--accent) 14%, var(--bg));
border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
.callout-muted,
.grey_callout {
background: var(--surface);
}
/* Compatibility fallback for imported Jon-style callout classes.
Kept token-derived to avoid palette drift. */
.brown_callout,
.orange_callout,
.yellow_callout,
.green_callout,
.blue_callout,
.purple_callout,
.pink_callout,
.red_callout {
background: color-mix(in srgb, var(--accent) 11%, var(--bg));
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
/* ===========================================================================
Footer / Metadata
=========================================================================== */
footer {
margin-top: 2rem;
padding: 1.25rem 0;
border-top: 1px dashed var(--border);
color: var(--muted);
font-size: var(--font-small);
text-align: left;
text-transform: lowercase;
}
footer p {
font-size: 0.8em;
}
.tags a {
font-size: 0.85em;
}
.metas {
font-size: 0.85em;
}
section.footnotes {
color: var(--muted);
font-size: var(--font-small);
line-height: 1.45;
}
section.footnotes ol li p {
margin-block: 0.5em;
}
/* ===========================================================================
Forms / Buttons
=========================================================================== */
button,
input,
textarea,
select {
font: inherit;
}
button {
margin: 0;
cursor: pointer;
}
/* ===========================================================================
Upvote / Applause
=========================================================================== */
form#upvote-form {
display: block !important;
margin-block-start: 1.3em;
}
form#upvote-form > small {
display: block;
font-size: 1em;
}
:is(.post, .page) .upvote-button {
display: inline-flex;
align-items: center;
padding: 0 0.1em;
border: 0;
border-radius: var(--radius);
background: none;
color: var(--muted);
font: inherit;
font-size: var(--font-small);
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: transform 0.15s ease;
}
:is(.post, .page) .upvote-button:focus-visible {
outline: 2px solid var(--link);
outline-offset: 2px;
}
:is(.post, .page) .upvote-button svg,
:is(.post, .page) .upvote-button .upvote-count {
display: none !important;
}
:is(.post, .page) .upvote-button::before {
content: "△";
display: inline-block;
color: var(--link);
font-size: 1.1rem;
line-height: 1;
transition: transform 0.2s ease;
}
@media (hover: hover) {
:is(.post, .page)
.upvote-button:not(.upvoted):not([disabled]):hover::before {
transform: translateY(-2px);
}
}
:is(.post, .page) .upvote-button.upvoted::before,
:is(.post, .page) .upvote-button[disabled]::before {
content: "▲";
}
:is(.post, .page) .upvote-button:not([disabled]):active {
transform: translateY(1px);
}
:is(.post, .page) .upvote-button.upvoted,
:is(.post, .page) .upvote-button[disabled] {
opacity: 0.7;
color: inherit !important;
cursor: default;
}
/* ===========================================================================
Fieldmark / Signalmark
=========================================================================== */
span.fieldmark,
span.signalmark {
display: block;
width: 8.5rem;
height: 14px;
margin: 1.2rem auto;
background: var(--link);
opacity: 0.9;
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'><path d='M2 8 H32 M42 8 H62 M72 8 H100 M110 8 H158' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>")
no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 16'><path d='M2 8 H32 M42 8 H62 M72 8 H100 M110 8 H158' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>")
no-repeat center / contain;
}
/* ===========================================================================
Afterword
=========================================================================== */
.afterword {
margin-top: 1.2rem;
padding-bottom: 9px;
color: var(--muted);
font-family: var(--font-secondary);
font-size: 0.9em;
}
.afterword a {
display: inline-block;
color: var(--accent);
font-weight: 500;
text-decoration: none;
}
.afterword a:hover {
background: var(--surface);
color: var(--text);
}
/* ===========================================================================
Meadow.cafe Guestbook
=========================================================================== */
:where(
#guestbooks___guestbook-form-container,
#guestbooks___guestbook-messages-container
) {
color: var(--text);
}
#guestbooks___guestbook-form-container {
margin-block: 1.25rem 1.75rem;
padding: 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 85%, var(--bg));
}
#guestbooks___guestbook-form {
display: grid;
gap: 0.75rem;
}
#guestbooks___guestbook-form :where(input, textarea) {
box-sizing: border-box;
width: 100%;
padding: 0.65rem 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--bg) 72%, black);
color: var(--text);
font: inherit;
}
#guestbooks___guestbook-form textarea {
min-height: 7rem;
resize: vertical;
line-height: 1.45;
}
#guestbooks___guestbook-form :where(input, textarea, button):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
#guestbooks___guestbook-form button[type="submit"] {
justify-self: start;
padding: 0.55rem 0.9rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: transparent;
color: var(--accent);
font: inherit;
transition:
transform 0.12s ease,
background-color 0.15s ease,
border-color 0.15s ease;
}
#guestbooks___guestbook-form button[type="submit"]:hover {
background: var(--surface);
border-color: var(--border);
transform: translateY(-1px);
}
#guestbooks___guestbook-form button[type="submit"]:active {
transform: translateY(0);
}
#guestbooks___challenge-answer-container {
margin-top: 0.25rem;
}
#guestbooks___error-message {
margin-top: 0.25rem;
color: color-mix(in srgb, var(--accent) 70%, white);
opacity: 0.95;
font-size: var(--font-small);
}
#guestbooks___guestbook-made-with {
opacity: 0.85;
}
#guestbooks___guestbook-made-with a,
#guestbooks___guestbook-messages-container a {
color: var(--accent);
}
#guestbooks___guestbook-messages-header {
margin-top: 0;
}
#guestbooks___guestbook-messages-container {
display: grid;
gap: 0.9rem;
margin-block: 1rem 2rem;
}
#guestbooks___guestbook-messages-container > * {
padding: 0.85rem 1rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 75%, var(--bg));
}
#guestbooks___guestbook-messages-container :where(small, time) {
color: var(--muted);
}
/* ===========================================================================
Palette Preview Dots
=========================================================================== */
.palette-preview {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0.35rem 0 0.75rem;
}
.palette-preview span {
display: inline-block;
width: 12px;
height: 12px;
border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
border-radius: 999px;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg) 35%, transparent);
}
/* ===========================================================================
Pagination
=========================================================================== */
body.blog .pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: var(--space-block) auto 1rem;
padding: 0.4rem 0.75rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 85%, var(--bg));
font-size: var(--font-small);
}
.pagination #pageInfo {
color: var(--muted);
font-family: var(--font-mono);
white-space: nowrap;
}
.pagination a {
display: inline-flex;
align-items: center;
gap: 0.25em;
padding: 0.25em 0.5em;
border-radius: var(--radius);
color: var(--accent);
text-decoration: none;
transition:
background-color 0.15s ease,
transform 0.12s ease;
}
.pagination a:hover {
background: var(--surface);
color: var(--text);
transform: translateY(-1px);
}
.pagination a:active {
transform: translateY(0);
}
.pagination a[disabled] {
opacity: 0.35;
pointer-events: none;
}
.pagination #prevPage::before {
content: "←";
opacity: 0.8;
}
.pagination #nextPage::after {
content: "→";
opacity: 0.8;
}
/* ===========================================================================
Button Page
=========================================================================== */
.button-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.button-grid img {
display: block;
border-radius: var(--radius);
}
/* ===========================================================================
Bubbles Upvoting
=========================================================================== */
.afterword-bubbles-line {
display: flex;
align-items: center;
gap: 0.35rem;
opacity: 0.7;
}
.afterword-bubbles-line .bubbles-vote-btn {
--bt-fg: var(--muted);
--bt-accent: var(--accent);
all: unset;
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--muted);
font-size: var(--font-small);
}
.afterword-bubbles-line .bubbles-vote-num {
color: var(--accent);
font-variant-numeric: tabular-nums;
}
.bubbles-vote-tri {
display: none;
}
/* ===========================================================================
Mobile Adjustments
=========================================================================== */
@media (max-width: 560px) {
body {
padding: 18px;
}
header {
display: block;
}
header nav {
margin-top: 0.75rem;
margin-left: 0;
flex-wrap: wrap;
}
table {
display: block;
overflow-x: auto;
}
}