UnfoldingCSS:StyleBox: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 399: | Line 399: | ||
a{ | a{ | ||
color: var(--paper | color: var(--color-paper); | ||
background-color: var(--glitter-color); | background-color: var(--glitter-color); | ||
padding:0.1em 0.2em; | padding:0.1em 0.2em; |
Revision as of 11:37, 24 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('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; --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; } } @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; } } .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; } 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{ color: var(--body-text-color); font-family: var(--body-font); font-size: var(--p-font-size); line-height: calc(var(--p-font-size) + 2pt); } a{ color: var(--color-paper); background-color: var(--glitter-color); padding:0.1em 0.2em; text-decoration: none; } /* -------------- 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... */ /* -------------- 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 ----- */