MediaWiki:Bhcvectorbrand-css: Difference between revisions

← Older editNewer edit →
Steve (talk | contribs)
Bureaucrats, Interface administrators, Suppressors, Administrators
1,526 edits
No edit summary
No edit summary
Line 1: Line 1:
/* BHC Vector Brand - presentation layer
/* =========================================================
   Scoped to body.bhc-branding so it only affects the branded preview.
  BHC Vector Brand – presentation layer
*/
   Scoped to body.bhc-branding only
  Header is NON-STICKY and scrolls with the page
  ========================================================= */


:root{--bhc-bar-height:0px;}
/* No sticky spacing needed */
 
body.bhc-branding {
/* Current behaviour: sticky header (position:fixed) */
   padding-top: 0;
body.bhc-branding{padding-top:var(--bhc-bar-height);}
   overflow-x: hidden;
 
/* HEADER BAR */
body.bhc-branding .bhc-sitebar{
   position:static;
  z-index:auto;
  border-top:5px solid rgb(165,174,121);
   border-bottom:10px solid rgb(228,186,149);
  background:rgb(130,156,149);
  color:#fff;
}
}


body.bhc-branding .bhc-sitebar-inner{
/* ---------------------------------------------------------
   max-width:1200px;
  HEADER BAR (scrolls normally)
   margin:0 auto;
  --------------------------------------------------------- */
  padding:12px 16px;
body.bhc-branding .bhc-sitebar {
   display:flex;
   position: static;
  align-items:center;
   border-top: 5px solid rgb(165,174,121);
   gap:12px;
   border-bottom: 10px solid rgb(228,186,149);
   font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
   background: rgb(130,156,149);
   color: #fff;
}
}


body.bhc-branding .bhc-logo{
body.bhc-branding .bhc-sitebar-inner {
   width:56px;
   max-width: 1200px;
   height:56px;
  margin: 0 auto;
   background:url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png) center/contain no-repeat;
   padding: 12px 16px;
   border-radius:6px;
   display: flex;
  align-items: center;
   gap: 12px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
}


body.bhc-branding .bhc-title{
body.bhc-branding .bhc-logo {
   font-size:18px;
   width: 56px;
   letter-spacing:1px;
  height: 56px;
  background: url(/extensions/BHCVectorBrand/resources/images/bhc-logo.png)
              center / contain no-repeat;
   border-radius: 6px;
}
}


body.bhc-branding .bhc-strapline{
body.bhc-branding .bhc-title {
   opacity:.95;
   font-size: 18px;
   margin-top:2px;
   letter-spacing: 1px;
}
}


body.bhc-branding .bhc-test-badge{
body.bhc-branding .bhc-strapline {
   margin-left:auto;
   opacity: .95;
  background:rgba(0,0,0,.18);
   margin-top: 2px;
   border:1px solid rgba(255,255,255,.35);
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.06em;
}
}


/* Vector offsets for sticky header */
body.bhc-branding .bhc-test-badge {
body.bhc-branding{padding-top:0;}
   margin-left: auto;
 
   background: rgba(0,0,0,.18);
/* FOOTER */
   border: 1px solid rgba(255,255,255,.35);
body.bhc-branding .bhc-footer{
   padding: 4px 10px;
   margin-top:2.25rem;
   border-radius: 999px;
   padding:1.5rem 0;
   font-size: 12px;
   border-top:6px solid rgb(228,186,149);
   letter-spacing: .06em;
   background:#f6f6f6;
   color:#222;
   clear:both;
   width:100%;
}
}


body.bhc-branding .bhc-footer-inner{
/* ---------------------------------------------------------
   max-width:1200px;
  FOOTER
   margin:0 auto;
  --------------------------------------------------------- */
   padding:0 16px;
body.bhc-branding .bhc-footer {
   font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
   margin-top: 2.25rem;
   font-size:.95rem;
   padding: 1.5rem 0;
   line-height:1.6;
   border-top: 6px solid rgb(228,186,149);
  background: #f6f6f6;
   color: #222;
   clear: both;
   width: 100%;
}
}


/* Your current “short page” tweak */
body.bhc-branding .bhc-footer-inner {
body.bhc-branding { overflow-x: hidden; }
   max-width: 1200px;
body.bhc-branding .mw-page-container {
  margin: 0 auto;
   min-height: calc(100vh - var(--bhc-bar-height));
  padding: 0 16px;
}
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:

Revision as of 16:46, 23 January 2026

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

  BHC Vector Brand – presentation layer
  Scoped to body.bhc-branding only
  Header is NON-STICKY and scrolls with the page
  ========================================================= */

/* No sticky spacing needed */ body.bhc-branding { 

 padding-top: 0;
 overflow-x: hidden;

}

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

  HEADER BAR (scrolls normally)
  --------------------------------------------------------- */

body.bhc-branding .bhc-sitebar { 

 position: static;
 border-top: 5px solid rgb(165,174,121);
 border-bottom: 10px solid rgb(228,186,149);
 background: rgb(130,156,149);
 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: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

}

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-size: 18px;
 letter-spacing: 1px;

}

body.bhc-branding .bhc-strapline { 

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

}

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

 margin-left: auto;
 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;

}

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

  FOOTER
  --------------------------------------------------------- */

body.bhc-branding .bhc-footer { 

 margin-top: 2.25rem;
 padding: 1.5rem 0;
 border-top: 6px solid rgb(228,186,149);
 background: #f6f6f6;
 color: #222;
 clear: both;
 width: 100%;

}

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

 max-width: 1200px;
 margin: 0 auto;
 padding: 0 16px;
 font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
 font-size:
Retrieved from "https://wiki.bellingham-heritage.org.uk:443/index.php?title=MediaWiki:Bhcvectorbrand-css&oldid=1411"