UnfoldingCSS:NTAIA: Difference between revisions

From titipi
Jump to navigation Jump to search
(Created page with "/* Welcome to the StyleBox! This is a box of CSS declarations, blocks and variables that want to be copied. Inside this box, you will find declarations suited for digital and printed PDFs. We have experimented by creating chimeric creatures here and there, inserting marginal page information, snipping shapes into images, playing with typography and taking order away from unordered lists. Feel free to visit the font bank, where you will find a range...")
 
mNo edit summary
 
Line 1: Line 1:
/*
body {
 
margin: auto;
  Welcome to the StyleBox!
line-height: 1.4em;
max-width: 900px;
padding: 1.5em 1em;
}


  This is a box of CSS declarations, blocks and variables that want to be
a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
  copied. Inside this box, you will find declarations suited for digital and
a:hover {color: red !important}
  printed PDFs. We have experimented by creating chimeric creatures here and
  there, inserting marginal page information, snipping shapes into images,
  playing with typography and taking order away from unordered lists.


  Feel free to visit the font bank, where you will find a range of classic
.gallerybox ul, .gallerybox li {style: none;}
  free and open source typefaces that you might be familiar with, but also
  some lesser known ones that might peak your interest. The :root {} block
  provides with a few simple variables made for consistency with theming and
  skinning the publication. Take a scroll near the cover and inlay page for
  some suggestions on what can be done there with CSS alone, and if you stray
  too far, you may encounter feral, dramatic or unusual declarations.


  Best of luck!
.gallerybox li {width:200px; float: right;}
  Camilo & Karl


  https://camilogarcia.info/
.tocnumber {display: none;}
  https://moubarak.eu/


*/
/* toclimit */
 
.toclimit-2 .toclevel-1 ul,
/* -------------- F O N T - B A N K ---------------------  */
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
display: none;
}


/* ---------------------------------- C L A S S I C S ---  */


/*
@font-face {
@font-face {
  font-family: 'windy';
    font-family: 'poppinsregular';
  src: url('/wiki/images/7/7b/SpookySquiggles-LLwG.woff') format('woff');
    src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
  font-weight: normal;
    src: url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
  font-style: normal;
    font-weight: normal;
}
    font-style: normal;
*/
/*
@font-face {
  font-family: 'garden';
  src: url('https://titipi.org/wiki/images/b/b2/Bitwise.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
}
*/
/*
@font-face {
  font-family:'Picnic';
  src:url('https://titipi.org/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
  font-weight:normal;
  font-style:normal
}
*/
/*
@font-face {
  font-family: 'asulbold';
  src: url('https://titipi.org/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
      url('https://titipi.org/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'asulregular';
  src: url('https://titipi.org/wiki/images/5/58/Le-patin-helvete.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'compagnon-italic';
  src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
      url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'),
      url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'poppinsregular';
  src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
      Url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'poppinsbold';
  src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
      url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
  font-weight: bold;
  font-style: bold;
}
*/
/*
@font-face {
  font-family: 'poppinsblack';
  src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
      url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
  font-weight: bolder;
  font-style: bolder;
}
*/
/*
@font-face {
  font-family: 'adelphe-regular';
  src: url('https://titipi.org/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
      url('https://titipi.org/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'adelphe-bold';
  src: url('https://titipi.org/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
      url('https://titipi.org/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'Fourmi';
  src: url('https://titipi.org/wiki/images/7/7c/Fourmi.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
*/
/*
@font-face {
  font-family: 'anthony';
  src: url('https://titipi.org/wiki/images/c/ce/Anthony.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
*/


