|
|
| (4 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the MonoBook skin */
| |
| /* ==========================================================================
| |
| The Canon of Nora — MonoBook skin overrides
| |
| Paste this into MediaWiki:Monobook.css on-wiki
| |
| MonoBook uses plain CSS with fixed selectors — no design-token system,
| |
| so these are real, final values (not variables that get reformulated
| |
| by the skin internally).
| |
| ========================================================================== */
| |
|
| |
|
| @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');
| |
|
| |
| /* ---- Palette (plain hex, reused via CSS custom props for convenience —
| |
| these are OUR OWN variables, not MonoBook's, so there's no hidden
| |
| coupling or formula to fight) ---- */
| |
| :root {
| |
| --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;
| |
| }
| |
|
| |
| /* ---- Base page ---- */
| |
| body {
| |
| background-color: var(--canon-cream);
| |
| font-family: 'Source Sans 3', 'Source Sans Pro', sans-serif;
| |
| color: var(--canon-text-dark);
| |
| }
| |
|
| |
| #column-content {
| |
| background-color: var(--canon-cream);
| |
| }
| |
|
| |
| #content {
| |
| background-color: #ffffff;
| |
| border: 1px solid var(--canon-gold-light);
| |
| border-radius: 10px;
| |
| color: var(--canon-text-dark);
| |
| }
| |
|
| |
| /* ---- Headings ---- */
| |
| h1, h2, h3, h4, h5, h6,
| |
| #firstHeading {
| |
| font-family: 'Cormorant Garamond', serif;
| |
| font-weight: 600;
| |
| color: var(--canon-plum-darkest);
| |
| letter-spacing: 0.01em;
| |
| border-bottom: 1px solid var(--canon-gold-light);
| |
| }
| |
|
| |
| #firstHeading {
| |
| font-size: 2.4em;
| |
| font-weight: 700;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| /* ---- Links ---- */
| |
| a {
| |
| color: var(--canon-plum);
| |
| }
| |
| a:visited {
| |
| color: var(--canon-plum-dark);
| |
| }
| |
| a:hover {
| |
| color: var(--canon-plum-darkest);
| |
| }
| |
|
| |
| /* ---- Sidebar (left column) ---- */
| |
| #p-logo a {
| |
| background-image: url('/images/canon-of-nora-logo.png');
| |
| background-size: contain;
| |
| }
| |
|
| |
| .portlet {
| |
| background-color: var(--canon-lavender);
| |
| border: 1px solid var(--canon-gold-light);
| |
| border-radius: 8px;
| |
| margin-bottom: 0.8em;
| |
| padding: 0.5em;
| |
| }
| |
|
| |
| .portlet h3,
| |
| .portlet h5 {
| |
| font-family: 'Cormorant Garamond', serif;
| |
| color: var(--canon-plum-darkest);
| |
| border: none;
| |
| text-transform: none;
| |
| letter-spacing: 0.03em;
| |
| }
| |
|
| |
| .pBody {
| |
| border: none;
| |
| background: transparent;
| |
| }
| |
|
| |
| /* ---- Footer ---- */
| |
| #footer {
| |
| background-color: var(--canon-lavender);
| |
| border-top: 1px solid var(--canon-gold-light);
| |
| }
| |
|
| |
| /* ---- Buttons ---- */
| |
| .canon-button-primary {
| |
| display: inline-block;
| |
| background-color: var(--canon-plum-darkest);
| |
| color: #ffffff !important;
| |
| font-family: 'Source Sans 3', sans-serif;
| |
| font-weight: 600;
| |
| border-radius: 8px;
| |
| padding: 0.6em 1.2em;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .canon-button-secondary {
| |
| display: inline-block;
| |
| background-color: transparent;
| |
| border: 1px solid var(--canon-plum-darkest);
| |
| color: var(--canon-plum-darkest) !important;
| |
| font-family: 'Source Sans 3', sans-serif;
| |
| font-weight: 600;
| |
| border-radius: 8px;
| |
| padding: 0.6em 1.2em;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| /* ---- Homepage hero banner ---- */
| |
| .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-text {
| |
| flex: 1.4;
| |
| }
| |
|
| |
| .canon-hero-image {
| |
| flex: 1;
| |
| text-align: center;
| |
| }
| |
|
| |
| .canon-hero-image img {
| |
| max-width: 100%;
| |
| border-radius: 10px;
| |
| }
| |
|
| |
| .canon-hero h1 {
| |
| font-size: 2.2em;
| |
| margin-top: 0;
| |
| border-bottom: none;
| |
| }
| |
|
| |
| .canon-hero p {
| |
| color: var(--canon-text-muted);
| |
| font-size: 1.05em;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| /* ---- Homepage portal card grid ---- */
| |
| .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;
| |
| }
| |
|
| |
| /* Responsive: stack hero on narrow screens */
| |
| @media (max-width: 700px) {
| |
| .canon-hero {
| |
| flex-direction: column;
| |
| }
| |
| }
| |
