Difference between revisions of "MediaWiki:Common.css"

Revision as of 23:31, 10 October 2025

/*****************************************************
 *  HOLDFAST WIKI – MODERN THEME  (2025-10-10)
 *  – Mobile-first, responsive banner & sidebar
 *  – Vector 2010 + Vector 2022 + Minerva compatible
 *****************************************************/

/* ---------------------------------------------------
   0.  GLOBAL TOKENS
   --------------------------------------------------- */
:root{
  /* spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: 1rem;

  /* widths (desktop) */
  --sidebar-w: 200px;        /* desktop off-canvas width */
  --banner-h: 300px;         /* height of top gradient band */

  /* fonts */
  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size-base: 1rem;          /* 16 px */
  --font-size-nav: .6875rem;       /* 11 px */

  /* colours */
  --color-parchment: #E1DCCE;
  --color-sidebar-top: #2F2D2B;
  --color-sidebar-bot: #1E1E1D;
  --color-text: #16181D;
  --color-link: #1666FF;
  --color-link-visited: #3b46ff;
}

/* ---------------------------------------------------
   1.  BASE RESET  (small & safe)
   --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;height:auto;}

/* ---------------------------------------------------
   2.  BODY + BACKGROUND STACK
   --------------------------------------------------- */
body{
  margin:0;
  background:var(--color-parchment);
  color:var(--color-text);
  font:400 var(--font-size-base)/1.55 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Desktop / tablet: show banner + sidebar gradients */
@media (min-width:720px){
  body{
    background:
      /* 1) banner */
      url("/Special:FilePath/BannerImage.png") left top/40vw no-repeat,
      /* 2) dark top strip (full-width) */
      linear-gradient(to right,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/100% var(--banner-h) no-repeat,
      /* 3) vertical sidebar column */
      linear-gradient(to bottom,var(--color-sidebar-top)0%,var(--color-sidebar-bot)100%)
        left top/var(--sidebar-w) 100% repeat-y,
      /* 4) parchment fill */
      var(--color-parchment);
    background-attachment:scroll; /* avoids iOS repaint jank */
  }
}

/* Keep site chrome transparent so bg shows through */
#mw-page-base,#mw-head-base,#mw-head,
.vector-header-container,
#mw-panel,#column-one,.mw-sidebar{background:transparent!important;}

/* ---------------------------------------------------
   3.  SIDEBAR (MW panel) – off-canvas on mobile
   --------------------------------------------------- */
body.skin-vector #mw-panel,
body.skin-vector-2022 #mw-panel,
body.skin-vector #column-one{/* legacy Vector alias */
  position:fixed;
  top:0;left:-100%;              /* hide out of view */
  width:var(--sidebar-w);
  padding:var(--space-3) var(--space-2) var(--space-3);
  background:transparent;
  color:#EEEDEB;
  transition:left .3s ease;
  z-index:1000;
}

body.menu-open #mw-panel,
body.menu-open #column-one{left:0;}     /* toggled via JS */

/* Portal headings */
#mw-panel .portal .portal-title,
#mw-panel .vector-menu-heading,
#column-one h3{
  background:#63635B;
  color:#EEEDEB;
  font:700 var(--font-size-nav)/1.4 var(--font-sans);
  padding:5px 8px;
  margin:var(--space-2) var(--space-1) var(--space-1);
  border:0;
}

/* Lists & links */
#mw-panel .vector-menu-content-list,
#column-one .pBody ul{list-style:none;padding:0;margin:var(--space-2) 0 0;}
#mw-panel .vector-menu-content-list>li,
#column-one .pBody ul li{padding:3px 6px;line-height:1.35;}

#mw-panel a,#column-one a{
  display:block;
  padding:2px 4px;
  color:#EEEDEB!important;
  text-decoration:none;
  font:400 var(--font-size-nav)/1.35 var(--font-sans);
}
#mw-panel a:hover,#column-one a:hover{background:rgba(255,255,255,.08);}

/* Call-out button (Discord) */
#mw-panel a.external[href*="discord"]{
  background:#5A65EA;color:#fff!important;
  padding:8px 10px;margin:var(--space-2) 0 var(--space-3);
  border-radius:4px;border:1px solid rgba(0,0,0,.15);
  font:700 .75rem/1 var(--font-sans);
}
#mw-panel a.external[href*="discord"]:hover{background:#545DD9;}

/* ---------------------------------------------------
   4.  LOGO
   --------------------------------------------------- */
#p-logo a,.mw-wiki-logo{
  background:url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png")
             center/contain no-repeat!important;
  width:120px;height:120px;display:block;
}
#p-logo-text,.mw-wiki-logo-text{display:none!important;}

/* ---------------------------------------------------
   5.  CONTENT COLUMN  (offset only on ≥720 px)
   --------------------------------------------------- */
#content,.mw-body,.mw-content-container,
.mw-workspace-container{
  background:var(--color-parchment)!important;
  position:relative;
  z-index:1;
  padding:0 var(--space-3) var(--space-3);
}

@media (min-width:720px){
  #content,.mw-body,.mw-content-container{
    margin-left:calc(var(--sidebar-w) + var(--space-3));
  }
}

