MediaWiki:Common.css: Difference between revisions

Revision as of 17:22, 26 January 2026

/* EJ Fox Archive — Tuftian Utilitarian Edition */

*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* Typography — ET Book / Georgia feel */
  --font-body: 'Georgia', 'Times New Roman', 'Droid Serif', 'Times', 'Source Serif Pro', serif;
  --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Colors — warm, low-contrast, easy on eyes */
  --bg: #fffff8;              /* Tufte cream */
  --bg-alt: #f7f7f0;
  --fg: #111111;              /* near-black */
  --fg-secondary: #454545;
  --fg-muted: #6b6b6b;
  --fg-faint: #999999;
  --border: #ddd;
  --border-light: #eee;
  --accent: #a00000;          /* deep red for links/emphasis */

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  /* Measure — optimal line length */
  --max-w: 60ch;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151515;
    --bg-alt: #1c1c1c;
    --fg: #e8e8e8;
    --fg-secondary: #b0b0b0;
    --fg-muted: #808080;
    --fg-faint: #606060;
    --border: #333;
    --border-light: #282828;
    --accent: #ff6b6b;
  }
}

/* === BASE === */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;        /* 17px — slightly larger for readability */
  line-height: 1.7;            /* generous leading */
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'onum' 1;
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body { font-weight: 350; }
}

/* === LAYOUT === */
#p-logo, .mw-wiki-logo, #footer, .printfooter,
#f-poweredbyico, #f-copyrightico, .mw-jump-link, #jump-to-nav {
  display: none;
}

.mw-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-lg) var(--space-xl);
  background: transparent;
  border: none;
}

#content {
  margin-left: 0;
  background: transparent;
  border: none;
}

/* === TYPOGRAPHY — Clear hierarchy === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--fg);
  margin-top: 0;
}

.mw-body h1, .firstHeading {
  font-size: 2.25rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-sm);
  border: none;
}

.mw-body h2 {
  font-size: 1.375rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin: var(--space-2xl) 0 var(--space-md);
  padding: 0;
  border: none;                /* Remove dotted line — Tufte uses space not lines */
}

.mw-body h3 {
  font-size: 1.125rem;
  font-weight: 400;
  font-style: italic;
  color: var(--fg-secondary);
  margin: var(--space-xl) 0 var(--space-sm);
}

.mw-body h4 {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  margin: var(--space-lg) 0 var(--space-sm);
}

.mw-body p {
  margin: 0 0 var(--space-md);
  line-height: 1.7;
  hanging-punctuation: first last;
}

.mw-body p + p {
  text-indent: 1.5em;          /* Traditional paragraph indent */
  margin-top: 0;
}

/* === LINKS — Subtle, informative === */
.mw-body a {
  color: var(--fg);
  text-decoration: none;
  background: linear-gradient(var(--bg), var(--bg)),
              linear-gradient(var(--bg), var(--bg)),
              linear-gradient(var(--accent), var(--accent));
  background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-position: 0 93%, 100% 93%, 0 93%;
  text-shadow: 0.03em 0 var(--bg), -0.03em 0 var(--bg),
               0 0.03em var(--bg), 0 -0.03em var(--bg);
}

.mw-body a:hover {
  color: var(--accent);
  background: none;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

.mw-body a.new {
  color: var(--fg-muted);
  background: none;
  text-shadow: none;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--fg-faint);
}

.mw-body a.new:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.mw-body a.external::after {
  content: " °";
  font-size: 0.7em;
  color: var(--fg-faint);
  vertical-align: super;
}

/* === CODE — Clean, not heavy === */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: transparent;
  border: none;
  color: var(--fg-secondary);
  padding: 0;
}

pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  background: var(--bg-alt);
  border: none;
  border-left: 3px solid var(--border);
  border-radius: 0;
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  font-size: inherit;
  color: var(--fg);
}

/* === TABLES — Minimal, rely on alignment === */
.wikitable {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  margin: var(--space-lg) 0;
  border: none;
}

.wikitable th, .wikitable td {
  border: none;
  border-bottom: 1px solid var(--border-light);
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  text-align: left;
  vertical-align: top;
}

.wikitable th {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  border-bottom: 2px solid var(--border);
  padding-bottom: var(--space-sm);
}

.wikitable tr:last-child td {
  border-bottom: none;
}

.wikitable tbody tr:hover {
  background: var(--bg-alt);
}

/* === LISTS — Proper spacing === */
.mw-body ul, .mw-body ol {
  margin: var(--space-md) 0;
  padding-left: 1.25rem;
}

.mw-body li {
  margin-bottom: var(--space-xs);
  padding-left: var(--space-xs);
}

.mw-body li::marker {
  color: var(--fg-muted);
}

/* Nested lists */
.mw-body li ul, .mw-body li ol {
  margin: var(--space-xs) 0;
}

/* === BLOCKQUOTES === */
.mw-body blockquote {
  margin: var(--space-lg) 0 var(--space-lg) var(--space-lg);
  padding: 0;
  border: none;
  font-style: italic;
  color: var(--fg-secondary);
}

/* === TOC — Compact reference === */
#toc, .toc {
  display: inline-block;
  background: transparent;
  border: none;
  border-left: 2px solid var(--border);
  padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
  font-size: 0.8125rem;
  max-width: 280px;
}

.toctitle h2 {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  margin: 0 0 var(--space-sm);
  border: none;
  padding: 0;
}

.toc ul {
  margin: 0;
  padding-left: var(--space-md);
  list-style: none;
}

.toc li {
  margin-bottom: 2px;
}

.tocnumber {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  color: var(--fg-faint);
  margin-right: var(--space-xs);
}

.toctext {
  color: var(--fg-secondary);
}

