UnfoldingCSS:StyleBox: Difference between revisions

Revision as of 11:17, 7 June 2024

:root {

/* ************* P A G E ****************** */

    --page-size: A4; 
    --color-paper: HoneyDew; 


/* ************* 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 **************** */

    --text-color: MediumSeaGreen;
    --highlight-color: Olive;
    --sparkling-color: LimeGreen;

}



/* -------------- P A G E - B L O C K -----------  */

@page {
    size: var(--page-size);
    margin-top: 1.5cm;
    margin-bottom: 1.5cm;
}


@page:first{

    @right-middle {
        content: none;
    }    

    @right-top {
        content: none;
    }

}

@page:right {

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

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

    @right-top {
        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 {
        content: counter(page);
        font-family: var(--page-number-font);
    }    

    @left-top {
        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 - B L O C K - E N D S -----------  */



/* -------------- T E X T - B L O C K ---------------------  */


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


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 -----------  */