MediaWiki:Jotunnheim.css: Difference between revisions

From Project: Jotunnheim
Jump to navigation Jump to search
No edit summary
Update Jotunnheim skin CSS from local source
Line 1: Line 1:
/* Edit this page in the wiki at MediaWiki:Jotunnheim.css. This file is the initial import and rollback copy. */
@font-face {
/* Fonts are bundled with this skin. /w is this wiki's configured script path. */
  font-family: JotunnheimCharis;
@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; }
  src: url("/w/skins/Jotunnheim/fonts/Charis-Regular.woff2") format("woff2");
@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-style: normal;
@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-weight: 400;
@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-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-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-family: JotunnheimCharis;
@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; }
  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 {
body.skin-jotunnheim {
   --jth-page: #F3EEE2;
   --jth-page: #f3eee2;
   --jth-fg: #0E0C06;
   --jth-fg: #0e0c06;
   --jth-page-1: #E0D6B8;
   --jth-page-1: #e0d6b8;
 
   --jth-link-normal: #3d314a;
   --jth-link-normal: #3D314A;
   --jth-link-red: #96705b;
   --jth-link-red: #96705B;
   --jth-link-visited: #684756;
   --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-body: JotunnheimCharis, Charis, "Charis SIL", JotunnheimNoto, "Noto Serif", Georgia, serif;
 
   --jth-title: JotunnheimOldStandard, "Old Standard TT", JotunnheimCharis, Georgia, serif;
   --jth-body: JotunnheimCharis, Charis, 'Charis SIL', JotunnheimNoto, 'Noto Serif', Georgia, serif;
   --jth-heading: JotunnheimGoudy, "Goudy Bookletter 1911", JotunnheimCharis, 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);
   color: var(--jth-fg);
   background: var(--jth-page-1);
   background: var(--jth-page-1);
   font-family: var(--jth-body);
   font-family: var(--jth-body);
  margin: 0;
}
body.skin-jotunnheim a, body.skin-jotunnheim a:visited {
  color: var(--jth-link-normal);
}


  a, a:visited {
:is(body.skin-jotunnheim a, body.skin-jotunnheim a:visited).new {
    color: var(--jth-link-normal);
  color: var(--jth-link-red);
   
}
    &.new {
      color: var(--jth-link-red);
      &::after { content: "†"; display: inline; }
    }


   }
:is(body.skin-jotunnheim a, body.skin-jotunnheim a:visited).new:after {
   content: "†";
  display: inline;
}
}


.jth-skip {
.jth-skip {
   background: white;
   color: #00f;
   color: blue;
   background: #fff;
   padding: 1rem;
   padding: 1rem;
   display: block;
   display: block;
   position: absolute;
   position: absolute;
  top: 0;
   left: -100vw;
   left: -100vw;
  top: 0;
}


  &:focus {
.jth-skip:focus {
    left: 0;
  left: 0;
  }
}
}


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


.jth-shell .jth-nav {
  flex-direction: column;
  flex: 0 0 180px;
  display: flex;
}


.jth-shell .jth-nav a {
  width: 100%;
  font-size: .925rem;
  display: inline-block;
}


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


    a {
.jth-shell .jth-nav input[type="checkbox"] {
      display: inline-block;
  display: none;
      width: 100%;
}
      font-size: .925rem;
    }


      a.jth-brand {
.jth-shell .jth-nav #p-user-page-label {
    display: flex;
  content: "User";
    flex-direction: column;
}
    gap: .5rem;
    margin: 1rem 0;
    align-items: center;
    text-align: center;
    font-family: JotunnheimCheltenhamCondensed, var(--jth-title);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    color: var(--jth-fg);
    font-weight: 500;
   
  }


    input[type="checkbox"] { display: none; }
.jth-shell .jth-nav .mw-portlet {
  padding: 0 .25rem;
}


    #p-user-page-label { content: "User"; }
