MediaWiki:Jotunnheim.css: Difference between revisions

Revision as of 12:07, 25 September 2026

/* Edit this page in the wiki at MediaWiki:Jotunnheim.css. This file is the initial import and rollback copy. */
/* Fonts are bundled with this skin. /w is this wiki's configured script path. */
@font-face { font-family: JotunnheimCharis; src: url('/w/skins/Jotunnheim/fonts/Charis-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: JotunnheimCharis; src: url('/w/skins/Jotunnheim/fonts/Charis-Italic.woff2') format('woff2'); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: JotunnheimCharis; src: url('/w/skins/Jotunnheim/fonts/Charis-Bold.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: JotunnheimCharis; src: url('/w/skins/Jotunnheim/fonts/Charis-BoldItalic.woff2') format('woff2'); font-style: italic; font-weight: 700; font-display: swap; }
@font-face { font-family: JotunnheimOldStandard; src: url('/w/skins/Jotunnheim/fonts/OldStandard-Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: JotunnheimOldStandard; src: url('/w/skins/Jotunnheim/fonts/OldStandard-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: JotunnheimGoudy; src: url('/w/skins/Jotunnheim/fonts/GoudyBookletter1911.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: JotunnheimNoto; src: url('/w/skins/Jotunnheim/fonts/NotoSerif-Variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: JotunnheimNoto; src: url('/w/skins/Jotunnheim/fonts/NotoSerif-Italic-Variable.ttf') format('truetype'); font-style: italic; font-weight: 100 900; font-display: swap; }

body.skin-jotunnheim {
  --jth-paper: #fbf8f0;
  --jth-ink: #27231e;
  --jth-muted: #665e52;
  --jth-rule: #c7bdac;
  --jth-link: #734533;
  --jth-reading: JotunnheimCharis, Charis, 'Charis SIL', JotunnheimNoto, 'Noto Serif', Georgia, serif;
  --jth-h1: JotunnheimOldStandard, 'Old Standard TT', JotunnheimCharis, Georgia, serif;
  --jth-heading: JotunnheimGoudy, 'Goudy Bookletter 1911', JotunnheimCharis, Georgia, serif;
  background: #e9e3d7;
  color: var(--jth-ink);
  font-family: var(--jth-reading);
  margin: 0;
}

.skin-jotunnheim a { color: var(--jth-link); }
.skin-jotunnheim a:hover { color: #9b5334; }
.skin-jotunnheim .jth-shell { max-width: 1540px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 38px) 30px; }
.skin-jotunnheim .jth-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px; background: white; }
.skin-jotunnheim .jth-skip:focus { left: 10px; }

/* The fixed furniture uses simple UI lettering; editorial type is in the page. */
.skin-jotunnheim .jth-header,
.skin-jotunnheim .jth-sidebar,
.skin-jotunnheim .jth-page-tools,
.skin-jotunnheim .mw-footer {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.skin-jotunnheim .jth-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(225px, 420px) minmax(130px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 18px 0 16px;
  border-bottom: 3px double #756958;
}
.skin-jotunnheim .jth-brand { display: inline-flex; gap: 10px; align-items: center; width: fit-content; text-decoration: none; }
.skin-jotunnheim .jth-brand img { object-fit: contain; flex: none; }
.skin-jotunnheim .jth-brand span { font: 400 clamp(25px, 2.25vw, 34px)/1 JotunnheimOldStandard, Georgia, serif; color: var(--jth-ink); }
.skin-jotunnheim .jth-search { display: flex; align-items: center; gap: 6px; min-width: 0; }
.skin-jotunnheim .jth-search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.skin-jotunnheim .jth-search input[type='search'],
.skin-jotunnheim .jth-search input[type='text'] {
  min-width: 0; width: 100%; padding: 8px 10px; background: var(--jth-paper);
  border: 1px solid #ab9f8d; border-radius: 2px; font: 14px system-ui, sans-serif;
}
.skin-jotunnheim .jth-search button,
.skin-jotunnheim .jth-search input[type='submit'] {
  padding: 8px 10px; background: #eee8dd; border: 1px solid #ab9f8d;
  border-radius: 2px; color: #493c2d; font: 13px system-ui, sans-serif; cursor: pointer;
}
.skin-jotunnheim .jth-user-tools { justify-self: end; font-size: 12px; }
.skin-jotunnheim .jth-user-tools .mw-portlet { display: inline-block; margin-left: 12px; }
.skin-jotunnheim .jth-user-tools .mw-portlet h3,
.skin-jotunnheim .jth-user-tools .mw-portlet input { display: none; }
.skin-jotunnheim .jth-user-tools .mw-portlet-body,
.skin-jotunnheim .jth-user-tools ul { display: inline; margin: 0; padding: 0; }
.skin-jotunnheim .jth-user-tools li { display: inline; margin-left: 10px; list-style: none; }

.skin-jotunnheim .jth-layout { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: clamp(18px, 2.4vw, 38px); align-items: start; margin-top: 23px; }
.skin-jotunnheim .jth-sidebar { color: #534b40; font-size: 13px; line-height: 1.45; padding-top: 8px; }
.skin-jotunnheim .jth-sidebar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: #796b59; border-bottom: 1px solid #9f907d; padding-bottom: 7px; }
.skin-jotunnheim .jth-sidebar .mw-portlet { margin: 18px 0; }
.skin-jotunnheim .jth-sidebar .mw-portlet h3 { font-size: 11px; line-height: 1.2; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 8px; color: #766858; }
.skin-jotunnheim .jth-sidebar .mw-portlet input { display: none; }
.skin-jotunnheim .jth-sidebar ul { padding: 0; margin: 0; list-style: none; }
.skin-jotunnheim .jth-sidebar li { margin: 0 0 7px; }
.skin-jotunnheim .jth-sidebar a { text-decoration: none; }
.skin-jotunnheim .jth-sidebar a:hover { text-decoration: underline; }

.skin-jotunnheim .jth-main {
  min-width: 0; min-height: 60vh; background: var(--jth-paper);
  border: 1px solid #c6bbaa; box-shadow: 0 5px 0 #d2c9b9, 0 9px 18px #51473518;
  padding: 0 clamp(22px, 4vw, 58px) 45px;
}
.skin-jotunnheim .jth-page-tools { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; min-height: 42px; border-bottom: 1px solid var(--jth-rule); font-size: 12px; }
.skin-jotunnheim .jth-page-tools .mw-portlet h3,
.skin-jotunnheim .jth-page-tools .mw-portlet input { display: none; }
.skin-jotunnheim .jth-page-tools .mw-portlet-body,
.skin-jotunnheim .jth-page-tools ul { display: inline; margin: 0; padding: 0; }
.skin-jotunnheim .jth-page-tools li { display: inline-block; margin: 0 13px 0 0; list-style: none; }
.skin-jotunnheim .jth-page-tools a { color: #5d5143; text-decoration: none; }
.skin-jotunnheim .jth-page-tools a:hover { text-decoration: underline; }
.skin-jotunnheim .jth-page-tools .selected a { color: var(--jth-link); font-weight: 700; }

.skin-jotunnheim .jth-main h1,
.skin-jotunnheim .jth-main .mw-first-heading,
.skin-jotunnheim .jth-main .firstHeading {
  font-family: var(--jth-h1); font-weight: 400; font-synthesis: none;
  font-size: clamp(2.45rem, 4vw, 3.6rem); line-height: 1.07;
  letter-spacing: -.024em; margin: 24px 0 10px; overflow-wrap: anywhere;
  border-bottom: 3px double #8d7f6d; padding-bottom: 8px;
}
.skin-jotunnheim .jth-main .mw-body-content { font-family: var(--jth-reading); font-size: 17px; line-height: 1.52; }
.skin-jotunnheim .jth-main .mw-parser-output > p { max-width: 76ch; }
.skin-jotunnheim .jth-main .mw-parser-output h2,
.skin-jotunnheim .jth-main .mw-parser-output h3,
.skin-jotunnheim .jth-main .mw-parser-output h4,
.skin-jotunnheim .jth-main .mw-parser-output h5,
.skin-jotunnheim .jth-main .mw-parser-output h6 {
  font-family: var(--jth-heading); font-weight: 400; font-synthesis: none;
  line-height: 1.18; color: var(--jth-ink); overflow-wrap: anywhere;
}
.skin-jotunnheim .jth-main .mw-parser-output h2 { font-size: 1.85em; margin: 1.25em 0 .35em; border-bottom: 1px solid #b9ac9a; padding-bottom: .12em; }
.skin-jotunnheim .jth-main .mw-parser-output h3 { font-size: 1.5em; margin: 1.1em 0 .3em; }
.skin-jotunnheim .jth-main .mw-parser-output h4 { font-size: 1.27em; margin: 1em 0 .25em; }
.skin-jotunnheim .jth-main .mw-parser-output h5,
.skin-jotunnheim .jth-main .mw-parser-output h6 { font-size: 1.1em; margin: 1em 0 .25em; }
.skin-jotunnheim .jth-main .mw-headline { font: inherit; }
.skin-jotunnheim .jth-main #siteSub,
.skin-jotunnheim .jth-main #contentSub { color: var(--jth-muted); font-size: 12px; }
.skin-jotunnheim .jth-main #siteSub { margin-bottom: 15px; }
.skin-jotunnheim .jth-main .mw-parser-output img { max-width: 100%; height: auto; }
.skin-jotunnheim .jth-main .mw-parser-output .wikitable { max-width: 100%; }
.skin-jotunnheim .jth-main .mw-parser-output .toc { border: 1px solid var(--jth-rule); background: #f3eee4; padding: 10px 14px; }
.skin-jotunnheim .jth-main .mw-parser-output blockquote { border-left: 2px solid #a59079; margin-left: 1em; padding-left: 1em; }
.skin-jotunnheim .jth-main .mw-parser-output code,
.skin-jotunnheim .jth-main .mw-parser-output pre { font-size: .85em; }
.skin-jotunnheim #catlinks { margin-top: 2em; padding-top: 12px; border-top: 1px solid var(--jth-rule); color: var(--jth-muted); font-size: 13px; }
.skin-jotunnheim .mw-footer { color: #62594d; font-size: 12px; line-height: 1.4; padding: 26px 0; }
.skin-jotunnheim .mw-footer ul { padding: 0; margin: 4px 0; list-style: none; }
.skin-jotunnheim .mw-footer li { display: inline; margin-right: 14px; }

@media (max-width: 980px) {
  .skin-jotunnheim .jth-header { grid-template-columns: 1fr minmax(200px, 360px); }
  .skin-jotunnheim .jth-user-tools { grid-column: 1 / -1; justify-self: start; }
  .skin-jotunnheim .jth-user-tools .mw-portlet:first-child { margin-left: 0; }
  .skin-jotunnheim .jth-layout { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 690px) {
  .skin-jotunnheim .jth-header { grid-template-columns: 1fr; gap: 13px; }
  .skin-jotunnheim .jth-user-tools { grid-column: auto; }
  .skin-jotunnheim .jth-layout { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .skin-jotunnheim .jth-sidebar { order: 2; padding: 4px 10px; border-top: 3px double #9f907d; }
  .skin-jotunnheim .jth-main { order: 1; padding: 0 20px 28px; }
  .skin-jotunnheim .jth-page-tools { gap: 8px; }
  .skin-jotunnheim .jth-main h1,
  .skin-jotunnheim .jth-main .mw-first-heading { font-size: 2.4rem; }
  .skin-jotunnheim .jth-main .mw-body-content { font-size: 16px; }
}
@media print {
  .skin-jotunnheim { background: white; }
  .skin-jotunnheim .jth-header,
  .skin-jotunnheim .jth-sidebar,
  .skin-jotunnheim .jth-page-tools,
  .skin-jotunnheim .mw-footer { display: none; }
  .skin-jotunnheim .jth-shell,
  .skin-jotunnheim .jth-layout { display: block; margin: 0; padding: 0; }
  .skin-jotunnheim .jth-main { box-shadow: none; border: 0; padding: 0; }
}