Template:Category/Newsletter/styles.css

/* TemplateStyles for newsletter issues. One stylesheet for the whole
   system: the masthead ({{Category/Newsletter}}) and the three
   components ({{Newsletter figure}}, {{Newsletter notice}},
   {{Newsletter footer}}). Each loads this same page; TemplateStyles
   emits it once per page.

   The design is deliberately quiet: one reading column, the skin's own
   headings, one hairline under the masthead and one above the footer.
   There are no cards, bands, icons or buttons. An issue should still
   read correctly with this stylesheet missing (in email, or in another
   skin), so nothing here carries meaning, only spacing and emphasis.

   Sanitizer constraints (MW 1.44.5 / css-sanitizer 5.5.0): var() is
   accepted in `background`, `color` and the `border` shorthand only, so
   geometry stays literal. Colors go through the --labki-* tokens so the
   page follows the site's dark theme. */

/* ---------- Masthead ---------- */

.newsletter-masthead {
	max-width: 42rem;
	margin: 0 0 2em 0;
	padding: 0 0 1.25em 0;
	border-bottom: 1px solid var(--labki-border, #d8dde3);
}

.newsletter-kicker {
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.newsletter-kicker .newsletter-type {
	color: var(--labki-accent, #2774AE);
	font-weight: 600;
}

.newsletter-kicker .newsletter-issue {
	font-weight: 600;
}

/* Not uppercased: month names and a date range read worse in caps. */
.newsletter-period {
	margin-top: 0.2em;
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.9rem;
}

.newsletter-intro {
	margin-top: 0.9em;
	color: var(--labki-text, #2c2c2c);
	font-size: 1.125rem;
	line-height: 1.55;
}

/* ---------- Reading column ----------

   Everything after the masthead is a sibling of it inside
   .mw-parser-output, so the general-sibling combinator caps the body
   at 42rem (roughly 70 characters a line) without a wrapper template.
   rem, not em: em would scale the cap with each heading's font size.
   Images are never floated in an issue (see {{Newsletter figure}}), so a
   capped column leaves no gap beside a right-hand float. */

.newsletter-masthead ~ * {
	max-width: 42rem;
}

.newsletter-masthead ~ p,
.newsletter-masthead ~ ul,
.newsletter-masthead ~ ol {
	line-height: 1.6;
}

/* The skin's h2 styling is kept; issues only need more air above each
   story so sections separate without rules or boxes. */
.newsletter-masthead ~ h2 {
	margin-top: 2em;
}

.newsletter-masthead ~ h3 {
	margin-top: 1.5em;
}

/* ---------- Story links ----------

   A plain wikitext list wrapped in <div class="newsletter-links">,
   which closes a story. Rendered as one inline row separated by middots,
   so three links take one line instead of three bullets. Still a real
   <ul>: screen readers announce "list, 3 items", and email clients that
   drop the stylesheet show an ordinary bulleted list. */

.newsletter-links ul {
	margin: 0.9em 0 0 0;
	padding: 0;
	list-style: none;
}

.newsletter-links li {
	display: inline;
	margin: 0;
}

.newsletter-links li + li::before {
	content: "·";
	margin: 0 0.55em;
	color: var(--labki-text-muted, #5a6a7a);
}

.newsletter-links a {
	font-weight: 600;
}

/* ---------- Figure ---------- */

.newsletter-figure {
	margin: 1.25em 0 1.5em 0;
}

/* Scale down to the column on narrow screens; never scale up. */
.newsletter-figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.newsletter-caption {
	margin-top: 0.5em;
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.875rem;
	line-height: 1.45;
}

/* ---------- Notice ----------

   Recurring invitations (survey, office hours). Smaller than story text
   and set off by a single thin rule so they read as standing items, not
   as another story. */

.newsletter-notice {
	margin: 1em 0;
	padding: 0 0 0 0.9em;
	border-left: 2px solid var(--labki-border, #d8dde3);
	font-size: 0.95rem;
	line-height: 1.55;
}

.newsletter-notice-title {
	font-weight: 600;
	color: var(--labki-text, #2c2c2c);
}

.newsletter-action a {
	font-weight: 600;
}

/* ---------- Footer ---------- */

.newsletter-footer {
	clear: both;
	margin: 2.5em 0 0 0;
	padding: 1.1em 0 0 0;
	border-top: 1px solid var(--labki-border, #d8dde3);
	color: var(--labki-text-muted, #5a6a7a);
	font-size: 0.9rem;
	line-height: 1.6;
}

.newsletter-signoff {
	color: var(--labki-text, #2c2c2c);
}

/* ---------- Draft banner ----------
   Shown above the masthead when Has post status is Draft. It sits before
   the masthead, so the reading-column rule doesn't reach it; same cap here. */

.newsletter-draft-banner {
	max-width: 42rem;
	margin: 0 0 1.25em 0;
	padding: 0.6em 0.9em;
	border: 1px dashed var(--labki-border, #d8dde3);
	background: var(--labki-bg-subtle, #f4f6f8);
	color: var(--labki-text, #2c2c2c);
	font-size: 0.95rem;
}