MediaWiki:Common.css

From Games Day
Revision as of 12:51, 5 September 2026 by EvilGM (talk | contribs) (Organize Games Day into self-contained campaign sections; preserve existing lore and links.)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* Games Day campaign organization — scoped, no JavaScript required. */
.gd-home,.gd-article { --gd-ink:#172c3a; --gd-muted:#566673; --gd-accent:#8a552c; --gd-line:#d8dfe3; color:var(--gd-ink); }
.gd-home a,.gd-article a,.gd-context a { text-decoration:none; }
.gd-home a:hover,.gd-article a:hover,.gd-context a:hover { text-decoration:underline; }
.gd-kicker { color:#8a552c; font:700 .76rem/1.5 sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.gd-hero { display:flex; align-items:center; gap:2rem; padding:1.5rem 0 2rem; margin-bottom:1rem; border-bottom:1px solid #d8dfe3; }
.gd-hero-copy { flex:1; min-width:0; }
.gd-hero h1 { font:normal 2.7rem/1.12 Georgia,serif; border:0; margin:.4rem 0 1rem; }
.gd-hero p { font-size:1.08rem; line-height:1.65; max-width:65ch; }
.gd-hero-art { flex:0 0 180px; }
.gd-hero-art img { max-width:100%; height:auto; }
.gd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:1.3rem 0 2rem; clear:both; }
.gd-card { border:1px solid #d8dfe3; border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 2px 8px #172c3a0a; }
.gd-card-art { height:155px; overflow:hidden; background:#e9edef; }
.gd-card-art img { width:100%; height:155px; object-fit:cover; display:block; }
.gd-card-art a,.gd-card-art span { display:block; }
.gd-card-copy { padding:1.1rem 1.2rem 1.2rem; }
.gd-card h2 { font:normal 1.45rem/1.25 Georgia,serif; border:0; margin:0 0 .6rem; padding:0; }
.gd-card p { margin:.5rem 0 1rem; color:#566673; font-size:.93rem; line-height:1.5; }
.gd-card .gd-enter a { font-weight:700; font-size:.9rem; }
.gd-context { margin:.5rem 0 1.3rem; border-bottom:1px solid #d8dfe3; padding-bottom:1rem; }
.gd-breadcrumb { font-size:.84rem; line-height:1.7; color:#667683; margin-bottom:.8rem; }
.gd-breadcrumb span { margin:0 .45rem; color:#8b969e; }
.gd-context-title { font:700 .78rem/1.5 sans-serif; letter-spacing:.09em; text-transform:uppercase; margin-bottom:.55rem; color:#566673; }
.gd-campaign-menu { display:flex; flex-wrap:wrap; gap:.4rem; }
.gd-campaign-menu a { display:inline-block; padding:.45rem .7rem; background:#f1f4f5; border-radius:4px; color:#264f67; font-size:.9rem; }
.gd-campaign-menu a:hover { background:#e4edf2; }
.gd-article { line-height:1.7; font-size:1rem; }
.gd-article h1.gd-page-title { font:normal 2.35rem/1.2 Georgia,serif; border:0; margin:.6rem 0 1.1rem; overflow-wrap:anywhere; }
.gd-article h2 { margin-top:1.7rem; font-size:1.55rem; }
.gd-article h3 { margin-top:1.3rem; }
.gd-article p { margin:.7rem 0 1rem; }
.gd-article img { max-width:100%; height:auto; }
.gd-article .thumb { max-width:100%; }
.gd-article .thumbinner { max-width:100%; box-sizing:border-box; }
.gd-article .center { max-width:100%; }
.gd-article pre { white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; box-sizing:border-box; }
.gd-article .wikitable { max-width:100%; }
.gd-facts { padding:.8rem 1rem; background:#f3f6f7; border-left:3px solid #8a552c; margin:0 0 1.4rem; font-size:.94rem; }
.gd-facts p { margin:.2rem 0; }
.gd-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.2rem 0; }
.gd-panel { border:1px solid #d8dfe3; border-radius:6px; padding:1.1rem 1.3rem; background:#fff; }
.gd-panel h2,.gd-panel h3 { border:0; margin:0 0 .7rem; padding:0; }
.gd-panel ul { margin:.3rem 0 .3rem 1.2rem; }
.gd-panel li { margin:.35rem 0; }
.gd-section-links { columns:2; column-gap:2rem; }
.gd-section-links li { break-inside:avoid; margin:.45rem 0; }
.gd-article-footer { clear:both; border-top:1px solid #d8dfe3; margin-top:2rem; padding:1rem 0; font-size:.9rem; }
.gd-sequence { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border:1px solid #d8dfe3; border-radius:5px; padding:.8rem 1rem; margin:1.5rem 0; font-size:.9rem; }
.gd-infobox { float:right; clear:right; width:285px; max-width:100%; border:1px solid #d8dfe3; border-radius:5px; background:#f7f8f9; margin:0 0 1.2rem 1.4rem; padding:.7rem; font-size:.9rem; }
.gd-infobox table { width:100%; border-collapse:collapse; }
.gd-infobox caption { font:700 1.1rem/1.4 Georgia,serif; padding:.3rem 0 .7rem; }
.gd-infobox th,.gd-infobox td { padding:.3rem .4rem; border-bottom:1px solid #e2e7ea; vertical-align:top; text-align:left; }
.gd-infobox th { width:36%; color:#566673; }
.gd-infobox tr:has(td:empty) { display:none; }
.gd-note { background:#f8f5ec; border-left:3px solid #b49a61; padding:.8rem 1rem; margin:1rem 0; }
@supports selector(body:has(.gd-context)) {
 body:has(.gd-context) #firstHeading,body:has(.gd-home) #firstHeading { display:none; }
 [id^="p-gd-"] { display:none; }
 body:has(.gd-context-archimedes) #p-gd-archimedes,
 body:has(.gd-context-star-wars) #p-gd-star-wars,
 body:has(.gd-context-vyrras-nest) #p-gd-vyrras-nest,
 body:has(.gd-context-lower-decks) #p-gd-lower-decks,
 body:has(.gd-context-age-of-ashes) #p-gd-age-of-ashes,
 body:has(.gd-context-polycism) #p-gd-polycism,
 body:has(.gd-context-lord-of-the-rings) #p-gd-lord-of-the-rings,
 body:has(.gd-context-chaos-beneath-the-stones) #p-gd-chaos-beneath-the-stones,
 body:has(.gd-context-those-old-scientists) #p-gd-those-old-scientists { display:block; }
}
@media(max-width:1100px) { .gd-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) {
 .gd-grid,.gd-catalog { grid-template-columns:1fr; }
 .gd-hero { gap:1rem; align-items:flex-start; }
 .gd-hero-art { flex-basis:95px; }
 .gd-hero h1 { font-size:2rem; }
 .gd-article h1.gd-page-title { font-size:1.9rem; }
 .gd-section-links { columns:1; }
 .gd-infobox { float:none; margin:1rem 0; width:auto; }
 .gd-campaign-menu a { padding:.55rem .65rem; }
 .gd-article .thumb { float:none; margin:1rem auto; }
}