PdfCSS:Test: Difference between revisions

From creative crowd wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 233: Line 233:
}
}
div.article h1 {
div.article h1 {
font-size: 3rem;
font-size: 4rem;
font-family: 'Director-Regular';
font-family: 'FT88-Gothique';
}
}



Revision as of 15:14, 16 January 2023

:root {
	font-size: 14px;
	/*--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{
	/*background-color: pink;*/
	color: black;
	font-family: 'Director-Light';
}

p {
	font-size: 1rem;
}
div.cover{
	break-after: always;
}
div.cover h1{
	font-size: 6rem;
	line-height: 6rem;
	font-family: 'Autobahn';
	text-align: center;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 1rem;
}
div.article{
	columns: 4 auto;
	break-before: always;
}
div.article h1 {
	font-size: 4rem;
	font-family: 'FT88-Gothique';
}

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