/* === META UI — Small caps labels === */
#p-views, #p-cactions {
  max-width: var(--max-w);
  margin: 0 auto var(--space-sm);
  padding: 0 var(--space-lg);
  background: transparent;
  border: none;
}

#p-views ul, #p-cactions ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

#p-views a, #p-cactions a {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  background: none;
  text-shadow: none;
  text-decoration: none;
  border: none;
}

#p-views a:hover, #p-cactions a:hover {
  color: var(--fg-muted);
  text-decoration: none;
}

.mw-editsection {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin-left: var(--space-sm);
}

.mw-editsection:hover {
  color: var(--fg-muted);
}

.mw-editsection a {
  background: none !important;
  text-shadow: none !important;
  color: inherit;
  text-decoration: none;
}

/* === CATEGORIES — Endmatter === */
#catlinks {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
}

#catlinks a {
  color: var(--fg-muted);
  background: none;
  text-shadow: none;
  text-decoration: none;
}

#catlinks a:hover {
  color: var(--fg-secondary);
  text-decoration: underline;
}

/* === SEARCH — Utilitarian === */
#p-search {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

#p-search h3 {
  display: none;
}

#p-search form {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

#searchInput {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--space-xs) 0;
  color: var(--fg);
  width: 100%;
  max-width: 240px;
  transition: border-color 150ms ease;
}

#searchInput:focus {
  outline: none;
  border-color: var(--fg-muted);
}

#searchInput::placeholder {
  color: var(--fg-faint);
  font-style: italic;
}

#searchButton, .searchButton {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  padding: var(--space-xs) var(--space-sm);
  color: var(--fg-muted);
  cursor: pointer;
  transition: color 150ms ease;
}

#searchButton:hover, .searchButton:hover {
  color: var(--fg);
}

/* === INFOBOX — Sidenote style === */
.infobox {
  float: right;
  width: 200px;
  margin: 0 0 var(--space-md) var(--space-lg);
  padding: 0;
  border: none;
  border-left: 2px solid var(--border);
  padding-left: var(--space-md);
  background: transparent;
  font-size: 0.8125rem;
}

.infobox th {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-align: left;
  padding: var(--space-xs) 0;
}

.infobox td {
  padding: var(--space-xs) 0;
  color: var(--fg-secondary);
}

/* === SUBTITLE/META === */
#siteSub, #contentSub, .mw-content-subtitle {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  margin-bottom: var(--space-md);
}

/* === SPECIAL PAGES === */
.ns-special .mw-body {
  line-height: 1.5;
}

.mw-changeslist-line {
  margin-bottom: var(--space-xs);
  line-height: 1.4;
}

.mw-changeslist-time {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
}

.mw-diff-bytes {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.comment {
  font-style: italic;
  color: var(--fg-muted);
  margin-left: var(--space-xs);
}

/* === VECTOR SKIN CLEANUP === */
.vector-page-titlebar,
.vector-page-toolbar,
.vector-menu-tabs,
.vector-menu-content,
#p-views, #p-namespaces, #p-cactions,
.mw-portlet, .vector-tabs, .vector-menu {
  border: none;
  box-shadow: none;
}

.vector-menu-tabs li, .vector-tabs li, #p-views li {
  border: none;
  background: transparent;
}

/* === NAVBOXES === */
.wikitable[style*="margin-top"] {
  font-size: 0.75rem;
  margin-top: var(--space-xl);
}

/* Hide on Main Page */
body.page-Main_Page #catlinks { display: none; }

/* ============================================
   MOBILE — Responsive adjustments
   ============================================ */
@media (max-width: 768px) {
  :root {
    --space-2xl: 2.5rem;
  }

  body {
    font-size: 1rem;
  }

  .mw-body {
    padding: var(--space-xl) var(--space-md) var(--space-lg);
    max-width: 100vw;
    overflow-x: hidden;
  }

  .mw-body h1 { font-size: 1.75rem; }
  .mw-body h2 { font-size: 1.25rem; }

  .mw-body p + p {
    text-indent: 0;            /* No indent on mobile */
  }

  #p-search {
    padding: var(--space-sm) var(--space-md);
  }

  #searchInput {
    max-width: 100%;
  }

  #p-views, #p-cactions {
    padding: 0 var(--space-md);
  }

  #p-views ul, #p-cactions ul {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  #toc, .toc {
    max-width: 100%;
    display: block;
  }

  pre {
    max-width: calc(100vw - var(--space-lg));
    font-size: 0.75rem;
    padding: var(--space-sm) var(--space-md);
    border-left-width: 2px;
  }

  code {
    word-break: break-all;
  }

  .wikitable {
    display: block;
    max-width: calc(100vw - var(--space-lg));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .infobox {
    float: none;
    width: 100%;
    margin: var(--space-md) 0;
    border-left: none;
    border-top: 2px solid var(--border);
    padding-left: 0;
    padding-top: var(--space-md);
  }

  /* Links — simpler on mobile */
  .mw-body a {
    background: none;
    text-shadow: none;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
  }

  .mw-body a:hover {
    text-decoration-color: var(--accent);
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .mw-body {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }

  .mw-body h1 { font-size: 1.5rem; }

  pre {
    max-width: calc(100vw - var(--space-md));
    font-size: 0.6875rem;
    padding: var(--space-sm);
  }

  .wikitable {
    max-width: calc(100vw - var(--space-md));
    font-size: 0.6875rem;
  }
}

/* === PRINT === */
@media print {
  .mw-body {
    max-width: none;
    padding: 0;
  }

  #p-search, #p-views, #p-cactions, .mw-editsection, #toc {
    display: none;
  }

  .mw-body a {
    text-decoration: underline;
  }

  .mw-body a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--fg-muted);
  }
}