UnfoldingCSS:Spellbreak training: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
Tag: Manual revert
No edit summary
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-face {
  font-family: 'garden';
font-family:'Anthony';
  src: url('https://titipi.org/wiki/images/b/b2/Bitwise.woff') format('woff');
src:url('/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
  font-weight: normal;
font-weight:normal;
  font-style: normal;
font-style:normal
}
}


@font-face {
@font-face {
  font-family:'Picnic';
    font-family: 'asulbold';
  src:url('https://titipi.org/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
    src: url('/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
  font-weight:normal;
        url('/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
  font-style:normal
    font-weight: normal;
    font-style: normal;
}
}


@font-face {
@font-face {
  font-family: 'asulbold';
    font-family: 'asulregular';
  src: url('https://titipi.org/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
    src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'),
      url('https://titipi.org/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
        url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2');
  font-weight: bold;
    font-weight: normal;
  font-style: normal;
    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-face {
  font-family: 'compagnon-italic';
    font-family: 'compagnon-italic';
  src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
    src: url('/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
      url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'),
        url('/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
      url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
        url('/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
  font-weight: normal;
    font-weight: normal;
  font-style: 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;
}
}


 
:root{
@font-face {
--font-size: 11pt;
  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 {
@page{
  font-family: 'poppinsblack';
size: 148mm 210mm;
  src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
margin: 17mm 15mm 19mm 15mm;
      url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
  font-weight: bolder;
  font-style: bolder;
}


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


@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;
}
}
@page:first{


  background-image: url(https://titipi.org/wiki/images/6/66/Vague_intellectual_pleasure.png);
  background-size: 98%;
  background-repeat: no-repeat;
  background-position: center center;


@font-face {  
  font-family: 'adelphe-bold';
@top-center{
  src: url('https://titipi.org/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
                font-family: asulbold;
      url('https://titipi.org/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
content: "NEoN Digital Ethics Audit";
  font-weight: normal;
                font-size:12pt;
  font-style: normal;
}


}


@font-face {
        @bottom-center{
  font-family: 'Fourmi';
                font-family: asulbold;
  src: url('https://titipi.org/wiki/images/7/7c/Fourmi.otf') format('opentype');
content: "The Institute for Technology In the Public Interest";
  font-weight: normal;
                font-size:12pt;
  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;
}
}


 
@page:nth(2){       
@font-face {
        background-color: white;
  font-family: 'authenticond';
        @bottom-center{
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
                content:"";
  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;
}
}


@page:nth(3) {
background-color:white;
@top-center{
                font-family: asulbold;
content: "NEoN Digital Ethics Audit";
                font-size:12pt;


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


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


/* ---------------------------------- ¡ ¡ ¡ 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 */
@page:blank{
/* https://www.tunera.xyz/fonts/amakan/ */
background-color:white;
@font-face {  
        @bottom-center{
  font-family: 'amakan-sheet';
                content:"";
  src: url('https://titipi.org/wiki/images/b/b1/Amakan-Sheet.woff') format('woff');
color: white;
  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 */
div.section, div.section div.contrib:nth-of-type(1){
/* https://www.tunera.xyz/fonts/malebolge/ */
      break-before: right;
@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;
}
}
 
div.contrib:not(:first-of-type){
@font-face {
      break-before: always;  
  font-family: 'syne-italic';
  src: url('https://titipi.org/wiki/images/2/24/Syne-Italic.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
}
 
div.contrib{
 
      page: contrib;
/* -------------- F O N T - B A N K - E N D S*/
 
 
:root {
 
/* ************* C O N T E N T ************ */
 
    --PUB-title: 'Spellbreak Training';
    --PUB-collective: 'TiTiPi & tItIpI';
    --PUB-year: '3000';
 
 
/* ************* F O N T S **************** */
 
    --title-font: Anthony;
    --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: white;
    --body-text-color: MediumSlateBlue;
    --highlight-text-color: deeppink;
    --sparkling-color: rgb(171, 0, 250);
    --glitter-color: rgb(0, 163, 166) ;
 
 
/* *********** 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;
 
}
}


 
span.bookcover {
 
string-set: sectiontitle content(text);  
/* -------------- P A G E - S T Y L E */
        font-size: 140px;
 
        line-height: 0.55;
.pagebreak { page-break-after: always; }
margin: 0;
 
        font-family: 'Picnic';
@page {
        position:relative;
 
        hyphens:auto;
/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */
color: #CC3399;
 
    size: A4;
    margin-top: 15mm;
    margin-bottom: 20mm;
 
}
}


 
span.frenchtitle{
@page:right {
string-set: sectiontitle content(text);  
 
         font-size: 140px;
    margin-left: 35mm;
        line-height: 0.55;
    margin-right: 20mm;
margin: 0;
 
         font-family: 'Picnic';
    @right-middle {
         display:inline;
        color: var(--body-text-color);
         position:relative;
        content: counter(page);
        hyphens:auto;
         font-family: var(--page-number-font);
        color: black;
    }   
 
    @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 {
body{
 
         color: black;
    margin-right: 35mm;
font-size: var(--font-size);
    margin-left: 20mm;
line-height: 1.4;
 
         font-family: 'asulregular';
 
    @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.pagebreak{
     box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
     page-break-after: always;
}
}
 
div.nobreak{
body{
     page-break-inside: avoid;
     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 -------  */


/* GENERAL ELEMENTS */


h1{
blockquote {
    color: var(--highlight-text-color);
font-family: 'compagnon-italic';
    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{
h2{
    color: var(--highlight-text-color);
margin-top:0;
    font-family: var(--title-font);
font-weight: 600;
    font-size: var(--h2-font-size);
line-height: 1;
    font-weight: unset;
font-family: 'Picnic';
    line-height: calc(var(--h2-font-size) + 1.5pt);
font-size: 2.6rem;
    text-wrap: pretty;
page-break-before: right;
}
}
 
.runningtitle {
h3{
  display:none;
    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;
}
}
 
h2:not( .runningtitle ~ h2 ){
h4{
string-set: contributiontitle content(text);  
    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;
}
}


h3 {font-family: Picnic; font-size: 1.5em; line-height: 1;}


b{
h3, h4, h5, h6{
     color: var(--highlight-text-color);
     margin: 0 0 1em 0;
    page-break-after: avoid;
    font-weight: 600;
}
}


p{
p{
     color: var(--body-text-color);
     margin: 0 0 1em 0;
    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);
.contrib p{
    font-family: var(--body-font);
     orphans:2;
    font-size: var(--p-font-size);
     widows:2;
     line-height: calc(var(--p-font-size) + 2pt);
}
}
*/


p a,
.thumb{
li a{
    /* image caption */
    color: var(--color-paper);
    font-size: 10pt;
    background-color: var(--glitter-color);
    line-height: 1.25;
    padding:0.1em 0.2em;
    margin: 24pt 16pt 16pt 16pt;
    text-decoration: none;  
    page-break-inside: avoid;
    font-family: asulregular;
}
}
 
img{
figcaption{
    position: relative;
  font-family: var(--code-font);
    display: block;
  font-color: var(--body-text-color);
    max-width: 100%;
    height: auto;
    margin: 0 0 8pt 0;
}
}
 
.thumbinner{
 
    max-width:100%;
/* authors */
h2 + p b {
  padding: 10px;
  border-radius: 60% / 15px;
  border-top: 2.54px solid;
  border-bottom: 2.5px solid;
}
}
 
pre{
 
     font-size: 8pt;
/* -------------- T E X T - B L O C K - E N D S */
    line-height: 1.8;
 
    white-space: pre;
 
     margin: 16pt 16pt;
 
 
 
/* -------------- 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;
  }
}
}
 
table{
.bookcover h1 {
    width: 100%;
  font-family: malebolge;
  color: var(--color-paper);
  text-align: center;
  font-size: 4.3rem;
  line-height: 0.9;
}
}
 
sup{
/* -------------- C O V E R - P A G E - E N D S */
    line-height: 0;
 
 
 
 
 
/* -------------- I N L A Y - P A G E */
@page:nth(2) {
  margin: 0;
}
}
 
a,
.inlay {
a:visited,
  height: 100%;
a:active,
  width: 100%;
a:hover{
  position: absolute;
    color: #CC3399;
  overflow: hidden;
    text-decoration: none;
  scale: 0.97;
    border-bottom: 1px solid #CC3399;
  /* 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 {
/* specific details */
 
a.external{
  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 */
a.text{
 
    word-break: none !important;
 
 
 
/* -------------- 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;
}
}
 
b,strong {
h2::before { content: "fgh attr mnb" }
    font-weight:500;
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;
}
}
small, .small {font-size: 8pt;}


hr::before{
span.reference-text {
    content: "WXXXUZ  WbcDbbl CXbXbcUcẊXXXUZ WbcDbbl";
     float: footnote;
    color: var(--highlight-text-color);
    font-family: teranoptia;
     font-size: 0.7rem;
    position: absolute;
    text-align: center;
    width: -webkit-fill-available;
}
}
 
.reference-text::footnote-call {
/* -------------- C H I M E R A - E N D S */
    font-family:'asulregular';
 
 
 
/* ----------- D I S O R D E R E D - L I S T S */
 
.disordered {
  text-align: center;
}
}
 
       
.disordered p {
.reference-text::footnote-marker {
  font-weight: bold;
    font-family:'asulregular';
  font-style: italic;
}
}
 
.contents ul{
.disordered ul {
    margin-top:0.5em;
  position: relative;
  list-style: none;
  columns: 2;
  line-height: 1;
  padding: 50px;
}
}
 
.contents h3{
.disordered ul li {
    margin-bottom: 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;
}
}


/* 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; }
/* WIKISTYLING */
.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 */
 
 
 
 
/* -------------- 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 -  D S -----  */
.tocnumber { display: none; }

Revision as of 16:07, 12 June 2025

@font-face {
 font-family:'Anthony';
 src:url('/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
 font-weight:normal;
 font-style:normal
}

@font-face {
    font-family: 'asulbold';
    src: url('/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'),
         url('/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'asulregular';
    src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'),
         url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;

}

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

}

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


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

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

}
@page:first{

   background-image: url(https://titipi.org/wiki/images/6/66/Vague_intellectual_pleasure.png);
   background-size: 98%;
   background-repeat: no-repeat;
   background-position: center center;

	
	@top-center{
                font-family: asulbold;
		content: "NEoN Digital Ethics Audit";
                font-size:12pt;

	}

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

        }
}

@page:nth(2){        
        background-color: white;
         @bottom-center{
                content:"";
        }
}

@page:nth(3) {
	background-color:white;
@top-center{
                font-family: asulbold;
		content: "NEoN Digital Ethics Audit";
                font-size:12pt;

	}

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

        }

}

@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: 140px;
        line-height: 0.55;
	margin: 0;
        font-family: 'Picnic';
        position:relative;
        hyphens:auto;
color: #CC3399;
}

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


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

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


/* GENERAL ELEMENTS */

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

h2{
margin-top:0;
font-weight: 600;
line-height: 1;
font-family: 'Picnic';
font-size: 2.6rem;
page-break-before: right;
}
.runningtitle {
  display:none;
}
h2:not( .runningtitle ~ h2 ){
	string-set: contributiontitle content(text); 
}

h3 {font-family: Picnic; font-size: 1.5em; line-height: 1;}

h3, h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
    font-weight: 600;
}

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: asulregular;
}
img{
    position: relative;
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 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: #CC3399;
    text-decoration: none;
    border-bottom: 1px solid #CC3399;
}

/* 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;
}
.reference-text::footnote-call {
    font-family:'asulregular';
}
        
.reference-text::footnote-marker {
    font-family:'asulregular';
}
.contents ul{
    margin-top:0.5em;
}
.contents h3{
    margin-bottom: 0.5em;
}


/* WIKISTYLING */

.tocnumber { display: none; }