|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /* ==========================================================================
| |
| 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 width: widened to 250px (MonoBook default is ~12em/192px) ---- */
| |
| #column-content {
| |
| margin-left: -250px;
| |
| }
| |
| #column-content #content {
| |
| margin-left: 250px;
| |
| }
| |
| #p-logo a,
| |
| #p-logo a:hover {
| |
| width: 250px;
| |
| }
| |
| #p-cactions {
| |
| left: 245px;
| |
| }
| |
|
| |
| /* ---- Sidebar (left column) ---- */
| |
|
| |
| /* Logo placeholder: 250x375, blends into sidebar until a real logo is
| |
| uploaded at /images/canon-of-nora-logo.png. Once uploaded, the image
| |
| will show on top of this background color automatically. */
| |
| #p-logo {
| |
| height: 375px;
| |
| }
| |
| #p-logo a,
| |
| #p-logo a:hover {
| |
| width: 250px;
| |
| height: 375px;
| |
| background-color: var(--canon-cream);
| |
| background-image: url('/images/canon-of-nora-logo.png');
| |
| background-size: contain;
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| }
| |
|
| |
| /* Sidebar breathing room from the left edge */
| |
| #column-one {
| |
| padding-left: 0.8em;
| |
| padding-right: 0.8em;
| |
| }
| |
|
| |
| /* ---- Flatten portlets: no boxed cards, just clean rows on the
| |
| sidebar's own background (matches mockup's borderless nav list) ---- */
| |
| .portlet {
| |
| width: auto;
| |
| box-sizing: border-box;
| |
| background: transparent;
| |
| border: none;
| |
| margin-bottom: 0.4em;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* Hide the small grey section labels ("navigation", "tools") —
| |
| the mockup shows a clean list with no section headers.
| |
| Search keeps its own styling below since it's a visible input. */
| |
| #p-navigation h5,
| |
| #p-tb h5,
| |
| #p-personal h5 {
| |
| display: none;
| |
| }
| |
|
| |
| .portlet li,
| |
| .portlet a {
| |
| font-size: 1.05em;
| |
| }
| |
|
| |
| .portlet ul {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| /* Each nav row: padded, rounded, room for a future icon */
| |
| #p-navigation li,
| |
| #p-tb li {
| |
| margin: 0;
| |
| }
| |
|
| |
| #p-navigation li a,
| |
| #p-tb li a {
| |
| display: block;
| |
| padding: 0.55em 0.7em;
| |
| border-radius: 8px;
| |
| color: var(--canon-text-dark);
| |
| text-decoration: none;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| #p-navigation li a:hover,
| |
| #p-tb li a:hover {
| |
| background-color: var(--canon-lavender);
| |
| color: var(--canon-plum-darkest);
| |
| }
| |
|
| |
| /* "Main Page" row styled as the active/highlighted item, matching
| |
| the mockup's dark plum highlighted state — applied directly since
| |
| MonoBook doesn't auto-mark the current sidebar page */
| |
| #n-mainpage a {
| |
| background-color: var(--canon-plum-darkest);
| |
| color: #ffffff !important;
| |
| font-weight: 600;
| |
| }
| |
| #n-mainpage a:hover {
| |
| background-color: var(--canon-plum-dark);
| |
| color: #ffffff !important;
| |
| }
| |
|
| |
| /* Search box: styled as a rounded pill input near the bottom,
| |
| closer to the mockup's search field */
| |
| #p-search {
| |
| margin-top: 1.5em;
| |
| }
| |
| #p-search input[type="text"] {
| |
| border-radius: 20px;
| |
| border: 1px solid var(--canon-gold-light);
| |
| padding: 0.5em 1em;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .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;
| |
| }
| |
| }
| |
