UnfoldingCSS:StyleBox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(108 intermediate revisions by 2 users not shown) | |||
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 --------------------- */ | /* -------------- F O N T - B A N K --------------------- */ | ||
Line 14: | Line 40: | ||
@font-face { | @font-face { | ||
font-family: 'garden'; | font-family: 'garden'; | ||
src: url('/wiki/images/b/b2/Bitwise.woff') format('woff'); | src: url('https://titipi.org/wiki/images/b/b2/Bitwise.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 22: | Line 48: | ||
@font-face { | @font-face { | ||
font-family:'Picnic'; | font-family:'Picnic'; | ||
src:url('/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2'); | src:url('https://titipi.org/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2'); | ||
font-weight:normal; | font-weight:normal; | ||
font-style:normal | font-style:normal | ||
Line 30: | Line 56: | ||
@font-face { | @font-face { | ||
font-family: 'asulbold'; | font-family: 'asulbold'; | ||
src: url('/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'), | src: url('https://titipi.org/wiki/images/2/2f/Asul-bold-webfont.woff') format('woff'), | ||
url('/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2'); | url('https://titipi.org/wiki/images/3/3c/Asul-bold-webfont.woff2') format('woff2'); | ||
font-weight: bold; | font-weight: bold; | ||
font-style: normal; | font-style: normal; | ||
Line 39: | Line 65: | ||
@font-face { | @font-face { | ||
font-family: 'asulregular'; | font-family: 'asulregular'; | ||
src: url('/wiki/images/5/58/Le-patin-helvete.woff') format('woff'); | src: url('https://titipi.org/wiki/images/5/58/Le-patin-helvete.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 47: | Line 73: | ||
@font-face { | @font-face { | ||
font-family: 'compagnon-italic'; | font-family: 'compagnon-italic'; | ||
src: url('/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'), | src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'), | ||
url('/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'), | url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff'), | ||
url('/wiki/images/e/e7/Compagnon-Italic.eot') format('eot'); | url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 84: | Line 110: | ||
@font-face { | @font-face { | ||
font-family: 'adelphe-regular'; | font-family: 'adelphe-regular'; | ||
src: url('/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'), | src: url('https://titipi.org/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'), | ||
url('/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2'); | url('https://titipi.org/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 93: | Line 119: | ||
@font-face { | @font-face { | ||
font-family: 'adelphe-bold'; | font-family: 'adelphe-bold'; | ||
src: url('/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'), | src: url('https://titipi.org/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'), | ||
url('/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2'); | url('https://titipi.org/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 102: | Line 128: | ||
@font-face { | @font-face { | ||
font-family: 'Fourmi'; | font-family: 'Fourmi'; | ||
src: url('/wiki/images/7/7c/Fourmi.otf') format('opentype'); | src: url('https://titipi.org/wiki/images/7/7c/Fourmi.otf') format('opentype'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 110: | Line 136: | ||
@font-face { | @font-face { | ||
font-family: 'anthony'; | font-family: 'anthony'; | ||
src: url('/wiki/images/c/ce/Anthony.woff2') format(' | src: url('https://titipi.org/wiki/images/c/ce/Anthony.woff2') format('woff2'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
*/ | */ | ||
@font-face { | @font-face { | ||
font-family: 'authenticond'; | font-family: 'authenticond'; | ||
src: url('/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format(' | src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2'); | ||
font-weight: 400; | font-weight: 400; | ||
font-style: normal; | font-style: normal; | ||
Line 124: | Line 150: | ||
@font-face { | @font-face { | ||
font-family: 'authenticond'; | font-family: 'authenticond'; | ||
src: url('/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format(' | src: url('https://titipi.org/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('woff2'); | ||
font-weight: 500; | font-weight: 500; | ||
font-style: normal; | font-style: normal; | ||
Line 130: | Line 156: | ||
@font-face { | @font-face { | ||
font-family: 'authenticond'; | font-family: 'authenticond'; | ||
src: url('/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format(' | src: url('https://titipi.org/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('woff2'); | ||
font-weight: 600; | font-weight: 600; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
@font-face { | @font-face { | ||
font-family: 'authentic'; | font-family: 'authentic'; | ||
src: url('/wiki/images/8/87/AUTHENTICSans-60.woff2') format(' | src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2'); | ||
font-weight: 400; | font-weight: 400; | ||
font-style: normal; | font-style: normal; | ||
Line 144: | Line 170: | ||
@font-face { | @font-face { | ||
font-family: 'authentic'; | font-family: 'authentic'; | ||
src: url('/wiki/images/9/94/AUTHENTICSans-90.woff2') format(' | src: url('https://titipi.org/wiki/images/9/94/AUTHENTICSans-90.woff2') format('woff2'); | ||
font-weight: 500; | font-weight: 500; | ||
font-style: normal; | font-style: normal; | ||
Line 150: | Line 176: | ||
@font-face { | @font-face { | ||
font-family: 'authentic'; | font-family: 'authentic'; | ||
src: url('/wiki/images/6/66/AUTHENTICSans-130.woff2') format(' | src: url('https://titipi.org/wiki/images/6/66/AUTHENTICSans-130.woff2') format('woff2'); | ||
font-weight: 600; | font-weight: 600; | ||
font-style: normal; | font-style: normal; | ||
Line 156: | Line 182: | ||
@font-face { | @font-face { | ||
font-family: 'authentic'; | font-family: 'authentic'; | ||
src: url('/wiki/images/b/b1/AUTHENTICSans-150.woff2') format(' | src: url('https://titipi.org/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('woff2'); | ||
font-weight: 700; | font-weight: 700; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
/* | /* | ||
@font-face { | @font-face { | ||
font-family: 'herbier'; | font-family: 'herbier'; | ||
src: url('/wiki/images/a/a8/Herbier.otf') format('opentype'); | src: url('https://titipi.org/wiki/images/a/a8/Herbier.otf') format('opentype'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 177: | Line 203: | ||
@font-face { | @font-face { | ||
font-family: 'teranoptia'; | font-family: 'teranoptia'; | ||
src: url('/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff'); | src: url('https://titipi.org/wiki/images/1/15/Teranoptia-Furiae.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 186: | Line 212: | ||
@font-face { | @font-face { | ||
font-family: 'amakan-sheet'; | font-family: 'amakan-sheet'; | ||
src: url('/wiki/images/b/b1/Amakan-Sheet.woff') format('woff'); | src: url('https://titipi.org/wiki/images/b/b1/Amakan-Sheet.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 192: | Line 218: | ||
@font-face { | @font-face { | ||
font-family: 'amakan-stripes'; | font-family: 'amakan-stripes'; | ||
src: url('/wiki/images/c/c1/Amakan-Stripes.woff') format('woff'); | src: url('https://titipi.org/wiki/images/c/c1/Amakan-Stripes.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 198: | Line 224: | ||
@font-face { | @font-face { | ||
font-family: 'amakan-strips'; | font-family: 'amakan-strips'; | ||
src: url('/wiki/images/e/ec/Amakan-Strips.woff') format('woff'); | src: url('https://titipi.org/wiki/images/e/ec/Amakan-Strips.woff') format('woff'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 207: | Line 233: | ||
@font-face { | @font-face { | ||
font-family: 'malebolge'; | font-family: 'malebolge'; | ||
src: url('/wiki/images/4/42/Malebolge-Adversarial.woff') format('woff'); | 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-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
Line 227: | Line 260: | ||
/* ************* F O N T S **************** */ | /* ************* F O N T S **************** */ | ||
--title-font: | --title-font: syne-italic; | ||
--body-font: | --body-font: authentic; | ||
--code-font: Monospace; | --code-font: Monospace; | ||
--quote-font: Serif; | --quote-font: Serif; | ||
--footnote-font: | --footnote-font: authenticond; | ||
--page-number-font: | --page-number-font: authentic; | ||
--h1-font-size: 30pt; | --h1-font-size: 30pt; | ||
--h2-font-size: 24pt; | --h2-font-size: 24pt; | ||
--h3-font-size: 18pt; | --h3-font-size: 18pt; | ||
--h4-font-size: 16pt; | |||
--p-font-size: 12pt; | --p-font-size: 12pt; | ||
Line 242: | Line 276: | ||
/* ************* C O L O R **************** */ | /* ************* C O L O R **************** */ | ||
--color-paper: | --color-paper: floralwhite; | ||
--text-color: | --body-text-color: darkslateblue; | ||
--highlight-color: | --highlight-text-color: tomato; | ||
--sparkling-color: | --sparkling-color: PeachPuff; | ||
--glitter-color: MediumSlateBlue ; | |||
} | } | ||
Line 265: | Line 300: | ||
} | } | ||
@page:right { | @page:right { | ||
Line 283: | Line 307: | ||
@right-middle { | @right-middle { | ||
color: var(-- | color: var(--body-text-color); | ||
content: counter(page); | content: counter(page); | ||
font-family: var(--page-number-font); | font-family: var(--page-number-font); | ||
Line 289: | Line 313: | ||
@right-top { | @right-top { | ||
color: var(-- | color: var(--glitter-color); | ||
content: var(--PUB-title); | content: var(--PUB-title); | ||
font-family: var(-- | font-family: var(--title-font); | ||
margin-right: 0.8cm; | margin-right: 0.8cm; | ||
writing-mode: vertical-rl; | writing-mode: vertical-rl; | ||
text-orientation: mixed; | 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; */ | |||
} | |||
} | } | ||
Line 306: | Line 342: | ||
@left-middle { | @left-middle { | ||
color: var(-- | color: var(--body-text-color); | ||
content: counter(page); | content: counter(page); | ||
font-family: var(--page-number-font); | font-family: var(--page-number-font); | ||
Line 312: | Line 348: | ||
@left-top { | @left-top { | ||
color: var(-- | color: var(--glitter-color); | ||
content: var(--PUB-title); | content: var(--PUB-title); | ||
font-family: var(-- | font-family: var(--title-font); | ||
margin-right: 0.8cm; | margin-right: 0.8cm; | ||
writing-mode: vertical-rl; | writing-mode: vertical-rl; | ||
text-orientation: mixed; | 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; */ | |||
} | |||
} | } | ||
Line 337: | Line 385: | ||
h1{ | h1{ | ||
color: var(--highlight-color); | color: var(--highlight-text-color); | ||
font-family: var(--title-font); | font-family: var(--title-font); | ||
font-size: var(--h1-font-size); | font-size: var(--h1-font-size); | ||
font-weight: unset; | |||
line-height: calc(var(--h1-font-size) + 1.5pt); | line-height: calc(var(--h1-font-size) + 1.5pt); | ||
text-wrap: pretty; | text-wrap: pretty; | ||
Line 345: | Line 394: | ||
h2{ | h2{ | ||
color: var(--highlight-color); | color: var(--highlight-text-color); | ||
font-family: var(--title-font); | font-family: var(--title-font); | ||
font-size: var(--h2-font-size); | font-size: var(--h2-font-size); | ||
font-weight: unset; | |||
line-height: calc(var(--h2-font-size) + 1.5pt); | line-height: calc(var(--h2-font-size) + 1.5pt); | ||
text-wrap: pretty; | text-wrap: pretty; | ||
Line 353: | Line 403: | ||
h3{ | h3{ | ||
color: var(--highlight-color); | color: var(--highlight-text-color); | ||
font-family: var(--title-font); | font-family: var(--title-font); | ||
font-size: var(--h3-font-size); | font-size: var(--h3-font-size); | ||
line-height: calc(var(--h3-font-size) + 1.5pt); | 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; | text-wrap: pretty; | ||
} | } | ||
Line 362: | Line 420: | ||
b{ | b{ | ||
color: var(-- | color: var(--highlight-text-color); | ||
} | } | ||
p{ | p{ | ||
color: var(--text-color); | color: var(--body-text-color); | ||
font-family: var(--body-font); | font-family: var(--body-font); | ||
font-size: var(--p-font-size); | font-size: var(--p-font-size); | ||
Line 374: | Line 432: | ||
} | } | ||
ul{ | ul, ol{ | ||
color: var(--text-color); | color: var(--body-text-color); | ||
font-family: var(--body-font); | font-family: var(--body-font); | ||
font-size: var(--p-font-size); | font-size: var(--p-font-size); | ||
Line 381: | Line 439: | ||
} | } | ||
a{ | 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); | |||
} | } | ||
p: | /* authors */ | ||
border: | 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 ----------- */ | /* -------------- T E X T - B L O C K - E N D S ----------- */ | ||
/* -------------- C O V E R - P A G E --------------------- */ | /* -------------- 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 { | @page:first { | ||
background-color: var(--text-color); | 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; | |||
} | |||
} | } | ||
Line 409: | Line 498: | ||
font-size: 4.3rem; | font-size: 4.3rem; | ||
line-height: 0.9; | line-height: 0.9; | ||
} | } | ||
/* -------------- C O V E R - P A G E - E N D S ----------- */ | /* -------------- C O V E R - P A G E - E N D S ----------- */ | ||
/* -------------- I N L A Y - P A G E --------------------- */ | /* -------------- I N L A Y - P A G E --------------------- */ | ||
Line 424: | Line 516: | ||
content: var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title); | content: var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title) var(--PUB-title); | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; left: 0; | ||
height: 100%; width: 100%; | |||
height: 100%; | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
font-family: amakan-sheet; | font-family: amakan-sheet; | ||
background-color: var(-- | background-color: var(--glitter-color); | ||
color: var(--color-paper); | color: var(--color-paper); | ||
font-size: 4.96rem; | font-size: 4.96rem; | ||
Line 448: | Line 538: | ||
/* -------------- I N L A Y - P A G E - E N D S ----------- */ | /* -------------- 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" } | |||
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 --------------- */ | |||
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 ----- */ |
Latest revision as of 12:19, 2 August 2024
/* 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 **************** */ --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 --------------------- */ /* 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; } } .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" } 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 --------------- */ 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 ----- */