UnfoldingCSS:Infrastructural Interactions: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
Tag: Rollback |
||
(303 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
@font-face { | |||
font-family: 'Fourmi'; | |||
src: url('/wiki/images/7/7c/Fourmi.otf') format('opentype'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
@font-face { | @font-face { | ||
font-family: ' | font-family: 'anthony'; | ||
src: url('/wiki/images/ | src: url('/wiki/images/c/ce/Anthony.woff2') format('opentype'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: 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-face { | ||
font-family: ' | font-family: 'herbier'; | ||
src: url('/wiki/images/ | src: url('/wiki/images/a/a8/Herbier.otf') format('opentype'); | ||
font-weight: normal; | font-weight: normal; | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
:root{ | :root{ | ||
--font-size: | --font-size: 12pt; | ||
} | } | ||
.pagedjs_section_first_page + .pagedjs_blank_page { | |||
background-color:red !important; | |||
} | |||
@page{ | @page{ | ||
size: | size: 166.4mm 258.6mm; | ||
margin: 15mm | margin: 17mm 15mm 13mm 15mm; | ||
@top-center{ | @top-center{ | ||
content: string(contributiontitle); | |||
font-family: Fourmi; | |||
font-size: 20pt; | |||
overflow: hidden; | |||
text-overflow:ellipsis; | |||
white-space: nowrap; | |||
margin-left: -10mm; | |||
margin-right: -10mm; | |||
} | } | ||
@bottom-center{ | @bottom-center{ | ||
margin-top: -4mm; | margin-top: -4mm; | ||
font-family: | font-family: 'authenticond'; | ||
font-size: | font-weight: 500; | ||
font-size: 9pt; | |||
content: counter(page); | content: counter(page); | ||
} | } | ||
@footnote { | |||
float: bottom; | |||
border-top: solid #222 thin; | |||
padding-top: 8pt; | |||
font-family: 'authenticond'; | |||
font-size: 9pt; | |||
} | |||
} | } | ||
@page:first{ | @page:first{ | ||
background-color: | margin: 5mm 5mm 5mm 5mm; | ||
background-color: white; | |||
@top-left{ | @top-left{ | ||
Line 45: | Line 110: | ||
} | } | ||
@top-center{ | @top-center{ | ||
content: ""; | font-family: authentic; | ||
content: "Infrastructural Interactions: Survival, Resistance and Radical Care"; | |||
font-size:11pt; | |||
font-weight: 500; | |||
margin-bottom: -5mm; | |||
} | } | ||
} | @bottom-center{ | ||
page:blank{ | font-family: authentic; | ||
background-color: | content: "The Institute for Technology In the Public Interest"; | ||
font-size:11pt; | |||
font-weight: 500; | |||
} | |||
} | |||
@page:blank{ | |||
background-color:white; | |||
@top-left{ | @top-left{ | ||
content: ""; | content: ""; | ||
Line 60: | Line 135: | ||
content: ""; | content: ""; | ||
} | } | ||
@top-center{ | |||
content: ""; | |||
} | |||
@bottom-center{ | |||
content:""; | |||
} | |||
} | |||
@page:nth(2){ | |||
background-color: white; | |||
@bottom-center{ | |||
content:""; | |||
} | |||
} | |||
@page section:first{ | |||
margin: 8mm 8mm 0mm 8mm; | |||
background-color: white; | |||
@top-center{ | |||
content: ""; | |||
} | |||
@bottom-center{ | |||
content:""; | |||
} | |||
} | } | ||
@page contrib:first{ | |||
@top-center{ | |||
content: ""; | |||
} | |||
} | |||
div.section{ | |||
page: section; | |||
} | |||
div.section, div.section div.contrib:nth-of-type(1){ | |||
break-before: right; | |||
} | |||
div.contrib:not(:first-of-type){ | |||
break-before: always; | |||
} | |||
div.contrib{ | |||
page: contrib; | |||
} | |||
h1{ | |||
margin:0; | |||
font-family: 'Fourmi'; | |||
font-size: 170px; | |||
font-weight: normal; | |||
line-height: 0.8em; | |||
hyphens:auto; | |||
color:black; | |||
page-break-after: always; | |||
} | |||
h1:after{ | |||
content:'q'; | |||
font-size: 300px; | |||
font-family: 'herbier'; | |||
color: #998; | |||
page-break-before: always; | |||
page-break-after: always; | |||
margin-left: -50px; | |||
} | |||
div.section.snecond h1:after{ | |||
content: ' h'; | |||
top: 200px; | |||
position:relative; | |||
} | |||
div.section.thrid h1:after{ | |||
content: ' r'; | |||
top: 200px; | |||
position:relative; | |||
} | |||
div.section.zero h1:after{ | |||
content: ' p'; | |||
top: 100px; | |||
position:relative; | |||
} | |||
span.bookcover{ | |||
color:#a5d; | |||
string-set: sectiontitle content(text); | |||
font-size: 222px; | |||
line-height: 0.55; | |||
margin: 0; | |||
/* margin-left: 32pt; */ | |||
font-family: 'Fourmi'; | |||
display:inline; | |||
position:relative; | |||
hyphens:auto; | |||
} | |||
span.bookcover.floating{ | |||
font-weight:300; | |||
font-size: 132pt; | |||
font-family:authenticond; | |||
color:#a5d; | |||
line-height: 160px; | |||
width:70%; | |||
} | |||
span.bookcover:before{ | |||
width:136pt; | |||
display:inline-block; | |||
content:'m'; | |||
font-size: 300px; | |||
font-family: 'herbier'; | |||
color:#EE90FB; | |||
margin-left:-42pt; | |||
} | |||
span.bookcover.floating:before{ | |||
content:' o'; | |||
color:grey; | |||
position:relative; | |||
} | |||
span.bookcover.floating:after{ | |||
font-size: 300px; | |||
font-family: 'herbier'; | |||
content:' a'; | |||
color:grey; | |||
display:none; | |||
} | |||
small {font-size: 9pt;} | |||
body{ | body{ | ||
color:#222; | |||
font-size: var(--font-size); | font-size: var(--font-size); | ||
line-height: 1.6; | line-height: 1.6; | ||
font-family: 'authentic'; | |||
} | |||
div.pagebreak{ | |||
page-break-after: always; | |||
} | |||
div.nobreak{ | |||
page-break-inside: avoid; | |||
} | } | ||
Line 74: | Line 287: | ||
font-size: 18pt; | font-size: 18pt; | ||
line-height: 1.25; | line-height: 1.25; | ||
color: | color: yellow; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 82: | Line 295: | ||
width: 80mm; | width: 80mm; | ||
} | } | ||
/* general elements*/ | /* general elements*/ | ||
h2{ | |||
margin-top:0; | |||
font-weight: 600; | |||
line-height: 1.25; | |||
font-family: authenticond; | |||
font-size: 2rem; | |||
} | |||
.runningtitle { | |||
display:none; | |||
} | } | ||
h2{ | h2:not( .runningtitle ~ h2 ){ | ||
string-set: contributiontitle content(text); | string-set: contributiontitle content(text); | ||
} | } | ||
h3, h4, h5, h6{ | h3, h4, h5, h6{ | ||
margin: 0 0 1em 0; | margin: 0 0 1em 0; | ||
page-break-after: avoid; | page-break-after: avoid; | ||
font-weight: 600; | |||
} | } | ||
p{ | p{ | ||
margin: 0 0 1em 0; | margin: 0 0 1em 0; | ||
} | } | ||
.contrib p{ | |||
orphans:2; | |||
widows:2; | |||
} | |||
.thumb{ | .thumb{ | ||
/* image caption */ | /* image caption */ | ||
Line 119: | Line 335: | ||
margin: 24pt 16pt 16pt 16pt; | margin: 24pt 16pt 16pt 16pt; | ||
page-break-inside: avoid; | page-break-inside: avoid; | ||
font-family: authenticond; | |||
} | } | ||
img{ | img{ | ||
position: relative; | position: relative; | ||
display: block; | display: block; | ||
max-width: | max-width: 100%; | ||
height: auto; | height: auto; | ||
margin: 0 0 8pt 0; | margin: 0 0 8pt 0; | ||
} | |||
.thumbinner{ | |||
max-width:100%; | |||
} | } | ||
pre{ | pre{ | ||
font-size: 8pt; | font-size: 8pt; | ||
line-height: 1.8; | line-height: 1.8; | ||
white-space: | white-space: pre; | ||
margin: 16pt 16pt; | margin: 16pt 16pt; | ||
} | } | ||
Line 143: | Line 363: | ||
a:active, | a:active, | ||
a:hover{ | a:hover{ | ||
color: | color: #83b; | ||
text-decoration: none; | text-decoration: none; | ||
font-weight: | font-weight: 500; | ||
} | } | ||
Line 151: | Line 371: | ||
a.external{ | a.external{ | ||
word-break: break-all; | word-break: break-all; | ||
} | |||
b,strong { | |||
font-weight:500; | |||
} | |||
/* SPECIFIC CONTRIBUTIONS */ | |||
#marginalia ul{ | |||
columns: 2 auto; | |||
padding-left:0.4em; | |||
font-size: 9pt; | |||
} | |||
#marginalia ul li:before { | |||
display:none; | |||
} | |||
#marginalia ul li{ | |||
text-indent:-22px; | |||
} | |||
#columns { | |||
columns: 2 auto; | |||
padding-left:0.4em; | |||
font-size: 9pt; | |||
} | |||
/* LEAvES */ | |||
ul { | |||
list-style: none; | |||
margin-left: 0; | |||
padding-left: 0; | |||
} | |||
ul li { | |||
padding-left: 1em; | |||
text-indent: -1.4em; | |||
} | |||
ul li:before { | |||
font-family: 'herbier'; | |||
content: "a"; | |||
padding-right: 10px; | |||
font-size:10pt; | |||
position: relative; | |||
top: -5px; | |||
} | |||
ul li:nth-child(1):before{ | |||
content: "a"; | |||
} | |||
ul li:nth-child(2):before{ | |||
content: "f"; | |||
} | |||
ul li:nth-child(3):before{ | |||
content: "h"; | |||
} | |||
ul li:nth-child(4):before{ | |||
content: "i"; | |||
} | |||
ul li:nth-child(5):before{ | |||
content: "j"; | |||
} | |||
ul li:nth-child(6):before{ | |||
content: "m"; | |||
} | |||
ul li:nth-child(7):before{ | |||
content: "n"; | |||
} | |||
ul li:nth-child(8):before{ | |||
content: "o"; | |||
} | |||
ul li:nth-child(9):before{ | |||
content: "p"; | |||
} | |||
ul li:nth-child(10):before{ | |||
content: "q"; | |||
} | |||
ul li:nth-child(11):before{ | |||
content: "r"; | |||
} | |||
ul li:nth-child(12):before{ | |||
content: "a"; | |||
} | |||
ul li:nth-child(13):before{ | |||
content: "f"; | |||
} | |||
ul li:nth-child(14):before{ | |||
content: "h"; | |||
} | |||
ul li:nth-child(15):before{ | |||
content: "i"; | |||
} | |||
ul li:nth-child(16):before{ | |||
content: "j"; | |||
} | |||
ul li:nth-child(17):before{ | |||
content: "m"; | |||
} | |||
ul li:nth-child(18):before{ | |||
content: "o"; | |||
} | |||
ul li:nth-child(19):before{ | |||
content: "p"; | |||
} | |||
ul li:nth-child(20):before{ | |||
content: "q"; | |||
} | |||
ul li:nth-child(21):before{ | |||
content: "r"; | |||
} | |||
ul li ul li:before{ | |||
font-family:'authentic'; | |||
content:'\26AC' !important; | |||
display:none; | |||
} | |||
ul li ul li { | |||
padding-left: 2em; | |||
} | |||
span.reference-text { | |||
float: footnote; | |||
} | |||
.reference-text::footnote-call { | |||
font-family:'authenticond'; | |||
} | |||
.reference-text::footnote-marker { | |||
font-family:'authenticond'; | |||
} | |||
.contents ul{ | |||
margin-top:0.5em; | |||
} | |||
.contents h3{ | |||
margin-bottom: 0.5em; | |||
} | |||
.contents li a::after{ | |||
content: '\00a0\2192\00a0' target-counter(attr(href), page); | |||
margin-right:5px; | |||
font-family: authenticond; | |||
font-size: 9pt; | |||
} | |||
.columnbreak { | |||
break-after: region; | |||
} | } |
Latest revision as of 13:40, 21 May 2023
@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; } :root{ --font-size: 12pt; } .pagedjs_section_first_page + .pagedjs_blank_page { background-color:red !important; } @page{ size: 166.4mm 258.6mm; margin: 17mm 15mm 13mm 15mm; @top-center{ content: string(contributiontitle); font-family: Fourmi; font-size: 20pt; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; margin-left: -10mm; margin-right: -10mm; } @bottom-center{ margin-top: -4mm; font-family: 'authenticond'; font-weight: 500; font-size: 9pt; content: counter(page); } @footnote { float: bottom; border-top: solid #222 thin; padding-top: 8pt; font-family: 'authenticond'; font-size: 9pt; } } @page:first{ margin: 5mm 5mm 5mm 5mm; background-color: white; @top-left{ content: ""; } @top-center{ font-family: authentic; content: "Infrastructural Interactions: Survival, Resistance and Radical Care"; font-size:11pt; font-weight: 500; margin-bottom: -5mm; } @bottom-center{ font-family: authentic; content: "The Institute for Technology In the Public Interest"; font-size:11pt; font-weight: 500; } } @page:blank{ background-color:white; @top-left{ content: ""; } @top-center{ content: ""; } @top-center{ content: ""; } @top-center{ content: ""; } @bottom-center{ content:""; } } @page:nth(2){ background-color: white; @bottom-center{ content:""; } } @page section:first{ margin: 8mm 8mm 0mm 8mm; background-color: white; @top-center{ content: ""; } @bottom-center{ content:""; } } @page contrib:first{ @top-center{ content: ""; } } div.section{ page: section; } div.section, div.section div.contrib:nth-of-type(1){ break-before: right; } div.contrib:not(:first-of-type){ break-before: always; } div.contrib{ page: contrib; } h1{ margin:0; font-family: 'Fourmi'; font-size: 170px; font-weight: normal; line-height: 0.8em; hyphens:auto; color:black; page-break-after: always; } h1:after{ content:'q'; font-size: 300px; font-family: 'herbier'; color: #998; page-break-before: always; page-break-after: always; margin-left: -50px; } div.section.snecond h1:after{ content: ' h'; top: 200px; position:relative; } div.section.thrid h1:after{ content: ' r'; top: 200px; position:relative; } div.section.zero h1:after{ content: ' p'; top: 100px; position:relative; } span.bookcover{ color:#a5d; string-set: sectiontitle content(text); font-size: 222px; line-height: 0.55; margin: 0; /* margin-left: 32pt; */ font-family: 'Fourmi'; display:inline; position:relative; hyphens:auto; } span.bookcover.floating{ font-weight:300; font-size: 132pt; font-family:authenticond; color:#a5d; line-height: 160px; width:70%; } span.bookcover:before{ width:136pt; display:inline-block; content:'m'; font-size: 300px; font-family: 'herbier'; color:#EE90FB; margin-left:-42pt; } span.bookcover.floating:before{ content:' o'; color:grey; position:relative; } span.bookcover.floating:after{ font-size: 300px; font-family: 'herbier'; content:' a'; color:grey; display:none; } small {font-size: 9pt;} body{ color:#222; font-size: var(--font-size); line-height: 1.6; font-family: 'authentic'; } div.pagebreak{ page-break-after: always; } div.nobreak{ page-break-inside: avoid; } div.cover{ } div.cover h1, div.cover ul li{ font-size: 18pt; line-height: 1.25; color: yellow; font-weight: bold; } div.cover ul li{ list-style: none; margin-bottom: 0.5em; width: 80mm; } /* general elements*/ h2{ margin-top:0; font-weight: 600; line-height: 1.25; font-family: authenticond; font-size: 2rem; } .runningtitle { display:none; } h2:not( .runningtitle ~ h2 ){ string-set: contributiontitle content(text); } h3, h4, h5, h6{ margin: 0 0 1em 0; page-break-after: avoid; font-weight: 600; } p{ margin: 0 0 1em 0; } .contrib p{ orphans:2; widows:2; } .thumb{ /* image caption */ font-size: 10pt; line-height: 1.25; margin: 24pt 16pt 16pt 16pt; page-break-inside: avoid; font-family: authenticond; } img{ position: relative; display: block; max-width: 100%; height: auto; margin: 0 0 8pt 0; } .thumbinner{ max-width:100%; } pre{ font-size: 8pt; line-height: 1.8; white-space: pre; margin: 16pt 16pt; } table{ width: 100%; } sup{ line-height: 0; } a, a:visited, a:active, a:hover{ color: #83b; text-decoration: none; font-weight: 500; } /* specific details */ a.external{ word-break: break-all; } b,strong { font-weight:500; } /* SPECIFIC CONTRIBUTIONS */ #marginalia ul{ columns: 2 auto; padding-left:0.4em; font-size: 9pt; } #marginalia ul li:before { display:none; } #marginalia ul li{ text-indent:-22px; } #columns { columns: 2 auto; padding-left:0.4em; font-size: 9pt; } /* LEAvES */ ul { list-style: none; margin-left: 0; padding-left: 0; } ul li { padding-left: 1em; text-indent: -1.4em; } ul li:before { font-family: 'herbier'; content: "a"; padding-right: 10px; font-size:10pt; position: relative; top: -5px; } ul li:nth-child(1):before{ content: "a"; } ul li:nth-child(2):before{ content: "f"; } ul li:nth-child(3):before{ content: "h"; } ul li:nth-child(4):before{ content: "i"; } ul li:nth-child(5):before{ content: "j"; } ul li:nth-child(6):before{ content: "m"; } ul li:nth-child(7):before{ content: "n"; } ul li:nth-child(8):before{ content: "o"; } ul li:nth-child(9):before{ content: "p"; } ul li:nth-child(10):before{ content: "q"; } ul li:nth-child(11):before{ content: "r"; } ul li:nth-child(12):before{ content: "a"; } ul li:nth-child(13):before{ content: "f"; } ul li:nth-child(14):before{ content: "h"; } ul li:nth-child(15):before{ content: "i"; } ul li:nth-child(16):before{ content: "j"; } ul li:nth-child(17):before{ content: "m"; } ul li:nth-child(18):before{ content: "o"; } ul li:nth-child(19):before{ content: "p"; } ul li:nth-child(20):before{ content: "q"; } ul li:nth-child(21):before{ content: "r"; } ul li ul li:before{ font-family:'authentic'; content:'\26AC' !important; display:none; } ul li ul li { padding-left: 2em; } span.reference-text { float: footnote; } .reference-text::footnote-call { font-family:'authenticond'; } .reference-text::footnote-marker { font-family:'authenticond'; } .contents ul{ margin-top:0.5em; } .contents h3{ margin-bottom: 0.5em; } .contents li a::after{ content: '\00a0\2192\00a0' target-counter(attr(href), page); margin-right:5px; font-family: authenticond; font-size: 9pt; } .columnbreak { break-after: region; }