UnfoldingCSS:StyleBox: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
No edit summary
 
(177 intermediate revisions by 2 users not shown)
Line 1: Line 1:
/*
 
  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 of classic
  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!
  Camilo & Karl
  https://camilogarcia.info/
  https://moubarak.eu/
*/
/* -------------- F O N T - B A N K ---------------------  */
/* ---------------------------------- C L A S S I C S ---  */
/*
@font-face {
  font-family: 'windy';
  src: url('/wiki/images/7/7b/SpookySquiggles-LLwG.woff') format('woff');
  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-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@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-family: 'authentic';
  src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@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 */
/* https://www.tunera.xyz/fonts/teranoptia/ */
@font-face {
  font-family: 'teranoptia';
  src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff');
  font-weight: 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 {
  font-family: 'syne-italic';
  src: url('https://titipi.org/wiki/images/2/24/Syne-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}


:root {


/* ************* P A G E ****************** */
/* -------------- F O N T - B A N K - E N D S -----------  */


    --page-size: A4;
    --color-paper: HoneyDew; // for printing purposes better set it white


:root {


/* ************* C O N T E N T ************ */
/* ************* C O N T E N T ************ */


     --PUB-title: 'PUB Title';
     --PUB-title: 'Infrastructural Interactions';
     --PUB-collective: 'Enter your collective here';
     --PUB-collective: 'TiTiPi & tItIpI';
     --PUB-year: '3000';
     --PUB-year: '3000';


Line 17: Line 260:
/* ************* F O N T S **************** */
/* ************* F O N T S **************** */


     --title-font: Serif;
     --title-font: syne-italic;
     --body-font: Sanserif;
     --body-font: authentic;
     --code-font: Monospace;
     --code-font: Monospace;
     --quote-font: Serif;
     --quote-font: Serif;
     --footnote-font: Sanserif;
     --footnote-font: authenticond;
     --page-number-font: Monospace;
     --page-number-font: authentic;


     --h1-font-size: 24pt;
     --h1-font-size: 30pt;
     --h2-font-size: 18pt;
    --h2-font-size: 24pt;
     --h3-font-size: 15pt;
     --h3-font-size: 18pt;
     --h4-font-size: 16pt;
     --p-font-size: 12pt;
     --p-font-size: 12pt;
      
      
Line 32: Line 276:
/* ************* C O L O R **************** */
/* ************* C O L O R **************** */


     --text-color: MidnightBlue;
     --color-paper: floralwhite;
     --highlight-color: Salmon;
    --body-text-color: darkslateblue;
     --sparkling-color: LimeGreen;
     --highlight-text-color: tomato;
     --sparkling-color: PeachPuff;
    --glitter-color: MediumSlateBlue ;
 
 
/* *********** S H A P E S **************** */
 
    --s-radius: 80px;
    --s-skew: 100%;
    --s-factor: 0.5;
    --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;


}
}
Line 40: Line 294:




/* -------------- P A G E - B L O C K -----------  */
/* -------------- P A G E - S T Y L E ------------  */
 
.pagebreak { page-break-after: always; }


@page {
@page {
    size: var(--page-size);
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
}


/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */


@page:first{
    size: A4;
    margin-top: 15mm;
    margin-bottom: 15mm;


    @right-middle {
}
        content: none;
    }   
 
    @right-top {
        content: none;
    }


}


@page:right {
@page:right {
Line 67: Line 315:


     @right-middle {
     @right-middle {
        color: var(--body-text-color);
         content: counter(page);
         content: counter(page);
         font-family: var(--page-number-font);
         font-family: var(--page-number-font);
Line 72: Line 321:


     @right-top {
     @right-top {
        color: var(--glitter-color);
         content: var(--PUB-title);
         content: var(--PUB-title);
         font-family: var(--title-font);
         font-family: var(--title-font);
Line 78: Line 328:
         text-orientation: mixed;
         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; */ 
    }
 
}
}


Line 86: Line 347:
     margin-right: 35mm;
     margin-right: 35mm;
     margin-left: 20mm;
     margin-left: 20mm;


     @left-middle {
     @left-middle {
        color: var(--body-text-color);
         content: counter(page);
         content: counter(page);
         font-family: var(--page-number-font);
         font-family: var(--page-number-font);
Line 93: Line 356:


     @left-top {
     @left-top {
        color: var(--glitter-color);
         content: var(--PUB-title);
         content: var(--PUB-title);
         font-family: var(--title-font);
         font-family: var(--title-font);
Line 100: Line 364:
     }
     }
      
      
    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; */ 
    }
}
}


Line 110: Line 385:
}
}


/* -------------- P A G E - B L O C K - E N D S -----------  */
/* -------------- P A G E - S T Y L E - E N D S -----------  */
 




/* -------------- 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;
}


/* -------------- T E X T - B L O C K ---------------------  */
h2{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h2-font-size);
    font-weight: unset;
    line-height: calc(var(--h2-font-size) + 1.5pt);
    text-wrap: pretty;
}


h3{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h3-font-size);
    line-height: calc(var(--h3-font-size) + 1.5pt);
    text-wrap: pretty;
}


h1, h2, h3{
h4{
  color: var(--highlight-color);
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h4-font-size);
    line-height: calc(var(--h4-font-size) + 1.5pt);
    text-wrap: pretty;
}
}


