UnfoldingCSS:Spellbreak training: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
mNo edit summary
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
body {  
 
margin: auto;
@font-face {
line-height: 1.4em;
  font-family: 'anthony';
max-width: 900px;
  src: url('https://titipi.org/wiki/images/c/ce/Anthony.woff2') format('woff2');
padding: 1.5em 1em;
  font-weight: normal;
  font-style: normal;
}
}


a, a:visited, a:hover {color: black; background: white; text-decoration: none;}
@font-face {
a:hover {color: red !important}
  font-family: 'authenticond';
 
  src: url('https://titipi.org/wiki/images/2/27/AUTHENTICSans-Condensed-60.woff2') format('woff2');
.gallerybox ul, .gallerybox li {style: none;}
  font-weight: 400;
 
  font-style: normal;
.gallerybox li {width:200px; float: right;}
}
 
@font-face {
.tocnumber {display: none;}
  font-family: 'authenticond';
 
  src: url('https://titipi.org/wiki/images/5/57/AUTHENTICSans-Condensed-90.woff2') format('woff2');
/* toclimit */
  font-weight: 500;
.toclimit-2 .toclevel-1 ul,
  font-style: normal;
.toclimit-3 .toclevel-2 ul,
}
.toclimit-4 .toclevel-3 ul,
@font-face {
.toclimit-5 .toclevel-4 ul,
  font-family: 'authenticond';
.toclimit-6 .toclevel-5 ul,
  src: url('https://titipi.org/wiki/images/2/25/AUTHENTICSans-Condensed-130.woff2') format('woff2');
.toclimit-7 .toclevel-6 ul {
  font-weight: 600;
display: none;
  font-style: normal;
}
}