/* ---------------------------------------------------
   6.  TYPOGRAPHY
   --------------------------------------------------- */
.mw-parser-output p,
.mw-parser-output li,
.mw-parser-output td,
.mw-parser-output th{
  letter-spacing:.2px;
}

.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5{
  font-family:var(--font-sans);
  font-weight:600;letter-spacing:.3px;margin:var(--space-3) 0 var(--space-2);
}

#content a{color:var(--color-link);text-decoration-thickness:2px;}
#content a:visited{color:var(--color-link-visited);}
#content a:hover{color:#0046ff;}

code,pre,.mw-code{font-family:"Courier New",Courier,monospace!important;}

/* ---------------------------------------------------
   7.  PAGE TABS ALIGNMENT (Vector skins, desktop only)
   --------------------------------------------------- */
@media (min-width:720px){
  /* legacy Vector */
  #mw-head #left-navigation,
  #mw-head #right-navigation{
    position:relative;
    left:calc(var(--sidebar-w) + var(--space-3));
    margin-left:0!important;
  }
  #mw-head #p-views,
  #mw-head .vectorTabs,
  #mw-head .vector-menu-tabs{margin-left:0!important;}

  /* Vector 2022 */
  .vector-header-container .vector-page-toolbar,
  .vector-header-container .vector-menu-tabs{
    position:relative;
    left:calc(var(--sidebar-w) + var(--space-3));
    margin-left:0!important;
    z-index:5; /* above banner */
  }
}

/* ---------------------------------------------------
   8.  MISC UTILITIES
   --------------------------------------------------- */
/* Optional thin group divider */
#mw-panel .portal,#column-one .portlet{
  margin-top:var(--space-2);
  padding-top:var(--space-2);
  border-top:1px solid rgba(217,215,209,.12);
}
#mw-panel .portal:first-child,
#column-one .portlet:first-child{border-top:0;margin-top:0;padding-top:0;}

/* ---------------------------------------------------
   A.  Keep sidebar ON-SCREEN for desktop / tablets
   --------------------------------------------------- */
@media (min-width: 720px){
  body.skin-vector #mw-panel,
  body.skin-vector-2022 #mw-panel,
  body.skin-vector #column-one{       /* legacy Vector alias */
    left: 0;                /* instead of -100% */
  }
}

/* ---------------------------------------------------
   B.  Make sure the logo shows in BOTH Vector skins
   --------------------------------------------------- */
#p-logo a,             /* Vector 2010 / legacy */
.mw-wiki-logo,         /* generic */
.vector-header-logo{   /* Vector 2022 */
  background: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png")
              center/contain no-repeat !important;
  width: 150px;                 /* revert to your original size */
  height: 150px;
  display: block;
  margin: var(--space-3) auto;  /* vertical breathing room */
}

/*****************************************************
 *  SIDEBAR “HERO” REVAMP  (2025-10-10)
 *  – gradient column + photo header + centred logo
 *****************************************************/

/* ----- CONFIG ----- */
:root{
  --hf-sidebar-hero-h: 210px;                         /* visible hero height */
}

/* ----- SIDEBAR BACKGROUND & LAYOUT ----- */
body.skin-vector #mw-panel,
body.skin-vector-2022 #mw-panel,
body.skin-vector #column-one{
  /* darker, more opaque gradient */
  background: linear-gradient(180deg,#2F2D2B 0%,#1E1E1D 100%) !important;

  /* give the header photo some breathing room */
  padding-top: calc(var(--hf-sidebar-hero-h) + var(--space-3));
  overflow: hidden;       /* hide photo bleed for very long pages */
}

/* ----- HERO PHOTO (TOP OF SIDEBAR) ----- */
body.skin-vector #mw-panel::before,
body.skin-vector-2022 #mw-panel::before,
body.skin-vector #column-one::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: var(--hf-sidebar-hero-h);
  background: url("/Special:FilePath/Sidebar-Hero.jpg") center/cover no-repeat;
  z-index: -1;            /* sits behind links & headings */
  filter: brightness(.82);/* subtle darken so white logo pops */
}

/* ----- COMPASS LOGO, CENTRED WITHIN PHOTO ----- */
#p-logo a,                 /* Vector 2010 / legacy */
.mw-wiki-logo,             /* fallback */
.vector-header-logo{       /* Vector 2022 */
  position: absolute;
  top: calc(var(--hf-sidebar-hero-h) - 120px);  /* vertically centres 150-px logo */
  left: 50%;
  width: 150px; height: 150px;
  margin-left: -75px;      /* half of width – centres horizontally */
  background: url("/Special:FilePath/Holdfast_Logo_White_Gold_Compass.png")
              center/contain no-repeat !important;
  display: block !important;
}

/* ----- DISCORD BUTTON – FULL-WIDTH & SPACED ----- */
#mw-panel a.external[href*="discord"]{
  display:block;
  text-align:center;
  margin: var(--space-3) 0 var(--space-3);
  width:100%;
}

/* ----- SECTION HEADINGS – FLUSH LEFT (NO INDENT) ----- */
#mw-panel .portal .portal-title,
#column-one h3{
  margin-left:0;
  margin-right:0;
}