/*
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 **************** */
/* 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;
@right-middle {
content: none;
}
@right-top {
content: none;
}
}
.bookcover {
height: 100%; width: 100%;
background-color: var(--highlight-text-color);
animation: morph 8s ease-in-out infinite alternate;
}
/* 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% }
}
.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 ----- */