@font-face {
@font-face {
    font-family: 'poppinsregular';
  font-family: 'authentic';
    src: url('https://titipi.org/wiki/images/1/1b/BBBPoppinsTN-DisplayRegular.woff') format('woff'),
  src: url('https://titipi.org/wiki/images/8/87/AUTHENTICSans-60.woff2') format('woff2');
    src: url('https://titipi.org/wiki/images/8/8e/BBBPoppinsTN-DisplayRegular.woff2') format('woff2');
  font-weight: 400;
    font-weight: normal;
  font-style: normal;
    font-style: normal;
}
}
@font-face {
@font-face {
    font-family: 'poppinsbold';
  font-family: 'authentic';
    src: url('https://titipi.org/wiki/images/c/c0/BBBPoppinsTN-DisplayBold.woff') format('woff'),
  src: url('https://titipi.org/wiki/images/9/94/AUTHENTICSans-90.woff2') format('woff2');
    src: url('https://titipi.org/wiki/images/6/65/BBBPoppinsTN-DisplayBold.woff2') format('woff2');
  font-weight: 500;
    font-weight: bold;
  font-style: normal;
    font-style: bold;
}
}
@font-face {
@font-face {
    font-family: 'poppinsblack';
  font-family: 'authentic';
    src: url('https://titipi.org/wiki/images/f/fa/BBBPoppinsTN-DisplayBlack.woff') format('woff'),
  src: url('https://titipi.org/wiki/images/6/66/AUTHENTICSans-130.woff2') format('woff2');
    src: url('https://titipi.org/wiki/images/f/f4/BBBPoppinsTN-DisplayBlack.woff2') format('woff2');
  font-weight: 600;
    font-weight: bolder;
  font-style: normal;
    font-style: bolder;
}
}
@font-face {
@font-face {
    font-family: 'compagnon-italic';
  font-family: 'authentic';
    src: url('https://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
  src: url('https://titipi.org/wiki/images/b/b1/AUTHENTICSans-150.woff2') format('woff2');
        url('https://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
  font-weight: 700;
        url('https://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
  font-style: normal;
    font-weight: normal;
    font-style: normal;
 
}
}


:root{
:root{
--font-size: 10pt;
--font-size: 11pt;
}
}


Line 74: Line 62:
@bottom-center{
@bottom-center{
margin-top: -4mm;
margin-top: -4mm;
font-family: 'poppinsregular';
font-family: 'authentic';
font-size: 9pt;
font-size: 9pt;
content: counter(page);
content: counter(page);
Line 82: Line 70:
           border-top: solid #222 thin;
           border-top: solid #222 thin;
           padding-top: 8pt;
           padding-top: 8pt;
           font-family: 'poppinsregular';
           font-family: 'authentic';
font-variant-position: normal;
font-size: 8pt;
font-size: 8pt;
       }
       }
Line 90: Line 77:
@page:first{
@page:first{


   background-size: 100%;
  background-image: url(https://titipi.org/wiki/images/6/6a/Cover-01.gif);
   background-size: 98%;
   background-repeat: no-repeat;
   background-repeat: no-repeat;
   background-position: bottom 20% center;
   background-position: center center;


@top-center{
@top-center{
                 font-family: poppinsblack;
                 font-family: Anthony;
content: "";
content: "";
                 font-size:14pt;
                 font-size:14pt;
                font-color:aqua;


}
}


         @bottom-center{
         @bottom-center{
                 font-family: 'poppinsblack';
                 font-family: authentic;
                font-size:12pt;
content: "The Institute for Technology In the Public Interest";
content: "The Institute for Technology In the Public Interest";
                 font-size:12pt;
                 font-size:12pt;
Line 112: Line 100:


@page:nth(2){         
@page:nth(2){         
         background-size: 98%;
         background-color: white;
        background-repeat: no-repeat;
        background-position: center;
         @bottom-center{
         @bottom-center{
                 content:"";
                 content:"";
Line 120: Line 106:
}
}


 
@page:nth(3) {
@page:nth(3){      
background-size: 98%;
        background-size: 98%;
         background-repeat: no-repeat;
         background-repeat: no-repeat;
         background-position: center;
         background-position: center;
        @top-center{
 
                 font-family: 'poppinsblack';
@top-center{
                 font-family: Anthony;
                 font-size:12pt;
                 font-size:12pt;
                 content:"Frontier Climate: a bugreport";
                 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{
@page:blank{
background-color:white;
background-color:white;
Line 153: Line 145:
span.bookcover {
span.bookcover {
string-set: sectiontitle content(text);  
string-set: sectiontitle content(text);  
         font-size: 125px;
         font-size: 140px;
         line-height: 0.55;
         line-height: 0.55;
margin: 0;
margin: 0;
         font-family: 'poppinsblack';
         font-family: 'Anthony';
         position:relative;
         position:relative;
        bottom: 5px;
         hyphens:auto;
         hyphens:auto;
color: red;
color: aqua;
}
}


span.bookcover-title{
span.coversubtitle{
        string-set: sectiontitle content(text);  
string-set:sectiontitle content(text);  
        font-size: 65px;
font-size: 50px;
        line-height: 1.3;
  font-family: 'Anthony';
    margin: 0;
  line-height: 0.55em;
        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{
span.frenchtitle{
string-set: sectiontitle content(text);  
string-set: sectiontitle content(text);  
         font-size: 40px;
         font-size: 150px;
         line-height: 0.55;
         line-height: 0.55;
margin: 0;
margin: 0;
         font-family: 'poppinsblack';
         font-family: 'Anthony';
         display:inline;
         display:inline;
         position:relative;
         position:relative;
         hyphens:auto;
         hyphens:auto;
         color: black;
         color: aqua;
}
}


body{
body{
         color: black;
         color: darkslateblue;
font-size: var(--font-size);
font-size: var(--font-size);
line-height: 1.5;
line-height: 1.4;
         font-family: 'poppinsregular';
         font-family: 'authentic';
}
}


Line 206: Line 186:
     page-break-inside: avoid;
     page-break-inside: avoid;
}
}


/* GENERAL ELEMENTS */
/* GENERAL ELEMENTS */


blockquote {
blockquote {
font-family: 'compagnon-italic';
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 {
.runningtitle {
   display:none;
   display:none;
Line 222: Line 208:
}
}


h2 {font-size: 2.5em; color: fuchsia; page-break-before: right;}
h3 {font-family: Anthony; font-size: 1.5em; line-height: 1;}
h3 {font-size: 1.7em; color: red }
h4 {font-size: 1.2em;}


h2, h3, h4{
h3, h4, h5, h6{
margin: 1em 0 0.5em 0;
    margin: 0 0 1em 0;
font-family: 'poppinsblack';
    page-break-after: avoid;
line-height: 1.3em;
    font-weight: 600;
page-break-after: avoid;
}
}
b, strong {font-family: 'poppinsbold'}


p{
p{
Line 248: Line 229:
.thumb{
.thumb{
     /* image caption */
     /* image caption */
     font-size: 10pt;
     font-size: 8pt;
     line-height: 1.25;
     line-height: 1.25;
     margin: 24pt 16pt 16pt 16pt;
     margin: 24pt 16pt 16pt 16pt;
     page-break-inside: avoid;
     page-break-inside: avoid;
     font-family: poppinsregular;
     font-family: authentic;
}
}
img{
img{
float: right;
    position: relative;
     max-width: 45%;
    display: block;
     max-width: 100%;
     height: auto;
     height: auto;
     margin: 0 8pt 8pt 0;
     margin: 0 0 8pt 0;
}
}
.thumbinner{
.thumbinner{
Line 279: Line 261:
a:active,
a:active,
a:hover{
a:hover{
     color: red;
     color: #ab00fa;
     text-decoration: none;
     text-decoration: none;
     border-bottom: 1px solid red;
     border-bottom: 1px solid #ab00fa;
}
}


Line 298: Line 280:
span.reference-text {  
span.reference-text {  
     float: footnote;
     float: footnote;
    line-height: 1.3;
}
}
.reference-text::footnote-call {
.reference-text::footnote-call {
     font-family:'poppinsregular';
     font-family:'authentic';
font-variant-position: super;
padding-top: 1px;
}
}
          
          
.reference-text::footnote-marker {
.reference-text::footnote-marker {
     font-family:'poppinsregular';
     font-family:'authentic';
}
}
.contents ul{
.contents ul{
Line 315: Line 294:
     margin-bottom: 0.5em;
     margin-bottom: 0.5em;
}
}


/* WIKISTYLING */
/* WIKISTYLING */


.tocnumber { display: none; }
.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}