UnfoldingCSS:Naniandfriends: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
m (testing with style)
Line 1: Line 1:
@font-face {
:root {
font-family:'Picnic';
 
src:url('/wiki/images/b/bf/PicNic-Regular.woff2') format('woff2');
/* ************* C O N T E N T ************ */
font-weight:normal;
 
font-style:normal
    --PUB-title: 'PUB Title';
}
    --PUB-collective: 'Enter your collective here';
    --PUB-year: '3000';
 
 
/* ************* F O N T S **************** */
 
    --title-font: Serif;
    --body-font: Sans-serif;
    --code-font: Monospace;
    --quote-font: Serif;
    --footnote-font: Sanserif;
    --page-number-font: Monospace;
 
    --h1-font-size: 30pt;
    --h2-font-size: 24pt;
    --h3-font-size: 18pt;
    --p-font-size: 12pt;
   


@font-face {
/* ************* C O L O R **************** */
    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 {
    --color-paper: HoneyDew;  
    font-family: 'asulregular';
     --text-color: MediumSeaGreen;
     src: url('/wiki/images/0/03/Asul-regular-webfont.woff') format('woff'),
     --highlight-color: Olive;
        url('/wiki/images/c/c7/Asul-regular-webfont.woff2') format('woff2');
     --sparkling-color: LightCoral;
     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{
/* -------------- P A G E - S T Y L E ------------  */
--font-size: 11pt;
}


@page {


@page{
/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */
size: 148mm 210mm;
margin: 17mm 15mm 19mm 15mm;


@bottom-center{
    size: A4;
margin-top: -4mm;
    margin-top: 15mm;
font-family: 'asulregular';
    margin-bottom: 15mm;
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{
@page:first{


  background-image: url(https://titipi.org/wiki/images/6/66/Vague_intellectual_pleasure.png);
    @right-middle {
  background-size: 98%;
        content: none;
   background-repeat: no-repeat;
    }    
  background-position: center center;


    @right-top {
@top-center{
        content: none;
                font-family: asulbold;
    }
content: "NEoN Digital Ethics Audit";
}
                font-size:12pt;


}
@page:right {


        @bottom-center{
    margin-left: 35mm;
                font-family: asulbold;
    margin-right: 20mm;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;


         }
    @right-middle {
}
        color: var(--sparkling-color);
        content: counter(page);
         font-family: var(--page-number-font);
    }  


@page:nth(2){       
    @right-top {
         background-color: white;
        color: var(--text-color);
        @bottom-center{
        content: var(--PUB-title);
                content:"";
         font-family: var(--code-font);
         }
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
         text-orientation: mixed;
    }
}
}


@page:nth(3) {
background-color:white;
@top-center{
                font-family: asulbold;
content: "NEoN Digital Ethics Audit";
                font-size:12pt;


}
@page:left {


        @bottom-center{
    margin-right: 35mm;
                font-family: asulbold;
    margin-left: 20mm;
content: "The Institute for Technology In the Public Interest";
                font-size:12pt;


        }
}


@page:blank{
    @left-middle {
background-color:white;
        color: var(--sparkling-color);
        @bottom-center{
        content: counter(page);
                content:"";
        font-family: var(--page-number-font);
color: white;
    }  
        }
}


div.section, div.section div.contrib:nth-of-type(1){
    @left-top {
      break-before: right;
        color: var(--text-color);
}
        content: var(--PUB-title);
div.contrib:not(:first-of-type){
        font-family: var(--code-font);
      break-before: always;  
        margin-right: 0.8cm;
}
        writing-mode: vertical-rl;
div.contrib{
        text-orientation: mixed;
      page: contrib;
    }
}
}


span.bookcover {
.pagedjs_sheet {
string-set: sectiontitle content(text);
    box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
        font-size: 140px;
        line-height: 0.55;
margin: 0;
        font-family: 'Picnic';
        position:relative;
        hyphens:auto;
color: #CC3399;
}
}


span.frenchtitle{
body{
string-set: sectiontitle content(text);
    background-color: var(--color-paper);
        font-size: 140px;
        line-height: 0.55;
margin: 0;
        font-family: 'Picnic';
        display:inline;
        position:relative;
        hyphens:auto;
        color: black;
}
}


/* -------------- P A G E - S T Y L E - E N D S -----------  */


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


/* -------------- T E X T - S T Y L E ---------------------  */


/* GENERAL ELEMENTS */


blockquote {
h1{
font-family: 'compagnon-italic';
    color: var(--highlight-color);
    font-family: var(--title-font);
    font-size: var(--h1-font-size);
    line-height: calc(var(--h1-font-size) + 1.5pt);
    text-wrap: pretty;
}
}


h2{
h2{
margin-top:0;
    color: var(--highlight-color);
font-weight: 600;
    font-family: var(--title-font);
line-height: 1;
    font-size: var(--h2-font-size);
font-family: 'Picnic';
    line-height: calc(var(--h2-font-size) + 1.5pt);
font-size: 2.6rem;
    text-wrap: pretty;
page-break-before: right;
}
}
.runningtitle {
 
  display:none;
h3{
}
    color: var(--highlight-color);
h2:not( .runningtitle ~ h2 ){
    font-family: var(--title-font);
string-set: contributiontitle content(text);  
    font-size: var(--h3-font-size);
    line-height: calc(var(--h3-font-size) + 1.5pt);
    text-wrap: pretty;
}
}


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


h3, h4, h5, h6{
b{
     margin: 0 0 1em 0;
     color: var(--sparkling-color);
    page-break-after: avoid;
    font-weight: 600;
}
}


p{
p{
     margin: 0 0 1em 0;
     color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
    text-indent: calc(var(--p-font-size) + 2pt);
    text-wrap: pretty;
}
}


/*
ul{
.contrib p{
    color: var(--text-color);
     orphans:2;
    font-family: var(--body-font);
     widows:2;
     font-size: var(--p-font-size);
     line-height: calc(var(--p-font-size) + 2pt);
}
}
*/


.thumb{
a{
     /* image caption */
     color: var(--sparkling-color);
    font-size: 10pt;
    line-height: 1.25;
    margin: 24pt 16pt 16pt 16pt;
    page-break-inside: avoid;
    font-family: asulregular;
}
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: #CC3399;
    text-decoration: none;
    border-bottom: 1px solid #CC3399;
}
}


/* specific details */
a.external{
}


a.text{
p:nth-of-type(3n) {
    word-break: none !important;
  border: 2px solid orange;
}
  margin-left: -10px;
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; }
/* -------------- T E X T - B L O C K - E N D S -----------  */

Revision as of 17:00, 28 June 2024

:root {

/* ************* C O N T E N T ************ */

    --PUB-title: 'PUB Title';
    --PUB-collective: 'Enter your collective here';
    --PUB-year: '3000';


/* ************* F O N T S **************** */

    --title-font: Serif;
    --body-font: Sans-serif;
    --code-font: Monospace;
    --quote-font: Serif;
    --footnote-font: Sanserif;
    --page-number-font: Monospace;

    --h1-font-size: 30pt;
    --h2-font-size: 24pt;
    --h3-font-size: 18pt;
    --p-font-size: 12pt;
    

/* ************* C O L O R **************** */

    --color-paper: HoneyDew; 
    --text-color: MediumSeaGreen;
    --highlight-color: Olive;
    --sparkling-color: LightCoral;

}



/* -------------- P A G E - S T Y L E ------------  */

@page {

/* Choose the size of the publication: A4, A5, A6 or "size: 12cm 5cm;", etc. */

    size: A4;
    margin-top: 15mm;
    margin-bottom: 15mm;

}


@page:first{

    @right-middle {
        content: none;
    }    

    @right-top {
        content: none;
    }
}

@page:right {

    margin-left: 35mm;
    margin-right: 20mm;

    @right-middle {
        color: var(--sparkling-color);
        content: counter(page);
        font-family: var(--page-number-font);
    }    

    @right-top {
        color: var(--text-color);
        content: var(--PUB-title);
        font-family: var(--code-font);
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}


@page:left {

    margin-right: 35mm;
    margin-left: 20mm;


    @left-middle {
        color: var(--sparkling-color);
        content: counter(page);
        font-family: var(--page-number-font);
    }    

    @left-top {
        color: var(--text-color);
        content: var(--PUB-title);
        font-family: var(--code-font);
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
}

.pagedjs_sheet {
    box-shadow: -5px 5px 12px 0px var(--color-pageSheet);
}

body{
    background-color: var(--color-paper);
}

/* -------------- P A G E - S T Y L E - E N D S -----------  */



/* -------------- T E X T - S T Y L E ---------------------  */


h1{
    color: var(--highlight-color);
    font-family: var(--title-font);
    font-size: var(--h1-font-size);
    line-height: calc(var(--h1-font-size) + 1.5pt);
    text-wrap: pretty;
}

h2{
    color: var(--highlight-color);
    font-family: var(--title-font);
    font-size: var(--h2-font-size);
    line-height: calc(var(--h2-font-size) + 1.5pt);
    text-wrap: pretty;
}

h3{
    color: var(--highlight-color);
    font-family: var(--title-font);
    font-size: var(--h3-font-size);
    line-height: calc(var(--h3-font-size) + 1.5pt);
    text-wrap: pretty;
}


b{
    color: var(--sparkling-color);
}

p{
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
    text-indent: calc(var(--p-font-size) + 2pt);
    text-wrap: pretty;
}

ul{
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--p-font-size);
    line-height: calc(var(--p-font-size) + 2pt);
}

a{
    color: var(--sparkling-color);
}


p:nth-of-type(3n) {
  border: 2px solid orange;
  margin-left: -10px;
}

/* -------------- T E X T - B L O C K - E N D S -----------  */
Retrieved from "https://titipi.org/wiki/index.php?title=UnfoldingCSS:Naniandfriends&oldid=4133"