MediaWiki:Bhcvectorbrand-css: Difference between revisions

Revision as of 13:33, 24 January 2026

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

  BHC Vector Brand – presentation layer (Timeless-first)
  Scoped to body.bhc-branding only
  ========================================================= */

/* Google Fonts (if CSP blocks, fallbacks still apply) */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');

root{

 --bhc-bar-height: 0px; /* set by JS */

}

body.bhc-branding{

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

 overflow-x: hidden;
 font-size: 18px;
 line-height: 1.65;

}

@media (max-width: 720px){

 body.bhc-branding{ font-size: 16.5px; }

}

/* Body text */ body.bhc-branding, body.bhc-branding .mw-body, body.bhc-branding .mw-parser-output{

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

}

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

/* Headings */ body.bhc-branding .mw-parser-output h1, body.bhc-branding .mw-parser-output h2, body.bhc-branding .mw-parser-output h3{

 font-family: var(--bhc-heading-font);
 letter-spacing: .02em;
 color: var(--bhc-maroon);

}

body.bhc-branding .mw-parser-output h1{

 font-size: 2.05rem;
 line-height: 1.15;
 margin: 0.25rem 0 0.75rem;
 font-weight: 700;

}

body.bhc-branding .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.bhc-branding .mw-parser-output h3{

 font-size: 1.25rem;
 line-height: 1.25;
 margin: 1.2rem 0 0.45rem;

}

body.bhc-branding .mw-parser-output h4{

 font-size: 1.1rem;
 line-height: 1.3;

}

/* Paragraph rhythm */ body.bhc-branding .mw-parser-output p{ margin: 0.75rem 0; } body.bhc-branding .mw-parser-output ul, body.bhc-branding .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; } body.bhc-branding .mw-parser-output li{ margin: 0.2rem 0; }

/* Small areas */ body.bhc-branding #toc, body.bhc-branding .toc, body.bhc-branding .mw-normal-catlinks, body.bhc-branding .catlinks, body.bhc-branding .mw-editsection, body.bhc-branding .mw-editsection a, body.bhc-branding .mw-changeslist, body.bhc-branding .mw-footer{

 font-size: 0.95rem;

}

/* Optional accent class for wiki content */ body.bhc-branding .bhc-script{ font-family: var(--bhc-accent-font); }

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

  HEADER BAR (non-sticky; scrolls normally)
  ========================================================= */

body.bhc-branding .bhc-sitebar{

 position: relative;
 z-index: 9999;

 margin: 0;
 width: 100%;

 border-top: 5px solid var(--bhc-olive);
 border-bottom: 10px solid var(--bhc-sand);
 background: var(--bhc-teal);
 color: #fff;

}

body.bhc-branding .bhc-sitebar-inner{

 max-width: 1200px;
 margin: 0 auto;
 padding: 12px 16px;

 display: flex;
 align-items: center;
 gap: 12px;

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

}

body.bhc-branding .bhc-logo{

 width: 56px;
 height: 56px;
 background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
 border-radius: 6px;

}

body.bhc-branding .bhc-title{

 font-family: var(--bhc-heading-font);
 font-size: 18px;
 letter-spacing: 1px;

}

body.bhc-branding .bhc-strapline{

 opacity: .95;
 margin-top: 2px;

}

body.bhc-branding .bhc-test-badge{

 background: rgba(0,0,0,.18);
 border: 1px solid rgba(255,255,255,.35);
 padding: 4px 10px;
 border-radius: 999px;
 font-size: 12px;
 letter-spacing: .06em;
 white-space: nowrap;

}

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

  SEARCH: moved into the BHC header
  (We hide Vector search in Vector only; Timeless uses different markup)
  ========================================================= */

body.bhc-branding.skin-vector #p-search, body.bhc-branding.skin-vector .vector-search-box, body.bhc-branding.skin-vector .vector-search-box-vue{

 display: none !important;

}

body.bhc-branding .bhc-search-slot{

 margin-left: auto;
 display: flex;
 align-items: center;
 gap: .5rem;

}

body.bhc-branding .bhc-search-slot + .bhc-test-badge{ margin-left: 12px; }

body.bhc-branding .bhc-moved-search{

 display: flex;
 align-items: center;
 gap: .5rem;

}

body.bhc-branding .bhc-search-input{

 width: min(340px, 40vw);
 max-width: 100%;
 padding: .45rem .6rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.45);
 background: rgba(255,255,255,.12);
 color: #fff;

}

body.bhc-branding .bhc-search-input::placeholder{ color: rgba(255,255,255,.75); }

body.bhc-branding .bhc-search-submit{

 padding: .45rem .7rem;
 border-radius: 6px;
 border: 1px solid rgba(255,255,255,.35);
 background: rgba(0,0,0,.12);
 color: #fff;

}

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

  FOOTER
  ========================================================= */

