PdfCSS:Test: Difference between revisions

From creative crowd wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
:root {
:root {
font-size: 14px;
font-size: 12px;
/*--color-paper: white;*/
/*--color-paper: white;*/
}
}
Line 94: Line 94:
}
}


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


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


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


@font-face {
@font-face {
Line 130: Line 130:
             url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.ttf') format('truetype'),
             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');
             url('https://cc.vvvvvvaria.org/fonts/degheest-types/FT88-Italic.svg#svgFontName') format('svg');
     font-weight: normal;
     /*font-weight: normal;*/
     font-style: normal;
     /*font-style: normal;*/
}
}


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


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


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


@font-face {
@font-face {
Line 208: Line 208:
}
}
body{
body{
/*background-color: pink;*/
/*font-family: 'Latitude-Regular';*/
color: black;
font-family: 'Director-Light';
}
}


Line 220: Line 218:
}
}
div.cover h1{
div.cover h1{
font-size: 16rem;
font-size: 8rem;
font-family: 'FT88-Italic', 'Director-Bold';
line-height: 8rem;
font-family: 'Autobahn';
text-align: center;
border-bottom: 1px solid black;
}
}
div.article{
div.article{
columns: 4 auto;
columns: 7 auto;
break-before: always;
/*break-before: always;*/
}
}
div.article h1 {
div.article h1 {
font-size: 3rem;
font-size: 4rem;
font-family: 'Director-Regular';
font-family: 'Basalte-Fond';
/*position: absolute;*/
/*display: block;*/
}
}



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