UnfoldingCSS:FAQ: Difference between revisions
Jump to navigation
Jump to search
mNo edit summary |
Tag: Undo |
||
(76 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em; | body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em; | ||
background: linear-gradient(0deg, | background: linear-gradient(0deg, lightblue, white, lightblue); | ||
} | } | ||
h2 {font-size: 1. | h2 {font-size: 1.9em; line-height: 1.3em; color: white} | ||
h3 {font-size: 1.5em; line-height: 1.3em; color: white} | |||
a, a:visited, a:hover {color: black; background: white; text-decoration: none;} | |||
a:hover {color: red !important} | |||
.gallerybox ul, .gallerybox li {style: none;} | .gallerybox ul, .gallerybox li {style: none;} | ||
Line 10: | Line 14: | ||
.tocnumber {display: none;} | .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; | |||
} | |||
h2 {font-size: 1.9em; line-height: 1.3em; color: red} | |||
h3 {font-size: 1.5em; line-height: 1.3em; color: red} | |||
a, a:visited, a:hover {color: black; background: white; text-decoration: none;} | |||
a:hover {color: red !important} | |||
@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: normal; | |||
font-style: normal; | |||
} | |||
@font-face { | |||
font-family: 'asulregular'; | |||
src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'), | |||
url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2'); | |||
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; | |||
} | |||
:root{ | |||
--font-size: 11pt; | |||
} | |||
@page{ | |||
size: 148mm 210mm; | |||
margin: 17mm 15mm 19mm 15mm; | |||
@bottom-center{ | |||
margin-top: -4mm; | |||
font-family: 'asulregular'; | |||
font-size: 9pt; | |||
content: counter(page); | |||
} | |||
@footnote { | |||
float: bottom; | |||
border-top: solid #222 thin; | |||
padding-top: 8pt; | |||
font-family: 'asulregular'; | |||
font-size: 8pt; | |||
} | |||
} | |||
@page:first{ | |||
background-image: url(https://titipi.org/wiki/images/e/eb/12o_p3.jpg); | |||
background-size: 100%; | |||
background-repeat: no-repeat; | |||
background-position: bottom 20% center; | |||
@top-center{ | |||
font-family: asulbold; | |||
content: ""; | |||
font-size:14pt; | |||
} | |||
@bottom-center{ | |||
font-family: asulbold; | |||
content: "The Institute for Technology In the Public Interest"; | |||
font-size:12pt; | |||
} | |||
} | |||
@page:nth(2){ | |||
background-image: url(https://titipi.org/wiki/images/3/3f/Snail_12o.jpg); | |||
background-size: 98%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@bottom-center{ | |||
content:""; | |||
} | |||
} | |||
@page:nth(3) { | |||
background-color:white; | |||
@top-center{ | |||
font-family: asulbold; | |||
content: "Frequently Asked Questions"; | |||
font-size:12pt; | |||
} | |||
@bottom-center{ | |||
font-family: asulbold; | |||
content: "The Institute for Technology In the Public Interest"; | |||
font-size:12pt; | |||
} | |||
} | |||
@page:nth(4) { | |||
background-image:url(https://titipi.org/wiki/images/b/b3/Smoke.jpg); | |||
background-size: 90%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
} | |||
@page:nth(6) { | |||
background-image:url(https://titipi.org/wiki/images/7/71/Skein.jpg); | |||
background-size: 100%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
} | |||
@page:nth(16) { | |||
background-image:url(https://titipi.org/wiki/images/6/60/Waterfall.jpg); | |||
background-size: 95%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
} | |||
@page:nth(20) { | |||
background-image:url(https://titipi.org/wiki/images/4/40/Droplets.jpg); | |||
background-size: 95%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
} | |||
@page:nth(24) { | |||
background-image:url(https://titipi.org/wiki/images/a/a4/Cal_CCAD.jpg); | |||
background-size: 100%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@top-center{ | |||
font-family: asulbold; | |||
content: ""; | |||
font-size:12pt; | |||
} | |||
} | |||
@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: 'asulbold'; | |||
position:relative; | |||
bottom: 5px; | |||
right: 5px; | |||
hyphens:auto; | |||
color: red; | |||
} | |||
span.bookcover-title{ | |||
string-set: sectiontitle content(text); | |||
font-size: 75px; | |||
line-height: 0.65; | |||
margin: 0; | |||
font-family: sans-serif; | |||
position:absolute; | |||
top: 400px; | |||
right:24px; | |||
hyphens:auto; | |||
color: red; | |||
border: solid 2px red; | |||
padding: 20px; | |||
transform: rotate(-7deg); | |||
background: white; | |||
z-index:1; | |||
} | |||
span.frenchtitle{ | |||
string-set: sectiontitle content(text); | |||
font-size: 40px; | |||
line-height: 0.55; | |||
margin: 0; | |||
font-family: 'asulbold'; | |||
display:inline; | |||
position:relative; | |||
hyphens:auto; | |||
color: black; | |||
} | |||
body{ | |||
color: black; | |||
font-size: var(--font-size); | |||
line-height: 1.4; | |||
font-family: 'asulregular'; | |||
} | |||
div.pagebreak{ | |||
page-break-after: always; | |||
} | |||
div.nobreak{ | |||
page-break-inside: avoid; | |||
} | |||
/* GENERAL ELEMENTS */ | |||
blockquote { | |||
font-family: 'compagnon-italic'; | |||
} | |||
h2{ | |||
margin-top:0; | |||
font-weight: 600; | |||
line-height: 1; | |||
font-family: 'asulbold'; | |||
font-size: 2.6rem; | |||
page-break-before: right; | |||
} | |||
.runningtitle { | |||
display:none; | |||
} | |||
h2:not( .runningtitle ~ h2 ){ | |||
string-set: contributiontitle content(text); | |||
} | |||
h3 {font-family: asulbold; font-size: 1.5em; line-height: 1;} | |||
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: asulregular; | |||
} | |||
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; | |||
} | |||
.reference-text::footnote-call { | |||
font-family:'asulregular'; | |||
} | |||
.reference-text::footnote-marker { | |||
font-family:'asulregular'; | |||
} | |||
.contents ul{ | |||
margin-top:0.5em; | |||
} | |||
.contents h3{ | |||
margin-bottom: 0.5em; | |||
} | |||
/* WIKISTYLING */ | |||
.tocnumber { display: none; } |
Latest revision as of 19:04, 10 March 2024
body {margin: auto; line-height: 1.4em; max-width: 900px; padding: 1.5em 1em; background: linear-gradient(0deg, lightblue, white, lightblue); } h2 {font-size: 1.9em; line-height: 1.3em; color: white} h3 {font-size: 1.5em; line-height: 1.3em; color: white} 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; } h2 {font-size: 1.9em; line-height: 1.3em; color: red} h3 {font-size: 1.5em; line-height: 1.3em; color: red} a, a:visited, a:hover {color: black; background: white; text-decoration: none;} a:hover {color: red !important} @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: normal; font-style: normal; } @font-face { font-family: 'asulregular'; src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'), url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2'); 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; } :root{ --font-size: 11pt; } @page{ size: 148mm 210mm; margin: 17mm 15mm 19mm 15mm; @bottom-center{ margin-top: -4mm; font-family: 'asulregular'; font-size: 9pt; content: counter(page); } @footnote { float: bottom; border-top: solid #222 thin; padding-top: 8pt; font-family: 'asulregular'; font-size: 8pt; } } @page:first{ background-image: url(https://titipi.org/wiki/images/e/eb/12o_p3.jpg); background-size: 100%; background-repeat: no-repeat; background-position: bottom 20% center; @top-center{ font-family: asulbold; content: ""; font-size:14pt; } @bottom-center{ font-family: asulbold; content: "The Institute for Technology In the Public Interest"; font-size:12pt; } } @page:nth(2){ background-image: url(https://titipi.org/wiki/images/3/3f/Snail_12o.jpg); background-size: 98%; background-repeat: no-repeat; background-position: center; @bottom-center{ content:""; } } @page:nth(3) { background-color:white; @top-center{ font-family: asulbold; content: "Frequently Asked Questions"; font-size:12pt; } @bottom-center{ font-family: asulbold; content: "The Institute for Technology In the Public Interest"; font-size:12pt; } } @page:nth(4) { background-image:url(https://titipi.org/wiki/images/b/b3/Smoke.jpg); background-size: 90%; background-repeat: no-repeat; background-position: center; } @page:nth(6) { background-image:url(https://titipi.org/wiki/images/7/71/Skein.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center; } @page:nth(16) { background-image:url(https://titipi.org/wiki/images/6/60/Waterfall.jpg); background-size: 95%; background-repeat: no-repeat; background-position: center; } @page:nth(20) { background-image:url(https://titipi.org/wiki/images/4/40/Droplets.jpg); background-size: 95%; background-repeat: no-repeat; background-position: center; } @page:nth(24) { background-image:url(https://titipi.org/wiki/images/a/a4/Cal_CCAD.jpg); background-size: 100%; background-repeat: no-repeat; background-position: center; @top-center{ font-family: asulbold; content: ""; font-size:12pt; } } @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: 'asulbold'; position:relative; bottom: 5px; right: 5px; hyphens:auto; color: red; } span.bookcover-title{ string-set: sectiontitle content(text); font-size: 75px; line-height: 0.65; margin: 0; font-family: sans-serif; position:absolute; top: 400px; right:24px; hyphens:auto; color: red; border: solid 2px red; padding: 20px; transform: rotate(-7deg); background: white; z-index:1; } span.frenchtitle{ string-set: sectiontitle content(text); font-size: 40px; line-height: 0.55; margin: 0; font-family: 'asulbold'; display:inline; position:relative; hyphens:auto; color: black; } body{ color: black; font-size: var(--font-size); line-height: 1.4; font-family: 'asulregular'; } div.pagebreak{ page-break-after: always; } div.nobreak{ page-break-inside: avoid; } /* GENERAL ELEMENTS */ blockquote { font-family: 'compagnon-italic'; } h2{ margin-top:0; font-weight: 600; line-height: 1; font-family: 'asulbold'; font-size: 2.6rem; page-break-before: right; } .runningtitle { display:none; } h2:not( .runningtitle ~ h2 ){ string-set: contributiontitle content(text); } h3 {font-family: asulbold; font-size: 1.5em; line-height: 1;} 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: asulregular; } 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; } .reference-text::footnote-call { font-family:'asulregular'; } .reference-text::footnote-marker { font-family:'asulregular'; } .contents ul{ margin-top:0.5em; } .contents h3{ margin-bottom: 0.5em; } /* WIKISTYLING */ .tocnumber { display: none; }