/* replicated.wiki page styles. Referenced by every mark-rendered page as
. Plain CSS, no build. */
/* JetBrains Mono, served from jsDelivr (weights 400/500/700/800, roman + italic).
Used for code; the loaded weights cover bold/italic code spans. */
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff') format('woff');
font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff') format('woff');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff') format('woff');
font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff') format('woff');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff') format('woff');
font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff') format('woff');
font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'JetBrains Mono';
src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
font-weight: 800; font-style: italic; font-display: swap;
}
body {
max-width: 48rem;
margin: 2rem auto;
padding: 0 1rem;
font: 16px/1.5 Verdana, system-ui, -apple-system, sans-serif;
color: #222;
}
/* Top banner injected after by `mark --body=banner.html`: logo on
the left, site name, the whole bar linking to the site root. */
.banner {
display: flex;
align-items: center;
gap: .8rem;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
text-decoration: none;
color: inherit;
}
.banner-logo { width: 3rem; height: 3rem; object-fit: contain; }
.banner-title { font-size: 1.4rem; font-weight: 700; letter-spacing: .02em; }
/* The justified-text look, with hyphenation so the gaps stay tight. */
p, li {
text-align: justify;
hyphens: auto;
}
h1, h2, h3, h4 { line-height: 1.2 }
pre { background: #f4f4f4; padding: .6rem; overflow: auto }
code { background: #f4f4f4; padding: 0 .2rem; border-radius: 3px }
pre code { background: none; padding: 0 }
pre, code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace }
a { color: #0366d6; text-decoration: none }
a:hover { text-decoration: underline }
/* Images. Alignment and width ride in the URL fragment of the image link
(e.g. [img]: pic.jpg#rightw40), so a StrictMark page can style an image
without any HTML. The browser ignores the fragment when fetching. */
img { max-width: 100%; height: auto }
img[src*="#left"] { float: left; margin: .3rem 1.5rem 1rem 0 }
img[src*="#right"] { float: right; margin: .3rem 0 1rem 1.5rem }
img[src*="#center"] { display: block; margin: 1rem auto; clear: both }
img[src*="w30"] { width: 30% }
img[src*="w40"] { width: 40% }
img[src*="w50"] { width: 50% }
img[src*="w80"] { width: 80% }
img[src*="w100"] { width: 100% }
/* w80 is the wide-but-inset picture: at that width a float leaves a gutter too
narrow to read, so `#w80` alone centers. `#leftw80`/`#rightw80` still float. */
img[src*="w80"]:not([src*="#left"]):not([src*="#right"]) {
display: block; margin: 1rem auto; clear: both;
}
/* Captioned images. An image opening a paragraph renders as a and
`mark` copies the same fragment styling onto it as classes, so the caption
floats and sizes together with its image. The rules above still cover a bare
inline ; inside a figure the figure owns the layout and the image just
fills it — [src] lifts the reset over the src*= rules, which would otherwise
win on specificity and re-float or re-size the image within its figure. */
figure { margin: 0 }
figure.left { float: left; margin: .3rem 1.5rem 1rem 0 }
figure.right { float: right; margin: .3rem 0 1rem 1.5rem }
figure.center { display: block; margin: 1rem auto; clear: both }
figure.w30 { width: 30% }
figure.w40 { width: 40% }
figure.w80 { width: 80% }
figure.w100 { width: 100% }
figure.w80:not(.left):not(.right) { display: block; margin: 1rem auto; clear: both }
figure img[src] { display: block; width: 100%; float: none; margin: 0 }
figcaption {
color: #6a737d;
font-size: .85rem;
line-height: 1.4;
text-align: center;
hyphens: none;
padding: .4rem .2rem 0;
}
blockquote {
background: #c5cce1;
padding: 0.5em;
padding-left: 0.5em;
padding-left: 1em;
font-style: italic;
border-radius: 0.5em;
}
/* MARK-015: the head meta block — one
per `Key: value` pair.
Key and value share a row; the fixed key column aligns pairs across rows. */
h1 + div { color: #338; margin-bottom: 1rem; opacity: 60%; }
dl.meta { display: grid; grid-template-columns: 3.2rem 1fr; margin: 0 }
dl.meta dt { font-weight: 600 }
dl.meta dd { margin: 0 }
/* TODO lists from the `-[·]` markers. A native checkbox is only two-state, so
the four states are drawn as ballot-box glyphs that mirror the markers:
☐ open, ☑ done (-[v]), ⊟ blocked (-[-]), ☒ wontfix (-[x]) — so `-` and `x`
are plainly distinct. The disabled stays in the markup (hidden here)
so a CSS-less view still degrades to a native box for open/done. */
ul.todo { list-style: none; padding-left: .2rem }
ul.todo li { text-align: left; hyphens: none }
ul.todo input { display: none }
ul.todo li::before { content: "\2610\00a0" } /* ☐ open */
ul.todo .done::before { content: "\2611\00a0" } /* ☑ done */
ul.todo .blocked::before { content: "\229f\00a0" } /* ⊟ blocked */
ul.todo .wontfix::before { content: "\2612\00a0" } /* ☒ wontfix */
ul.todo .done { color: #6a737d }
ul.todo .blocked { color: #b34700 }
ul.todo .wontfix { color: #8a8a8a } /* content also wrapped in */
/* On narrow screens, stop floating: a 40% float is unreadable on a phone. */
@media (max-width: 32rem) {
img[src*="#left"], img[src*="#right"] {
float: none; display: block; width: 100%; margin: 1rem auto;
}
figure.left, figure.right {
float: none; display: block; width: 100%; margin: 1rem auto;
}
}
/* BEE-062: the markup `bee html` shares with `bee http` — bee's own sheet is
///bee blob/style.css, whose static half stops at geometry and whose colour
half render/html.js generates per theme. The site is one light theme, so the
generated rules are inlined here, and only the ones this markup can carry. */
/* Syntax tokens. A page carries them wherever bee cites code (tok-P prose,
tok-D punctuation, tok-R keyword, tok-G string, tok-F name, tok-L number,
tok-H macro); un-cited pages never mint one, so the set is small on purpose. */
.tok-C { font-weight: bold }
.tok-D { color: #7f7f7f }
.tok-E { color: #cdcd00 }
.tok-F { color: #5f00d7 }
.tok-G { color: #43bc6c }
.tok-H { color: #a9568f }
.tok-I { color: #0087ff }
.tok-J { color: #7ed32c }
.tok-K { color: #d7af00 }
.tok-L { color: #3684c9 }
.tok-M { color: #ff0000 }
.tok-N { font-weight: bold }
.tok-P { color: #7f7f7f }
.tok-Q { color: #7f7f7f }
.tok-R { color: #5c5cff }
.tok-T { color: #5f00d7 }
.tok-V { color: #f89307 }
.tok-W { color: #43bc6c }
.tok-X { color: #875f00 }
.tok-Y { color: #df202b }
.tok-Z { color: #f1e50e }
/* The whole point of the per-token spans: a `#b123` link lands ON the token and
the reader must SEE which one — bee paints the same wash in its pager. */
:target { color: #000; background: #ffffd7 }
/* A task item's checkbox is its own marker; the bullet beside it doubles it.
(`bee html` emits
; a `be mark` page uses ul.todo above.) */
li.task { list-style: none }
/* A meta pair reads `Key: value`; the colon is the sheet's, not the markup's,
since the renderer emits the key alone (mark/strict.js:418). */
dl.meta dt::after { content: ":" }
/* Tables: no page carries one today, but the renderer emits them and an
unruled table reads as run-together prose. */
table { border-collapse: collapse }
th, td { border: 1px solid currentColor; padding: 1px 6px }