/* additions.css The one hand-written stylesheet in this directory. Every other file here is generated by scripts/tayfak-extract-css.py from the archived Astro build and is overwritten on the next run, so anything written by hand belongs here. It holds two kinds of rule. The first translates the network's article markup into this design: tayfak publishes through the same pipeline as the other six sites, so build-post.py emits the pexelat answer box, figures, table of contents and ad slots, and it will keep doing so for every future article. The second adds what the original design did not have, which so far is the article image. Loaded on every page, after the page's own stylesheet. The article rules are scoped to .p-article and so cost nothing elsewhere. */ .p-article .pex-answer { margin-block: 1.5rem 2rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--hairline); border-inline-start: 3px solid var(--turquoise); } .p-article .pex-answer__label { font-family: var(--display); font-size: .8rem; letter-spacing: .06em; color: var(--turquoise-deep); margin: 0 0 .5rem; } .p-article .pex-answer p:last-child { margin: 0; } /* Figures are inline SVG with a min-width, inside a scroller: a labelled chart under about 600px renders its text below 9px on a phone. The scroller is the figure's own, so the page itself never scrolls sideways. */ .p-article .pex-figure { margin-block: 2rem; overflow-x: auto; } .p-article .pex-figure svg { display: block; max-inline-size: 100%; block-size: auto; } .p-article .pex-figure figcaption { margin-block-start: .6rem; font-size: .86rem; line-height: 1.6; color: var(--graphite); } /* The parent injects a table of contents into any post with three or more headings, and reserves ad slots by class. Both arrive through the_content filters that this theme keeps, and both are written against the parent's tokens (--surface, --line, --head, --accent-text), none of which exist here. Unstyled, the TOC renders as a bare list with its numbers welded to the headings. */ .p-article .pex-toc { margin-block: 1.75rem 2.25rem; padding: 1.25rem 1.5rem; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-md); } .p-article .pex-toc__title { display: block; font-family: var(--display); font-weight: 600; font-size: .95rem; margin-block-end: .75rem; } .p-article .pex-toc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .p-article .pex-toc__item a { display: flex; gap: .65rem; align-items: baseline; font-size: .92rem; line-height: 1.6; color: var(--graphite); text-decoration: none; } .p-article .pex-toc__item a:hover { color: var(--ink); } .p-article .pex-toc__n { font-family: var(--display); font-weight: 700; font-size: .8rem; color: var(--turquoise-deep); flex: none; } .p-article .pex-toc__item--h3 { padding-inline-start: 1.4rem; } /* An empty slot still reserves its height so that a late-arriving ad cannot push the article down under the reader's thumb. */ .p-article .pex-ad { min-block-size: 90px; margin-block: 2.25rem; } .p-article .pex-ad--empty { min-block-size: 0; margin: 0; } .p-article .pex-ad__label { display: block; padding: 2rem 1rem; text-align: center; font-size: .8rem; color: var(--graphite); background: var(--canvas); border: 1px dashed var(--hairline); } /* The figures are inline SVG whose fills and strokes are written as var(--accent), var(--surface) and so on: the network's token names, not this theme's. The parent used to print those tokens in , and this theme turns that block off, so every gradient resolved to nothing and the figures rendered as solid black rectangles. They are declared on the figure rather than on :root because one name means two different things in the two themes. Both happen to agree on --body being a font stack, and --ink and --muted already carry the right roles here, so only the five that were missing are mapped. */ .p-article .pex-figure { --accent: var(--turquoise); --accent-dark: var(--turquoise-deep); --accent-text: var(--turquoise-deep); --surface: var(--paper); --tint: var(--canvas); --line: var(--hairline); } /* The article image. The Astro design had none: articles were text on paper, and the cards in the index were a title and a summary. The pipeline attaches a featured photo to every article it publishes, so the image exists and was simply never shown. Full bleed on the card, which means cancelling the card's own padding on three sides. The card already clips its corners, so the image inherits the radius without asking. */ .card__media { display: block; margin: -1.4rem -1.5rem .85rem; aspect-ratio: 16 / 9; overflow: hidden; background: var(--canvas); } .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .card:hover .card__media img { transform: scale(1.03); } /* On the article itself the image sits under the title, at the text measure rather than full width: it illustrates the piece, it is not a hero, and the original page opened on words. */ .p-article .article__media { margin-block: 1.5rem 2rem; border-radius: var(--r-md); overflow: hidden; background: var(--canvas); } .p-article .article__media img { inline-size: 100%; block-size: auto; display: block; }