b{
b{
  color: var(--sparkling-color);
    color: var(--highlight-text-color);
}
}


p{
p{
     color: var(--text-color);
     color: var(--body-text-color);
     font-family: var(--body-font);
     font-family: var(--body-font);
     font-size: var(--font-size);
     font-size: var(--p-font-size);
     line-height: cal(var(--font-size)+ 2);
     line-height: calc(var(--p-font-size) + 2pt);
     text-indent: 15pt;
     text-indent: calc(var(--p-font-size) + 2pt);
     text-wrap: pretty;
     text-wrap: pretty;
}
}


ul, ol{
    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);
}
/* authors */
h2 + p b {
  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 -----------  */
/* -------------- 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;
  }
}
.bookcover h1 {
  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 -----------  */
/* -------------- I N L A Y - P A G E ---------------------  */
@page:nth(2) {
  margin: 0;
}
.inlay {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  scale: 0.97;
  /* Masking edges option 1: use a predefined shape mask */
  mask: var(--spikes);
  border-radius: 130px;
}
@page:nth(3) {
  margin: 0;
}
.inlay.option2 {
  /* Masking edges option 2: use the alpha channel of a PNG image (has to be on this wiki) */
  mask-image: url(/wiki/images/4/4a/Mask-example.png);
  mask-size: 120% auto;
}
.inlay::before {
  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);
}
/* -------------- I N L A Y - P A G E - E N D S -----------  */
/* -------------- C H I M E R A ---------------------------  */
h2 {
position: relative;
}
h2::after,
h2::before {
  position: absolute;
  font-family: teranoptia;
  font-size: 0.5rem;
  --distance: -2rem;
}
h2::before {
  top: var(--distance); right: 0;
  height: 100%; width: 100%;
  text-align: right;
}
h2::after {
  top: calc( var(--distance) / 2 ); right: var(--distance);
  height: 600px; width: 100%;
  text-align: left;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
h2::before { content: "fgh attr mnb" }
h2::after { content: "stuvwxyz yfgfgh FGHIJKLMN" }
h2:nth-of-type(2n)::after { content: "fghij zxcv werttry" }
h2:nth-of-type(3n)::after { content: "werty fjrfjr hjhjhj asdfg" }
hr{
  height: 1.5em;
  border: none;
  position: relative;
  align-content: center;
  margin: 0;
}
hr::before{
    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;
}
/* -------------- C H I M E R A - E N D S -----------------  */
/* -------------- D I S O R D E R E D - L I S T S ---------  */
.disordered {
  text-align: center;
}
.disordered p {
  font-weight: bold;
  font-style: italic;
}
.disordered ul {
  position: relative;
  list-style: none;
  columns: 2;
  line-height: 1;
  padding: 50px;
}
.disordered ul li {
  --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;
}
/* ideally, variables --x and --y are randomly generated for each list using plain Javascript, but manually also works */
.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);
}


p:nth-of-type(3n) {
#Bugreporting_how-to img {
   border: 2px solid orange;
   mask: var(--spikes);
  margin-left: -10px;
}
}


