MediaWiki:Citizen.css - Revision history

AJRyan at 21:38, 22 June 2026

2026-06-22T21:38:39Z

Show changes

AJRyan: Blanked the page

2026-06-22T21:37:18Z

Blanked the page

Show changes

AJRyan at 20:56, 22 June 2026

2026-06-22T20:56:57Z

← Older revision		Revision as of 20:56, 22 June 2026
Line 18:		Line 18:
	--canon-text-muted: #6b6378;		--canon-text-muted: #6b6378;

	/* ~~Map onto~~ Citizen's ~~actual OKLCH~~ token ~~system */~~		/* Citizen's legacy token formula ties EVERY surface color's hue to
	~~--border-~~color~~-base: var(--canon-gold-light);~~		--color-progressive-oklch__h (see tokens-theme-base.less). That means
	--color-~~link: var(~~-~~-canon-plum);~~		surfaces can't be tinted independently from the accent color through
	~~--color-link--hover: var~~(--~~canon-plum-darkest~~);		the sub-variables alone. So below we override the FINAL computed
			custom properties directly — these win in the cascade regardless of
	~~/* Progressive (~~accent) color ~~— plum hue, used for buttons/links/highlights */~~		Citizen's internal formula, since they're plain CSS custom props
	--~~color-progressive-oklch__l: 32%;~~		evaluated at render time, not Less variables. */
	~~--color-progressive-oklch__c: 0~~.~~09;~~		}
	~~--color-progressive-oklch__h: 305;~~

	~~/* Surface scale: 0 = page background~~, ~~1-2 = nested panels, 3 = cards/panels, 4 = top elevated~~ */
	~~--color-surface-0-oklch__l: 96%;~~
	~~--color-surface-0-oklch__c: 0.015;~~
	~~--color-surface-0-oklch__h: 300;~~

	~~--color-surface-1-oklch__l: 97%;~~
	~~--color-surface-1-oklch__c: 0.012;~~
	~~--color-surface-1-oklch__h: 300;~~

	--color-~~surface~~-2-~~oklch__l: 94%~~;		:root {
	--color-~~surface~~-2-~~oklch__c~~: ~~0.02~~;		/* Accent / progressive color */
	--color-~~surface~~-2-~~oklch__h~~: ~~300~~;		--color-progressive: var(--canon-plum);
			--color-progressive--hover: var(--canon-plum-dark);
			--color-progressive--active: var(--canon-plum-darkest);

	-~~-color-surface-~~3-~~oklch__l: 100%;~~		/* Surface scale: 0 = page bg, 1-2 = nested panels, 3-4 = cards/elevated */
	--color-surface-3-~~oklch__c: 0~~;		--color-surface-0: var(--canon-cream);
	--color-surface-~~3-oklch__h~~: 0;		--color-surface-1: #f1ecf8;
			--color-surface-2: var(--canon-lavender);
	--color-surface-4-~~oklch__l: 100%~~;		--color-surface-3: #ffffff;
	--color-surface-~~4-oklch__c~~: 0;		--color-surface-4: #ffffff;
	--color-surface-4~~-oklch__h~~: 0;

	/* Text hierarchy */		/* Text hierarchy */
	--color-emphasized-~~oklch__l: 18%~~;		--color-emphasized: var(--canon-plum-darkest);
	--color-~~emphasized~~-~~oklch__c: 0.04~~;		--color-base: var(--canon-text-dark);
	--color-~~emphasized~~-~~oklch__h: 300~~;		--color-subtle: var(--canon-text-muted);

	--color-~~base~~-~~oklch__l: 28%~~;		/* Links */
	--color-~~base~~-~~oklch__c~~: ~~0.03~~;		--color-link: var(--canon-plum);
	--color-~~base~~-~~oklch__h~~: ~~300~~;		--color-link--hover: var(--canon-plum-darkest);
			--color-link--active: var(--canon-plum-darkest);

	--~~color-subtle-oklch__l: 45%;~~		--border-color-base: var(--canon-gold-light);
	--color-~~subtle-oklch__c~~: ~~0.02;~~
	--~~color~~-~~subtle~~-~~oklch__h: 300~~;
	}		}

AJRyan at 20:49, 22 June 2026

2026-06-22T20:49:00Z

@@ Line 18: / Line 18: @@
    --canon-text-muted:   #6b6378;
-   /* Map onto Citizen's own variables */
+   /* Map onto Citizen's actual OKLCH token system */
    --border-color-base: var(--canon-gold-light);
