UnfoldingCSS:StyleBox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
(24 intermediate revisions by the same user not shown) | |||
Line 226: | Line 226: | ||
/* ************* F O N T S **************** */ | /* ************* F O N T S **************** */ | ||
/* TODO: set other default fonts */ | |||
--title-font: Serif; | --title-font: Serif; | ||
Line 392: | Line 394: | ||
/* -------------- 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 --------------------- */ | ||
@page:first { | @page:first { | ||
margin-left: 20mm !important; | |||
background-color: var(--text-color); | |||
} | } | ||
.bookcover { | .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 ----------- */ | /* -------------- 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 409: | Line 429: | ||
} | } | ||
.inlay { | .inlay::before { | ||
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; | ||
align-items: center; | |||
font-family: amakan-sheet; | |||
background-color: var(--text-color); | |||
color: var(--color-paper); | |||
font-size: 4.96rem; | font-size: 4.96rem; | ||
line-height: 1.005; | line-height: 1.005; | ||
text-align: center; | text-align: center; | ||
word-break: break-all; | word-break: break-all; | ||
opacity: 0.8; | |||
rotate: -40deg; | rotate: -40deg; | ||
scale: 1.6; | scale: 1.6; | ||
skew: 30px; | skew: 30px; | ||
transform: skew(-9.06turn, 51deg); | 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, | |||
font-family: | 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; | |||
} | } | ||
/* -------------- I N | 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 ----- */ |
Revision as of 14:59, 10 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('/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: Serif; --body-font: Sans-serif; --code-font: Monospace; --quote-font: Serif; --footnote-font: Sanserif; --page-number-font: Monospace; --h1-font-size: 30pt; --h2-font-size: 24pt; --h3-font-size: 18pt; --p-font-size: 12pt; /* ************* C O L O R **************** */ --color-paper: HoneyDew; --text-color: MediumSeaGreen; --highlight-color: Olive; --sparkling-color: LightCoral; } /* -------------- 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; } } .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-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); } p:nth-of-type(3n) { border: 2px solid orange; margin-left: -10px; } /* -------------- 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 ----- */