MediaWiki:Bhcvectorbrand-css: Difference between revisions

Latest revision as of 17:01, 24 January 2026

/* =========================================================

  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 flex row */ body.skin-timeless #mw-header{

 position: relative;
 display: flex;
 align-items: flex-start;
 gap: 16px;

 /* a bit more vertical room for the larger logo + strapline */
 padding-top: 14px;
 padding-bottom: 34px;

}

/* ---------------------------------------------------------

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

body.skin-timeless #p-logo-text{

 flex: 1 1 auto;
 min-width: 640px;        /* ~50% wider than before */

}

body.skin-timeless #p-search{

 flex: 0 0 auto;
 width: 360px;            /* slightly narrower container */
 max-width: 34vw;
 margin-left: auto;

}

/* ---------------------------------------------------------

  SITE TITLE + LOGO at left (logo 50% bigger)
  Timeless uses: #p-logo-text a#p-banner
  --------------------------------------------------------- */

body.skin-timeless #p-logo-text{

 position: relative;

}

/* Bigger “logo + title” line */ body.skin-timeless #p-logo-text #p-banner{

 display: inline-block;
 text-decoration: none;

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

 /* Logo (50% bigger than 56px -> 84px) */
 background-image: url(/resources/assets/BHClogo.jpg);
 background-repeat: no-repeat;
 background-position: left center;
 background-size: 84px 84px;

 padding-left: 104px;             /* 84 + ~20 gap */
 min-height: 84px;
 line-height: 84px;

}

/* If Timeless forces uppercase / long styles, relax wrapping */ body.skin-timeless #p-logo-text #p-banner.long{

 white-space: normal;

}

/* 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
  --------------------------------------------------------- */

body.skin-timeless #siteSub{

 position: absolute;

 /* Align under title start (104px = padding-left above) */
 left: 104px;
 top: 86px;

 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: make icon OUTSIDE the input (to the right)
  Timeless search is usually: #searchform > #simpleSearch > input + buttons
  ========================================================= */

/* Ensure the search area is positioned for the button */ body.skin-timeless #p-search #simpleSearch{

 position: relative;

}

/* Input: remove “in-field icon” spacing; keep clean white box */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 width: min(280px, 26vw);
 max-width: 100%;

 padding: .45rem .8rem;     /* no extra right padding now */
 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;

 float: right;

}

/* 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;

}

/* Show ONE compact icon button to the right of the input (outside it) */ 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 any text on the button */
 text-indent: -9999px;
 overflow: hidden;

 /* simple inline SVG magnifier */
 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 buttons exist, hide the “Go” one and keep “Search” */ body.skin-timeless #p-search input#searchButton{

 display: none !important;

}

/* Give the input room so the external button doesn't overlap it */ body.skin-timeless #p-search input[type="search"], body.skin-timeless #p-search #searchInput{

 margin-right: 46px; /* makes space for the icon button */

}

/* 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
  ========================================================= */

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;

}

/* =========================================================

  Spacing: push content down a bit further under the header
  ========================================================= */

body.skin-timeless #mw-content-container{

 padding-top: 1.9rem;   /* increased */

}

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 17:01, 24 January 2026

Navigation

Other Heritage Centre Links

WIKI Navigation

WIKI Categories

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
-/* Custom CSS for the branded preview (scoped). */
+/* =========================================================
-/* Tip: start selectors with body.bhc-branding ... */
+   Bellingham Heritage Centre – Timeless skin branding (CSS-only)
+   Applies ONLY when the Timeless skin is in use.
+   ========================================================= */
-/* Ensure sidebar does not visually extend past the footer */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
-body.bhc-branding #mw-panel {
-   padding-bottom: 3rem;
+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 flex row */
+body.skin-timeless #mw-header{
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  /* a bit more vertical room for the larger logo + strapline */
+  padding-top: 14px;
+   padding-bottom: 34px;
+}
+/* ---------------------------------------------------------
+   Layout widths: make logo/title block wider, search narrower
+   --------------------------------------------------------- */
+body.skin-timeless #p-logo-text{
+  flex: 1 1 auto;
+  min-width: 640px;        /* ~50% wider than before */
+}
+body.skin-timeless #p-search{
+  flex: 0 0 auto;
+  width: 360px;            /* slightly narrower container */
+  max-width: 34vw;
+  margin-left: auto;
+}
+/* ---------------------------------------------------------
+   SITE TITLE + LOGO at left (logo 50% bigger)
+   Timeless uses: #p-logo-text a#p-banner
+   --------------------------------------------------------- */
+body.skin-timeless #p-logo-text{
+  position: relative;
+}
+/* Bigger “logo + title” line */
+body.skin-timeless #p-logo-text #p-banner{
+  display: inline-block;
+  text-decoration: none;
+  /* Title styling per your site */
+  font-family: var(--bhc-heading-font) !important;
+  font-weight: 700;
+  font-size: 40px;                 /* requested */
+  letter-spacing: .01em;
+  color: var(--bhc-maroon) !important;
+  /* Logo (50% bigger than 56px -> 84px) */
+  background-image: url(/resources/assets/BHClogo.jpg);
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 84px 84px;
+  padding-left: 104px;             /* 84 + ~20 gap */
+  min-height: 84px;
+  line-height: 84px;
+}
+/* If Timeless forces uppercase / long styles, relax wrapping */
+body.skin-timeless #p-logo-text #p-banner.long{
+  white-space: normal;
+}
+/* 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
+   --------------------------------------------------------- */
+body.skin-timeless #siteSub{
+  position: absolute;
+  /* Align under title start (104px = padding-left above) */
+  left: 104px;
+  top: 86px;
+  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;
 }
-body.bhc-branding .bhc-footer {
+/* =========================================================
+   SEARCH: make icon OUTSIDE the input (to the right)
+   Timeless search is usually: #searchform > #simpleSearch > input + buttons
+   ========================================================= */
+/* Ensure the search area is positioned for the button */
+body.skin-timeless #p-search #simpleSearch{
    position: relative;
-   z-index: 1;
+}
+/* Input: remove “in-field icon” spacing; keep clean white box */
+body.skin-timeless #p-search input[type="search"],
+body.skin-timeless #p-search #searchInput{
+  width: min(280px, 26vw);
+  max-width: 100%;
+  padding: .45rem .8rem;     /* no extra right padding now */
+  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;
+  float: right;
+}
+/* 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;
+}
+/* Show ONE compact icon button to the right of the input (outside it) */
+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 any text on the button */
+  text-indent: -9999px;
+  overflow: hidden;
+  /* simple inline SVG magnifier */
+  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 buttons exist, hide the “Go” one and keep “Search” */
+body.skin-timeless #p-search input#searchButton{
+  display: none !important;
+}
+/* Give the input room so the external button doesn't overlap it */
+body.skin-timeless #p-search input[type="search"],
+body.skin-timeless #p-search #searchInput{
+  margin-right: 46px; /* makes space for the icon button */
+}
+/* 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
+   ========================================================= */
+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;
+}
+/* =========================================================
+   Spacing: push content down a bit further under the header
+   ========================================================= */
+body.skin-timeless #mw-content-container{
+  padding-top: 1.9rem;   /* increased */
 }

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Latest revision as of 17:01, 24 January 2026

Navigation

Wiki tools

Page tools