MediaWiki:Jotunnheim.css: Difference between revisions

Revision as of 14:11, 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-page: #F3EEE2;
  --jth-fg: #0E0C06;
  --jth-page-1: #E0D6B8;

  --jth-ink: #27231e;
  --jth-muted: #665e52;
  --jth-rule: #c7bdac;
  --jth-link: #734533;


  --jth-body: JotunnheimCharis, Charis, 'Charis SIL', JotunnheimNoto, 'Noto Serif', Georgia, serif;
  --jth-title: JotunnheimOldStandard, 'Old Standard TT', JotunnheimCharis, Georgia, serif;
  --jth-heading: JotunnheimGoudy, 'Goudy Bookletter 1911', JotunnheimCharis, Georgia, serif;
  margin: 0;
  color: var(--jth-fg);
  background: var(--jth-page-1);
  font-family: var(--jth-body);

  main#content {
    background: var(--jth-page);
  }
}

.jth-skip {
  background: white;
  color: blue;
  padding: 1rem;
  display: block;

  position: absolute;
  left: -100vw;
  top: 0;

  &:focus {
    left: 0;
  }
}

.jth-shell {
  display: flex;
  flex-direction: row;

  .jth-nav {
    display: flex;
    flex-direction: column;
  }

  .jth-header {
    display: flex;
    flex-direction: row;
  } 
}

@@ Line 12: / Line 12: @@
 body.skin-jotunnheim {
-   --jth-paper: #fbf8f0;
+   --jth-page: #F3EEE2;
+  --jth-fg: #0E0C06;
+  --jth-page-1: #E0D6B8;
    --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-body: JotunnheimCharis, Charis, 'Charis SIL', JotunnheimNoto, 'Noto Serif', Georgia, serif;
+   --jth-title: 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;
+  color: var(--jth-fg);
+  background: var(--jth-page-1);
+  font-family: var(--jth-body);
+  main#content {
+    background: var(--jth-page);
+  }
 }
-.skin-jotunnheim a { color: var(--jth-link); }
+.jth-skip {
-.skin-jotunnheim a:hover { color: #9b5334; }
+  background: white;
-.skin-jotunnheim .jth-shell { max-width: 1540px; margin: 0 auto; padding: 0 clamp(14px, 2.5vw, 38px) 30px; }
+  color: blue;
-.skin-jotunnheim .jth-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 10px; background: white; }
+  padding: 1rem;
-.skin-jotunnheim .jth-skip:focus { left: 10px; }
+  display: block;
-/* The fixed furniture uses simple UI lettering; editorial type is in the page. */
+   position: absolute;
-.skin-jotunnheim .jth-header,
+   left: -100vw;
-.skin-jotunnheim .jth-sidebar,
+   top: 0;
-.skin-jotunnheim .jth-page-tools,
-.skin-jotunnheim .mw-footer {
+   &:focus {
-   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    left: 0;
-}
+   }
-.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; }
+.jth-shell {
-.skin-jotunnheim .jth-sidebar { color: #534b40; font-size: 13px; line-height: 1.45; padding-top: 8px; }
+  display: flex;
-.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; }
+  flex-direction: row;
-.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 {
+  .jth-nav {
-  min-width: 0; min-height: 60vh; background: var(--jth-paper);
+    display: flex;
-  border: 1px solid #c6bbaa; box-shadow: 0 5px 0 #d2c9b9, 0 9px 18px #51473518;
+    flex-direction: column;
-  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,
+   .jth-header {
-.skin-jotunnheim .jth-main .mw-first-heading,
+    display: flex;
-.skin-jotunnheim .jth-main .firstHeading {
+    flex-direction: row;
-   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; }
 }

MediaWiki:Jotunnheim.css: Difference between revisions

Revision as of 14:11, 25 September 2026

Navigation menu

Search