+}
@@ Line 49: / Line 87: @@
 #mw-panel,
 .citizen-sidebar {
-   background-color: var(--canon-lavender);
+   background-color: var(--color-surface-2);
    border-right: 1px solid var(--canon-gold-light);
+}
@@ Line 96: / Line 134: @@
 .canon-portal-card {
-   background: #ffffff;
+   background: var(--color-surface-3);
    border: 1px solid var(--canon-gold-light);
    border-radius: 10px;

AJRyan at 20:39, 22 June 2026

2026-06-22T20:39:30Z

← Older revision		Revision as of 20:39, 22 June 2026
Line 1:		Line 1:
	~~/* All CSS here will be loaded for users of the Citizen skin */~~
	/* ==========================================================================		/* ==========================================================================
	The Canon of Nora — Citizen skin overrides		The Canon of Nora — Citizen skin overrides

AJRyan: CON Website customization

2026-06-22T20:37:56Z

CON Website customization

New page

/* All CSS here will be loaded for users of the Citizen skin */
/* ==========================================================================
The Canon of Nora — Citizen skin overrides
Paste this into MediaWiki:Citizen.css on-wiki
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
/* Palette — pulled from mockup */
--canon-plum-darkest: #2a1a40;
--canon-plum-dark: #3d2563;
--canon-plum: #4a2d73;
--canon-gold: #b8923f;
--canon-gold-light: #d4af6a;
--canon-cream: #f6f3f9;
--canon-lavender: #ece6f4;
--canon-text-dark: #2a1a40;
--canon-text-muted: #6b6378;

/* Map onto Citizen's own variables */
--color-primary: var(--canon-plum);
--background-color-base: var(--canon-cream);
--background-color-interactive: var(--canon-lavender);
--border-color-base: var(--canon-gold-light);
}

/* Typography */
body,
.citizen-body-content,
.citizen-ui-text {
font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.citizen-page-heading,
.firstHeading {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
color: var(--canon-plum-darkest);
letter-spacing: 0.01em;
}

.firstHeading {
font-size: 2.4em;
font-weight: 700;
}

/* Sidebar / logo area */
#mw-panel,
.citizen-sidebar {
background-color: var(--canon-lavender);
border-right: 1px solid var(--canon-gold-light);
}

.citizen-sidebar .mw-portlet-label,
.citizen-sidebar .citizen-menu-heading {
font-family: 'Cormorant Garamond', serif;
color: var(--canon-plum-darkest);
text-transform: none;
letter-spacing: 0.04em;
}

/* Active sidebar link (e.g. "Main Page") */
.citizen-sidebar .selected > a,
.citizen-sidebar a.is-active {
background-color: var(--canon-plum-darkest);
color: var(--canon-cream) !important;
border-radius: 6px;
}

/* Buttons */
.cdx-button--action-progressive,
.canon-button-primary {
background-color: var(--canon-plum-darkest);
border-color: var(--canon-plum-darkest);
color: var(--canon-cream);
font-family: 'Source Sans 3', sans-serif;
font-weight: 600;
border-radius: 8px;
}

.canon-button-secondary {
background-color: transparent;
border: 1px solid var(--canon-plum-darkest);
color: var(--canon-plum-darkest);
border-radius: 8px;
}

/* Home portal cards (used on Main Page via Template:Home portal) */
.canon-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.2em;
margin: 1.5em 0;
}

.canon-portal-card {
background: #ffffff;
border: 1px solid var(--canon-gold-light);
border-radius: 10px;
padding: 1.2em 1.4em;
box-shadow: 0 1px 3px rgba(42, 26, 64, 0.06);
}

.canon-portal-card h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3em;
border-bottom: 1px solid var(--canon-gold-light);
padding-bottom: 0.4em;
margin-bottom: 0.6em;
display: flex;
align-items: center;
gap: 0.4em;
}

.canon-portal-card ul {
list-style: none;
margin: 0;
padding: 0;
}

.canon-portal-card li a {
display: flex;
justify-content: space-between;
padding: 0.35em 0;
color: var(--canon-plum);
border-bottom: 1px solid #f0ecf6;
text-decoration: none;
}

.canon-portal-card li:last-child a {
border-bottom: none;
}

/* Hero / welcome banner on Main Page */
.canon-hero {
background: #ffffff;
border: 1px solid var(--canon-gold-light);
border-radius: 14px;
padding: 2em;
display: flex;
gap: 2em;
align-items: center;
margin-bottom: 1.5em;
}

.canon-hero h1 {
font-size: 2.2em;
margin-top: 0;
}

.canon-hero p {
color: var(--canon-text-muted);
font-size: 1.05em;
line-height: 1.6;
}