MediaWiki:Timeless.css: Difference between revisions

Revision as of 17:55, 24 January 2026

/* All CSS here will be loaded for users of the Timeless skin */
/* =========================================================
   Bellingham Heritage Centre – Timeless skin branding (CSS-only)
   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);

  /* Heritage text colour (per your site) */
  --bhc-maroon: rgb(93, 8, 58);

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

  /* Header now WHITE */
  --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;

  /* 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: Timeless header full-width + WHITE background + bars
   ========================================================= */

body.skin-timeless #mw-header-container{
  background: var(--bhc-header-bg) !important;      /* white */
  border-top: 5px solid var(--bhc-olive) !important;
  border-bottom: 10px solid var(--bhc-sand) !important;
}

/* Make all header text dark by default */
body.skin-timeless #mw-header,
body.skin-timeless #mw-header a{
  color: var(--bhc-header-text) !important;
}

/* Make header a single flex row (ONLY ONCE; no duplicates later) */
body.skin-timeless #mw-header{
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;

  padding-top: 14px;
  padding-bottom: 28px; /* slightly reduced; we'll control content padding below */
}

/* ---------------------------------------------------------
   Layout widths: make logo/title block wider, search narrower
   --------------------------------------------------------- */

body.skin-timeless #mw-header #p-logo-text{
  flex: 1 1 auto;
  min-width: 720px; /* wider to reduce wrapping */
}

body.skin-timeless #mw-header #p-search{
  flex: 0 0 340px;      /* smaller search container */
  width: 340px;
  max-width: 34vw;
  margin-left: auto;
}

body.skin-timeless #mw-header #user-tools{
  flex: 0 0 auto;
}

/* Responsive: stack nicely below ~1024px */
@media (max-width: 1024px){
  body.skin-timeless #mw-header{
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 18px;
  }

  body.skin-timeless #mw-header #p-logo-text{
    min-width: 0;
    flex: 1 1 100%;
  }

  body.skin-timeless #mw-header #p-search{
    flex: 1 1 320px;
    width: auto;
    max-width: 420px;
    margin-left: auto;
  }
}

/* ---------------------------------------------------------
   SITE TITLE + LOGO at left
   Timeless uses: #p-logo-text a#p-banner
   --------------------------------------------------------- */

body.skin-timeless #p-logo-text{
  position: relative;
}

body.skin-timeless #p-logo-text #p-banner{
  display: inline-block;
  text-decoration: none;

  font-family: var(--bhc-heading-font) !important;
  font-weight: 700;
  font-size: 40px;                 /* requested */
  letter-spacing: .01em;
  color: var(--bhc-maroon) !important;

  /* Larger logo */
  background-image: url(/resources/assets/BHClogo.jpg);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 96px 96px;

  padding-left: 118px;             /* 96 + ~22 gap */
  min-height: 96px;
  line-height: 96px;

  /* prevent ugly breaks */
  white-space: nowrap;
}

/* If Timeless forces "long" behaviour, keep nowrap on desktop but allow wrap on small */
@media (max-width: 720px){
  body.skin-timeless #p-logo-text #p-banner{
    white-space: normal;
    line-height: 1.1;
    padding-top: 6px;
    padding-bottom: 6px;
    min-height: 96px;
  }
}

/* Hide Timeless sidebar logo so we don’t double-brand */
body.skin-timeless #mw-site-navigation #p-logo{
  display: none !important;
}

/* ---------------------------------------------------------
   STRAPLINE (Option A): reuse #siteSub, position in header
   --------------------------------------------------------- */

/* Generic: pull siteSub into header region */
body.skin-timeless #siteSub{
  position: absolute;

  left: 118px;     /* align with title start */
  top: 96px;       /* sit just below the big title line */

  margin: 0;
  padding: 0;

  font-family: var(--bhc-body-font);
  font-size: 18px;
  line-height: 1.25;
  font-style: normal;
  color: rgba(32,32,32,.78) !important;

  z-index: 2;
  pointer-events: none;
}

/* Prevent #siteSub reserving visible space in content area */
body.skin-timeless #bodyContentOuter #siteSub{
  height: 0;
  overflow: visible;
}

/* =========================================================
   SEARCH: icon OUTSIDE the input (to the right)
   ========================================================= */

body.skin-timeless #p-search #simpleSearch{
  position: relative;
}

/* Input */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
  width: 100%;
  box-sizing: border-box;

  padding: .45rem .8rem;     /* no in-field icon padding */
  border-radius: 10px;

  background: #fff !important;
  color: #202020 !important;
  caret-color: #202020 !important;

  border: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: none !important;

  -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;
}

/* Hide any built-in WebKit search decorations */
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;
}

/* Only keep ONE submit button as the icon */
body.skin-timeless #p-search input#mw-searchButton,
body.skin-timeless #p-search input#searchButton{
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);

  width: 38px;
  height: 38px;

  padding: 0;
  margin: 0;

  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;

  cursor: pointer;

  /* hide text */
  text-indent: -9999px;
  overflow: hidden;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M10 18a8 8 0 1 1 5.293-14.293A8 8 0 0 1 10 18m0-2a6 6 0 1 0-6-6a6 6 0 0 0 6 6m9.707 6.293l-5.1-5.1l1.414-1.414l5.1 5.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* If BOTH exist, hide the “Go” one and keep “Search” */
body.skin-timeless #p-search input#searchButton{
  display: none !important;
}

/* Make room in the input so the icon doesn't overlap the text */
body.skin-timeless #p-search input[type="search"],
body.skin-timeless #p-search #searchInput{
  padding-right: 3.1rem !important;
}

/* Label styling */
body.skin-timeless #p-search label{
  color: rgba(32,32,32,.75) !important;
}

/* =========================================================
   Personal dropdown: ensure text is black
   ========================================================= */

body.skin-timeless #personal,
body.skin-timeless #personal a,
body.skin-timeless #personal h2,
body.skin-timeless #personal h3,
body.skin-timeless #personal .mw-portlet,
body.skin-timeless #personal .mw-portlet *{
  color: #202020 !important;
}

/* Dropdown panel background */
body.skin-timeless #personal .dropdown,
body.skin-timeless #personal .mw-portlet-body{
  background: #fff !important;
}

/* =========================================================
   FOOTER: keep full width, adopt palette + link colours
   ========================================================= */

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;
}

/* Footer link colours (requested) */
body.skin-timeless .mw-footer-container a,
body.skin-timeless .mw-footer-container a:visited{
  color: #37a;
}

/* =========================================================
   Spacing: push content down under the now-taller branded header
   ---------------------------------------------------------
   IMPORTANT: this is the ONE place to adjust.
   Start with 7rem (your tested good value), tweak from there.
   ========================================================= */

body.skin-timeless #mw-content-container{
  padding-top: 7rem;
}