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.

/* =========================================================
   Bellingham Heritage Centre – Timeless skin branding
   FINAL SYNCED VERSION
   ========================================================= */

@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);

  /* Brand colours */
  --bhc-maroon: rgb(93, 8, 58);
  --bhc-gold: rgb(228, 186, 123);

  --bhc-link: #005DB3;
  --bhc-text: #202020;

  /* Header */
  --bhc-header-bg: #ffffff;
  --bhc-header-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;

  font-size: 18px;
  line-height: 1.65;
  background: #eaecf0;
}

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

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

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 .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 h2{
  border-bottom: 3px solid var(--bhc-sand);
  padding-bottom: .25rem;
}

/* ---------------------------------------------------------
   Header container + bars
   --------------------------------------------------------- */

body.skin-timeless #mw-header-hack,
body.skin-timeless #mw-header-nav-hack,
body.skin-timeless .color-bar{
  display: none !important;
}

body.skin-timeless #mw-header-container{
  position: relative !important;
  background: var(--bhc-header-bg) !important;
  overflow: visible !important;
}

/* Top bar */
body.skin-timeless #mw-header-container::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 20px;
  background: linear-gradient(
    to bottom,
    var(--bhc-olive) 0 25%,
    var(--bhc-teal) 25% 100%
  );
}

/* Bottom bar */
body.skin-timeless #mw-header-container::after{
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 20px;
  background: linear-gradient(
    to bottom,
    var(--bhc-gold) 0 33%,
    var(--bhc-maroon) 33% 100%
  );
}

/* ---------------------------------------------------------
   Header layout (FINAL)
   --------------------------------------------------------- */

body.skin-timeless #mw-header{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  column-gap: 1.5rem;

  padding: calc(20px + 14px) 0 calc(20px + 12px);
  align-items: start;
}

/* Title + strapline block */
body.skin-timeless #p-logo-text{
  grid-column: 1 / -1;
  max-width: 100%;
}

/* Search */
body.skin-timeless #p-search{
  grid-column: 2;
  grid-row: 2;
  max-width: 520px;
  margin-left: auto;
}

/* User tools */
body.skin-timeless #user-tools{
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* ---------------------------------------------------------
   Logo + title
   --------------------------------------------------------- */

body.skin-timeless #p-banner{
  display: block;
  background: url(/resources/assets/BHClogo.jpg) no-repeat left center / 96px 96px;
  padding-left: 118px;
  min-height: 96px;

  font-family: var(--bhc-heading-font);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--bhc-maroon);
  white-space: normal;
}

/* Strapline */
body.skin-timeless .bhc-strapline{
  margin-top: .1rem;
  font-family: var(--bhc-accent-font);
  font-size: 20px;
  color: var(--bhc-teal);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

body.skin-timeless #mw-footer-container{
  background: var(--bhc-maroon) !important;
  border-top: 10px solid var(--bhc-gold) !important;
}

body.skin-timeless #mw-footer,
body.skin-timeless #mw-footer *{
  color: #fff !important;
}

body.skin-timeless #mw-footer a{
  color: var(--bhc-gold) !important;
}

/* ---------------------------------------------------------
   Remove Timeless default borders
   --------------------------------------------------------- */

body.skin-timeless .toctitle,
body.skin-timeless .mw-heading2,
body.skin-timeless .mw-heading3,
body.skin-timeless .mw-heading4,
body.skin-timeless .mw-heading5{
  border-bottom: none !important;
}