/* -------------- 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);
}
/* -------------- 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: 5px solid var(--glitter-color);
}
/* -------------- S C A T T E R - S P E C S - E N D S ----- */