UnfoldingCSS:Infrables: Difference between revisions

From titipi
Jump to navigation Jump to search
mNo edit summary
mNo edit summary
 
(28 intermediate revisions by 2 users not shown)
Line 1: Line 1:
@font-face {
@font-face {
     font-family: 'baskervvol';
     font-family: 'compagnon-italic';
     src: url('https://titipi.org/wiki/images/5/54/BBBBaskervvol-Fondue.woff') format('woff'),
     src: url('/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
         url('https://titipi.org/wiki/images/b/bd/BBBBaskervvol-Fondue.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-weight: normal;
     font-style: normal;
     font-style: normal;
}
}


@font-face {
@font-face {
     font-family: 'compagnon-italic';
     font-family: 'adelphe-regular';
     src: url('http://titipi.org/wiki/images/5/51/Compagnon-Italic.woff2') format('woff2'),
     src: url('/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
        url('http://titipi.org/wiki/images/f/fc/Compagnon-Italic.woff') format('woff');
         url('/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
         url('http://titipi.org/wiki/images/e/e7/Compagnon-Italic.eot') format('eot');
     font-weight: normal;
     font-weight: normal;
     font-style: normal;
     font-style: normal;
}


@font-face {
    font-family: 'adelphe-bold';
    src: url('/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
        url('/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
}


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


Line 24: Line 32:
@page{
@page{
size: 148mm 210mm;
size: 148mm 210mm;
margin: 17mm 15mm 19mm 15mm;
margin: 15mm 15mm 15mm 15mm;


@bottom-center{
@bottom-center{
margin-top: -4mm;
margin-top: -2mm;
font-family: 'baskervvol';
font-family: 'adelphe-regular';
font-size: 9pt;
font-size: 8pt;
content: counter(page);
content: counter(page);
}
}
Line 36: Line 44:
           border-top: solid #222 thin;
           border-top: solid #222 thin;
           padding-top: 8pt;
           padding-top: 8pt;
           font-family: 'baskervvol';
           font-family: 'adelphe-regular';
font-size: 8pt;
font-size: 8pt;
       }
       }
Line 43: Line 51:
@page:first{
@page:first{


background-color: #CC3399;
background-color: white;
        background-image: url(https://titipi.org/wiki/images/d/d2/Cloud.png);
        background-size: cover;
 
@top-center{
@top-center{
                 font-family: baskervvol;
                 font-family: adelphe-bold;
content: "NEoN Digital Ethics Audit";
content: "The Cloud is not an option";
                 font-size:12pt;
                 font-size:10pt;


}
}


         @bottom-center{
         @bottom-center{
                 font-family: baskervvol;
                 font-family: adelphe-bold;
content: "The Institute for Technology In the Public Interest";
content: "The Institute for Technology In the Public Interest";
                 font-size:12pt;
                 font-size:10pt;


         }
         }
Line 67: Line 78:
}
}


@page:nth(3) {
background-color:white;
@top-center{
                font-family: baskervvol;
content: "NEoN Digital Ethics Audit";
                font-size:12pt;
}
        @bottom-center{
                font-family: baskervvol;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;
        }
}


@page:blank{
@page:blank{
Line 97: Line 91:
.pagedjs_page:nth-last-of-type(1) {
.pagedjs_page:nth-last-of-type(1) {


background-color: #CC3399;
background-color: white;
color: #CC3399;
        background-image: url(https://titipi.org/wiki/images/d/d2/Cloud.png);
 
        background-size: cover;
          @bottom-center{
  @bottom-center{
                 content:"";
                 content:"https://titipi.org";
         }
         }
}
}


div.section, div.section div.contrib:nth-of-type(1){
div.section, div.section div.contrib:nth-of-type(1){
Line 118: Line 111:
span.bookcover {
span.bookcover {
string-set: sectiontitle content(text);  
string-set: sectiontitle content(text);  
         font-size: 145px;
         font-size: 110px;
         line-height: 0.55;
         line-height: 0.55;
margin: 0;
margin: 0;
         font-family: 'Picnic';
         font-family: 'adelphe-bold';
        display:inline;
text-align: center;
        position:relative;
 
        hyphens:auto;
color: white;
}
}


span.frenchtitle{
span.frenchtitle{
string-set: sectiontitle content(text);  
string-set: sectiontitle content(text);  
         font-size: 145px;
         font-size: 110px;
         line-height: 0.55;
         line-height: 0.55;
margin: 0;
margin: 0;
         font-family: 'Picnic';
         font-family: 'adelphe-bold';
         display:inline;
         display:inline;
         position:relative;
         position:relative;
Line 142: Line 133:


body{
body{
        color: black;
    color: black;
font-size: var(--font-size);
font-size: var(--font-size);
line-height: 1.4;
line-height: 1.4;
        font-family: 'baskervvol';
    font-family: 'adelphe-regular';
}
}


Line 157: Line 148:


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


blockquote {
blockquote {
Line 166: Line 159:
font-weight: 600;
font-weight: 600;
line-height: 1;
line-height: 1;
font-family: 'Picnic';
font-family: 'compagnon-italic';
font-size: 2.6rem;
page-break-before: always;
page-break-before: right;
}
}
.runningtitle {
.runningtitle {
Line 177: Line 169:
}
}


h3 {font-family: Picnic; font-size: 1.5em; line-height: 1;}
h3 {font-family: adelphe-bold; font-size: 1.3em;}


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;
}
}


Line 202: Line 193:
     margin: 24pt 16pt 16pt 16pt;
     margin: 24pt 16pt 16pt 16pt;
     page-break-inside: avoid;
     page-break-inside: avoid;
     font-family: baskervvol;
     font-family: adelphe-regular;
}
}
img{
img{
    position: relative;
     display: block;
     display: block;
     max-width: 100%;
     width: 100%;
     height: auto;
     height: auto;
     margin: 0 0 8pt 0;
     margin: 0;
}
}
.thumbinner{
.thumbinner{
Line 251: Line 241:
}
}
.reference-text::footnote-call {
.reference-text::footnote-call {
     font-family:'baskervvol';
     font-family:'adelphe-regular';
}
}
          
          
.reference-text::footnote-marker {
.reference-text::footnote-marker {
     font-family:'baskervvol';
     font-family:'adelphe-regular';
}
}
.contents ul{
.contents ul{

Latest revision as of 14:53, 9 May 2023

@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;

}

@font-face {
    font-family: 'adelphe-regular';
    src: url('/wiki/images/0/01/Adelphe-FlorealRegular.woff') format('woff'),
         url('/wiki/images/e/eb/Adelphe-FlorealRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'adelphe-bold';
    src: url('/wiki/images/0/05/Adelphe-FlorealBold.woff') format('woff'),
         url('/wiki/images/8/81/Adelphe-FlorealBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root{
	--font-size: 9pt;
}


@page{
	size: 148mm 210mm;
	margin: 15mm 15mm 15mm 15mm;

	@bottom-center{
		margin-top: -2mm;
		font-family: 'adelphe-regular';
		font-size: 8pt;
		content: counter(page);
	}
       @footnote {
           float: bottom;
           border-top: solid #222 thin;
           padding-top: 8pt;
           font-family: 'adelphe-regular';
font-size: 8pt;
       }

}
@page:first{

	background-color: white;
        background-image: url(https://titipi.org/wiki/images/d/d2/Cloud.png);
        background-size: cover;

	
	@top-center{
                font-family: adelphe-bold;
		content: "The Cloud is not an option";
                font-size:10pt;

	}

        @bottom-center{
                font-family: adelphe-bold;
		content: "The Institute for Technology In the Public Interest";
                font-size:10pt;

        }
}

@page:nth(2){        
        background-color: white;
         @bottom-center{
                content:"";
        }
}


@page:blank{
	background-color:white;
         @bottom-center{
                content:"";
        }
}


/* this last page is buggy */

.pagedjs_page:nth-last-of-type(1) {

background-color: white;
        background-image: url(https://titipi.org/wiki/images/d/d2/Cloud.png);
        background-size: cover;
  @bottom-center{
                content:"https://titipi.org";
        }
}

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: 110px;
        line-height: 0.55;
	margin: 0;
        font-family: 'adelphe-bold';
text-align: center;

}

span.frenchtitle{
	string-set: sectiontitle content(text); 
        font-size: 110px;
        line-height: 0.55;
	margin: 0;
        font-family: 'adelphe-bold';
        display:inline;
        position:relative;
        hyphens:auto;
        color: black;
}


body{
    color: black;
	font-size: var(--font-size);
	line-height: 1.4;
    font-family: 'adelphe-regular';
}

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: 'compagnon-italic';
page-break-before: always;
}
.runningtitle {
  display:none;
}
h2:not( .runningtitle ~ h2 ){
	string-set: contributiontitle content(text); 
}

h3 {font-family: adelphe-bold; font-size: 1.3em;}

h3, h4, h5, h6{
    margin: 0 0 1em 0;
    page-break-after: avoid;
}

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: adelphe-regular;
}
img{
    display: block;
    width: 100%;
    height: auto;
    margin: 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: #CC3399;
    text-decoration: none;
    border-bottom: 1px solid #CC3399;
}

/* 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:'adelphe-regular';
}
        
.reference-text::footnote-marker {
    font-family:'adelphe-regular';
}
.contents ul{
    margin-top:0.5em;
}
.contents h3{
    margin-bottom: 0.5em;
}


/* WIKISTYLING */

.tocnumber { display: none; }