User:Haars001/common.css: Difference between revisions

/* WUR Report Identity — personal test stylesheet for HPCwiki (MediaWiki 1.45, Vector 2022)
 *
 * Save as  User:<YourName>/vector-2022.css   (only you see it).
 * Uses the identity's SCREEN theme: off-white ground, #153816 ink, as www.wur.nl does.
 * Light theme only: set Appearance → Color → Light while testing.
 * Values come from tokens.css of the "WUR Report Identity" design system.
 */

/* ---- faces ------------------------------------------------------------
 * local() picks the fonts up if they are installed on your own computer.
 * The url() is for later: copy the woff2 files from the design system to
 * /fonts/ on the wiki server (adjust the path), and it works for everyone.
 */
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 300; font-display: swap;
  src: local("Commissioner Light"), local("Commissioner-Light"), url("/fonts/Commissioner-Light.woff2") format("woff2"); }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Commissioner Regular"), local("Commissioner-Regular"), url("/fonts/Commissioner-Regular.woff2") format("woff2"); }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 500; font-display: swap;
  src: local("Commissioner Medium"), local("Commissioner-Medium"), url("/fonts/Commissioner-Medium.woff2") format("woff2"); }
@font-face { font-family: "Commissioner"; font-style: normal; font-weight: 600; font-display: swap;
  src: local("Commissioner SemiBold"), local("Commissioner-SemiBold"), url("/fonts/Commissioner-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Gelasio"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Gelasio Regular"), local("Gelasio-Regular"), url("/fonts/Gelasio-Regular.woff2") format("woff2"); }
@font-face { font-family: "Gelasio"; font-style: italic; font-weight: 400; font-display: swap;
  src: local("Gelasio Italic"), local("Gelasio-Italic"), url("/fonts/Gelasio-Italic.woff2") format("woff2"); }
@font-face { font-family: "Rec Mono Linear"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Rec Mono Linear"), local("RecMonoLinear-Regular"), url("/fonts/RecMonoLinear-Regular.woff2") format("woff2"); }

/* ---- tokens ----------------------------------------------------------- */
:root {
  --wur-ground: #FBF6E5;        /* off-white, screen ground */
  --wur-ink: #153816;           /* www.wur.nl body text (deviation 6) */
  --wur-middle-green: #004D00;
  --wur-dark-blue: #002B47;
  --wur-green: #008A00;         /* rules and markers only: fails as text on off-white */
  --wur-light-green: #97C600;
  --wur-bordeaux: #66111B;
  --wur-rule-soft: rgba(0, 43, 71, 0.16);
  --wur-rule-strong: rgba(0, 43, 71, 0.55);
  --wur-band: rgba(136, 201, 228, 0.13);
  --wur-sans: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --wur-serif: "Gelasio", Georgia, serif;
  --wur-mono: "Rec Mono Linear", "Recursive", ui-monospace, Menlo, Consolas, monospace;

  /* Hand the skin's own Codex tokens the WUR values, so header, sticky header,
     menus, TOC and links follow along without per-component rules. */
  --background-color-base: var(--wur-ground);
  --color-base: var(--wur-ink);
  --color-emphasized: var(--wur-ink);
  --color-progressive: var(--wur-dark-blue);
  --color-progressive--hover: var(--wur-middle-green);
  --color-progressive--active: var(--wur-middle-green);
  --color-visited: var(--wur-middle-green);  /* our choice: the identity names no visited colour */
  --color-link-red: var(--wur-bordeaux);
  --color-link-red--visited: var(--wur-bordeaux);
}

/* ---- page ------------------------------------------------------------- */
html, body { font-family: var(--wur-sans); }
body { background-color: var(--wur-ground); color: var(--wur-ink); }
.mw-body-content { text-align: left; hyphens: none; }   /* never justified */
.mw-body-content strong, .mw-body-content b { font-weight: 600; }

/* ---- headings: Commissioner Semi-Bold (deviation 5), never the skin's serif */
.mw-body .firstHeading {
  font-family: var(--wur-sans);
  font-size: 2.4375rem;          /* 39px */
  line-height: 1.14;
  font-weight: 600;
  color: var(--wur-dark-blue);
}
.vector-page-titlebar::after { height: 3px; background-color: var(--wur-green); }

.mw-body-content .mw-heading2,
.mw-body-content :not(.mw-heading) > h2 {
  font-family: var(--wur-sans);
  font-size: 1.25em;
  line-height: 1.3;
  font-weight: 600;
  color: var(--wur-middle-green);
  border-bottom: 0;
  margin: 1.6em 0 0.4em;
}
.mw-body-content .mw-heading3,
.mw-body-content :not(.mw-heading) > h3 {
  font-family: var(--wur-sans);
  font-size: 1.0625em;
  line-height: 1.35;
  font-weight: 600;
  color: var(--wur-dark-blue);
}
.mw-body-content .mw-heading4,
.mw-body-content :not(.mw-heading) > h4 { font-weight: 600; color: var(--wur-dark-blue); }

/* ---- links: Dark Blue with a WUR Green underline ------------------------ */
.mw-body-content a,
.mw-body-content a.external {
  color: var(--wur-dark-blue);
  text-decoration: underline;
  text-decoration-color: var(--wur-green);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.mw-body-content a:visited { color: var(--wur-middle-green); }
.mw-body-content a:hover { text-decoration-thickness: 2px; }
.mw-body-content a.new,
.mw-body-content a.new:visited { color: var(--wur-bordeaux); }
.mw-body-content a:focus-visible { outline: 2px solid var(--wur-green); outline-offset: 2px; }
.mw-body-content .mw-editsection a { text-decoration: none; }

/* ---- lists: the marker is where WUR Green carries weight ----------------- */
.mw-body-content li::marker { color: var(--wur-green); font-weight: 600; }

/* ---- tables (.wikitable): functional tints only -------------------------- */
.mw-body-content .wikitable {
  background-color: transparent;
  color: var(--wur-ink);
  border: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.mw-body-content .wikitable > * > tr > th,
.mw-body-content .wikitable > tr > th {
  text-align: left;
  font-size: 0.6875rem;          /* 11px column head */
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--wur-middle-green);
  background-color: var(--wur-band);
  border: 0;
  border-bottom: 1px solid var(--wur-green);
  padding: 12px 16px;
}
.mw-body-content .wikitable > * > tr > td,
.mw-body-content .wikitable > tr > td {
  border: 0;
  border-bottom: 1px solid var(--wur-rule-soft);
  padding: 12px 16px;
  vertical-align: baseline;
}
.mw-body-content .wikitable > tbody > tr:last-child > td { border-bottom: 2px solid var(--wur-rule-strong); }

/* ---- quotes: the one place Gelasio, and italic, is used ------------------ */
.mw-body-content blockquote {
  font-family: var(--wur-serif);
  font-style: italic;
  font-size: 1.0625em;
  line-height: 1.5;
  color: var(--wur-middle-green);
  border-left: 3px solid var(--wur-light-green);
  margin: 1.5em 0;
  padding: 0 0 0 16px;
}

/* ---- code: Rec Mono Linear, ligatures off (U10) -------------------------- */
.mw-body-content pre,
.mw-body-content code,
.mw-body-content tt,
.mw-body-content kbd,
.mw-body-content samp,
.mw-body-content .mw-code,
.mw-body-content .mw-highlight pre {
  font-family: var(--wur-mono);
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0;
}
.mw-body-content code {
  color: var(--wur-dark-blue);
  background-color: transparent;
  border: 0;
  padding: 0;
}
.mw-body-content pre,
.mw-body-content .mw-code,
.mw-body-content .mw-highlight pre {
  color: var(--wur-ink);
  background-color: var(--wur-band);
  border: 0;
  border-left: 3px solid var(--wur-green);
  border-radius: 0;
  padding: 16px 24px;
}
.mw-body-content pre code { color: inherit; }

/* SyntaxHighlight puts its own #F8F8F8 behind the code; drop it so the
   band tint sits on the page ground, exactly like a plain <pre>. */
.mw-body-content .mw-highlight { background: transparent; }