body.bhc-branding .bhc-footer{

 margin-top: 2.25rem;
 padding: 1.5rem 0;
 border-top: 6px solid var(--bhc-sand);
 background: #f6f6f6;
 color: #222;
 width: 100%;

}

body.bhc-branding .bhc-footer-inner{

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
 font-family: var(--bhc-body-font);
 font-size: .95rem;
 line-height: 1.6;

}

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

  Hide default site logo (BHC logo lives in the custom header)
  Scoped to branded mode only
  ========================================================= */

body.bhc-branding .mw-logo, body.bhc-branding .mw-wiki-logo, body.bhc-branding #p-logo, body.bhc-branding .vector-site-logo, body.bhc-branding .vector-header-start{

 display: none !important;

}

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Namespaces

More

Page actions

Revision as of 13:33, 24 January 2026

Navigation

Other Heritage Centre Links

WIKI Navigation

WIKI Categories

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
 /* =========================================================
-    BHC Vector Brand – presentation layer
+    BHC Vector Brand – presentation layer (Timeless-first)
     Scoped to body.bhc-branding only
-   Header is NON-STICKY and scrolls with the page
     ========================================================= */
-/* =========================================================
+/* Google Fonts (if CSP blocks, fallbacks still apply) */
-   BHC Vector Brand – Typography + colour palette (starter)
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
-   Scoped to body.bhc-branding only
-   ========================================================= */
-/* Font load (works if your CSP allows Google Fonts). If blocked, fallbacks still work. */
+:root{
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&family=Satisfy&display=swap');
+  --bhc-bar-height: 0px; /* set by JS */
+}
 body.bhc-branding{
-   /* Core palette (matches your current header colours + site accents) */
+   /* Palette */
-   --bhc-teal: rgb(130,156,149);      /* header background */
+   --bhc-teal: rgb(130,156,149);
-   --bhc-olive: rgb(165,174,121);     /* top border */
+   --bhc-olive: rgb(165,174,121);
-   --bhc-sand: rgb(228,186,149);      /* bottom border / divider */
+   --bhc-sand: rgb(228,186,149);
-   --bhc-maroon: #800020;             /* heritage accent (from your user.css) */
+   --bhc-maroon: #800020;
-   --bhc-link: #005DB3;               /* link blue (from your user.css) */
+   --bhc-link: #005DB3;
    --bhc-text: #202020;
@@ Line 26: / Line 24: @@
    --bhc-heading-font: "Roboto Condensed", "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --bhc-accent-font: "Satisfy", cursive;
+  overflow-x: hidden;
+  font-size: 18px;
+  line-height: 1.65;
+}
+@media (max-width: 720px){
+  body.bhc-branding{ font-size: 16.5px; }
 }
@@ Line 37: / Line 43: @@
 /* Links */
-body.bhc-branding a{
+body.bhc-branding a{ color: var(--bhc-link); }
-  color: var(--bhc-link);
+body.bhc-branding a:hover{ text-decoration: underline; }
-}
-body.bhc-branding a:hover{
-  text-decoration: underline;
-}
-/* Headings (heritage feel, closer to main site) */
+/* Headings */
 body.bhc-branding .mw-parser-output h1,
 body.bhc-branding .mw-parser-output h2,
@@ Line 53: / Line 55: @@
 }
-/* Simple “site-like” section divider under H2 */
-body.bhc-branding .mw-parser-output h2{
-  border-bottom: 3px solid var(--bhc-sand);
-  padding-bottom: .25rem;
-}
-/* Optional: make H1 feel more like the site’s hero heading */
-body.bhc-branding .mw-parser-output h1{
-  font-weight: 700;
-}
-/* Optional: a script accent class you can use in wiki content if you want */
-body.bhc-branding .bhc-script{
-  font-family: var(--bhc-accent-font);
-}
-/* =========================================================
-   BHC Vector Brand – Font sizing + readability
-   Scoped to body.bhc-branding only
-   ========================================================= */
-/* 1) Base text size + rhythm */
-body.bhc-branding{
-  font-size: 18px;          /* was ~14–16px in many Vector setups */
-  line-height: 1.65;
-}
-/* Ensure the main content follows the base size */
-body.bhc-branding .mw-parser-output,
-body.bhc-branding .mw-content-ltr,
-body.bhc-branding .mw-content-rtl{
-  font-size: 1rem;
-  line-height: 1.65;
-}
-/* 2) Heading scale (keeps “wiki feel”, but clearer hierarchy) */
 body.bhc-branding .mw-parser-output h1{
    font-size: 2.05rem;
    line-height: 1.15;
-   margin-top: 0.25rem;
+   margin: 0.25rem 0 0.75rem;
-   margin-bottom: 0.75rem;
+   font-weight: 700;
 }
