wiki.css

/* devindyson.com — an encyclopedia-style personal site.
   Look and feel inspired by the classic MediaWiki Vector skin.
   Not affiliated with Wikipedia or the Wikimedia Foundation. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 100%;
}

body {
  background: #f6f6f6;
  font-family: sans-serif;
  color: #202122;
  background-image: linear-gradient(to bottom, #ffffff 2.5em, #f6f6f6 5em);
}

a { color: #0645ad; text-decoration: none; }
a:visited { color: #0b0080; }
a:hover { text-decoration: underline; }
a.new, a.new:visited { color: #ba0000; }
a.external {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path fill="%2336c" d="M6 1h5v5L8.86 3.85 4.7 8 4 7.3l4.15-4.16L6 1zM2 3h2v1H2v6h6V8h1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>') no-repeat right center;
  padding-right: 15px;
}

/* ---------- Page chrome ---------- */

#page {
  position: relative;
  min-height: 100vh;
}

/* Left panel */
#panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 11em;
  padding: 0.5em 0.5em 0 0.6em;
  font-size: 13px;
}

#logo {
  display: block;
  width: 10em;
  padding: 1em 0 0.8em 0;
  text-align: center;
  color: #202122;
}
#logo:hover { text-decoration: none; }
#logo .globe {
  display: block;
  margin: 0 auto 0.5em auto;
}
#logo .wordmark {
  display: block;
  font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
  font-size: 1.45em;
  letter-spacing: 0.02em;
}
#logo .tagline {
  display: block;
  font-size: 0.72em;
  color: #54595d;
  margin-top: 0.2em;
}

.portal { margin-top: 0.8em; }
.portal h3 {
  font-size: 0.83em;
  font-weight: normal;
  color: #54595d;
  border-bottom: 1px solid #c8ccd1;
  padding: 0.25em 0 0.25em 0.6em;
  margin-bottom: 0.3em;
  background-image: linear-gradient(to right, #cccccc 0, #f6f6f6 60%);
  background-size: 100% 1px;
  background-position: bottom;
  background-repeat: no-repeat;
  border-bottom: 0;
}
.portal ul { list-style: none; padding-left: 0.6em; }
.portal li { font-size: 0.92em; line-height: 1.6; }

/* Header: tabs + search */
#head {
  margin-left: 11em;
  padding-right: 1em;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.tabs ul {
  display: flex;
  list-style: none;
  height: 2.6em;
}
.tabs li {
  display: flex;
  align-items: stretch;
  background-image: linear-gradient(to top, #77c1f6 0, #e8f2f8 1px, #ffffff 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: right;
}
.tabs li:first-child {
  background-position: left, right;
  background-image: linear-gradient(to top, #77c1f6 0, #e8f2f8 1px, #ffffff 100%),
                    linear-gradient(to top, #77c1f6 0, #e8f2f8 1px, #ffffff 100%);
  background-size: 1px 100%, 1px 100%;
}
.tabs li a {
  display: flex;
  align-items: flex-end;
  padding: 0 0.7em 0.55em 0.7em;
  font-size: 13px;
  color: #0645ad;
  background: linear-gradient(to bottom, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 100%);
}
.tabs li.selected a { color: #202122; }
.tabs li.selected {
  background: #ffffff;
}
.tabs li.new a { color: #a55858; }
.tabs li a:hover { text-decoration: none; }
.tabs li:not(.selected) a:hover { text-decoration: underline; }

#p-search {
  display: flex;
  align-items: center;
  margin: 0.35em 0 0.35em 0.5em;
}
#p-search form { display: flex; position: relative; }

/* Search typeahead, in the style of Wikipedia's suggestion dropdown */
.suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #a2a9b1;
  border-top: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  z-index: 10;
  text-align: left;
}
a.suggestion, a.suggestion:visited {
  display: block;
  padding: 0.35em 0.6em;
  color: #202122;
  font-size: 13px;
  cursor: pointer;
}
a.suggestion:hover, a.suggestion.active {
  background: #eaf3ff;
  text-decoration: none;
}
.suggestion .s-title { display: block; }
.suggestion .s-desc {
  display: block;
  font-size: 11px;
  color: #54595d;
}
a.suggestion.s-containing, a.suggestion.s-containing:visited {
  border-top: 1px solid #eaecf0;
  color: #36c;
}
#p-search input[type="search"] {
  width: 14em;
  padding: 0.35em 0.5em;
  border: 1px solid #a2a9b1;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  font-size: 13px;
  background: #ffffff;
  color: #202122;
  appearance: none;
  -webkit-appearance: none;
}
#p-search input[type="search"]:focus { outline: 1px solid #3366cc; }
#p-search button {
  padding: 0.25em 0.55em;
  border: 1px solid #a2a9b1;
  border-radius: 0 2px 2px 0;
  background: #f8f9fa;
  cursor: pointer;
  display: flex;
  align-items: center;
}
#p-search button:hover { background: #ffffff; }

/* Content */
#content {
  margin-left: 11em;
  background: #ffffff;
  border: 1px solid #a7d7f9;
  border-right-width: 0;
  padding: 1.1em 1.5em 1.5em 1.5em;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* ---------- Article typography ---------- */

h1.firstHeading, #content h2 {
  font-family: 'Linux Libertine', 'Georgia', 'Times', serif;
  font-weight: normal;
  border-bottom: 1px solid #a2a9b1;
  line-height: 1.3;
  margin-bottom: 0.25em;
}
h1.firstHeading { font-size: 1.9em; }
#siteSub {
  font-size: 12.6px;
  color: #54595d;
  margin-bottom: 1em;
}

