UnfoldingCSS:StyleBox: Difference between revisions

Latest revision as of 11:57, 7 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 -----------  */