@@ Line 99: / Line 65: @@
    font-size: 1.55rem;
    line-height: 1.2;
-   margin-top: 1.6rem;
+   margin: 1.6rem 0 0.6rem;
-   margin-bottom: 0.6rem;
+  border-bottom: 3px solid var(--bhc-sand);
+   padding-bottom: .25rem;
 }
@@ Line 106: / Line 73: @@
    font-size: 1.25rem;
    line-height: 1.25;
-   margin-top: 1.2rem;
+   margin: 1.2rem 0 0.45rem;
-  margin-bottom: 0.45rem;
 }
-/* Optional: keep lower headings tidy */
 body.bhc-branding .mw-parser-output h4{
    font-size: 1.1rem;
@@ Line 116: / Line 81: @@
 }
-/* 3) Common “small” areas: make them slightly less tiny */
+/* Paragraph rhythm */
+body.bhc-branding .mw-parser-output p{ margin: 0.75rem 0; }
+body.bhc-branding .mw-parser-output ul,
+body.bhc-branding .mw-parser-output ol{ margin: 0.6rem 0 0.9rem 1.25rem; }
+body.bhc-branding .mw-parser-output li{ margin: 0.2rem 0; }
+/* Small areas */
 body.bhc-branding #toc,
 body.bhc-branding .toc,
@@ Line 128: / Line 99: @@
 }
-/* 4) Tighten paragraph spacing slightly (readable but not airy) */
+/* Optional accent class for wiki content */
-body.bhc-branding .mw-parser-output p{
+body.bhc-branding .bhc-script{ font-family: var(--bhc-accent-font); }
-  margin: 0.75rem 0;
-}
-/* 5) Lists: slightly more breathing room */
+/* =========================================================
-body.bhc-branding .mw-parser-output ul,
+   HEADER BAR (non-sticky; scrolls normally)
-body.bhc-branding .mw-parser-output ol{
+   ========================================================= */
-  margin: 0.6rem 0 0.9rem 1.25rem;
+body.bhc-branding .bhc-sitebar{
-}
+   position: relative;
-body.bhc-branding .mw-parser-output li{
+   z-index: 9999;
-  margin: 0.2rem 0;
-}
-@media (max-width: 720px){
-  body.bhc-branding{ font-size: 16.5px; }
-}
-:root { --bhc-bar-height: 0px; }
-/* Base */
-body.bhc-branding{
-   padding-top: 0;
-   overflow-x: hidden;
-}
-/* ---------------------------------------------------------
-   HEADER BAR (scrolls normally)
-   --------------------------------------------------------- */
-body.bhc-branding .bhc-sitebar{
-  position: static; /* non-sticky */
    margin: 0;
-  border-top: 5px solid rgb(165,174,121);
-  border-bottom: 10px solid rgb(228,186,149);
-  background: rgb(130,156,149);
-  color: #fff;
    width: 100%;
-   /* keep above Vector chrome */
+   border-top: 5px solid var(--bhc-olive);
-   position: relative !important;
+   border-bottom: 10px solid var(--bhc-sand);
-   z-index: 999999 !important;
+   background: var(--bhc-teal);
+  color: #fff;
 }
@@ Line 176: / Line 122: @@
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
-   font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+   font-family: var(--bhc-body-font);
 }
@@ Line 190: / Line 138: @@
 body.bhc-branding .bhc-title{
+  font-family: var(--bhc-heading-font);
    font-size: 18px;
    letter-spacing: 1px;
@@ Line 209: / Line 158: @@
 }
-/* ---------------------------------------------------------
+/* =========================================================
-   Push the page down below BHC bar + Vector clearance
-   (You tested ~10rem as "perfect")
-   --------------------------------------------------------- */
-/* Bulletproof “push page down” spacer.
-   Creates real flow space below the BHC header. */
-body.bhc-branding #content::before{
-  content: "";
-  display: block;
-  /* height: calc(var(--bhc-bar-height) + clamp(2rem, 4vh, 6rem));*/
-  height: calc(var(--bhc-bar-height) + 10rem));
-}
-/* ---------------------------------------------------------
-   Vector sticky UI should sit BELOW the BHC header
-   --------------------------------------------------------- */
-body.bhc-branding .vector-sticky-header,
-body.bhc-branding .vector-page-toolbar{
-  top: var(--bhc-bar-height) !important;
-}
-body.bhc-branding .vector-header-container,
-body.bhc-branding .mw-header,
-body.bhc-branding #mw-head{
-  top: var(--bhc-bar-height) !important;
-}
-/* ---------------------------------------------------------
     SEARCH: moved into the BHC header
-    --------------------------------------------------------- */
+    (We hide Vector search in Vector only; Timeless uses different markup)
+   ========================================================= */
-body.bhc-branding #p-search,
+body.bhc-branding.skin-vector #p-search,
-body.bhc-branding .vector-search-box,
+body.bhc-branding.skin-vector .vector-search-box,
-body.bhc-branding .vector-search-box-vue{
+body.bhc-branding.skin-vector .vector-search-box-vue{
    display: none !important;
 }
@@ Line 255: / Line 175: @@
 }
