UnfoldingCSS:NTAIA: Difference between revisions
Jump to navigation
Jump to search
(Created page with "/* 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...") |
mNo edit summary |
||
Line 1: | Line 1: | ||
body { | |||
margin: auto; | |||
line-height: 1.4em; | |||
max-width: 900px; | |||
padding: 1.5em 1em; | |||
} | |||
a, a:visited, a:hover {color: black; background: white; text-decoration: none;} | |||
a:hover {color: red !important} | |||
.gallerybox ul, .gallerybox li {style: none;} | |||
.gallerybox li {width:200px; float: right;} | |||
.tocnumber {display: none;} | |||
*/ | /* toclimit */ | ||
.toclimit-2 .toclevel-1 ul, | |||
.toclimit-3 .toclevel-2 ul, | |||
.toclimit-4 .toclevel-3 ul, | |||
.toclimit-5 .toclevel-4 ul, | |||
.toclimit-6 .toclevel-5 ul, | |||
.toclimit-7 .toclevel-6 ul { | |||
display: none; | |||
} | |||
@font-face { | @font-face { | ||
font-family: 'poppinsregular'; | |||
src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'), | |||
src: url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2'); | |||
font-weight: normal; | |||
font-style: normal; | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: 'poppinsbold'; | |||
src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'), | |||
src: url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2'); | |||
font-weight: bold; | |||
font-style: bold; | |||
} | } | ||
@font-face { | @font-face { | ||
font-family: 'poppinsblack'; | |||
src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'), | |||
src: url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2'); | |||
font-weight: bolder; | |||
font-style: bolder; | |||
} | } | ||
@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 { | |||
} | } | ||
:root{ | |||
--font-size: 10pt; | |||
} | } | ||
@page{ | |||
size: 148mm 210mm; | |||
margin: 17mm 15mm 19mm 15mm; | |||
@bottom-center{ | |||
margin-top: -4mm; | |||
font-family: 'poppinsregular'; | |||
font-size: 9pt; | |||
content: counter(page); | |||
} | |||
@footnote { | |||
float: bottom; | |||
border-top: solid #222 thin; | |||
padding-top: 8pt; | |||
font-family: 'poppinsregular'; | |||
font-variant-position: normal; | |||
font-size: 8pt; | |||
} | |||
} | |||
@page:first{ | |||
background-size: 100%; | |||
background-repeat: no-repeat; | |||
background-position: bottom 20% center; | |||
@top-center{ | |||
font-family: poppinsblack; | |||
content: ""; | |||
font-size:14pt; | |||
} | |||
@bottom-center{ | |||
font-family: 'poppinsblack'; | |||
font-size:12pt; | |||
content: "The Institute for Technology In the Public Interest"; | |||
font-size:12pt; | |||
} | |||
} | } | ||
@page:nth(2){ | |||
background-size: 98%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@bottom-center{ | |||
content:""; | |||
} | |||
} | } | ||
@page: | @page:nth(3){ | ||
background-size: 98%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@top-center{ | |||
font-family: 'poppinsblack'; | |||
font-size:12pt; | |||
content:"Frontier Climate: a bugreport"; | |||
} | |||
} | } | ||
@page: | @page:blank{ | ||
background-color:white; | |||
@bottom-center{ | |||
content:""; | |||
color: white; | |||
} | |||
} | } | ||
. | 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; | |||
} | } | ||
span.bookcover { | |||
string-set: sectiontitle content(text); | |||
font-size: 125px; | |||
line-height: 0.55; | |||
margin: 0; | |||
font-family: 'poppinsblack'; | |||
position:relative; | |||
bottom: 5px; | |||
hyphens:auto; | |||
color: red; | |||
} | } | ||
span.bookcover-title{ | |||
string-set: sectiontitle content(text); | |||
font-size: 65px; | |||
line-height: 1.3; | |||
margin: 0; | |||
font-family: poppinsblack; | |||
position:absolute; | |||
top: 50px; | |||
left:35px; | |||
hyphens:auto; | |||
color: white; | |||
padding: 25px; | |||
transform: rotate(-7deg); | |||
background: linear-gradient(0deg, red, pink, fuchsia); | |||
z-index:1; | |||
} | } | ||
span.frenchtitle{ | |||
string-set: sectiontitle content(text); | |||
font-size: 40px; | |||
line-height: 0.55; | |||
margin: 0; | |||
font-family: 'poppinsblack'; | |||
display:inline; | |||
position:relative; | |||
hyphens:auto; | |||
color: black; | |||
} | } | ||
body{ | |||
color: black; | |||
font-size: var(--font-size); | |||
line-height: 1.5; | |||
font-family: 'poppinsregular'; | |||
} | } | ||
div.pagebreak{ | |||
page-break-after: always; | |||
} | } | ||
div.nobreak{ | |||
page-break-inside: avoid; | |||
} | } | ||
/* GENERAL ELEMENTS */ | |||
blockquote { | |||
font-family: 'compagnon-italic'; | |||
} | } | ||
.runningtitle { | |||
display:none; | |||
} | } | ||
h2:not( .runningtitle ~ h2 ){ | |||
. | string-set: contributiontitle content(text); | ||
} | } | ||
h2 {font-size: 2.5em; color: fuchsia; page-break-before: right;} | |||
h3 {font-size: 1.7em; color: red } | |||
h4 {font-size: 1.2em;} | |||
h2, h3, h4{ | |||
margin: 1em 0 0.5em 0; | |||
font-family: 'poppinsblack'; | |||
line-height: 1.3em; | |||
page-break-after: avoid; | |||
} | |||
b, strong {font-family: 'poppinsbold'} | |||
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: poppinsregular; | |||
} | } | ||
img{ | |||
float: right; | |||
max-width: 45%; | |||
height: auto; | |||
margin: 0 8pt 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: red; | |||
text-decoration: none; | |||
border-bottom: 1px solid red; | |||
} | } | ||
/* specific details */ | |||
a.external{ | |||
} | |||
a.text{ | |||
word-break: none !important; | |||
} | } | ||
b,strong { | |||
font-weight:500; | |||
} | } | ||
small, .small {font-size: 8pt;} | |||
span.reference-text { | |||
float: footnote; | |||
line-height: 1.3; | |||
. | |||
} | } | ||
.reference-text::footnote-call { | |||
. | font-family:'poppinsregular'; | ||
font-variant-position: super; | |||
padding-top: 1px; | |||
} | } | ||
. | .reference-text::footnote-marker { | ||
font-family:'poppinsregular'; | |||
} | } | ||
.contents ul{ | |||
. | margin-top:0.5em; | ||
} | } | ||
.contents h3{ | |||
margin-bottom: 0.5em; | |||
} | } | ||
/* WIKISTYLING */ | |||
.tocnumber { display: none; } |
Latest revision as of 11:52, 7 November 2024
body { margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em; } a, a:visited, a:hover {color: black; background: white; text-decoration: none;} a:hover {color: red !important} .gallerybox ul, .gallerybox li {style: none;} .gallerybox li {width:200px; float: right;} .tocnumber {display: none;} /* toclimit */ .toclimit-2 .toclevel-1 ul, .toclimit-3 .toclevel-2 ul, .toclimit-4 .toclevel-3 ul, .toclimit-5 .toclevel-4 ul, .toclimit-6 .toclevel-5 ul, .toclimit-7 .toclevel-6 ul { display: none; } @font-face { font-family: 'poppinsregular'; src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'), src: 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'), src: 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'), src: url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2'); font-weight: bolder; font-style: bolder; } @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; } :root{ --font-size: 10pt; } @page{ size: 148mm 210mm; margin: 17mm 15mm 19mm 15mm; @bottom-center{ margin-top: -4mm; font-family: 'poppinsregular'; font-size: 9pt; content: counter(page); } @footnote { float: bottom; border-top: solid #222 thin; padding-top: 8pt; font-family: 'poppinsregular'; font-variant-position: normal; font-size: 8pt; } } @page:first{ background-size: 100%; background-repeat: no-repeat; background-position: bottom 20% center; @top-center{ font-family: poppinsblack; content: ""; font-size:14pt; } @bottom-center{ font-family: 'poppinsblack'; font-size:12pt; content: "The Institute for Technology In the Public Interest"; font-size:12pt; } } @page:nth(2){ background-size: 98%; background-repeat: no-repeat; background-position: center; @bottom-center{ content:""; } } @page:nth(3){ background-size: 98%; background-repeat: no-repeat; background-position: center; @top-center{ font-family: 'poppinsblack'; font-size:12pt; content:"Frontier Climate: a bugreport"; } } @page:blank{ background-color:white; @bottom-center{ content:""; color: white; } } 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; } span.bookcover { string-set: sectiontitle content(text); font-size: 125px; line-height: 0.55; margin: 0; font-family: 'poppinsblack'; position:relative; bottom: 5px; hyphens:auto; color: red; } span.bookcover-title{ string-set: sectiontitle content(text); font-size: 65px; line-height: 1.3; margin: 0; font-family: poppinsblack; position:absolute; top: 50px; left:35px; hyphens:auto; color: white; padding: 25px; transform: rotate(-7deg); background: linear-gradient(0deg, red, pink, fuchsia); z-index:1; } span.frenchtitle{ string-set: sectiontitle content(text); font-size: 40px; line-height: 0.55; margin: 0; font-family: 'poppinsblack'; display:inline; position:relative; hyphens:auto; color: black; } body{ color: black; font-size: var(--font-size); line-height: 1.5; font-family: 'poppinsregular'; } div.pagebreak{ page-break-after: always; } div.nobreak{ page-break-inside: avoid; } /* GENERAL ELEMENTS */ blockquote { font-family: 'compagnon-italic'; } .runningtitle { display:none; } h2:not( .runningtitle ~ h2 ){ string-set: contributiontitle content(text); } h2 {font-size: 2.5em; color: fuchsia; page-break-before: right;} h3 {font-size: 1.7em; color: red } h4 {font-size: 1.2em;} h2, h3, h4{ margin: 1em 0 0.5em 0; font-family: 'poppinsblack'; line-height: 1.3em; page-break-after: avoid; } b, strong {font-family: 'poppinsbold'} 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: poppinsregular; } img{ float: right; max-width: 45%; height: auto; margin: 0 8pt 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: red; text-decoration: none; border-bottom: 1px solid red; } /* specific details */ a.external{ } a.text{ word-break: none !important; } b,strong { font-weight:500; } small, .small {font-size: 8pt;} span.reference-text { float: footnote; line-height: 1.3; } .reference-text::footnote-call { font-family:'poppinsregular'; font-variant-position: super; padding-top: 1px; } .reference-text::footnote-marker { font-family:'poppinsregular'; } .contents ul{ margin-top:0.5em; } .contents h3{ margin-bottom: 0.5em; } /* WIKISTYLING */ .tocnumber { display: none; }