PdfCSS:Test: Difference between revisions

From creative crowd wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(100 intermediate revisions by 2 users not shown)
Line 1: Line 1:
:root {
:root {
--color-paper: violet;  
font-size: 12px;
/*--color-paper: white;*/
}
}
@font-face {
    font-family: 'Abordage';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Basalte-Fond';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Basalte-Multicolor';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Basalte-Volume';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Director-Bold';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Director-Light';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Director-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Director-Variable';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Equateur-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FT88-Bold';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-Expanded';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-Gothique';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-Italic';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-School';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'FT88-Serif';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}
@font-face {
    font-family: 'Latitude-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Louise-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
font-family: 'Montchauve';
    src: url('https://cc.vvvvvvaria.org/fonts/velvetyne/montchauve/Montchauve.otf?#iefix') format('opentype');
}
@font-face {
font-family: 'Autobahn';
    src: url('https://cc.vvvvvvaria.org/fonts/peter-weigler/Autobahn/Autobahn.ttf?#iefix') format('truetype');
}
@page{
@page{
size: A4 portrait;
size: 290mm 420mm;
margin: 25mm 15mm;
margin: 15mm;
@bottom-center{
            content: counter(page);
        }
@top-left {
content: "something";
}
}
@page:first{
background: coral;
}
}
body{
body{
background-color: pink;
/*font-family: 'Latitude-Regular';*/
color: red;
}
 
p {
font-size: 1rem;
}
}
div.cover{
div.cover{
Line 14: Line 218:
}
}
div.cover h1{
div.cover h1{
font-size: 60px;
font-size: 8rem;
line-height: 8rem;
font-family: 'Autobahn';
text-align: center;
border-bottom: 1px solid black;
}
div.article{
columns: 7 auto;
/*break-before: always;*/
}
div.article h1 {
font-size: 4rem;
font-family: 'Basalte-Fond';
/*position: absolute;*/
/*display: block;*/
}
}
span.tocnumber,
div.pad{
div.pad{
display: none;
display: none;
}
}

Latest revision as of 09:50, 17 January 2023

:root {
	font-size: 12px;
	/*--color-paper: white;*/
}

@font-face {
    font-family: 'Abordage';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Abordage-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basalte-Fond';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Fond.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basalte-Multicolor';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Multicolor.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Basalte-Volume';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Basalte-Volume.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Director-Bold';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Bold.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Director-Light';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Light.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Director-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Director-Variable';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Director-Variable.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Equateur-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Equateur-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FT88-Bold';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Bold.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-Expanded';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Expanded.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-Gothique';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Gothique.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-Italic';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Regular.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-School';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-School.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'FT88-Serif';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Serif.svg#svgFontName') format('svg');
    /*font-weight: normal;*/
    /*font-style: normal;*/
}

@font-face {
    font-family: 'Latitude-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Latitude-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Louise-Regular';
    src:    url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.woff') format('woff'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.woff2') format('woff2'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.ttf') format('truetype'),
            url('https://cc.vvvvvvaria.org/fonts/degheest-types/Louise-Regular.svg#svgFontName') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'Montchauve';
    src: url('https://cc.vvvvvvaria.org/fonts/velvetyne/montchauve/Montchauve.otf?#iefix') format('opentype');
}

@font-face {
	font-family: 'Autobahn';
    src: url('https://cc.vvvvvvaria.org/fonts/peter-weigler/Autobahn/Autobahn.ttf?#iefix') format('truetype');
}

@page{
	size: 290mm 420mm;
	margin: 15mm;
	@bottom-center{
            content: counter(page);
        }
	@top-left {
		content: "something";
	}
}
@page:first{
	background: coral;
}
body{
	/*font-family: 'Latitude-Regular';*/
}

p {
	font-size: 1rem;
}
div.cover{
	break-after: always;
}
div.cover h1{
	font-size: 8rem;
	line-height: 8rem;
	font-family: 'Autobahn';
	text-align: center;
	border-bottom: 1px solid black;
}
div.article{
	columns: 7 auto;
	/*break-before: always;*/
}
div.article h1 {
	font-size: 4rem;
	font-family: 'Basalte-Fond';
	/*position: absolute;*/
	/*display: block;*/
}

span.tocnumber,
div.pad{
	display: none;
}