#content h2 {
  font-size: 1.5em;
  margin-top: 1em;
}
#content h3 {
  font-size: 1.2em;
  font-weight: bold;
  margin-top: 0.9em;
  margin-bottom: 0.25em;
}
#content p { margin: 0.5em 0; }
#content ul, #content ol { margin: 0.3em 0 0.3em 1.6em; }
#content li { margin-bottom: 0.1em; }

.mw-editsection {
  font-family: sans-serif;
  font-size: 0.55em;
  font-weight: normal;
  margin-left: 0.7em;
  white-space: nowrap;
}
h3 .mw-editsection { font-size: 0.75em; }
.mw-editsection-bracket { color: #54595d; }

.hatnote {
  font-style: italic;
  font-size: 0.95em;
  padding-left: 1.6em;
  margin-bottom: 0.5em;
  color: #202122;
}

sup.reference { font-size: 0.75em; line-height: 1; white-space: nowrap; }
sup.noprint { font-size: 0.75em; line-height: 1; white-space: nowrap; font-style: italic; }

/* ---------- Infobox ---------- */

.infobox {
  float: right;
  clear: right;
  width: 22em;
  margin: 0.5em 0 1em 1em;
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  font-size: 88%;
  line-height: 1.5;
  border-spacing: 3px;
  border-collapse: separate;
}
.infobox caption {
  font-size: 125%;
  font-weight: bold;
  padding: 0.2em 0;
}
.infobox th {
  text-align: left;
  vertical-align: top;
  padding: 0.15em 0.5em 0.15em 0.2em;
  width: 34%;
}
.infobox td { vertical-align: top; padding: 0.15em 0.2em; }
.infobox .infobox-image {
  text-align: center;
  padding: 0.3em 0;
}
.infobox .infobox-image .caption {
  font-size: 92%;
  color: #202122;
  padding-top: 0.3em;
}
.infobox .infobox-header {
  text-align: center;
  background: #eaecf0;
  font-weight: bold;
  padding: 0.2em;
}

/* ---------- Table of contents ---------- */

#toc {
  display: inline-block;
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  padding: 0.5em 1em 0.6em 1em;
  font-size: 95%;
  margin: 0.7em 0;
}
#toc .toctitle { text-align: center; font-weight: bold; }
#toc .toctoggle { font-size: 85%; font-weight: normal; color: #54595d; }
#toc ul {
  list-style: none;
  margin: 0.3em 0 0 0;
}
#toc ul ul { margin: 0 0 0 2em; }
#toc .tocnumber { color: #202122; padding-right: 0.5em; }

