/* The board index, transcribed from whatcomesafter.pl's own theme.
*
* Sources, in the forum's install:
* styles/ravaio/template/forumlist_body.html the markup this mirrors
* styles/ravaio/theme/stylesheet.css .fora-bg h3, .mas-*, .lastsubject
* styles/ravaio/theme/colors_tertiary.min.css .nene_fora and the two columns
* styles/ravaio/theme/colors.css the light values
* styles/ravaio/theme/kody_maggie.css .puste
*
* The px values below are the forum's, not rounded or reinterpreted — that is
* the point of this file. Everything is scoped under `.board` so it cannot
* reach the game's own screens, and colours go through tokens so the light
* theme still works.
*
* Two deliberate differences, both forced:
*
* 1. `.nene_fora` is transparent here. The theme paints it #2A2A2A, but the
* live board shows the forest between the cards, so the row is the window
* onto it and the cards are the opaque part.
* 2. The stamp is its own ![]()
. On the forum it is baked into the description
* panel's background (the .opis_grafN rules, each one an imgur upload).
* We have the stamps as loose PNGs, so they sit in the markup instead.
*/
.board { font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif; font-size: 13px; }
.board a { color: var(--fora-link); }
.board a:hover { color: var(--fora-link); text-decoration: none; }
/* ------------------------------------------------------------- category -- */
.board .fora-bg { list-style: none; margin: 0 0 18px; }
/* The frame: around every forum in the category, starting under the banner and
open at the top, so the banner is its lid and nothing runs up beside it. */
.board .fora-rows {
border: 1px solid var(--line);
border-top: none;
/* And the ruler every narrow rule below measures against. A row's problem is
never how wide the window is — the sidebar takes 220 of it, so a 1000px
window leaves the rows 675 and a window query fires hundreds of pixels
late, or never. What the row actually has is this box. */
container-type: inline-size;
container-name: fora;
}
/* banner1.png is 1073×100 and carries the taped paper the name is written on.
Stretched rather than cropped, so the paper stays put at any width. */
.view .banner {
display: block;
font-weight: 600;
height: 100px;
position: relative;
margin: 0;
font-family: var(--font-script);
font-size: 47px;
padding: 10px 30px 12px 18px;
text-transform: capitalize;
letter-spacing: 2px;
text-align: right;
color: var(--fora-ink);
/* No colour behind it: banner1.png is transparent above and below the
wall, and that has to stay open onto the forest. */
background: url('/img/forum/banner1.png') center / 100% 100% no-repeat;
overflow: hidden;
}
/* ----------------------------------------------------------- a forum row -- */
/* height 232 = a 192px card between 20 of padding, which leaves 40 between one
card and the next. */
.board .nene_fora {
/* The gutter is the same on both sides, except the left one also has to
carry the stamp's lap (see .znaczek): the picture's ink starts --stamp-lap
left of the card, and with a bare 40 there it crossed the category's frame
and hung outside it. Padding the left out by the lap puts everything the
row draws — stamp included — centred between the frame's two sides. */
--gutter: 40px;
--stamp-lap: 64px;
width: 100%;
padding: 20px var(--gutter) 20px calc(var(--gutter) + var(--stamp-lap));
height: 232px;
box-sizing: border-box;
}
.board .nene_fora:after { content: ''; display: block; clear: both; }
.board .fora_lewa {
float: left;
width: 65%;
height: 192px;
/* The same ruled paper the karta's head is on — see --grid-lines. A card on
this index is a page out of the same notebook, and flat colour was the one
thing on the board that looked like a box rather than a document. */
background-color: var(--fora-panel);
background-image: var(--grid-lines);
border: 1px solid var(--line);
display: flex;
align-items: stretch;
box-sizing: border-box;
}
/* The stamp column — see note 2 at the top of this file. It laps over the
card's left edge, the way a stuck-on stamp would. */
/* min-width lets the picture spill past its column: the PNG carries its own
transparent margin, so the text starts where the stamp *looks* like it ends. */
.board .znaczek {
flex: 0 0 196px;
min-width: 0;
/* flex, not grid: an oversized picture centres and overhangs both edges,
where a grid row would size to it and push it to the top. */
display: flex;
align-items: center;
justify-content: center;
/* In step with --stamp-lap on the row: the ink laps the card by the 46 of
pull plus 38 of picture, less the 19 of transparent margin it starts with. */
margin-left: -46px;
padding: 0;
}
/* Taller than the card on purpose: it overhangs top and bottom into the row's
padding, which is what stops it looking like a picture in a slot. */
.board .znaczek img {
max-width: none;
width: 272px;
max-height: 288px;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}
/* The theme stacks .opis over .linki inside a 160px .fora_opis. The live board
puts them side by side instead — description in the middle, subfora in their
own panel on the right — so that is what this does, with the theme's type
and colours unchanged. */
.board .fora_srodek { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 14px 0; }
.board .fora_name {
padding: 5px 5px 0;
text-align: center;
position: relative;
box-sizing: border-box;
}
.board .fora_name h4 {
padding: 0;
margin: 0;
/* The theme says capitalize; the live board's names are typed in caps and
read as caps, so the rule says what the eye sees. */
text-transform: uppercase;
font-size: 22px;
letter-spacing: 3px;
font-weight: 600;
line-height: 1.15;
}
.board .fora_name h4 a { color: var(--fora-link); }
.board .fora-stats-sm {
display: block;
margin-top: auto;
padding-top: 10px;
font-size: 0.8461em;
white-space: nowrap;
text-align: right;
color: var(--fora-desc);
}
/* The rule under the name. The forum's is an image; this is the same 210×12
slot, drawn instead of downloaded. */
.board .dekor {
display: block;
margin: 0 auto;
position: relative;
height: 12px;
max-width: 210px;
background: linear-gradient(90deg, transparent, currentColor 22%, currentColor 78%, transparent) center / 100% 1px no-repeat;
color: var(--fora-desc);
opacity: 0.55;
}
.board .fora_opis {
flex: 0 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
padding: 10px 16px 12px;
box-sizing: border-box;
}
.board .opis {
flex: 1 1 auto;
overflow: auto;
color: var(--fora-desc);
text-align: center;
line-height: 1.45;
}
.board .opis p { margin: 0; }
/* Part of the card, near its bottom edge — but not on it.
`margin-top: auto` is what keeps this clear of a long description, so it
stays; the card is as tall as the last-post column beside it, and all the
slack ends up here. Sitting the faces flush on the floor of that made them
look like they had fallen off the bottom of the card, so they ride a little
above it. */
.board .obecni {
margin-top: auto;
margin-bottom: 22px;
display: flex;
align-items: flex-end;
justify-content: center;
padding-top: 10px;
}
.board .subfora {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 22px;
font-size: 13px;
}
/* Who is standing in each location, rather than a list of names to click. */
.board .grupa {
display: grid;
justify-items: center;
gap: 4px;
padding: 2px 0;
}
.board .grupa-name {
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
font-size: 12px;
}
.board .grupa-faces { display: flex; align-items: center; }
.board .grupa-face {
width: 26px;
height: 34px;
overflow: hidden;
margin-left: -8px;
background: var(--fora-panel);
box-shadow: 0 0 0 1px var(--fora-inner);
}
.board .grupa-face:first-child { margin-left: 0; }
.board .grupa-face .face { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.board .grupa-face .portrait-initials { font-size: 0.6rem; letter-spacing: 0; }
.board .grupa-more { margin-left: 5px; font-size: 11px; color: var(--fora-desc); }
/* ------------------------------------------------------------ last post -- */
/* The face fills its whole side of the card, and everything the post says —
who, when, and what thread — sits in the column beside it. */
.board .fora_prawa {
float: right;
/* Flush against the card beside it: the theme left a 20px channel here, and
it read as a seam rather than as two cards. */
width: 35%;
/* Ruled like the card beside it: they are one page with a fold down it. */
background-color: var(--fora-panel);
background-image: var(--grid-lines);
height: 192px;
border: 1px solid var(--line);
/* flush against the card beside it, so they share one line rather than two */
border-left: none;
box-sizing: border-box;
color: var(--fora-link);
display: flex;
align-items: stretch;
overflow: hidden;
}
.board .fora_prawa:hover { text-decoration: none; }
.board .mas-avatar {
flex: 0 0 130px;
background: var(--fora-panel);
}
.board .mas-avatar .face { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.board .mas-avatar .portrait-initials { font-size: 2rem; }
.board .mas-wrap {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 20px 12px;
box-sizing: border-box;
text-align: center;
}
.board .mas-username {
display: block;
font-size: 13px;
color: var(--danger);
text-transform: uppercase;
letter-spacing: 1px;
}
/* A plain rule, not the barbell. */
.board .s_dekor {
display: block;
height: 1px;
margin: 8px auto;
width: 100%;
border: none;
background: currentColor;
color: var(--fora-desc);
opacity: 0.4;
}
.board .fora_prawa time { display: block; font-size: 13px; color: var(--fora-desc); }
/* The same face as the forum's own name above it — no script here. */
.board .fora_prawa .lastsubject {
display: block;
margin-top: 14px;
font-family: var(--font-title);
font-size: 16px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--fora-link);
}
.board .puste {
flex: 1 1 auto;
align-self: center;
padding: 20px;
text-align: center;
font-size: 14px;
color: var(--fora-desc);
}
/* --------------------------------------------------------- narrow view -- */
/* The painted banner only — a room's name is type, and it is 15px at every
width. */
@media (max-width: 1280px) {
.board .fora-bg .banner { font-size: 34px; }
}
/* A row is ONE LINE at every width. The forum and its last post are one
sentence about one place — who is standing in it, and who wrote there last —
and stacked they stop being that: the last post reads as a second card about
something else, and a page of them runs twice as long for the same six
facts. So the row never wraps. It gives up its contents in order instead,
each tier below dropping the next least useful thing:
1. the fixed height and the wide gutters
2. the stamp — a picture of a stamp, and the first thing that is decoration
3. the description — a paragraph about a room whose name is right above it
4. the face on the last-post card — the name beside it already says who
Under that there are two columns of bare words, and that is the floor. It
does not stack under it.
Container queries, not media queries: see .fora-rows for why. */
/* ---- tier 1: the row stops being a fixed 232px tall ---- */
@container fora (max-width: 1080px) {
.board .nene_fora {
height: auto;
/* The stamp keeps lapping, but by less: a left gutter 64px wider than the
right reads as the whole row being shoved sideways once it is this
narrow. */
--gutter: 20px;
--stamp-lap: 18px;
margin-top: 0;
/* Floats gave the two panels one line only while both happened to fit on
it; the moment they did not, the second dropped under the first — the
stacking all of this exists to prevent. Flex keeps them side by side and
the same height at any width, and shortens them rather than wrapping
them. */
display: flex;
align-items: stretch;
}
.board .nene_fora:after { display: none; }
.board .znaczek { margin-left: 0; }
.board .fora_lewa { float: none; flex: 0 1 65%; min-width: 0; height: auto; }
.board .fora_prawa { float: none; flex: 0 1 35%; min-width: 0; height: auto; margin-top: 0; }
.board .fora_opis { height: auto; }
.board .opis { height: auto; min-height: 70px; }
.board .fora_name h4 { font-size: 19px; letter-spacing: 2px; }
.board .mas-avatar { flex: 0 0 110px; }
}
/* ---- tier 2: the stamp goes ---- */
/* The card is down to the width of its own words, and a 196px column of
picture in front of them is the difference between a name on two lines and a
name on four. Hidden here rather than not drawn: board.js decides whether to
*fetch* a stamp (see the note there — a display:none ![]()
is still a 300KB
download) and it can only see the window. Which of the fetched ones there is
room for is this file's business. */
@container fora (max-width: 820px) {
.board .znaczek { display: none; }
.board .fora_srodek { padding-left: 14px; }
.board .mas-avatar { flex: 0 0 84px; }
.board .mas-wrap { padding: 12px 12px 10px; }
.board .fora_prawa .lastsubject { font-size: 14px; }
}
/* ---- tier 3: the description goes, and the name stops being centred ---- */
/* This tier used to be the 46rem window query, so it fired on a phone and
nowhere else — and a 620px-wide rows box inside a wide window kept a centred
name and a full paragraph in 300px and wrapped both to ribbons. */
@container fora (max-width: 620px) {
.board .nene_fora { --gutter: 0px; --stamp-lap: 0px; padding: 0.6rem; }
.board .fora_lewa { display: block; flex-basis: 58%; }
.board .fora_srodek { padding: 0; gap: 0; }
.board .fora_opis { padding: 0; }
/* The name, as a small banner across the top of the card. */
.board .fora_name {
padding: 0.5rem 0.7rem;
text-align: left;
background: var(--fora-inner);
border-bottom: 1px solid var(--line);
}
.board .fora_name h4 { font-size: 0.95rem; letter-spacing: 0.1em; }
/* The rule under a centred name, under a name that is no longer centred. */
.board .dekor { display: none; }
/* A paragraph about a room whose name is directly above it. At this width it
was most of the row. */
.board .opis { display: none; }
/* Who is standing where, ranged left under the name like everything else.
No lift off the bottom here — there is no slack to sit above, the row is
the bottom of a card packed as tight as the width allows. */
.board .obecni { justify-content: flex-start; padding: 0.7rem 0.7rem 0.1rem; margin-bottom: 0; }
.board .subfora { justify-content: flex-start; gap: 0.9rem 1.1rem; }
/* ---- tier 4: the face goes, and what is left is the words ---- */
.board .fora_prawa { min-height: 0; flex-basis: 42%; }
.board .mas-avatar { display: none; }
.board .mas-wrap { text-align: left; padding: 0.6rem 0.7rem; }
.board .mas-username { font-size: 11px; letter-spacing: 0.5px; }
.board .s_dekor { margin: 6px 0; }
.board .fora_prawa time { font-size: 12px; }
.board .fora_prawa .lastsubject { margin-top: 8px; font-size: 13px; letter-spacing: 0.5px; }
.board .fora-stats-sm { text-align: left; padding-top: 8px; }
}
/* ---------------------------------------------------------------- portal -- */
/* The rules, wearing the board's clothes: the same banner as a category and the
same panels as a forum row. The index is the narrow half here and the reading
column the wide one, because this screen is one long text at a time. */
.portal-layout { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 62rem) {
.portal-layout { grid-template-columns: 17rem minmax(0, 1fr); }
}
.portal .page-nav {
padding: 1.5rem 1.6rem;
background: var(--fora-panel);
font-size: 15px;
}
/* The index is a column beside the reading and runs as long as it needs to —
the whole of every season, no box of its own to scroll. It used to be held
to 34rem and pinned while the text moved; the three seasons did not fit, and
the list hid most of itself behind its own slider. */
.portal .page-nav h2 {
font-family: var(--font-title);
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fora-desc);
margin: 1.6rem 0 0.7rem;
padding: 0;
border: none;
}
.portal .page-nav > *:first-child h2,
.portal .page-nav h2:first-child { margin-top: 0; }
/* One season set off from the one above it — and the two halves of the rules
the same way, because they are the same list of the same shape.
The gap and the hairline belong to the section, not to the heading inside
it: the heading sits in a flex summary next to its arrow, so a margin there
grew the summary and left the arrow floating in the middle of the space
instead of pointing at the word beside it. Sixteen episode titles running
into the next season's name is what this is for. */
.portal .page-nav .nav-section:not(:first-child) {
margin-top: 1.5rem;
padding-top: 1.4rem;
border-top: 1px solid var(--fora-inner);
}
.portal .page-nav .nav-section > summary h2 { margin-top: 0; }
/* A foldable section: the heading is the handle, with an arrow that turns.
display:flex on a summary drops the browser's own marker in Chrome, so the
arrow is drawn here — and it has to be drawn anyway to point down when open. */
.portal .page-nav .nav-section > summary {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
list-style: none;
}
.portal .page-nav .nav-section > summary::-webkit-details-marker { display: none; }
/* Drawn rather than typed — the same choice .dekor and .map-dot make.
It was a '▸', and the title face has no triangle in it: what the browser
reached for instead sat on the baseline looking like a comma in front of the
season's name. Two borders always look like an arrow, in every font on every
machine. */
.portal .page-nav .nav-section > summary::before {
content: '';
flex: none;
width: 0;
height: 0;
border: 4px solid transparent;
border-left-color: var(--fora-desc);
border-right-width: 0;
transition: transform 0.12s ease;
}
.portal .page-nav .nav-section[open] > summary::before { transform: rotate(90deg); }
.portal .page-nav .nav-section > summary:hover h2 { color: var(--amber-bright); }
.portal .page-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.portal .page-nav a { color: var(--fora-link); display: block; padding: 0.2rem 0; line-height: 1.35; }
.portal .page-nav a:hover { color: var(--amber-bright); text-decoration: none; }
.portal .page-nav a.current { color: var(--amber-bright); font-weight: 600; }
.portal .page-body {
max-width: none;
padding: 2rem 2.5rem 2.5rem;
background: var(--fora-panel);
}
.portal .page-body h1 {
font-family: var(--font-title);
font-size: 26px;
letter-spacing: 3px;
text-transform: uppercase;
margin: 0 0 1.25rem;
}
/* The whole panel, justified. These are long explanatory texts read in one
sitting, and a measure-limited column inside an already narrow panel left a
ragged strip of empty green down the right. Polish hyphenates well, which is
what keeps justification from tearing holes in the lines. */
.portal .page-body > div {
max-width: none;
text-align: justify;
hyphens: auto;
}
.portal .page-body h2, .portal .page-body h3 {
font-family: var(--font-title);
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
border: none;
padding: 0;
margin: 1.6rem 0 0.6rem;
}
/* A section heading: caps, wide tracking, a rule across the column and an amber
segment sitting on it.
Both are drawn as boxes — a border and a positioned block — rather than as a
1px background strip, which was the first attempt. A background that thin
lands on a fractional device pixel at 125% or 150% display scaling and gets
anti-aliased away to nothing; borders are snapped to whole pixels, so they
survive it. The line was there the whole time on a 1× screen. */
.portal .page-body h3.page-head {
position: relative;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.2em;
color: var(--text);
margin: 2.6rem 0 1.1rem;
padding: 0 0 0.55rem;
border-bottom: 1px solid var(--line-bright);
}
.portal .page-body h3.page-head::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
width: 3.5rem;
height: 2px;
background: var(--amber);
}
.portal .page-body h3.page-head:first-child { margin-top: 0; }
/* Editing a page happens where you read it, so the column does not move. */
.portal .page-tools { display: flex; justify-content: flex-end; margin: 0 0 1rem; }
.portal .page-editor { display: grid; gap: 0.75rem; }
.portal .page-editor label { display: grid; gap: 0.25rem; }
.portal .page-editor .page-editor-text {
width: 100%;
min-height: 26rem;
resize: vertical;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.6;
}
.portal .page-editor-actions { display: flex; gap: 0.6rem; align-items: center; }
.portal .page-preview {
padding: 1rem 1.2rem;
border: 1px solid var(--line);
background: var(--bg-base);
}
/* Screenshots arrive at whatever size they were captured. Bounded on both axes
with the dimensions left auto, so the browser keeps the aspect ratio and the
picture stays inside the reading column instead of setting its width. */
.portal .page-body img {
display: block;
max-width: 100%;
max-height: 24rem;
width: auto;
height: auto;
margin: 1.2rem auto;
border: 1px solid var(--line);
}
/* The banner carries a page title now, not a one-word section name: it has to
survive "Komunikacja Radiowa i Krótkofalówki", and it must not capitalise
the Polish "i" into "I". */
.portal .banner {
font-size: clamp(22px, 3.4vw, 44px);
text-transform: none;
}
/* ------------------------------------------------------- inside a region -- */
/* A location wears the same two pieces as a category on the front page: the
banner as its lid, the frame around what is happening in it. */
.board .lokacja {
padding: 18px 20px 4px;
text-align: center;
}
.board .lokacja .opis { margin: 0 auto; max-width: 70ch; }
.board .lokacja .obecni { margin-top: 12px; margin-bottom: 0; padding-top: 0; }
/* A grid rather than sibling margins, because an admin's row is a box with the
thread inside it and a strip of controls under it, and `.temat + .temat`
could not space that. */
.board .tematy { padding: 8px 20px 18px; display: grid; gap: 10px; }
.board .temat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 12px 14px;
background: var(--fora-panel);
border: 1px solid var(--line);
color: var(--fora-link);
}
.board .temat:hover { text-decoration: none; border-color: var(--amber); }
/* Only ever drawn for an admin: the thread's row, and what may be done to it
without opening it. Quiet by design — it sits under the row rather than in
it, so the list still reads as a list of threads. */
.board .temat-box { display: grid; }
.board .temat-admin {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 8px;
padding: 6px 14px 0;
}
.board .temat-admin .notice { flex-basis: 100%; margin: 4px 0 0; }
.board .temat-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
/* Who is in the thread, overlapping like a handful of photographs. */
.board .temat-cast { display: flex; align-items: center; flex: none; margin-left: auto; }
.board .cast-face {
width: 28px;
height: 36px;
overflow: hidden;
margin-left: -9px;
background: var(--fora-panel);
box-shadow: 0 0 0 1px var(--line);
}
.board .cast-face:first-child { margin-left: 0; }
.board .cast-face .face { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.board .cast-face .portrait-initials { font-size: 0.6rem; letter-spacing: 0; }
.board .temat-title {
font-family: var(--font-title);
font-size: 17px;
letter-spacing: 2px;
text-transform: uppercase;
}
.board .temat-meta { font-size: 12px; color: var(--fora-desc); }
.board .temat-last { display: flex; align-items: center; gap: 10px; flex: none; min-width: 11rem; justify-content: flex-end; }
.board .temat-face { width: 34px; height: 44px; overflow: hidden; background: var(--fora-panel); }
.board .temat-face .face { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.board .temat-face .portrait-initials { font-size: 0.7rem; letter-spacing: 0; }
.board .temat-last-body { display: grid; gap: 2px; text-align: right; }
.board .temat-who {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--danger);
}
.board .temat-when { font-size: 12px; color: var(--fora-desc); }
/* ------------------------------------------------- the way in to writing --
"Nowy wątek tutaj", "Nowa lokacja": the only thing a player can do on these
pages, so it wears the board's own lettering rather than the browser's grey
box. Quiet until you look for it, amber the moment you do. */
.board .opener-wrap {
display: grid;
justify-items: center;
gap: 12px;
}
.board > .opener-wrap { margin: 0 0 1.5rem; }
.board .fora-rows > .opener-wrap { padding: 4px 20px 20px; }
.board .opener-wrap > button {
background: transparent;
border: 1px solid var(--line-control);
padding: 9px 28px;
font-family: var(--font-title);
font-size: 12px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fora-desc);
transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.board .opener-wrap > button:hover {
color: var(--amber-bright);
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 10%, transparent);
}
/* The form the button opens, kept to a readable width and centred under it. */
.board .opener { width: 100%; max-width: 30rem; }
.board .opener .card { margin: 0; }
/* ------------------------------------------------------- the region's plan */
/* A drawing of one region with its rooms pinned on it, above the list of those
same rooms. Wears the map's paper border, because it is the same kind of
object one level down — see .map-wrap::after in shell.css. */
.board .region-map {
position: relative;
margin: 0 0 1.25rem;
background: var(--fora-panel);
overflow: hidden;
}
.board .region-map::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
border: 10px solid rgba(238, 232, 218, 0.82);
box-shadow:
inset 0 0 0 1px rgba(60, 50, 38, 0.45),
inset 0 0 22px 10px rgba(28, 24, 20, 0.42);
}
html[data-theme='light'] .board .region-map::after {
border-color: rgba(252, 250, 245, 0.9);
box-shadow:
inset 0 0 0 1px rgba(90, 78, 62, 0.35),
inset 0 0 22px 10px rgba(120, 105, 85, 0.18);
}
.board .region-map-frame { position: relative; width: 100%; }
.board .region-map-frame .map-art { display: block; width: 100%; height: auto; }
/* The drawing is the ground the pins stand on, not the thing being read, so it
sits back. Enough to see every path on it; not enough to compete with a pin.
It does not answer the cursor — the pins do. A whole map lifting under the
mouse made every pass across the page flicker. On the light board the card
beneath it is nearly white, so the same ink needs more of itself to read. */
.board .region-map-frame .map-art { opacity: 0.62; }
html[data-theme='light'] .board .region-map-frame .map-art { opacity: 0.78; }
/* Bigger than the world map's, and they answer the cursor. That map is a band
across the top of the board with a dozen pins on it; this one is a page in
its own right, and its pins are the way into the rooms. */
.board .region-map .map-dot {
width: 13px;
height: 13px;
margin: -6.5px 0 0 -6.5px;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 12px 3px rgba(198, 138, 63, 0.5);
transition: transform 0.15s, box-shadow 0.15s;
}
/* A step up from the world map's, and deliberately: a region's plan is a
drawing the width of the page with a dozen rooms named on it, where the
banner is a strip with three regions on it. The scale is in tokens.css. */
.board .region-map .map-pin-label {
font-size: var(--label);
padding: 3px 8px;
background: rgba(12, 14, 13, 0.78);
transition: transform 0.15s, background 0.15s, color 0.15s;
}
/* A pale chip on a pale map needs an edge of its own, or the name floats. */
html[data-theme='light'] .board .region-map .map-pin-label {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 0 0 1px rgba(31, 42, 38, 0.28);
}
/* The label is the button — the dot has pointer-events:none and sits before it
in the DOM, so it cannot be reached by a sibling selector and never receives
a hover of its own. The label is therefore the whole reaction, and it is a
large one: amber, lifted, and above its neighbours. */
.board .region-map .map-pin-label:hover {
background: var(--amber);
color: var(--on-accent);
text-shadow: none;
transform: translate(-50%, -2px) scale(1.08);
z-index: 3;
}
.board .region-map .map-pin-label:focus-visible { outline: 2px solid var(--amber-bright); outline-offset: 2px; }
/* ------------------------------------------------- a region, room by room */
/* Full width, and deliberately quiet. The index paints a banner behind every
category name because it has five of them; a region has a dozen rooms, and
the same painted paper twelve times down the page is louder than anything it
introduces. So a room's name is a line of type over an opaque panel — opaque
because the forest behind the board shows through everything else here, and
at a dozen panels deep that is what made the page hard to read. */
.board .lokacja { margin-bottom: 14px; text-align: left; }
/* One line: the name, what the room is, and who is in it. It keeps its height
whether or not anybody is standing there — the faces overhang it instead of
pushing it open, which is what lets a page of rooms keep an even rhythm. */
.board .lokacja-name {
display: flex;
align-items: center;
gap: 12px;
min-height: 42px;
margin: 0;
padding: 0 18px;
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--fora-panel) 82%, var(--bg-base)),
var(--fora-panel));
border: 1px solid var(--line);
border-bottom: none;
font-family: var(--font-title);
font-size: 15px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--fora-link);
}
/* The mix above is with the page, which on the dark board is darker than the
card; here it is not, so the lid would come out the same value as the rows
under it. The hairline is what it borrows a shade of instead. */
html[data-theme='light'] .board .lokacja-name {
background: linear-gradient(
to bottom,
color-mix(in srgb, var(--fora-panel) 72%, var(--line)),
color-mix(in srgb, var(--fora-panel) 88%, var(--line)));
}
/* An amber tick at the left edge, the board's one accent, so the eye finds the
top of a room without the heading having to shout. */
.board .lokacja-name::before {
content: '';
flex: none;
width: 3px;
align-self: stretch;
margin: 9px 0;
background: var(--amber);
opacity: 0.55;
}
.board .lokacja:hover .lokacja-name::before { opacity: 1; }
/* Takes the slack, so everything after it sits against the right edge. */
.board .lokacja-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What the room is, if it is anything: set small and off to the right, so it
reads as a footnote to the name rather than part of it. */
.board .lokacja-tags {
flex: none;
font-family: var(--font-mono, monospace);
font-size: 10px;
letter-spacing: 2px;
color: var(--fora-desc);
}
.board .lokacja-tags:empty { display: none; }
/* Opaque, and a lid-less frame the way the index's is: the heading is the lid. */
.board .lokacja .fora-rows { background: var(--fora-panel); }
/* Nothing in a quiet room is centred — an empty room and a full one should put
their first word in the same place. */
.board .lokacja .fora-rows > .puste { text-align: left; align-self: stretch; }
.board .lokacja .opener-wrap { justify-items: start; }
/* --line is a hairline *between* panels; on top of one, in the light theme, it
is the same value as the panel and the button loses its outline. */
.board .lokacja .opener-wrap > button { border-color: var(--line-bright); }
/* The cast of the room: everybody standing in it, side by side, each a little
photograph on paper with a name under it.
The map overlaps these into a stack because a pin has no room for anything
else. A row has room, so nothing is hidden behind a `+n` and nothing is
cropped to a thumbnail you cannot read — a region page is largely the
question of who is where, and this is the answer to it. Avatars are 200×320
(5:8), which is the ratio these boxes keep. */
.board .lokacja-here {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 14px 20px 4px;
}
.board .here-person {
display: grid;
justify-items: center;
gap: 5px;
width: 62px;
color: var(--fora-desc);
}
.board .here-person:hover { text-decoration: none; color: var(--fora-link); }
.board .here-face {
width: 100%;
aspect-ratio: 5 / 8;
padding: 3px 3px 8px;
background: var(--paper);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
transition: transform 0.15s;
}
.board .here-person:hover .here-face { transform: translateY(-3px); }
.board .here-face .face { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: auto; }
.board .here-face .portrait-initials { font-size: 0.7rem; letter-spacing: 0; }
/* Two lines at most, because a room of nine people must not become a row of
nine different heights. */
.board .here-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
font-size: 10px;
line-height: 1.25;
letter-spacing: 0.5px;
text-align: center;
text-transform: uppercase;
}
/* The threads in a room, as lines rather than as the index's wide panels. A
forum page lists a handful and can afford a cast strip and a last-post card
for each; a region lists a dozen rooms of one zoo, and the same row twelve
times over is the thing that made this page unreadable. */
/* The threads in a room, as a grid of cards rather than one column of lines.
*
* A full-width line per thread wastes most of a wide screen on nothing — a
* thread's title, its counts and who spoke last take about twenty characters'
* worth of column, and the other two thirds were empty. `auto-fill` with a
* floor means the number of columns is whatever the window can hold: three on a
* desktop, one on a phone, and nothing to keep in sync by hand. */
.board .watki {
list-style: none;
margin: 0;
padding: 10px 20px 6px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
gap: 10px;
}
/* Rows of a grid are as tall as their tallest cell, so a card fills the height
it is given; the title takes the slack and the last-post line sits on the
bottom edge whatever the card beside it is doing. */
.board .watek {
display: flex;
flex-direction: column;
gap: 6px;
padding: 11px 13px;
background: color-mix(in srgb, var(--fora-inner) 45%, transparent);
border: 1px solid var(--fora-inner);
transition: border-color 0.15s, background-color 0.15s;
}
.board .watek:hover {
border-color: var(--amber);
background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.board .watek:hover .watek-title { color: var(--amber-bright); }
.board .watek-main { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; align-content: start; }
.board .watek-main:hover { text-decoration: none; }
.board .watek-title {
font-family: var(--font-title);
font-size: 14px;
line-height: 1.3;
letter-spacing: 2px;
text-transform: uppercase;
}
.board .watek-meta, .board .watek-when { font-size: 11px; color: var(--fora-desc); }
/* Along the bottom of the card, not down its right-hand side: a 17rem column is
too narrow to put two things beside each other and still read either. */
.board .watek-last {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding-top: 7px;
border-top: 1px solid var(--fora-inner);
font-size: 11px;
}
.board .watek-last.puste { padding: 7px 0 0; text-align: left; font-size: 11px; }
.board .watek-who { color: var(--fora-desc); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .watek-when { flex: none; }
/* Under the card's own content, and only as wide as the buttons need. */
.board .watek .temat-admin { padding: 0; justify-content: flex-start; gap: 6px; }
.board .fora-rows > .puste { padding: 14px 20px; margin: 0; }
/* ============================================================ the phone ===
*
* 46rem and down — the number is decided in tokens.css. The 1280px query
* above already stacks the row's two panels; this is about the one thing in
* it that is deliberately bigger than the box it sits in. */
@media (max-width: 46rem) {
/* Nothing on a phone row may insist on its width: the stats wrap, and the
last-post column gives way instead of pushing the row past the screen. */
.board .fora-stats-sm { white-space: normal; }
.board .temat-last { min-width: 0; }
/* --------------------------------------------------- the category lid */
/* banner1.png is a 1073×100 picture with the name written on the taped
paper. Stretched to 375 the tape and the torn edge are squashed to a
third of their drawn width, and 34px of script sits in 100px of mostly
empty paper. So the paper comes off and the name is set as type.
`background: none` and not just a colour: an unfetched picture is the
point. A dział with its own paper is handled in board.js, because that
one is an inline style and would win over this. */
.view .banner {
height: auto;
min-height: 0;
padding: 0;
background: none;
text-align: left;
overflow: visible;
text-shadow: none;
}
/* A category is a lid over its rows: small, quiet, out of the way. */
.board .fora-bg .banner {
font-family: var(--font-title);
font-size: var(--label-lg);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 0.4rem;
}
/* A page title is still a page title — it keeps the script, it just stops
being a picture of one. */
.view h1.banner { font-size: 1.6rem; line-height: 1.15; margin: 0 0 0.5rem; color: var(--text); }
/* Without a banner to be the lid of, the frame closes at the top. */
.board .fora-rows { border-top: 1px solid var(--line); }
/* A forum row is not here. It answers to the width of the rows box it is
in, not to the width of the window — see the @container tiers up the
file. A phone reaches the last of those tiers, but so does a 600px column
inside a 1400px window, and this query could not see that one. */
/* --------------------------------------------- the plan of one region */
/* The same paper edge the banner's map gives up at this width, one level
down: 10px of cream border and a shadow falling inwards, on a drawing
that has no twenty pixels to spare. */
.board .region-map::after { display: none; }
/* The names are asked for rather than shown. A plan carries a pin per
thread, so a busy region is a dozen names crossing each other on a
drawing 375px wide — see `tapToName` in map.js for the other half. */
.board .region-map.is-tap-to-name .map-pin-label { display: none; }
.board .region-map.is-tap-to-name .map-pin-label.is-named { display: flex; z-index: 4; }
/* The pin does the asking: 13px to look at, 45 to press. The hit area is
drawn rather than sized, so the mark itself keeps the size it had — a
finger-sized dot on a map is a blob, not a pin. */
.board .region-map .map-dot-handle {
pointer-events: auto;
border: none;
padding: 0;
cursor: pointer;
}
.board .region-map .map-dot-handle::after {
content: '';
position: absolute;
inset: -16px;
}
/* Which one you are asking about. */
.board .region-map .map-dot-handle[aria-expanded='true'] {
background: var(--amber-bright);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.55), 0 0 14px 4px rgba(198, 138, 63, 0.7);
}
}
/* ------------------------------------------------- pictures in a recap */
/* Postęp Fabularny came across with its own furniture: a 740×200 banner at the
head of a section, and strips of named polaroids — the cast of that part of
the episode, six or eight faces in a row on the old board.
A banner is a lone [img] and takes the column. A strip is a [galeria] and
wraps at whatever fits, which is the one thing the old board could not do:
its rows ran off the side of a phone. */
.portal .page-body img {
max-width: 100%;
height: auto;
border-radius: 2px;
}
.galeria {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 1rem 0 1.25rem;
}
/* Sized by height, not width: the polaroids are all 499×508 and the banners are
not, so a width cap would make a row of faces out of one and a postage stamp
out of the other.
Written long enough to beat `.portal .page-body img { height: auto }` above,
which otherwise wins on specificity and leaves a strip of unloaded pictures
two pixels tall. */
.portal .page-body .galeria img,
.galeria img { height: 9.5rem; width: auto; max-width: 100%; object-fit: contain; }
/* A polaroid: white card, a wider strip at the bottom with the name in plain
sans-serif, a little shadow, and each one tipped a degree or two so a row of
them reads as prints laid on the page. The picture is cropped square from
the top — a face, not the portrait's knees. */
.galeria .polaroid,
.polaroid {
display: inline-flex;
flex-direction: column;
align-items: center;
margin: 0.4rem;
padding: 0.5rem 0.5rem 0.2rem;
background: #fbfaf6;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.06);
transform: rotate(-1.5deg);
}
.galeria .polaroid:nth-child(even) { transform: rotate(1.2deg); }
.galeria .polaroid:nth-child(3n) { transform: rotate(-0.6deg); }
.portal .page-body .galeria .polaroid img,
.polaroid img {
width: 8.5rem;
height: 8.5rem;
max-height: none;
object-fit: cover;
object-position: top;
margin: 0;
border: none;
}
.polaroid figcaption {
width: 8.5rem;
padding: 0.45rem 0 0.35rem;
font-family: var(--font-ui);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-align: center;
color: #2a2f2c;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 46rem) {
.galeria { gap: 0.35rem; }
.portal .page-body .galeria img,
.galeria img { height: 6.5rem; }
.portal .page-body .galeria .polaroid img,
.polaroid img, .polaroid figcaption { width: 6rem; }
.portal .page-body .galeria .polaroid img,
.polaroid img { height: 6rem; }
}
/* ------------------------------------------------------------ statystyki --
The block the forum prints under the index: who is here, the counts, who was
here today. Three panels under one banner, each headed on its own card.
The panels are the board's own cards: the same green, the same hairline, the
same square corners as a forum row. A name inside one is set like every
other name on the index — Oswald, caps, tracked out — so "MISTRZ GRY MAGGIE"
in the Online panel is the same object as the one on the last-post card
above it. */
/* The strip measures itself, the way a forum row does — and one level up from
the grid, because a container query styles what is inside the container and
never the container itself. .stats-row carries .fora-rows for its frame, so
asking it to be its own ruler would have been asking it to restyle itself. */
.board .board-stats {
container-type: inline-size;
container-name: stats;
}
.board .board-stats .stats-row {
display: grid;
/* The middle panel is the narrow one — it holds a short column of counts,
and given an equal third it sat in a lake of its own background. */
grid-template-columns: 1fr 0.62fr 1fr;
gap: 26px;
padding: 26px 40px 30px;
/* One line of panels, not three boxes: the middle one carries the counts and
a greeting and is the tallest, so the other two grow to meet it. */
align-items: stretch;
}
.board .board-stats .stats-col { display: flex; flex-direction: column; }
/* The panel's name, written on the card itself: the same face, caps and
tracking as a forum's name on the index, with the same barbell rule under
it. The three used to be script on the wall above the panels, which read as
captions for boxes rather than as the boxes’ own headings. */
.board .board-stats h4 {
margin: 0;
padding: 4px 0 0;
font-family: var(--font-title);
font-size: 18px;
font-weight: 600;
line-height: 1.15;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
color: var(--fora-link);
}
/* The rule is a flex item here, and `margin: 0 auto` on one of those shrinks
it to its content — which is nothing, so the line vanished. width 100% gives
it something for max-width to cut down and the auto margins to centre. */
.board .board-stats .dekor { width: 100%; margin-top: 6px; }
/* What the panel is for, under its name. Takes the rest of the card so the
three stay one height whichever of them is the tallest. */
.board .board-stats .stats-body { flex: 1 1 auto; padding-top: 14px; }
.board .board-stats .stats-panel {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background: var(--fora-panel);
border: 1px solid var(--line);
padding: 20px 25px;
min-height: 210px;
box-sizing: border-box;
font-size: 13px;
line-height: 1.7;
color: var(--fora-desc);
}
/* A name, set the way the board sets every other name: the face of a forum
title and of the person on the last-post card. What colours it is what kind
of character it is — see whoClass. Uppercase here rather than in the markup,
because that would be a lie about what somebody called themselves. */
.board .board-stats .who {
font-family: var(--font-title);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.9;
color: var(--green-ink);
}
.board .board-stats .who.gm { color: var(--danger); }
.board .board-stats .who.second { color: var(--amber-bright); }
/* The board's own separator between two facts on one line — see .fora-stats-sm
and a thread's meta row. A comma would have been the forum's, but nothing
else on this page uses one. */
/* The tracking on a name eats the space either side of the dot, so the gap is
drawn rather than typed. */
.board .board-stats .sep { color: var(--fora-desc); margin: 0 3px; }
.board .board-stats .stats-who { margin: 0; }
.board .board-stats .stats-empty { margin: 0; }
/* The counts. Label in the panel's grey, the number in the board's title face
so the eye lands on the figure rather than on the word in front of it. */
.board .board-stats .stats-mid .stats-body {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
}
.board .board-stats .stats-mid .stats-panel p { margin: 0; }
/* :not(.who) so the greeting under them keeps the new character in their own
colour — the labels are grey, the name is not. */
.board .board-stats .stats-mid .stats-panel span:not(.who) { color: var(--fora-desc); }
.board .board-stats .stats-mid .stats-panel strong {
font-family: var(--font-title);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
color: var(--text);
}
/* The greeting is the last thing in the panel and the only sentence in it, so
it gets the rule the last-post card puts under a name — .s_dekor, drawn
again here because that one is inside a card and this is inside a panel. */
.board .board-stats .stats-newest {
margin-top: 4px;
padding-top: 14px;
border-top: 1px solid var(--fora-inner);
line-height: 1.6;
}
.board .board-stats .stats-newest .who { margin: 0 1px 0 4px; }
/* Narrow: the three stay three, for the reason a forum row stays one line.
"Who is here / the counts / who was here today" is one statement about the
board; stacked it becomes three unrelated cards, each a screen tall, and an
empty Online panel holding a 210px floor under itself is most of a phone.
So the panels keep the line and give up their room instead — the gap, then
the padding, then the floor, then the type.
These measure the strip of panels, not the window. */
@container stats (max-width: 1000px) {
.board .board-stats .stats-row { gap: 14px; padding: 20px 20px 24px; }
.board .board-stats .stats-panel { min-height: 0; padding: 16px 14px; }
}
@container stats (max-width: 700px) {
/* The middle panel is the narrow one at full width, because a short column
of counts given an equal third sat in a lake of its own background. Here
nothing is in too much space, and it is the panel carrying the longest
lines — so the three go even. */
.board .board-stats .stats-row { grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 14px 20px; }
.board .board-stats .stats-panel { padding: 12px 10px; font-size: 12px; line-height: 1.6; }
.board .board-stats h4 { font-size: 14px; letter-spacing: 1.5px; }
.board .board-stats .who { font-size: 11px; letter-spacing: 0.5px; line-height: 1.6; }
.board .board-stats .stats-mid .stats-body { gap: 10px; }
.board .board-stats .stats-mid .stats-panel strong { font-size: 13px; }
/* A count is a label and a number, and in a third of this it is two lines
either way. Broken on purpose, rather than wherever the words run out.
Not the greeting under them — that is one sentence with a name inside it,
and blocked it put its own exclamation mark on a line of its own. */
.board .board-stats .stats-mid .stats-panel p:not(.stats-newest) span:not(.who) { display: block; }
}
@container stats (max-width: 460px) {
.board .board-stats .stats-row { gap: 6px; padding: 10px 8px 14px; }
.board .board-stats .stats-panel { padding: 8px 6px; font-size: 11px; }
.board .board-stats h4 { font-size: 11px; letter-spacing: 0.5px; }
.board .board-stats .who { font-size: 10px; letter-spacing: 0; }
.board .board-stats .dekor { height: 8px; }
}
/* A vehicle thread, marked in the region's list (079). */
.board .watek-vehicle {
margin-left: 0.5em; padding: 0 0.35em; border: 1px solid var(--amber); color: var(--amber-bright);
font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle;
}