/* -------------- 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('/wiki/images/b/b2/Bitwise.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*/
/*
@font-face {
font-family:'Picnic';
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: bold;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'asulregular';
src: url('/wiki/images/5/58/Le-patin-helvete.woff') format('woff');
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;
}
*/
/*
@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('/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
url('/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'adelphe-bold';
src: url('/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
url('/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'Fourmi';
src: url('/wiki/images/7/7c/Fourmi.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'anthony';
src: url('/wiki/images/c/ce/Anthony.woff2') format('opentype');
font-weight: normal;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'authenticond';
src: url('/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'authenticond';
src: url('/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'authenticond';
src: url('/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('opentype');
font-weight: 600;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'authentic';
src: url('/wiki/images/8/87/AUTHENTICSans-60.woff2') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'authentic';
src: url('/wiki/images/9/94/AUTHENTICSans-90.woff2') format('opentype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'authentic';
src: url('/wiki/images/6/66/AUTHENTICSans-130.woff2') format('opentype');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'authentic';
src: url('/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('opentype');
font-weight: 700;
font-style: normal;
}
*/
/*
@font-face {
font-family: 'herbier';
src: url('/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('/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('/wiki/images/b/b1/Amakan-Sheet.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'amakan-stripes';
src: url('/wiki/images/c/c1/Amakan-Stripes.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'amakan-strips';
src: url('/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('/wiki/images/4/42/Malebolge-Adversarial.woff') format('woff');
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: windy;
--body-font: malebolge;
--code-font: Monospace;
--quote-font: Serif;
--footnote-font: Sanserif;
--page-number-font: authenti;
--h1-font-size: 30pt;
--h2-font-size: 24pt;
--h3-font-size: 18pt;
--p-font-size: 12pt;
/* ************* C O L O R **************** */
--color-paper: LightYellow;
--text-color: MediumSeaGreen;
--highlight-color: Olive;
--sparkling-color: SlateGray;
}
/* -------------- 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:first{
@right-middle {
content: none;
}
@right-top {
content: none;
}
}
@page:right {
margin-left: 35mm;
margin-right: 20mm;
@right-middle {
color: var(--sparkling-color);
content: counter(page);
font-family: var(--page-number-font);
}
@right-top {
color: var(--text-color);
content: var(--PUB-title);
font-family: var(--code-font);
margin-right: 0.8cm;
writing-mode: vertical-rl;
text-orientation: mixed;
}
}
@page:left {
margin-right: 35mm;
margin-left: 20mm;
@left-middle {
color: var(--sparkling-color);
content: counter(page);
font-family: var(--page-number-font);
}
@left-top {
color: var(--text-color);
content: var(--PUB-title);
font-family: var(--code-font);
margin-right: 0.8cm;
writing-mode: vertical-rl;
text-orientation: mixed;
}
p:nth-of-type(3n) {
border-left: 1cm solid var(--sparkling-color);
padding-left: 1cm;
margin-left: -2cm;
}
}
.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-color);
font-family: var(--title-font);
font-size: var(--h1-font-size);
line-height: calc(var(--h1-font-size) + 1.5pt);
text-wrap: pretty;
}
h2{
color: var(--highlight-color);
font-family: var(--title-font);
font-size: var(--h2-font-size);
line-height: calc(var(--h2-font-size) + 1.5pt);
text-wrap: pretty;
}
h3{
color: var(--highlight-color);
font-family: var(--title-font);
font-size: var(--h3-font-size);
line-height: calc(var(--h3-font-size) + 1.5pt);
text-wrap: pretty;
}
b{
color: var(--sparkling-color);
}
p{
color: var(--text-color);
font-family: var(--body-font);
font-weight: 500;
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{
color: var(--text-color);
font-family: var(--body-font);
font-size: var(--p-font-size);
line-height: calc(var(--p-font-size) + 2pt);
}
a{
color: var(--sparkling-color);
}
/* -------------- 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(--text-color);
}
.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(--text-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... */
/* -------------- C H I M E R A - E N D S ----------------- */
/* -------------- S C A T T E R - S P E C S --------------- */
/* TODO */
/* -------------- S C A T T E R - S P E C S - E N D S ----- */