MediaWiki:Timeless.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.
/* All CSS here will be loaded for users of the Timeless skin */
/* =========================================================
Bellingham Heritage Centre – Timeless skin branding
CSS-only approach (no PHP/JS)
Applies ONLY when the Timeless skin is in use.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
body.skin-timeless{
/* Palette */
--bhc-teal: rgb(130,156,149);
--bhc-olive: rgb(165,174,121);
--bhc-sand: rgb(228,186,149);
--bhc-maroon: #800020;
--bhc-link: #005DB3;
--bhc-text: #202020;
/* Fonts */
--bhc-body-font: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--bhc-accent-font: "Satisfy", cursive;
/* Readability */
font-size: 18px;
line-height: 1.65;
overflow-x: hidden;
}
@media (max-width: 720px){
body.skin-timeless{ font-size: 16.5px; }
}
/* ---------------------------------------------------------
Global typography (content)
--------------------------------------------------------- */
body.skin-timeless,
body.skin-timeless .mw-body,
body.skin-timeless .mw-parser-output{
font-family: var(--bhc-body-font);
color: var(--bhc-text);
}
body.skin-timeless a{ color: var(--bhc-link); }
body.skin-timeless a:hover{ text-decoration: underline; }
body.skin-timeless .mw-parser-output h1,
body.skin-timeless .mw-parser-output h2,
body.skin-timeless .mw-parser-output h3{
font-family: var(--bhc-heading-font);
letter-spacing: .02em;
color: var(--bhc-maroon);
}
body.skin-timeless .mw-parser-output h1{
font-size: 2.05rem;
line-height: 1.15;
margin: 0.25rem 0 0.75rem;
font-weight: 700;
}
body.skin-timeless .mw-parser-output h2{
font-size: 1.55rem;
line-height: 1.2;
margin: 1.6rem 0 0.6rem;
border-bottom: 3px solid var(--bhc-sand);
padding-bottom: .25rem;
}
body.skin-timeless .mw-parser-output h3{
font-size: 1.25rem;
line-height: 1.25;
margin: 1.2rem 0 0.45rem;
}
body.skin-timeless .mw-parser-output h4{
font-size: 1.1rem;
line-height: 1.3;
}
body.skin-timeless .mw-parser-output p{ margin: 0.75rem 0; }
body.skin-timeless .mw-parser-output ul,
body.skin-timeless .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
body.skin-timeless .mw-parser-output li{ margin: 0.2rem 0; }
body.skin-timeless #toc,
body.skin-timeless .toc,
body.skin-timeless .mw-normal-catlinks,
body.skin-timeless .catlinks,
body.skin-timeless .mw-editsection,
body.skin-timeless .mw-editsection a,
body.skin-timeless .mw-changeslist,
body.skin-timeless .mw-footer{
font-size: 0.95rem;
}
/* Optional accent class you can use in wiki content */
body.skin-timeless .bhc-script{ font-family: var(--bhc-accent-font); }
/* ---------------------------------------------------------
HEADER: make Timeless header full-width + BHC palette
--------------------------------------------------------- */
/* The overall header bar */
body.skin-timeless #mw-header-container{
background: var(--bhc-teal) !important;
border-top: 5px solid var(--bhc-olive) !important;
border-bottom: 10px solid var(--bhc-sand) !important;
}
/* Ensure header content can host an absolutely-positioned strapline */
body.skin-timeless #mw-header{
position: relative;
padding-top: 8px;
padding-bottom: 18px; /* breathing room below header */
}
/* Make header text white by default */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header a{
color: #fff !important;
}
/* ---------------------------------------------------------
1) SITE TITLE + LOGO: keep title visible, add logo at left
Timeless uses: #p-logo-text a#p-banner
--------------------------------------------------------- */
body.skin-timeless #p-logo-text{
position: relative;
}
/* Show the title text, and make room for a logo to the left */
body.skin-timeless #p-logo-text #p-banner{
display: inline-block;
font-family: var(--bhc-heading-font) !important;
font-weight: 700;
font-size: 1.35rem;
letter-spacing: .02em;
text-decoration: none;
/* Logo */
background-image: url(/resources/assets/BHClogo.jpg);
background-repeat: no-repeat;
background-position: left center;
background-size: 56px 56px;
/* Space for logo + a little gap */
padding-left: 72px;
min-height: 56px;
line-height: 56px; /* vertically align title with logo */
}
/* Remove/Hide Timeless sidebar logo so we don’t double-brand */
body.skin-timeless #mw-site-navigation #p-logo{
display: none !important;
}
/* ---------------------------------------------------------
2) STRAPLINE (Option A): reuse #siteSub and position it in header
Timeless normally shows this under the page title.
We visually move it into the header under the site title.
--------------------------------------------------------- */
/* Keep it available in DOM, but position it where we want */
body.skin-timeless #siteSub{
position: absolute;
/* Align under the site title text start (same padding-left as #p-banner) */
left: calc(56px + 16px); /* 56 logo + 16 gap = 72px */
top: 54px; /* sits under the site title */
margin: 0;
padding: 0;
font-family: var(--bhc-body-font);
font-size: 1.0rem;
line-height: 1.25;
font-style: normal;
color: rgba(255,255,255,.92) !important;
/* Make sure it appears above other header bits */
z-index: 2;
pointer-events: none; /* avoid odd selection/overlap issues */
}
/* Prevent #siteSub reserving visible space in the content area */
body.skin-timeless #bodyContentOuter #siteSub{
height: 0;
overflow: visible; /* still allows it to render in header */
}
/* ---------------------------------------------------------
3) SEARCH: smaller, right-aligned, white background + dark text
Timeless uses: #p-search #searchInput
--------------------------------------------------------- */
body.skin-timeless #p-search{
margin-left: auto;
}
/* The input itself */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
width: min(360px, 34vw);
max-width: 100%;
padding: .45rem .7rem;
border-radius: 6px;
background: #fff !important; /* per your request */
color: #202020 !important; /* readable on white */
caret-color: #202020 !important;
border: 1px solid rgba(0,0,0,.15) !important;
box-shadow: none !important;
/* Remove browser “search field” styling that adds odd internal UI */
-webkit-appearance: none;
appearance: none;
}
/* Placeholder */
body.skin-timeless #p-search input[type="search"]::placeholder,
body.skin-timeless #p-search #searchInput::placeholder{
color: rgba(0,0,0,.55) !important;
}
/* Remove the internal “X / decorations” in WebKit search fields */
body.skin-timeless #p-search input[type="search"]::-webkit-search-decoration,
body.skin-timeless #p-search input[type="search"]::-webkit-search-cancel-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-button,
body.skin-timeless #p-search input[type="search"]::-webkit-search-results-decoration{
-webkit-appearance: none;
display: none;
}
/* If Timeless wraps input, keep it neat */
body.skin-timeless #p-search #simpleSearch,
body.skin-timeless #p-search #searchInput-container{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
/* Make the search label (if visible) subtle/white */
body.skin-timeless #p-search label{
color: rgba(255,255,255,.92) !important;
}
/* ---------------------------------------------------------
4) FOOTER: keep full width, adopt palette
--------------------------------------------------------- */
body.skin-timeless #mw-footer-container{
border-top: 6px solid var(--bhc-sand);
background: #f6f6f6;
}
body.skin-timeless #mw-footer{
font-family: var(--bhc-body-font);
color: #222;
}
/* ---------------------------------------------------------
5) Spacing: ensure content doesn’t jam up under the header
(header is now taller due to logo + strapline + search)
--------------------------------------------------------- */
body.skin-timeless #mw-content-container{
padding-top: 1.0rem;
}
