https://wiki.scotmesh.net/index.php?action=history&feed=atom&title=MediaWiki%3ACitizen.css 2026-09-18T23:59:21Z Revision history for this page on the wiki MediaWiki 1.43.9 https://wiki.scotmesh.net/index.php?title=MediaWiki:Citizen.css&diff=147&oldid=prev 2026-09-13T11:58:59Z

<p>ScotMesh brand: Reticulum colours and IBM Plex fonts</p> <p><b>New page</b></p><div>/* ScotMesh brand, Reticulum version: https://github.com/ScotMesh/branding<br /> Fonts are self-hosted from /images/scotmesh-brand/fonts. Backgrounds keep Citizen&#039;s default hue (262, the Night blue);<br /> only links, buttons and focus rings take the Reticulum violet. */<br /> @font-face { font-family: &quot;IBM Plex Mono&quot;; font-weight: 400; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-mono-400.woff2) format(&quot;woff2&quot;); }<br /> @font-face { font-family: &quot;IBM Plex Mono&quot;; font-weight: 600; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-mono-600.woff2) format(&quot;woff2&quot;); }<br /> @font-face { font-family: &quot;IBM Plex Sans Condensed&quot;; font-weight: 400; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-sans-condensed-400.woff2) format(&quot;woff2&quot;); }<br /> @font-face { font-family: &quot;IBM Plex Sans Condensed&quot;; font-weight: 600; font-style: normal; font-display: swap; src: url(/images/scotmesh-brand/fonts/ibm-plex-sans-condensed-600.woff2) format(&quot;woff2&quot;); }<br /> <br /> :root {<br /> --font-family-citizen-base: &quot;IBM Plex Sans Condensed&quot;, &quot;Roboto&quot;, &quot;Roboto-fallback&quot;, sans-serif;<br /> --font-family-citizen-monospace: &quot;IBM Plex Mono&quot;, &quot;Roboto Mono&quot;, monospace;<br /> <br /> /* Reticulum deep violet #6A51A4 for light pages */<br /> --color-progressive: oklch( 50% 0.13 295 );<br /> --color-progressive--hover: oklch( 56% 0.13 295 );<br /> --color-progressive--active: oklch( 45% 0.13 295 );<br /> --color-progressive--focus: oklch( 50% 0.13 295 );<br /> --background-color-progressive: oklch( 50% 0.13 295 );<br /> --background-color-progressive--hover: oklch( 56% 0.13 295 );<br /> --background-color-progressive--active: oklch( 45% 0.13 295 );<br /> --background-color-progressive--focus: oklch( 50% 0.13 295 );<br /> --background-color-progressive-subtle: oklch( 50% 0.13 295 / 0.1 );<br /> --background-color-progressive-subtle--hover: oklch( 50% 0.13 295 / 0.14 );<br /> --background-color-progressive-subtle--active: oklch( 50% 0.13 295 / 0.18 );<br /> --border-color-progressive: oklch( 50% 0.13 295 );<br /> --border-color-progressive--hover: oklch( 56% 0.13 295 );<br /> --border-color-progressive--active: oklch( 45% 0.13 295 );<br /> --border-color-progressive--focus: oklch( 50% 0.13 295 );<br /> --outline-color-progressive--focus: oklch( 50% 0.13 295 );<br /> }<br /> <br /> /* Reticulum tint #B199F4 for text on dark pages; buttons sit a step darker so white labels stay readable */<br /> :root.skin-theme-clientpref-night {<br /> --color-progressive: oklch( 74% 0.13 295 );<br /> --color-progressive--hover: oklch( 80% 0.11 295 );<br /> --color-progressive--active: oklch( 68% 0.13 295 );<br /> --color-progressive--focus: oklch( 74% 0.13 295 );<br /> --background-color-progressive: oklch( 58% 0.13 295 );<br /> --background-color-progressive--hover: oklch( 63% 0.13 295 );<br /> --background-color-progressive--active: oklch( 54% 0.13 295 );<br /> --background-color-progressive--focus: oklch( 58% 0.13 295 );<br /> --background-color-progressive-subtle: oklch( 74% 0.13 295 / 0.12 );<br /> --background-color-progressive-subtle--hover: oklch( 74% 0.13 295 / 0.16 );<br /> --background-color-progressive-subtle--active: oklch( 74% 0.13 295 / 0.2 );<br /> --border-color-progressive: oklch( 74% 0.13 295 );<br /> --border-color-progressive--hover: oklch( 80% 0.11 295 );<br /> --border-color-progressive--active: oklch( 68% 0.13 295 );<br /> --border-color-progressive--focus: oklch( 74% 0.13 295 );<br /> --outline-color-progressive--focus: oklch( 74% 0.13 295 );<br /> }<br /> @media ( prefers-color-scheme: dark ) {<br /> :root.skin-theme-clientpref-os {<br /> --color-progressive: oklch( 74% 0.13 295 );<br /> --color-progressive--hover: oklch( 80% 0.11 295 );<br /> --color-progressive--active: oklch( 68% 0.13 295 );<br /> --color-progressive--focus: oklch( 74% 0.13 295 );<br /> --background-color-progressive: oklch( 58% 0.13 295 );<br /> --background-color-progressive--hover: oklch( 63% 0.13 295 );<br /> --background-color-progressive--active: oklch( 54% 0.13 295 );<br /> --background-color-progressive--focus: oklch( 58% 0.13 295 );<br /> --background-color-progressive-subtle: oklch( 74% 0.13 295 / 0.12 );<br /> --background-color-progressive-subtle--hover: oklch( 74% 0.13 295 / 0.16 );<br /> --background-color-progressive-subtle--active: oklch( 74% 0.13 295 / 0.2 );<br /> --border-color-progressive: oklch( 74% 0.13 295 );<br /> --border-color-progressive--hover: oklch( 80% 0.11 295 );<br /> --border-color-progressive--active: oklch( 68% 0.13 295 );<br /> --border-color-progressive--focus: oklch( 74% 0.13 295 );<br /> --outline-color-progressive--focus: oklch( 74% 0.13 295 );<br /> }<br /> }</div>

Maintenance script