UnfoldingCSS:Spellbreak training: 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 |
||
| (47 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
@font-face { | @font-face { | ||
font-family: 'anthony'; | font-family: 'anthony'; | ||
| Line 139: | Line 6: | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
@font-face { | @font-face { | ||
| Line 159: | Line 25: | ||
font-style: normal; | font-style: normal; | ||
} | } | ||
@font-face { | @font-face { | ||
| Line 186: | Line 51: | ||
} | } | ||
:root{ | |||
--font-size: 11pt; | |||
} | } | ||
@page{ | |||
size: 148mm 210mm; | |||
@ | margin: 17mm 15mm 19mm 15mm; | ||
@bottom-center{ | |||
margin-top: -4mm; | |||
@ | font-family: 'authentic'; | ||
font-size: 9pt; | |||
content: counter(page); | |||
} | |||
@footnote { | |||
float: bottom; | |||
border-top: solid #222 thin; | |||
padding-top: 8pt; | |||
font-family: 'authentic'; | |||
font-size: 8pt; | |||
} | |||
} | |||
@ | |||
} | |||
} | } | ||
@page:first{ | |||
background-image: url(https://titipi.org/wiki/images/6/6a/Cover-01.gif); | |||
background-size: 98%; | |||
background-repeat: no-repeat; | |||
background-position: center center; | |||
@top-center{ | |||
font-family: Anthony; | |||
content: ""; | |||
font-size:14pt; | |||
font-color:aqua; | |||
} | |||
@bottom-center{ | |||
font-family: authentic; | |||
content: "The Institute for Technology In the Public Interest"; | |||
font-size:12pt; | |||
} | |||
} | } | ||
@page:nth(2){ | |||
background-color: white; | |||
@bottom-center{ | |||
content:""; | |||
} | |||
@ | |||
} | } | ||
@page:nth(3) { | |||
background-size: 98%; | |||
background-repeat: no-repeat; | |||
background-position: center; | |||
@ | @top-center{ | ||
font-family: Anthony; | |||
font-size:12pt; | |||
content: "Spellbreak Training: A peer-to-peer cloud divestment network"; | |||
} | |||
@bottom-center{ | |||
font-family: authentic; | |||
font-size:12pt; | |||
content: "The Institute for Technology In the Public Interest"; | |||
} | |||
} | } | ||
@page:blank{ | |||
background-color:white; | |||
@page: | @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: 140px; | |||
line-height: 0.55; | |||
margin: 0; | |||
font-family: 'Anthony'; | |||
position:relative; | |||
hyphens:auto; | |||
color: aqua; | |||
} | } | ||
span.coversubtitle{ | |||
string-set:sectiontitle content(text); | |||
font-size: 50px; | |||
font-family: 'Anthony'; | |||
line-height: 0.55em; | |||
} | } | ||
span.frenchtitle{ | |||
string-set: sectiontitle content(text); | |||
font-size: 150px; | |||
line-height: 0.55; | |||
margin: 0; | |||
font-family: 'Anthony'; | |||
display:inline; | |||
position:relative; | |||
hyphens:auto; | |||
color: aqua; | |||
} | } | ||
body{ | |||
color: darkslateblue; | |||
font-size: var(--font-size); | |||
line-height: 1.4; | |||
font-family: 'authentic'; | |||
} | } | ||
div.pagebreak{ | |||
page-break-after: always; | |||
} | } | ||
div.nobreak{ | |||
page-break-inside: avoid; | |||
} | } | ||
/* GENERAL ELEMENTS */ | |||
blockquote { | |||
font-family: 'authentic'; | |||
} | } | ||
h2{ | |||
margin-top:0; | |||
font-weight: 600; | |||
line-height: 1; | |||
font-family: 'Anthony'; | |||
font-size: 2.6rem; | |||
page-break-before: right; | |||
} | } | ||
.runningtitle { | |||
display:none; | |||
} | } | ||
h2:not( .runningtitle ~ h2 ){ | |||
. | string-set: contributiontitle content(text); | ||
} | } | ||
h3 {font-family: Anthony; 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: 8pt; | |||
line-height: 1.25; | |||
margin: 24pt 16pt 16pt 16pt; | |||
page-break-inside: avoid; | |||
font-family: authentic; | |||
} | } | ||
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: #ab00fa; | |||
text-decoration: none; | |||
border-bottom: 1px solid #ab00fa; | |||
} | } | ||
/* 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:'authentic'; | |||
} | } | ||
. | .reference-text::footnote-marker { | ||
font-family:'authentic'; | |||
} | } | ||
.contents ul{ | |||
. | margin-top:0.5em; | ||
} | } | ||
.contents h3{ | |||
. | margin-bottom: 0.5em; | ||
} | } | ||
/* | /* WIKISTYLING */ | ||
.tocnumber { display: none; } | |||
figcaption {font-size: 0.7em} | |||
} | |||
Latest revision as of 12:15, 14 June 2025
@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;
}
:root{
--font-size: 11pt;
}
@page{
size: 148mm 210mm;
margin: 17mm 15mm 19mm 15mm;
@bottom-center{
margin-top: -4mm;
font-family: 'authentic';
font-size: 9pt;
content: counter(page);
}
@footnote {
float: bottom;
border-top: solid #222 thin;
padding-top: 8pt;
font-family: 'authentic';
font-size: 8pt;
}
}
@page:first{
background-image: url(https://titipi.org/wiki/images/6/6a/Cover-01.gif);
background-size: 98%;
background-repeat: no-repeat;
background-position: center center;
@top-center{
font-family: Anthony;
content: "";
font-size:14pt;
font-color:aqua;
}
@bottom-center{
font-family: authentic;
content: "The Institute for Technology In the Public Interest";
font-size:12pt;
}
}
@page:nth(2){
background-color: white;
@bottom-center{
content:"";
}
}
@page:nth(3) {
background-size: 98%;
background-repeat: no-repeat;
background-position: center;
@top-center{
font-family: Anthony;
font-size:12pt;
content: "Spellbreak Training: A peer-to-peer cloud divestment network";
}
@bottom-center{
font-family: authentic;
font-size:12pt;
content: "The Institute for Technology In the Public Interest";
}
}
@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: 140px;
line-height: 0.55;
margin: 0;
font-family: 'Anthony';
position:relative;
hyphens:auto;
color: aqua;
}
span.coversubtitle{
string-set:sectiontitle content(text);
font-size: 50px;
font-family: 'Anthony';
line-height: 0.55em;
}
span.frenchtitle{
string-set: sectiontitle content(text);
font-size: 150px;
line-height: 0.55;
margin: 0;
font-family: 'Anthony';
display:inline;
position:relative;
hyphens:auto;
color: aqua;
}
body{
color: darkslateblue;
font-size: var(--font-size);
line-height: 1.4;
font-family: 'authentic';
}
div.pagebreak{
page-break-after: always;
}
div.nobreak{
page-break-inside: avoid;
}
/* GENERAL ELEMENTS */
blockquote {
font-family: 'authentic';
}
h2{
margin-top:0;
font-weight: 600;
line-height: 1;
font-family: 'Anthony';
font-size: 2.6rem;
page-break-before: right;
}
.runningtitle {
display:none;
}
h2:not( .runningtitle ~ h2 ){
string-set: contributiontitle content(text);
}
h3 {font-family: Anthony; 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: 8pt;
line-height: 1.25;
margin: 24pt 16pt 16pt 16pt;
page-break-inside: avoid;
font-family: authentic;
}
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: #ab00fa;
text-decoration: none;
border-bottom: 1px solid #ab00fa;
}
/* 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:'authentic';
}
.reference-text::footnote-marker {
font-family:'authentic';
}
.contents ul{
margin-top:0.5em;
}
.contents h3{
margin-bottom: 0.5em;
}
/* WIKISTYLING */
.tocnumber { display: none; }
figcaption {font-size: 0.7em}