Template:PatchHighlights/styles.css: Difference between revisions

Latest revision as of 22:42, 7 March 2026

/* SpiritVale Wiki — Template:PatchHighlights/styles.css */
/* Patch highlight cards and responsive grid styles. */
/* -------------------------------------------------------------------------- */
/* Canonical ownership map                                                     */
/* -------------------------------------------------------------------------- */
/* This sheet owns only the PatchHighlights namespace: the wrap, grid, cards, */
/* and any responsive changes that are specific to PatchHighlights behavior.   */
/*                                                                            */
/* It does NOT own sitewide tokens, shared utilities, Citizen shell styling,   */
/* or breakpoint definitions. Those remain in Common.css / Citizen.css.        */
/*                                                                            */
/* Responsive cleanup note: PatchHighlights now uses the canonical breakpoint  */
/* ladder directly. It serves as a clean example of a module moving from       */
/* ad hoc thresholds into the shared responsive vocabulary.                    */
/* -------------------------------------------------------------------------- */
/* Canonical ladder                                                            */
/* -------------------------------------------------------------------------- */
/* - default: <640px                                                           */
/* - sm:      >=640px                                                          */
/* - md:      >=768px                                                          */
/* - lg:      >=1024px                                                         */
/* - xl:      >=1280px                                                         */
/* - 2xl:     >=1536px                                                         */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
/* 1) Layout */
/* -------------------------------------------------------------------------- */

.sv-ph-wrap{
  width:100%;
  max-width:700px;
  margin:1em auto;
}

.sv-ph-head{
  text-align:center;
  font-weight:800;
  padding:10px 12px;
  margin:10px;
}

.sv-ph-pad{
  padding:.75rem;
}

.sv-ph-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  align-items:start;
  width:100%;
  direction:ltr;
}

.sv-ph-empty{
  grid-column:1/-1;
  opacity:.75;
  text-align:center;
  padding:1rem;
  direction:ltr;
}

/* -------------------------------------------------------------------------- */
/* 2) Card content */
/* -------------------------------------------------------------------------- */

.sv-ph-item{
  text-align:left;
  direction:ltr;
  padding:1rem 1.1rem .85rem;
  min-width:0;
  word-break:break-word;
}

.sv-ph-item__title{
  font-size:1.25em;
  font-weight:800;
  line-height:1.2;
  margin:-.1em 0 .35em 0;
}

.sv-ph-item__date{
  margin:.1em 0;
  font-size:.85em;
  font-style:italic;
  opacity:.9;
}

.sv-ph-item__blurb{
  font-size:.92em;
  line-height:1.65em;
  margin:.35em 0 0 0;
  opacity:.95;
}

.sv-ph-item__divider{
  height:1px;
  margin:.35rem 0 .55rem 0;
  background:rgba(0,0,0,0.18);
}

/* -------------------------------------------------------------------------- */
/* 3) Theme */
/* -------------------------------------------------------------------------- */

.skin-theme-clientpref-night .sv-ph-item__divider{
  background:rgba(255,255,255,0.16);
}

@media (prefers-color-scheme:dark){
  .skin-theme-clientpref-os .sv-ph-item__divider{
    background:rgba(255,255,255,0.16);
  }
}

@media (prefers-color-scheme:light){
  .skin-theme-clientpref-os .sv-ph-item__divider{
    background:rgba(0,0,0,0.18);
  }
}

/* -------------------------------------------------------------------------- */
/* 4) Responsive                                                               */
/* -------------------------------------------------------------------------- */
/* default (<640px): single featured card.                                     */
/* sm-md (>=640px): two-up grid with two cards visible.                        */
/* lg+ (>=1024px): three-up grid with three cards visible.                     */

.sv-ph-grid > .sv-ph-item:nth-of-type(n+2){
  display:none;
}

@media (min-width:640px){
  .sv-ph-grid{
    grid-template-columns:repeat(2,1fr);
    direction:rtl;
  }

  .sv-ph-grid > .sv-ph-item:nth-of-type(n+2){
    display:block;
  }

  .sv-ph-grid > .sv-ph-item:nth-of-type(n+3){
    display:none;
  }
}

@media (min-width:1024px){
  .sv-ph-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .sv-ph-grid > .sv-ph-item:nth-of-type(n+3){
    display:block;
  }
}