/* -------------- P A G E - B L O C K - E N D S -----------  */
/* -------------- S C A T T E R - S P E C S - E N D S -----  */

Latest revision as of 13:51, 5 September 2024

/* 
  
  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 of classic 
  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!
  Camilo & Karl

  https://camilogarcia.info/
  https://moubarak.eu/

*/

/* -------------- F O N T - B A N K ---------------------  */

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

/*
@font-face {
  font-family: 'windy';
  src: url('/wiki/images/7/7b/SpookySquiggles-LLwG.woff') format('woff');
  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-family: 'authenticond';
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@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-family: 'authentic';
  src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@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 */
/* https://www.tunera.xyz/fonts/teranoptia/ */
@font-face { 
  font-family: 'teranoptia';
  src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff');
  font-weight: 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 { 
  font-family: 'syne-italic';
  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 -----------  */


:root {

/* ************* 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;
    --body-text-color: darkslateblue;
    --highlight-text-color: tomato;
    --sparkling-color: PeachPuff;
    --glitter-color: MediumSlateBlue ;


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

    --s-radius: 80px;
    --s-skew: 100%;
    --s-factor: 0.5;
    --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;

}



/* -------------- P A G E - S T Y L E ------------  */

.pagebreak { page-break-after: always; }

@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 {

    margin-left: 35mm;
    margin-right: 20mm;

    @right-middle {
        color: var(--body-text-color);
        content: counter(page);
        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 {

    margin-right: 35mm;
    margin-left: 20mm;


    @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 {
    box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
}

body{
    background-color: var(--color-paper);
}

/* -------------- P A G E - S T Y L E - E N D S -----------  */



/* -------------- 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{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h2-font-size);
    font-weight: unset;
    line-height: calc(var(--h2-font-size) + 1.5pt);
    text-wrap: pretty;
}

h3{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h3-font-size);
    line-height: calc(var(--h3-font-size) + 1.5pt);
    text-wrap: pretty;
}

h4{
    color: var(--highlight-text-color);
    font-family: var(--title-font);
    font-size: var(--h4-font-size);
    line-height: calc(var(--h4-font-size) + 1.5pt);
    text-wrap: pretty;
}


b{
    color: var(--highlight-text-color);
}

p{
    color: var(--body-text-color);
    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;
}

ul, ol{
    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);
}


/* authors */
h2 + p b {
  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 -----------  */





/* -------------- 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;
  }
}

.bookcover h1 {
  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 -----------  */





/* -------------- I N L A Y - P A G E ---------------------  */

@page:nth(2) {
  margin: 0;
}

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

@page:nth(3) {
  margin: 0;
}

.inlay.option2 {
  /* Masking edges option 2: use the alpha channel of a PNG image (has to be on this wiki) */
  mask-image: url(/wiki/images/4/4a/Mask-example.png);
  mask-size: 120% auto;
}

.inlay::before {

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

}

/* -------------- I N L A Y - P A G E - E N D S -----------  */




/* -------------- C H I M E R A ---------------------------  */

h2 {
 position: relative;
}

h2::after,
h2::before {
  position: absolute;
  font-family: teranoptia;
  font-size: 0.5rem;
  --distance: -2rem;
}
h2::before {
  top: var(--distance); right: 0;
  height: 100%; width: 100%;
  text-align: right;
}
h2::after {
  top: calc( var(--distance) / 2 ); right: var(--distance);
  height: 600px; width: 100%;
  text-align: left;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

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

hr{
  height: 1.5em;
  border: none;
  position: relative;
  align-content: center;
  margin: 0;
}

hr::before{
    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;
}

/* -------------- C H I M E R A - E N D S -----------------  */



/* -------------- D I S O R D E R E D - L I S T S ---------  */


.disordered {
  text-align: center;
}

.disordered p {
  font-weight: bold;
  font-style: italic;
}

.disordered ul {
  position: relative;
  list-style: none;
  columns: 2;
  line-height: 1;
  padding: 50px;
}

.disordered ul li {
  --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;
}

/* ideally, variables --x and --y are randomly generated for each list using plain Javascript, but manually also works */

.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 {
  mask: var(--spikes);
}

/* -------------- S C A T T E R - S P E C S - E N D S -----  */