MediaWiki:Jotunnheim.css: Difference between revisions

From Project: Jotunnheim
Jump to navigation Jump to search
Move Jotunnheim skin CSS to this editable wiki page
No edit summary
 
(8 intermediate revisions by the same user not shown)
Line 12: Line 12:


body.skin-jotunnheim {
body.skin-jotunnheim {
   --jth-paper: #fbf8f0;
   --jth-page: #F3EEE2;
  --jth-fg: #0E0C06;
  --jth-page-1: #E0D6B8;
 
  --jth-link-normal: #3D314A;
  --jth-link-red: #96705B;
  --jth-link-visited: #684756;
 
   --jth-ink: #27231e;
   --jth-ink: #27231e;
   --jth-muted: #665e52;
   --jth-muted: #665e52;
   --jth-rule: #c7bdac;
   --jth-rule: #c7bdac;
   --jth-link: #734533;
   --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;
   --jth-heading: JotunnheimGoudy, 'Goudy Bookletter 1911', JotunnheimCharis, Georgia, serif;
  background: #e9e3d7;
  color: var(--jth-ink);
  font-family: var(--jth-reading);
   margin: 0;
   margin: 0;
  color: var(--jth-fg);
  background: var(--jth-page-1);
  font-family: var(--jth-body);
  a, a:visited {
    color: var(--jth-link-normal);
   
    &.new {
      color: var(--jth-link-red);
    }
  }
}
}


.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;
 
  position: absolute;
  left: -100vw;
  top: 0;


/* The fixed furniture uses simple UI lettering; editorial type is in the page. */
  &:focus {
.skin-jotunnheim .jth-header,
    left: 0;
.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; }
.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; }
  .jth-nav {
.skin-jotunnheim .jth-sidebar li { margin: 0 0 7px; }
    display: flex;
.skin-jotunnheim .jth-sidebar a { text-decoration: none; }
    flex-direction: column;
.skin-jotunnheim .jth-sidebar a:hover { text-decoration: underline; }
    width: 320px;
 
    a {
      font-weight: 600;
      font-size: .9rem;
      display: inline-block;
      padding: .125rem;
      width: 100%;
    }
 
      a.jth-brand {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0;
    align-items: center;
    text-align: center;
    font-family: var(--jth-title);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--jth-fg);
    font-weight: 500;
  }
 
    input[type="checkbox"] { display: none; }
 
    #p-user-page-label { content: "User"; }
 
    .mw-portlet {
      padding: 0 0.25rem;
 
      h3 {
        font-family: var(--jth-title);
        font-weight: 500;
        letter-spacing: -0.02em;
        font-size: 1.125rem;
        font-variant: small-caps
        margin: 1.25rem 0 .325rem 0;
        padding: 0;
      }
 
      ul {
        margin: 0;
        list-style: none;
      }
    }
  }
 
  .jth-header {
    display: flex;
    flex-direction: row;
  }
 
  main#content {
    background: var(--jth-page);
  }


.skin-jotunnheim .jth-main {
   footer.mw-footer, footer.mw-footer ul {
  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: row;
  padding: 0 clamp(22px, 4vw, 58px) 45px;
    list-style: none;
}
    margin: 0;
.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; }
    align-items: center;
.skin-jotunnheim .jth-page-tools .mw-portlet h3,
    gap: 1rem;
.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,
   footer.mw-footer {
.skin-jotunnheim .jth-main .mw-first-heading,
    margin: 1rem 0;
.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; }
}
}

Latest revision as of 15:33, 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-link-normal: #3D314A;
  --jth-link-red: #96705B;
  --jth-link-visited: #684756;

  --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);

  a, a:visited {
    color: var(--jth-link-normal);
    
    &.new {
      color: var(--jth-link-red);
    }

  }
}

.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;
    width: 320px;

    a {
      font-weight: 600;
      font-size: .9rem;
      display: inline-block;
      padding: .125rem;
      width: 100%;
    }

      a.jth-brand {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1rem 0;
    align-items: center;
    text-align: center;
    font-family: var(--jth-title);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--jth-fg);
    font-weight: 500;
  }

    input[type="checkbox"] { display: none; }

    #p-user-page-label { content: "User"; }

    .mw-portlet {
      padding: 0 0.25rem;

      h3 {
        font-family: var(--jth-title);
        font-weight: 500;
        letter-spacing: -0.02em;
        font-size: 1.125rem;
        font-variant: small-caps
        margin: 1.25rem 0 .325rem 0;
        padding: 0;
      }

      ul {
        margin: 0;
        list-style: none;
      }
    }
  }

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

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

  footer.mw-footer, footer.mw-footer ul {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    align-items: center;
    gap: 1rem;
  }

  footer.mw-footer {
    margin: 1rem 0;
  }

}