UnfoldingCSS:StyleBox: Difference between revisions

From titipi
Jump to navigation Jump to search
No edit summary
No edit summary
Line 2: Line 2:
     /* ***** PAGE OPTIONS **** */
     /* ***** PAGE OPTIONS **** */
     --page-size: A4;  
     --page-size: A4;  
     --color-paper: 'PeachPuff';
     --color-paper: 'Plum';


     /* ***** FONTS ****** */
     /* ***** FONTS ****** */

Revision as of 09:29, 7 June 2024

:root {
    /* ***** PAGE OPTIONS **** */
    --page-size: A4; 
    --color-paper: 'Plum';

    /* ***** FONTS ****** */
    --title-font: 'Serif';
    --body-font: 'Sanserif';
    --code-font: 'Monospace';
    --quote-font: 'Serif';
    --footnote-font: 'Sanserif';
    --page-number-font: 'Monospace';
    

    /* ****** COLOR ****** */
    --text-color: 'MidnightBlue';
    --links-color: 'red';


    /* ***** CONTENT ****** */
    --PUB-title: 'PUB Title';

}

@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(--title-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(--title-font);
        margin-right: 0.8cm;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }
    
}

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

p{
    font-family: var(--body-font);
    font-size: 12pt;
    line-height: 13pt;
    text-indent: 15pt;
    text-wrap: pretty;
}


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