User:Haars001/common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* 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; }