Difference between revisions of "MediaWiki:Common.css"

Revision as of 13:44, 28 September 2019

@import url('https://fonts.googleapis.com/css?family=PT+Serif&display=swap');
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Spectral:300,300i,400,400i,500,500i,600,600i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Crimson+Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant&display=swap');
@import url('https://fonts.googleapis.com/css?family=EB+Garamond&display=swap');

h1 {
  display:none
}

h2, .mw-body-content h2 {
  font-family: 'ribes black';
  font-size: 2em;
  line-height: calc(2 * var(--line-height));
  margin-top: 0;
  margin-bottom: 0;
}

h3, .mw-body-content h3 {
  font-family: 'spectral';
  font-size: var(--font-size);
  font-weight: 500;
  margin-bottom: var(--line-height);
  line-height: var(--line-height);
}

p, .mw-body-content p {
  font-family: 'Spectral',serif;
  font-size: var(--font-size);
  max-width: 40em;
  line-height: var(--line-height);
  margin: 0 0 var(--line-height) 0;
  text-rendering: optimizelegibility;
}

@media screen {
  :root {
    --font-size: 1.75em;
    --line-height: 1.3em;
  }

  .timeline {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    white-space:nowrap
  }
  .timeline--entry[data-loading]::before {
    content:"Loading";
    padding:2em
  }
  .timeline--entry {
    display:inline-block;
    background:brown;
    border-radius:1em;
    height:1.5em;
    width:5px;
    margin-right:.5em;
    cursor:pointer;
    position:relative
  }
  .timeline--entry.active,
  .timeline--entry:hover {
    background:green
  }
  .timeline--entry .timeline--entry--data {
    display:none
  }
  .timeline--entry:hover .timeline--entry--data {
    transform:rotate(-90deg);
    transform-origin:top left;
    display:block;
    position:absolute;
    left:0;
    bottom:1em
  }
  .timeline--entry--data {
    white-space:nowrap
  }
  .revisions {
    max-height:80vh;
    white-space:nowrap;
    max-width:100%;
    overflow-x:auto
  }
  .revisions--revision {
    display:inline-block;
    height:80vh;
    width:100%;
    overflow-y:auto;
    white-space:normal;
    margin-right:2em
  }
}
@media print {
  :root {
    --line-height: 12.5pt;
    --font-size: 9.5pt;
  }
  .timeline {
    display:none
  }
  .revision:nth-of-type(n+2) {
    display:none
  }
    
  h2 {
    border-bottom: none;
  }
  
  p {
    text-align: left;
    margin-top: 0;
  }
  
  .mw-parser-output {
    columns: 2;
    column-gap: 10mm;
  }
  
  h2 {
    column-span: all;
  }

  h2 + h3 {
    margin-top: 0;
  }
  
  img {
    max-width: 100%;
  }

  [data-section] {
    page-break-after: always;
  }

  sup.reference {
    line-height: 0.5; /** Just for now to make sure all lines have the same height */
  }

  a {
    text-decoration: none
  }
}