/* ---------- References ---------- */

.references {
  font-size: 90%;
  margin-left: 1.6em;
}
.references li { margin-bottom: 0.25em; }
.references li:target, sup.reference:target { background: #eaf3ff; }
.cite-backlink { font-weight: bold; }

/* ---------- Tables ---------- */

.wikitable {
  border-collapse: collapse;
  background: #f8f9fa;
  border: 1px solid #a2a9b1;
  font-size: 95%;
  margin: 0.5em 0 1em 0;
}
.wikitable caption {
  font-weight: bold;
  font-size: 95%;
  padding: 0.2em 0.4em;
}
.wikitable th, .wikitable td {
  border: 1px solid #a2a9b1;
  padding: 0.2em 0.6em;
}
.wikitable th { background: #eaecf0; text-align: center; }

/* ---------- Boxes ---------- */

.stub-notice, .ambox {
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  font-size: 90%;
  padding: 0.4em 0.8em;
  margin: 1em 0 0.5em 0;
}
.stub-notice { font-style: italic; }

#catlinks {
  border: 1px solid #a2a9b1;
  background: #f8f9fa;
  padding: 0.3em 0.6em;
  margin-top: 1.2em;
  font-size: 95%;
  clear: both;
}
#catlinks ul { display: inline; list-style: none; margin: 0; }
#catlinks li {
  display: inline-block;
  border-left: 1px solid #a2a9b1;
  padding: 0 0.5em;
  margin: 0.1em 0;
}
#catlinks li:first-child { border-left: 0; padding-left: 0.25em; }

/* ---------- Footer ---------- */

#footer {
  margin-left: 11em;
  padding: 1em 1.5em 2em 1.5em;
  font-size: 11.7px;
  color: #202122;
}
#footer p { margin-bottom: 0.5em; max-width: 60em; }
#footer ul { list-style: none; }
#footer li { display: inline-block; margin-right: 1em; }

/* ---------- Appearance panel ---------- */

#appearance {
  position: fixed;
  top: 3.4em;
  right: 0;
  width: 12.5em;
  background: #ffffff;
  border: 1px solid #a2a9b1;
  border-right: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  z-index: 30;
}
#appearance .appearance-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  font-weight: bold;
  padding: 0.4em 0.7em;
  border-bottom: 1px solid #eaecf0;
}
#appearance .appearance-toggle { font-weight: normal; font-size: 0.9em; cursor: pointer; }
#appearance .appearance-body { padding: 0.3em 0.7em 0.6em; }
#appearance .app-group { margin-top: 0.6em; }
#appearance .app-label { color: #54595d; font-size: 0.9em; margin-bottom: 0.25em; }
#appearance label {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.15em 0;
  cursor: pointer;
}
#appearance input[type="radio"] { margin: 0; cursor: pointer; }
#appearance.collapsed .appearance-body { display: none; }
#appearance.collapsed {
  width: auto;
  border-radius: 2px 0 0 2px;
}
#appearance.collapsed .appearance-head { border-bottom: 0; }

/* ---------- Text size ---------- */

html[data-text="small"] #content { font-size: 13px; }
html[data-text="large"] #content { font-size: 16px; }

/* ---------- Reading width ---------- */

html[data-width="standard"] #content { max-width: 62em; }

/* ---------- Dark theme (data-theme is resolved to light/dark by script) ---------- */