-body.bhc-branding .bhc-search-slot + .bhc-test-badge{
+body.bhc-branding .bhc-search-slot + .bhc-test-badge{ margin-left: 12px; }
-  margin-left: 12px;
-}
 body.bhc-branding .bhc-moved-search{
@@ Line 275: / Line 193: @@
 }
-body.bhc-branding .bhc-search-input::placeholder{
+body.bhc-branding .bhc-search-input::placeholder{ color: rgba(255,255,255,.75); }
-  color: rgba(255,255,255,.75);
-}
 body.bhc-branding .bhc-search-submit{
@@ Line 287: / Line 203: @@
 }
-/* ---------------------------------------------------------
+/* =========================================================
     FOOTER
-    --------------------------------------------------------- */
+    ========================================================= */
 body.bhc-branding .bhc-footer{
    margin-top: 2.25rem;
    padding: 1.5rem 0;
-   border-top: 6px solid rgb(228,186,149);
+   border-top: 6px solid var(--bhc-sand);
    background: #f6f6f6;
    color: #222;
-  clear: both;
    width: 100%;
 }
@@ Line 305: / Line 219: @@
    margin: 0 auto;
    padding: 0 16px;
-   font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
+   font-family: var(--bhc-body-font);
    font-size: .95rem;
    line-height: 1.6;
@@ Line 311: / Line 225: @@
 /* =========================================================
-    Hide default Vector / MediaWiki site logo
+    Hide default site logo (BHC logo lives in the custom header)
-   (BHC logo lives in the custom header)
+   Scoped to branded mode only
     ========================================================= */
-/* Legacy + new Vector variants */
 body.bhc-branding .mw-logo,
 body.bhc-branding .mw-wiki-logo,
+body.bhc-branding #p-logo,
 body.bhc-branding .vector-site-logo,
-body.bhc-branding .vector-header-start {
+body.bhc-branding .vector-header-start{
    display: none !important;
-}
-/* =========================================================
-   Footer should visually win over the sidebar on short pages
-   (CSS-only stabiliser; avoids fighting Vector layout)
-   ========================================================= */
-/* Ensure the footer forms a solid mask */
-body.bhc-branding .bhc-footer{
-  background: #f6f6f6;
-  position: relative;
-  z-index: 9999;
-}
-/* Keep sidebar in a lower stacking layer */
-body.bhc-branding .vector-sidebar,
-body.bhc-branding .vector-sidebar-container,
-body.bhc-branding .mw-sidebar{
-  position: relative;
-  z-index: 1;
-}
-body.bhc-branding #mw-navigation{
-  z-index: 1;
-}
-body.bhc-branding .bhc-footer{
-  z-index: 2;
-  position: relative;
-}
-/* =========================================================
-   FIX: Make Vector sidebar (#mw-panel) participate in layout
-   so the footer can sit below it on short pages.
-   Branded mode only.
-   ========================================================= */
-/* 1) Return sidebar panel to normal flow */
-body.bhc-branding #mw-navigation #mw-panel{
-  position: static !important;
-  top: auto !important;
-  left: auto !important;
-  right: auto !important;
-  bottom: auto !important;
-  height: auto !important;
-  overflow: visible !important;
-}
-/* 2) Make navigation + content behave like two columns (grid) */
-body.bhc-branding .mw-page-container{
-  display: grid;
-  grid-template-columns: 260px 1fr; /* adjust width later if desired */
-  column-gap: 1.25rem;
-  align-items: start;
-}
-/* Put navigation in column 1 */
-body.bhc-branding #mw-navigation{
-  grid-column: 1;
-  align-self: start;
-}
-/* Put content in column 2 */
-body.bhc-branding #content{
-  grid-column: 2;
-  min-width: 0; /* prevents overflow */
-}
-/* 3) Footer spans both columns and clears everything */
-body.bhc-branding .bhc-footer{
-  grid-column: 1 / -1;
-  clear: both;
 }

Anonymous

Search

MediaWiki:Bhcvectorbrand-css: Difference between revisions

Revision as of 13:33, 24 January 2026

Navigation

Wiki tools

Page tools