.jth-shell .jth-nav .mw-portlet h3 {
  font-family: var(--jth-body);
  font-variant: small-caps;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: .25rem 0 0 .25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  position: relative;
}


    .mw-portlet {
.jth-shell .jth-nav .mw-portlet h3:after {
      padding: 0 0.25rem;
  content: "";
 
  border-bottom: 1px solid var(--jth-fg);
      h3 {
        font-family: var(--jth-body);
        font-variant: small-caps;
        margin: .25rem 0 0 .25rem;
        padding: 0;
        font-weight: 500;
        font-size: 1rem;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        position: relative;
 
        &::after {
          display: inline-flex;
          content: "";
          position: relative; top: 2px;
   flex: 1;
   flex: 1;
   height: 0px;
   height: 0;
  border-bottom: 1px solid var(--jth-fg);
   margin: 0 .25rem;
   margin: 0 .25rem;
        }
  display: inline-flex;
      }
  position: relative;
  top: 2px;
}


      ul {
.jth-shell .jth-nav .mw-portlet ul {
        margin: 0 0 0 1rem;
  margin: 0 0 0 1rem;
        list-style: none;
  list-style: none;
      }
}
    }
  }


  .jth-header {
.jth-shell .jth-header {
    display: flex;
  flex-direction: row;
    flex-direction: row;
   padding: 1rem 0;
   }
  display: flex;
}


  main#content {
.jth-shell main#content {
    background: var(--jth-page);
  background: var(--jth-page);
    padding: 1rem;
  padding: 1rem;
}


    h1#firstHeading {
.jth-shell main#content h1#firstHeading {
      font-family: var(--jth-body);
  font-family: var(--jth-body);
      font-variant: small-caps;
  font-variant: small-caps;
    }
   padding-top: 0;
  }
}
 
  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;
  }


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


.mw-body-content {
.jth-shell footer.mw-footer {
  h2, h3, h4, h5, h6 {
   margin: 1rem 0;
   }
}
}

Revision as of 22:35, 25 September 2026

@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;
  color: var(--jth-fg);
  background: var(--jth-page-1);
  font-family: var(--jth-body);
  margin: 0;
}

body.skin-jotunnheim a, body.skin-jotunnheim a:visited {
  color: var(--jth-link-normal);
}

:is(body.skin-jotunnheim a, body.skin-jotunnheim a:visited).new {
  color: var(--jth-link-red);
}

:is(body.skin-jotunnheim a, body.skin-jotunnheim a:visited).new:after {
  content: "†";
  display: inline;
}

.jth-skip {
  color: #00f;
  background: #fff;
  padding: 1rem;
  display: block;
  position: absolute;
  top: 0;
  left: -100vw;
}

.jth-skip:focus {
  left: 0;
}

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

.jth-shell .jth-nav {
  flex-direction: column;
  flex: 0 0 180px;
  display: flex;
}

.jth-shell .jth-nav a {
  width: 100%;
  font-size: .925rem;
  display: inline-block;
}

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

.jth-shell .jth-nav input[type="checkbox"] {
  display: none;
}

.jth-shell .jth-nav #p-user-page-label {
  content: "User";
}

.jth-shell .jth-nav .mw-portlet {
  padding: 0 .25rem;
}

.jth-shell .jth-nav .mw-portlet h3 {
  font-family: var(--jth-body);
  font-variant: small-caps;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin: .25rem 0 0 .25rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  position: relative;
}

.jth-shell .jth-nav .mw-portlet h3:after {
  content: "";
  border-bottom: 1px solid var(--jth-fg);
  flex: 1;
  height: 0;
  margin: 0 .25rem;
  display: inline-flex;
  position: relative;
  top: 2px;
}

.jth-shell .jth-nav .mw-portlet ul {
  margin: 0 0 0 1rem;
  list-style: none;
}

.jth-shell .jth-header {
  flex-direction: row;
  padding: 1rem 0;
  display: flex;
}

.jth-shell main#content {
  background: var(--jth-page);
  padding: 1rem;
}

.jth-shell main#content h1#firstHeading {
  font-family: var(--jth-body);
  font-variant: small-caps;
  padding-top: 0;
}

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

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