updated markdown style

This commit is contained in:
2026-05-18 12:34:12 +02:00
parent 5985f172a1
commit c3aa52ddfd
+122 -8
View File
@@ -794,24 +794,61 @@ html.cybersigil body::after {
color: var(--mauve); color: var(--mauve);
font-weight: 700; font-weight: 700;
} }
/* Section break — corrupted-terminal sigil rule. A thin ice→magenta scan
* that tears open at center for a glowing barb-sigil glyph, doubled by the
* hard cold offset echo the buttons/plates carry. */
.cybersigil .prose hr { .cybersigil .prose hr {
height: 3px; height: 1px;
opacity: 0.9; margin: 3.75rem auto;
background: repeating-linear-gradient( opacity: 1;
overflow: visible;
background: linear-gradient(
90deg, 90deg,
var(--sky) 0 12px, transparent 0,
var(--mauve) 12px 24px color-mix(in srgb, var(--sky) 12%, transparent) 5%,
color-mix(in srgb, var(--sky) 72%, transparent) 24%,
color-mix(in srgb, var(--sky) 72%, transparent) 42%,
transparent 46%,
transparent 54%,
color-mix(in srgb, var(--mauve) 72%, transparent) 58%,
color-mix(in srgb, var(--mauve) 72%, transparent) 76%,
color-mix(in srgb, var(--mauve) 12%, transparent) 95%,
transparent 100%
); );
box-shadow: 0 0 12px color-mix(in srgb, var(--sky) 42%, transparent); box-shadow: 0 0 16px -3px color-mix(in srgb, var(--sky) 32%, transparent);
} }
/* Hard cold offset echo — the signature drop the rest of the theme carries. */
.cybersigil .prose hr::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: calc(50% + 3px);
height: 1px;
background: inherit;
opacity: 0.3;
transform: none;
}
/* Center glyph — the barb sigil, glowing, seated over the gap. Overrides
* the base rotated-diamond pip entirely. */
.cybersigil .prose hr::before { .cybersigil .prose hr::before {
width: 3.4em;
height: 1.5em;
transform: translate(-50%, -50%);
background: var(--sky); background: var(--sky);
box-shadow: 0 0 8px var(--sky); border-radius: 0;
-webkit-mask: var(--cs-barb) center / contain no-repeat;
mask: var(--cs-barb) center / contain no-repeat;
filter:
drop-shadow(0 0 5px color-mix(in srgb, var(--sky) 55%, transparent))
drop-shadow(0 0 2px color-mix(in srgb, var(--mauve) 50%, transparent));
} }
.cybersigil .prose h3, .cybersigil .prose h3,
.cybersigil .prose h4, .cybersigil .prose h4,
.cybersigil .prose h5 { .cybersigil .prose h5,
.cybersigil .prose h6 {
font-family: var(--font-sans); font-family: var(--font-sans);
font-style: normal;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -821,6 +858,7 @@ html.cybersigil body::after {
.cybersigil .prose h4::before { content: "### "; color: var(--sky); opacity: 0.6; } .cybersigil .prose h4::before { content: "### "; color: var(--sky); opacity: 0.6; }
.cybersigil .prose h5 { color: var(--green); } .cybersigil .prose h5 { color: var(--green); }
.cybersigil .prose h5::before { content: "#### "; color: var(--sky); opacity: 0.55; } .cybersigil .prose h5::before { content: "#### "; color: var(--sky); opacity: 0.55; }
.cybersigil .prose h6::before { content: "##### "; color: var(--sky); opacity: 0.5; }
.cybersigil .prose a { .cybersigil .prose a {
text-decoration-style: dotted; text-decoration-style: dotted;
text-decoration-color: color-mix(in srgb, var(--sky) 60%, transparent); text-decoration-color: color-mix(in srgb, var(--sky) 60%, transparent);
@@ -831,6 +869,82 @@ html.cybersigil body::after {
text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve); text-shadow: -1px 0 0 var(--sky), 1px 0 0 var(--mauve);
} }
/* Emphasis — VT323 has no real italic, so the base font-display em renders
* as mangled bitmap. Drop to the terminal body and re-encode emphasis as
* colour: magenta em, ice strong with a faint bloom, red-struck del. */
.cybersigil .prose em {
font-family: var(--font-sans);
font-style: normal;
color: var(--mauve);
}
.cybersigil .prose strong {
color: var(--sky);
text-shadow: 0 0 6px color-mix(in srgb, var(--sky) 30%, transparent);
}
.cybersigil .prose del {
text-decoration-color: color-mix(in srgb, var(--red) 80%, transparent);
}
/* Lists — terminal nodes. The salon diamond becomes a square ice cell with
* the hard magenta offset; ordered markers go cold mono, no faux-italic. */
.cybersigil .prose ul > li::before {
width: 0.4em;
height: 0.4em;
top: 0.66em;
transform: none;
background: var(--sky);
box-shadow: 2px 2px 0 0 color-mix(in srgb, var(--mauve) 70%, transparent);
}
.cybersigil .prose ol > li::marker {
color: var(--sky);
font-family: var(--font-sans);
font-style: normal;
}
.cybersigil .prose li > input[type="checkbox"] { accent-color: var(--mauve); }
/* Figure caption — a `// ` log comment, not a salon plaque dash. */
.cybersigil .prose figure figcaption {
font-family: var(--font-sans);
font-style: normal;
letter-spacing: 0.04em;
color: var(--subtext0);
}
.cybersigil .prose figure figcaption::before {
content: "// ";
color: var(--sky);
opacity: 0.85;
}
/* Tables — a sector readout: square ice grid, scanline header, hard offset,
* magenta hover sweep. */
.cybersigil .prose table {
font-family: var(--font-sans);
border-color: color-mix(in srgb, var(--sky) 40%, var(--surface2));
box-shadow:
0 0 0 1px color-mix(in srgb, var(--sky) 14%, transparent),
4px 4px 0 0 color-mix(in srgb, var(--mauve) 22%, var(--crust));
}
.cybersigil .prose thead {
background:
repeating-linear-gradient(
0deg,
rgba(0, 0, 0, 0) 0 2px,
color-mix(in srgb, var(--sky) 8%, transparent) 2px 3px,
rgba(0, 0, 0, 0) 3px 4px
),
color-mix(in srgb, var(--crust) 80%, transparent);
}
.cybersigil .prose th {
color: var(--sky);
border-bottom-color: color-mix(in srgb, var(--mauve) 50%, transparent);
}
.cybersigil .prose td {
border-bottom-color: color-mix(in srgb, var(--sky) 20%, transparent);
}
.cybersigil .prose tbody tr:hover {
background: color-mix(in srgb, var(--sky) 7%, transparent);
}
/* Scrollbar + caret — hard cold chrome. */ /* Scrollbar + caret — hard cold chrome. */
.cybersigil { .cybersigil {
scrollbar-color: var(--sky) var(--crust); scrollbar-color: var(--sky) var(--crust);