@font-face {
@font-face {
  font-family: 'authenticond';
    font-family: 'poppinsbold';
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
    src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
  font-weight: 400;
    src: url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
  font-style: normal;
    font-weight: bold;
}
    font-style: bold;
@font-face {
  font-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
}




@font-face {
@font-face {
  font-family: 'authentic';
    font-family: 'poppinsblack';
  src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
    src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
  font-weight: 400;
    src: url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
  font-style: normal;
    font-weight: bolder;
}
    font-style: bolder;
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/9/94/AUTHENTICSans-90.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/6/66/AUTHENTICSans-130.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'authentic';
  src: url('https://titipi.org/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
 
/*
@font-face {
  font-family: 'herbier';
  src: url('https://titipi.org/wiki/images/a/a8/Herbier.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
}
*/




/* ---------------------------------- ¡ ¡ ¡ N E W ! ! ---  */


/* TERANOPTIA: BUILD YOUR OWN CHIMERIC CREATURE */
@font-face {
/* https://www.tunera.xyz/fonts/teranoptia/ */
    font-family: 'compagnon-italic';
@font-face {
    src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
  font-family: 'teranoptia';
        url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
  src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff');
        url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
  font-weight: normal;
    font-weight: normal;
  font-style: normal;
    font-style: normal;
}
 
/* AMAKAN: SPLIT BAMBOO WEAVING DRAMA */
/* https://www.tunera.xyz/fonts/amakan/ */
@font-face {  
  font-family: 'amakan-sheet';
  src: url('https://titipi.org/wiki/images/b/b1/Amakan-Sheet.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'amakan-stripes';
  src: url('https://titipi.org/wiki/images/c/c1/Amakan-Stripes.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'amakan-strips';
  src: url('https://titipi.org/wiki/images/e/ec/Amakan-Strips.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* MALEBOLGE: THE EIGHTH CIRCLE OF DANTE'S HELL */
/* https://www.tunera.xyz/fonts/malebolge/ */
@font-face {
  font-family: 'malebolge';
  src: url('https://titipi.org/wiki/images/4/42/Malebolge-Adversarial.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
}


@font-face {  
:root{
  font-family: 'syne-italic';
--font-size: 10pt;
  src: url('https://titipi.org/wiki/images/2/24/Syne-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
}




/* -------------- F O N T - B A N K - E N D S -----------  */
@page{
size: 148mm 210mm;
margin: 17mm 15mm 19mm 15mm;


@bottom-center{
margin-top: -4mm;
font-family: 'poppinsregular';
font-size: 9pt;
content: counter(page);
}
      @footnote {
          float: bottom;
          border-top: solid #222 thin;
          padding-top: 8pt;
          font-family: 'poppinsregular';
font-variant-position: normal;
font-size: 8pt;
      }


:root {
}
 
@page:first{
/* ************* C O N T E N T ************ */
 
    --PUB-title: 'Infrastructural Interactions';
    --PUB-collective: 'TiTiPi & tItIpI';
    --PUB-year: '3000';
 
 
/* ************* F O N T S **************** */
 
    --title-font: syne-italic;
    --body-font: authentic;
    --code-font: Monospace;
    --quote-font: Serif;
    --footnote-font: authenticond;
    --page-number-font: authentic;
 
    --h1-font-size: 30pt;
    --h2-font-size: 24pt;
    --h3-font-size: 18pt;
    --h4-font-size: 16pt;
    --p-font-size: 12pt;
   
 
/* ************* C O L O R **************** */


    --color-paper: floralwhite;
  background-size: 100%;
    --body-text-color: darkslateblue;
  background-repeat: no-repeat;
    --highlight-text-color: tomato;
  background-position: bottom 20% center;
    --sparkling-color: PeachPuff;
    --glitter-color: MediumSlateBlue ;


@top-center{
                font-family: poppinsblack;
content: "";
                font-size:14pt;


/* *********** S H A P E S **************** */
}


    --s-radius: 80px;
        @bottom-center{
    --s-skew: 100%;
                font-family: 'poppinsblack';
    --s-factor: 0.5;
                font-size:12pt;
    --spikes: linear-gradient(#000 0 0) center/calc(var(--s-skew) - var(--s-radius)) calc(var(--s-skew) - var(--s-radius)) no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(-1 * var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) 0 calc(var(--s-skew) + var(--s-factor) * var(--s-radius))/var(--s-radius) var(--s-radius) round no-repeat, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(-1 * var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round, radial-gradient(circle farthest-side,#0000 var(--s-skew),#000) calc(var(--s-skew) + var(--s-factor) * var(--s-radius)) 0/var(--s-radius) var(--s-radius) no-repeat round;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;


        }
}
}


 
@page:nth(2){      
 
        background-size: 98%;
/* -------------- P A G E - S T Y L E ------------  */
        background-repeat: no-repeat;
 
        background-position: center;
.pagebreak { page-break-after: always; }
        @bottom-center{
 
                content:"";
@page {
        }
 
/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */
 
    size: A4;
    margin-top: 15mm;
    margin-bottom: 15mm;
 
}
}




@page:right {
@page:nth(3){      
 
         background-size: 98%;
    margin-left: 35mm;
         background-repeat: no-repeat;
    margin-right: 20mm;
         background-position: center;
 
        @top-center{
    @right-middle {
                font-family: 'poppinsblack';
        color: var(--body-text-color);
                font-size:12pt;
        content: counter(page);
                content:"Frontier Climate: a bugreport";
        font-family: var(--page-number-font);
        }
    }   
 
    @right-top {
         color: var(--glitter-color);
        content: var(--PUB-title);
         font-family: var(--title-font);
         margin-right: 0.8cm;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
 
    p:nth-of-type(3n) {
      position: relative;
      z-index: -1;
      border-right: 1cm solid var(--sparkling-color);
      padding-right: 1cm;
      margin-right: -2cm;
      /* margin-left: -1cm;
      border-top-right-radius: 25% 200px;
      border-bottom-right-radius: 25% 200px; */ 
    }
 
}
}




@page:left {
@page:blank{
 
background-color:white;
    margin-right: 35mm;
        @bottom-center{
    margin-left: 20mm;
                content:"";
 
color: white;
 
         }
    @left-middle {
        color: var(--body-text-color);
        content: counter(page);
        font-family: var(--page-number-font);
    }   
 
    @left-top {
        color: var(--glitter-color);
        content: var(--PUB-title);
        font-family: var(--title-font);
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
         text-orientation: mixed;
    }
   
    p:nth-of-type(3n) {
      position: relative;
      z-index: -1;
      border-left: 1cm solid var(--sparkling-color);
      padding-left: 1cm;
      margin-left: -2cm;
      /* margin-right: -1cm;
      border-top-left-radius: 25% 200px;
      border-bottom-left-radius: 25% 200px; */ 
    }
 
}
}


.pagedjs_sheet {
div.section, div.section div.contrib:nth-of-type(1){
    box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
      break-before: right;
}
}
 
div.contrib:not(:first-of-type){
body{
      break-before: always;  
    background-color: var(--color-paper);
}
}
 
div.contrib{
/* -------------- P A G E - S T Y L E - E N D S -----------  */
      page: contrib;
 
 
 
/* -------------- T E X T - S T Y L E ---------------------  */
 
 
h1{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h1-font-size);
    font-weight: unset;
    line-height: calc(var(--h1-font-size) + 1.5pt);
    text-wrap: pretty;
}
}


h2{
span.bookcover {
    color: var(--highlight-text-color);
string-set: sectiontitle content(text);  
    font-family: var(--title-font);
        font-size: 125px;
    font-size: var(--h2-font-size);
        line-height: 0.55;
    font-weight: unset;
margin: 0;
    line-height: calc(var(--h2-font-size) + 1.5pt);
        font-family: 'poppinsblack';
    text-wrap: pretty;
        position:relative;
        bottom: 5px;
        hyphens:auto;
color: red;
}
}


h3{
span.bookcover-title{
    color: var(--highlight-text-color);
        string-set: sectiontitle content(text);  
    font-family: var(--title-font);
        font-size: 65px;
    font-size: var(--h3-font-size);
        line-height: 1.3;
    line-height: calc(var(--h3-font-size) + 1.5pt);
    margin: 0;
    text-wrap: pretty;
        font-family: poppinsblack;
        position:absolute;
        top: 50px;
        left:35px;
        hyphens:auto;
        color: white;
        padding: 25px;
        transform: rotate(-7deg);
        background: linear-gradient(0deg, red, pink, fuchsia);
        z-index:1;
}
}


h4{
span.frenchtitle{
    color: var(--highlight-text-color);
string-set: sectiontitle content(text);  
    font-family: var(--title-font);
        font-size: 40px;
    font-size: var(--h4-font-size);
        line-height: 0.55;
    line-height: calc(var(--h4-font-size) + 1.5pt);
margin: 0;
    text-wrap: pretty;
        font-family: 'poppinsblack';
        display:inline;
        position:relative;
        hyphens:auto;
        color: black;
}
}




b{
body{
    color: var(--highlight-text-color);
        color: black;
font-size: var(--font-size);
line-height: 1.5;
        font-family: 'poppinsregular';
}
}


p{
div.pagebreak{
     color: var(--body-text-color);
     page-break-after: always;
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
    text-indent: calc(var(--p-font-size) + 2pt);
    text-wrap: pretty;
}
}
 
div.nobreak{
ul, ol{
     page-break-inside: avoid;
     color: var(--body-text-color);
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
}
}


p a,
li a{
    color: var(--color-paper);
    background-color: var(--glitter-color);
    padding:0.1em 0.2em;
    text-decoration: none;
}
figcaption{
  font-family: var(--code-font);
  font-color: var(--body-text-color);
}


/* GENERAL ELEMENTS */


/* authors */
blockquote {
h2 + p b {
font-family: 'compagnon-italic';
  padding: 10px;
  border-radius: 60% / 15px;
  border-top: 2.54px solid;
  border-bottom: 2.5px solid;
}
}




/* -------------- T E X T - B L O C K - E N D S -----------  */
.runningtitle {
 
   display:none;
 
 
 
 
/* -------------- C O V E R - P A G E ---------------------  */
 
/* animation adds randomness */
 
/* @keyframes morph {
    0% { border-radius:60% 40% 30% 70%/60% 30% 40% 40% }
  50% { border-radius:60% 30% 60% 40%/50% 70% 60% 60% }
   100% { border-radius:60% 40% 30% 70%/60% 30% 40% 60% }
} */
 
@page:first {
  margin-left: 20mm !important;
  background-color: var(--highlight-text-color);
/* animation: morph 8s ease-in-out infinite alternate; */
 
  @right-middle {
    content: none;
  }   
 
  @right-top {
    content: none;
  }
}
}
 
h2:not( .runningtitle ~ h2 ){
.bookcover h1 {
string-set: contributiontitle content(text);  
  font-family: malebolge;
  color: var(--color-paper);
  text-align: center;
  font-size: 4.3rem;
  line-height: 0.9;
}
}


/* -------------- C O V E R - P A G E - E N D S -----------  */
h2 {font-size: 2.5em; color: fuchsia; page-break-before: right;}
h3 {font-size: 1.7em; color: red }
h4 {font-size: 1.2em;}


h2, h3, h4{
margin: 1em 0 0.5em 0;
font-family: 'poppinsblack';
line-height: 1.3em;
page-break-after: avoid;
}


b, strong {font-family: 'poppinsbold'}


 
p{
 
    margin: 0 0 1em 0;
/* -------------- I N L A Y - P A G E ---------------------  */
 
@page:nth(2) {
  margin: 0;
}
}


.inlay {
/*
  height: 100%;
.contrib p{
  width: 100%;
    orphans:2;
  position: absolute;
    widows:2;
  overflow: hidden;
  scale: 0.97;
  /* Masking edges option 1: use a predefined shape mask */
  mask: var(--spikes);
  border-radius: 130px;
}
}
*/


@page:nth(3) {
.thumb{
  margin: 0;
    /* image caption */
    font-size: 10pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: poppinsregular;
}
}
 
img{
.inlay.option2 {
float: right;
  /* Masking edges option 2: use the alpha channel of a PNG image (has to be on this wiki) */
    max-width: 45%;
  mask-image: url(/wiki/images/4/4a/Mask-example.png);
    height: auto;
  mask-size: 120% auto;
    margin: 0 8pt 8pt 0;
}
}
 
.thumbinner{
.inlay::before {
    max-width:100%;
 
  content: var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title);
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  display: flex;
  align-items: center;
 
  font-family: amakan-sheet;
  background-color: var(--glitter-color);
  color: var(--color-paper);
  font-size: 4.96rem;
  line-height: 1.005;
  text-align: center;
  word-break: break-all;
 
  opacity: 0.8;
  rotate: -40deg;
  scale: 1.6;
  skew: 30px;
  transform: skew(-9.06turn, 51deg);
 
}
}
 
pre{
/* -------------- I N L A Y - P A G E - E N D S -----------  */
    font-size: 8pt;
 
    line-height: 1.8;
 
    white-space: pre;
 
    margin: 16pt 16pt;
 
/* -------------- C H I M E R A ---------------------------  */
 
h2 {
position: relative;
}
}
 
table{
h2::after,
    width: 100%;
h2::before {
  position: absolute;
  font-family: teranoptia;
  font-size: 0.5rem;
  --distance: -2rem;
}
}
h2::before {
sup{
  top: var(--distance); right: 0;
    line-height: 0;
  height: 100%; width: 100%;
  text-align: right;
}
}
h2::after {
a,
  top: calc( var(--distance) / 2 ); right: var(--distance);
a:visited,
  height: 600px; width: 100%;
a:active,
  text-align: left;
a:hover{
  writing-mode: vertical-rl;
    color: red;
  text-orientation: mixed;
    text-decoration: none;
    border-bottom: 1px solid red;
}
}


h2::before { content: "fgh attr mnb" }
/* specific details */
h2::after { content: "stuvwxyz yfgfgh FGHIJKLMN" }
a.external{
h2:nth-of-type(2n)::after { content: "fghij zxcv werttry" }
}
h2:nth-of-type(3n)::after { content: "werty fjrfjr hjhjhj asdfg" }


hr{
a.text{
  height: 1.5em;
    word-break: none !important;
  border: none;
  position: relative;
  align-content: center;
  margin: 0;
}
}
 
b,strong {
hr::before{
    font-weight:500;
    content: "WXXXUZ  WbcDbbl CXbXbcUcẊXXXUZ WbcDbbl";
    color: var(--highlight-text-color);
    font-family: teranoptia;
    font-size: 0.7rem;
    position: absolute;
    text-align: center;
    width: -webkit-fill-available;
}
}
small, .small {font-size: 8pt;}


/* -------------- C H I M E R A - E N D S -----------------  */
span.reference-text {
 
    float: footnote;
 
    line-height: 1.3;
 
/* -------------- D I S O R D E R E D - L I S T S ---------  */
 
 
.disordered {
  text-align: center;
}
}
 
.reference-text::footnote-call {
.disordered p {
    font-family:'poppinsregular';
  font-weight: bold;
font-variant-position: super;
  font-style: italic;
padding-top: 1px;
}
}
 
       
.disordered ul {
.reference-text::footnote-marker {
  position: relative;
    font-family:'poppinsregular';
  list-style: none;
  columns: 2;
  line-height: 1;
  padding: 50px;
}
}
 
.contents ul{
.disordered ul li {
    margin-top:0.5em;
  --xf: 150px; /* x-axis multiplication factor */
  --yf: 5.5px; /* y-axis multiplication factor */
  translate: calc( var(--xf) * var(--x) ) calc( var(--yf) * var(--y) );
  margin: 5px;
}
}
 
.contents h3{
/* ideally, variables --x and --y are randomly generated for each list using plain Javascript, but manually also works */
    margin-bottom: 0.5em;
 
.disordered ul li:nth-of-type(1n) { --x: 0.345; --y: 0.123; }
.disordered ul li:nth-of-type(2n) { --x: 0.468; --y: -0.353; }
.disordered ul li:nth-of-type(3n) { --x: -0.658; --y: 0.563; }
.disordered ul li:nth-of-type(4n) { --x: 0.013; --y: -0.067; }
.disordered ul li:nth-of-type(5n) { --x: -0.995; --y: -0.903; }
.disordered ul li:nth-of-type(6n) { --x: 0.245; --y: -0.789; }
.disordered ul li:nth-of-type(7n) { --x: 0.435; --y: 0.823; }
.disordered ul li:nth-of-type(8n) { --x: -0.125; --y: 0.943; }
.disordered ul li:nth-of-type(9n) { --x: -0.235; --y: 0.423; }
.disordered ul li:nth-of-type(10n) { --x: -0.345; --y: 0.723; }
 
/* -------------- D I S O R D E R E D - L I S T S - E N D S  */
 
 
 
 
/* -------------- S C A T T E R - S P E C S ---------------  */
 
img {
  border-radius: 3px;
  border: 5px solid var(--glitter-color);
}
}


#Bugreporting_how-to img {
/* WIKISTYLING */
  mask: var(--spikes);
}


/* -------------- S C A T T E R - S P E C S - E N D S -----  */
.tocnumber { display: none; }

Latest revision as of 11:52, 7 November 2024

body { 
margin: auto;
line-height: 1.4em;
max-width: 900px;
padding: 1.5em 1em;
}

a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
a:hover {color: red !important}

.gallerybox ul, .gallerybox li {style: none;}

.gallerybox li {width:200px; float: right;}

.tocnumber {display: none;}

/* toclimit */
.toclimit-2 .toclevel-1 ul,
.toclimit-3 .toclevel-2 ul,
.toclimit-4 .toclevel-3 ul,
.toclimit-5 .toclevel-4 ul,
.toclimit-6 .toclevel-5 ul,
.toclimit-7 .toclevel-6 ul {
	display: none;
}


@font-face {
    font-family: 'poppinsregular';
    src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
    src: url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'poppinsbold';
    src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
    src: url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
    font-weight: bold;
    font-style: bold;
}


@font-face {
    font-family: 'poppinsblack';
    src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
    src: url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
    font-weight: bolder;
    font-style: bolder;
}



@font-face {
    font-family: 'compagnon-italic';
    src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
         url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
         url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
    font-weight: normal;
    font-style: normal;

}

:root{
	--font-size: 10pt;
}


@page{
	size: 148mm 210mm;
	margin: 17mm 15mm 19mm 15mm;

	@bottom-center{
		margin-top: -4mm;
		font-family: 'poppinsregular';
		font-size: 9pt;
		content: counter(page);
	}
       @footnote {
           float: bottom;
           border-top: solid #222 thin;
           padding-top: 8pt;
           font-family: 'poppinsregular';
font-variant-position: normal;
font-size: 8pt;
       }

}
@page:first{

   background-size: 100%;
   background-repeat: no-repeat;
   background-position: bottom 20% center;

	
	@top-center{
                font-family: poppinsblack;
		content: "";
                font-size:14pt;

	}

        @bottom-center{
                font-family: 'poppinsblack';
                font-size:12pt;
		content: "The Institute for Technology In the Public Interest";
                font-size:12pt;

        }
}

@page:nth(2){        
        background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;
         @bottom-center{
                content:"";
        }
}


@page:nth(3){        
        background-size: 98%;
        background-repeat: no-repeat;
        background-position: center;
         @top-center{
                font-family: 'poppinsblack';
                font-size:12pt;
                content:"Frontier Climate: a bugreport";
        }
}


@page:blank{
	background-color:white;
         @bottom-center{
                content:"";
color: white;
        }
}

div.section, div.section div.contrib:nth-of-type(1){
      break-before: right;
}
div.contrib:not(:first-of-type){
      break-before: always;    
}
div.contrib{
       page: contrib;
}

span.bookcover {
	string-set: sectiontitle content(text); 
        font-size: 125px;
        line-height: 0.55;
	margin: 0;
        font-family: 'poppinsblack';
        position:relative;
        bottom: 5px;
        hyphens:auto;
color: red;
}

span.bookcover-title{
        string-set: sectiontitle content(text); 
        font-size: 65px;
        line-height: 1.3;
	    margin: 0;
        font-family: poppinsblack;
        position:absolute;
        top: 50px;
        left:35px;
        hyphens:auto;
        color: white;
        padding: 25px;
        transform: rotate(-7deg);
        background: linear-gradient(0deg, red, pink, fuchsia);
        z-index:1;
}

span.frenchtitle{
	string-set: sectiontitle content(text); 
        font-size: 40px;
        line-height: 0.55;
	margin: 0;
        font-family: 'poppinsblack';
        display:inline;
        position:relative;
        hyphens:auto;
        color: black;
}


body{
        color: black;
	font-size: var(--font-size);
	line-height: 1.5;
        font-family: 'poppinsregular';
}

div.pagebreak{
    page-break-after: always;
}
div.nobreak{
    page-break-inside: avoid;
}


/* GENERAL ELEMENTS */

blockquote {
font-family: 'compagnon-italic';
}


.runningtitle {
  display:none;
}
h2:not( .runningtitle ~ h2 ){
	string-set: contributiontitle content(text); 
}

h2 {font-size: 2.5em; color: fuchsia; page-break-before: right;}
h3 {font-size: 1.7em; color: red }
h4 {font-size: 1.2em;}

h2, h3, h4{
margin: 1em 0 0.5em 0;
font-family: 'poppinsblack';
line-height: 1.3em;
page-break-after: avoid;
}

b, strong {font-family: 'poppinsbold'}

p{
    margin: 0 0 1em 0;
}

/*
.contrib p{
    orphans:2;
    widows:2;
}
*/

.thumb{
    /* image caption */
    font-size: 10pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: poppinsregular;
}
img{
float: right;
    max-width: 45%;
    height: auto;
    margin: 0 8pt 8pt 0;
}
.thumbinner{
    max-width:100%;
}
pre{
    font-size: 8pt;
    line-height: 1.8;
    white-space: pre;
    margin: 16pt 16pt;
}
table{
    width: 100%;
}
sup{
    line-height: 0;
}
a,
a:visited,
a:active,
a:hover{
    color: red;
    text-decoration: none;
    border-bottom: 1px solid red;
}

/* specific details */
a.external{
}

a.text{
    word-break: none !important;
}
b,strong {
     font-weight:500;
}
small, .small {font-size: 8pt;}

span.reference-text { 
    float: footnote;
    line-height: 1.3;
}
.reference-text::footnote-call {
    font-family:'poppinsregular';
font-variant-position: super;
padding-top: 1px;
}
        
.reference-text::footnote-marker {
    font-family:'poppinsregular';
}
.contents ul{
    margin-top:0.5em;
}
.contents h3{
    margin-bottom: 0.5em;
}

/* WIKISTYLING */

.tocnumber { display: none; }