UnfoldingCSS:StyleBox: Difference between revisions

Revision as of 18:15, 29 July 2024

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

/* TODO: set other default fonts */

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

}



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

@page:first {
  margin-left: 20mm !important;
  background-color: var(--highlight-text-color);

  @right-middle {
    content: none;
  }    

  @right-top {
    content: none;
  }
}

.bookcover {
}

.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::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" }

/* TODO: make it different on every 2n, 3n, etc... */

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

/* TODO */

img{
  border-radius: 3px;
  border: 5px solid var(--glitter-color);
}

#Bugreporting_how-to img {
  --mask: linear-gradient(#000 0 0) center/calc(100% - 60px) calc(100% - 60px) no-repeat, radial-gradient(circle farthest-side,#0000 98%,#000) 0 -30px/55.5px 60px round no-repeat, radial-gradient(circle farthest-side,#0000 98%,#000) 0 calc(100% + 30px)/55.5px 60px round no-repeat, radial-gradient(circle farthest-side,#0000 98%,#000) -30px 0/60px 55.5px no-repeat round, radial-gradient(circle farthest-side,#0000 98%,#000) calc(100% + 30px) 0/60px 55.5px no-repeat round;
  mask: var(--mask);
}

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