html[data-theme="dark"] body { background: #101418; color: #e8eaed; background-image: none; }
html[data-theme="dark"] a { color: #6ea8ff; }
html[data-theme="dark"] a:visited { color: #b48ee6; }
html[data-theme="dark"] a.new, html[data-theme="dark"] a.new:visited { color: #ff7a7a; }
html[data-theme="dark"] #logo { color: #e8eaed; }
html[data-theme="dark"] #logo .globe { filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] #logo .tagline,
html[data-theme="dark"] .portal h3,
html[data-theme="dark"] #siteSub,
html[data-theme="dark"] .mw-editsection-bracket,
html[data-theme="dark"] #appearance .app-label { color: #a2a9b1; }
html[data-theme="dark"] .portal h3 { background-image: linear-gradient(to right, #40464d 0, #101418 60%); }
html[data-theme="dark"] #content { background: #1b1e23; border-color: #2a4a63; color: #e8eaed; }
html[data-theme="dark"] h1.firstHeading,
html[data-theme="dark"] #content h2 { border-bottom-color: #3a3d42; color: #e8eaed; }
html[data-theme="dark"] .tabs li a { color: #6ea8ff; background: linear-gradient(to bottom, rgba(255,255,255,0.05) 0, rgba(255,255,255,0) 100%); }
html[data-theme="dark"] .tabs li { background-image: linear-gradient(to top, #3a6ea5 0, #26404f 1px, #1b1e23 100%); }
html[data-theme="dark"] .tabs li:first-child {
  background-image: linear-gradient(to top, #3a6ea5 0, #26404f 1px, #1b1e23 100%),
                    linear-gradient(to top, #3a6ea5 0, #26404f 1px, #1b1e23 100%);
}
html[data-theme="dark"] .tabs li.selected { background: #1b1e23; }
html[data-theme="dark"] .tabs li.selected a { color: #e8eaed; }
html[data-theme="dark"] .tabs li.new a { color: #d98a8a; }
html[data-theme="dark"] #p-search input[type="search"] { background: #101418; border-color: #3a3d42; color: #e8eaed; }
html[data-theme="dark"] #p-search button { background: #26292e; border-color: #3a3d42; }
html[data-theme="dark"] #p-search button:hover { background: #2e3238; }
html[data-theme="dark"] .infobox,
html[data-theme="dark"] #toc,
html[data-theme="dark"] .wikitable,
html[data-theme="dark"] #catlinks,
html[data-theme="dark"] .stub-notice,
html[data-theme="dark"] .ambox,
html[data-theme="dark"] #appearance { background: #26292e; border-color: #3a3d42; }
html[data-theme="dark"] .infobox .infobox-header,
html[data-theme="dark"] .wikitable th { background: #33373d; }
html[data-theme="dark"] .infobox-image rect { fill: #33373d; }
html[data-theme="dark"] .infobox-image circle,
html[data-theme="dark"] .infobox-image path { fill: #4a4f56; }
html[data-theme="dark"] #appearance .appearance-head { border-bottom-color: #3a3d42; }
html[data-theme="dark"] .suggestions { background: #1b1e23; border-color: #3a3d42; }
html[data-theme="dark"] a.suggestion, html[data-theme="dark"] a.suggestion:visited { color: #e8eaed; }
html[data-theme="dark"] a.suggestion:hover, html[data-theme="dark"] a.suggestion.active { background: #2a3340; }
html[data-theme="dark"] .references li:target,
html[data-theme="dark"] sup.reference:target { background: #26343f; }
html[data-theme="dark"] #footer { color: #c2c6cc; }

/* ---------- Responsive ---------- */

@media only screen and (max-width: 850px) {
  #appearance {
    position: static;
    width: auto;
    border-right: 1px solid #a2a9b1;
    box-shadow: none;
    margin: 0 1em 0.5em;
  }
  html[data-theme="dark"] #appearance { border-right-color: #3a3d42; }
  #panel {
    position: static;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 1.5em;
    padding: 0.5em 1em;
  }
  #logo { width: auto; padding: 0.3em 0; }
  #logo .globe { display: none; }
  #logo .tagline { display: none; }
  /* Wikipedia's mobile skin hides sidebar navigation and the Read/Edit/View
     history tabs behind a menu; hide them outright on small screens. */
  .portal { display: none; }
  #right-tabs ul { display: none; }
  #head { margin-left: 0; flex-direction: column-reverse; align-items: stretch; }
  #head .tabs { overflow-x: auto; }
  #p-search { margin: 0.4em 1em; }
  #p-search form { width: 100%; }
  #p-search input[type="search"] { width: 100%; }
  #content { margin-left: 0; border-right-width: 1px; padding: 1em; }
  #footer { margin-left: 0; }
  .infobox {
    float: none;
    width: 100%;
    margin: 0.5em 0 1em 0;
  }
}