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 branding (CSS-only)
   Steps 1–5:
     1) Fonts, weights, heading style
     2) Timeless header styling (full width)
     3) Search box sizing + right alignment
     4) Timeless footer styling (full width)
     5) Replace text site logo with actual logo (CSS-only)
   ========================================================= */

/* ---------- Palette + typography ---------- */
:root{
  --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;
  --bhc-muted: #4b4b4b;
  --bhc-paper: #f6f6f6;

  --bhc-radius: 8px;
}

/* Optional: Google Fonts (if CSP blocks, it will just fall back) */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&display=swap');

/* Scope to Timeless only */
body.skin-timeless{
  --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;

  font-family: var(--bhc-body-font);
  color: var(--bhc-text);

  /* Readability */
  font-size: 18px;
  line-height: 1.65;

  overflow-x: hidden;
}

@media (max-width: 720px){
  body.skin-timeless{ font-size: 16.5px; }
}

/* Links */
body.skin-timeless a{ color: var(--bhc-link); }
body.skin-timeless a:hover{ text-decoration: underline; }

/* Headings */
body.skin-timeless .mw-parser-output h1,
body.skin-timeless .mw-parser-output h2,
body.skin-timeless .mw-parser-output h3,
body.skin-timeless .mw-parser-output h4{
  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;
}

/* Paragraph rhythm + lists */
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; }

/* Slightly less tiny “small UI text” */
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;
}


/* =========================================================
   Timeless header (full width) – closer to main site
   ========================================================= */

/* The Timeless header wrapper */
body.skin-timeless #mw-header-container{
  background: var(--bhc-teal);
  border-top: 5px solid var(--bhc-olive);
  border-bottom: 10px solid var(--bhc-sand);
}

/* Remove/soften Timeless decorative bars that fight your palette */
body.skin-timeless #mw-header-hack,
body.skin-timeless #mw-header-nav-hack{
  display: none;
}

/* Make the inner header content breathe */
body.skin-timeless #mw-header.ts-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* (Optional) Tidy the “user tools” a bit on the teal background */
body.skin-timeless #user-tools,
body.skin-timeless #personal,
body.skin-timeless #p-personal-label,
body.skin-timeless #p-personal a{
  color: #fff;
}

body.skin-timeless #p-personal a:hover{
  text-decoration: underline;
}

/* =========================================================
   Step 5: Replace text site logo with actual logo (CSS-only)
   ========================================================= */

/*
  Timeless puts the text title in:
    <div id="p-logo-text"><a id="p-banner" class="mw-wiki-title ...">...</a></div>

  We convert that anchor into a logo block.
  NOTE: Update the image URL if your logo file path differs.
*/
body.skin-timeless #p-logo-text{
  /* keep it in the header flow */
}

body.skin-timeless a#p-banner.mw-wiki-title{
  display: inline-block;
  width: 320px;           /* adjust later */
  height: 56px;           /* adjust later */
  max-width: 60vw;
  background: url(/resources/assets/BHClogo.jpg) left center / contain no-repeat;
  color: transparent;     /* hide text */
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

/* If Timeless forces text visibility via spans, belt-and-braces */
body.skin-timeless a#p-banner.mw-wiki-title *{
  visibility: hidden;
}

/* Hide the sidebar logo so you don’t get it twice */
body.skin-timeless #mw-site-navigation #p-logo{
  display: none !important;
}


/* =========================================================
   Step 3: Search box – reduce size and keep it right
   ========================================================= */

/* The Timeless search portlet lives in the header: #p-search */
body.skin-timeless #p-search{
  margin-left: auto;
}

/* Ensure header content aligns nicely in one row (Timeless already does, but this helps) */
body.skin-timeless #mw-header{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Logo/title block first, then search pushed right */
body.skin-timeless #p-logo-text{ flex: 0 1 auto; }
body.skin-timeless #p-search{ flex: 1 1 auto; display: flex; justify-content: flex-end; }

/* Make the search input more “site-like” and smaller */
body.skin-timeless #p-search form#searchform{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Input */
body.skin-timeless #p-search input#searchInput{
  width: min(320px, 42vw);
  max-width: 100%;
  padding: .42rem .6rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(255,255,255,.12);
  color: #fff;
  caret-color: #fff;
  font-family: var(--bhc-body-font);
}

/* Placeholder */
body.skin-timeless #p-search input#searchInput::placeholder{
  color: rgba(255,255,255,.78);
}

/* Buttons */
body.skin-timeless #p-search input.searchButton,
body.skin-timeless #p-search button,
body.skin-timeless #p-search input[type="submit"]{
  padding: .42rem .65rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.12);
  color: #fff;
}

/* Autofill quirks */
body.skin-timeless #p-search input#searchInput:-webkit-autofill,
body.skin-timeless #p-search input#searchInput:-webkit-autofill:hover,
body.skin-timeless #p-search input#searchInput:-webkit-autofill:focus{
  -webkit-text-fill-color: #fff !important;
  transition: background-color 9999s ease-in-out 0s;
}


/* =========================================================
   Timeless footer – site-like, full width
   ========================================================= */

body.skin-timeless #mw-footer-container{
  background: var(--bhc-paper);
  border-top: 6px solid var(--bhc-sand);
}

body.skin-timeless #mw-footer{
  color: #222;
  font-family: var(--bhc-body-font);
}

/* Tidy footer link lists */
body.skin-timeless #mw-footer a{
  color: var(--bhc-link);
}

body.skin-timeless #mw-footer a:hover{
  text-decoration: underline;
}

/* Slightly calmer footer text */
body.skin-timeless #mw-footer,
body.skin-timeless #mw-footer *{
  font-size: 0.95rem;
  line-height: 1.6;
}


/* =========================================================
   Minor “site feel” extras (safe CSS-only)
   ========================================================= */

/* Make content area feel less cramped */
body.skin-timeless #content{
  padding-top: .25rem;
}

/* Optional: soften boxes a touch */
body.skin-timeless .toc,
body.skin-timeless #toc{
  border-radius: var(--bhc-radius);
}