PdfCSS:Anarcho Krant Explorations
Jump to navigation
Jump to search
@charset "utf-8";
@import url("https://cc.vvvvvvaria.org/fonts/velvetyne/degheest-types/stylesheet.css");
@import url("https://cc.vvvvvvaria.org/fonts/Computer_Modern/Concrete/cmun-concrete.css");
@import url("https://cc.vvvvvvaria.org/fonts/Lucette/font/stylesheet.css");
@import url("https://cc.vvvvvvaria.org/fonts/Redaction/stylesheet.css");
@import url("https://cc.vvvvvvaria.org/fonts/Authentic_Sans/stylesheet.css");
@import url("https://cc.vvvvvvaria.org/fonts/InriaFonts-master/fonts/InriaSans/Web/fonts.css");
@import url("https://cc.vvvvvvaria.org/fonts/InriaFonts-master/fonts/InriaSerif/Web/fonts.css");
@import url("https://cc.vvvvvvaria.org/fonts/junicode/fonts/webfonts/stylesheet.css");
:root{
--cell-height: 70px;
--cell-width: 208px; /* this is a visual guess, was needed for the images, but maybe not needed anymore */
--line-height: 14px;
--font-size-latitude-regular: 11px;
--font-size-computer-modern: 12px;
--small-font-size: 9px;
--h1-font-size: 36px;
--h1-line-height: 28px;
--spacer-half: 7px;
--spacer-full: var(--line-height);
--cellular-margin: 20px;
}
@page {
size: 297mm 420mm portrait;
margin: 70px 40px 40px 40px;
@top-left{
content: "Opruiing";
font-family: monospace;
font-size: var(--small-font-size);
}
@top-center{
content: counter(page);
font-family: "FT88-Gothique";
font-size: 20px;
}
@top-right{
content: "Maak kapot wat jou kapot maakt, nr. 1, 2023";
font-family: monospace;
font-size: var(--small-font-size);
}
}
@page:first{
@top-center{
content: "";
font-family: "Redaction Bold";
font-size: 50px;
}
@top-left{
content: "FREE";
}
}
/*------------- table of contents -----------*/
div.TOC {
display:none;
}
/*------------- typography ------*/
body{
hyphens: auto;
line-height: var(--line-height);
}
/* ||||||| headers |||||||| */
.font-school{
font-family: "FT88-School";
font-size: 22px;
}
.font-gothique{
font-family: "FT88-Gothique";
font-size: 22px;
}
.font-italic{
font-family: "FT88-Italic";
font-size: 22px;
}
.font-bold{
font-family: "FT88-Bold";
font-size: 20px;
}
.font-regular{
font-family: "FT88-Regular";
font-size: 22px;
}
.font-director{
font-family: "Director-Regular";
}
.font-abordage{
font-family: "Abordage";
}
.font-basalte{
font-family: "Basalte-Fond";
font-size: 60px;
letter-spacing: 2px;
}
/* ||||||| body fonts |||||||| */
.font-latitude{
font-family: "Latitude-Regular";
font-size: 10px;
}
.font-lucette{
font-family: "Lucette Regular";
font-size: 10px;
}
.font-redaction{
font-family: "Redaction Regular";
font-size: 10px;
}
.font-concrete{
font-family: "Computer Modern Concrete";
font-size: 11px;
}
.font-inria-sans {
font-family: "Inria Sans";
font-size: 10px;
}
.font-inria-serif{
font-family: "Inria Serif";
font-size: 10px;
}
.font-junicode{
font-family: "junicoderegularcondensed";
font-size: 13px;
}
blockquote{
margin: var(--spacer-full) 0;
font-style: italic;
line-height: var(--line-height);
text-indent: 0 !important;
}
blockquote p{
text-indent: 0 !important;
}
sup{
line-height: 0;
}
/*-------------- other --------------*/
p{
margin: 0;
}
div.mw-parser-output p{
display: none;
}
/* text indent paragraphs */
div.page p{
display: block;
text-indent: 1em;
}
div.page p:nth-of-type(2) {
text-indent: 0;
}
/* margin bottom for author names */
div.page b {
margin: 0 0 var(--spacer-full) 0;
display: block;
text-indent: 0;
}
a, a:active, a:visited{
word-break: break-word;
color: black;
}
ul{
margin: var(--spacer-full) 0;
padding: 0;
}
ol{
margin-left: 0;
padding: 0;
}
ul > li{
margin: var(--spacer-half) 0;
}
/* ------------ grid ---------------- */
div.page {
display: grid;
grid-template-columns: repeat(5, 20%);
grid-template-rows: repeat(21, var(--cell-height));
margin: 0;
padding: 0;
}
div.item{
line-height: var(--line-height);
column-fill: auto;
padding: var(--spacer-full) var(--spacer-half);
margin: 0;
}
div.item:nth-of-type(odd){
transform: rotate(-0.5deg);
}
div.item:nth-of-type(even){
transform: rotate(0.5deg);
}
div.cellular:nth-of-type(odd){
transform: rotate(-1deg);
}
div.cellular:nth-of-type(even){
transform: rotate(1deg);
}
div.item br{
display: none;
}
div.image img{
display: block;
width: 100%;
height: auto;
margin: 0;
}
div.image a{
display: block;
}
div.cellular{
border: 5px ridge;
font-family: "Authentic Sans Condensed 90";
font-size: 11px;
background-color: rgb(240, 240, 240);
padding: var(--spacer-half);
}
div.cellular p{
text-indent: 0;
}
/* ------------ images -------------- */
.image,
figure {
margin: 0 0 var(--spacer-half);
}
image img,
figure img{
margin: 0;
object-fit: scale-down;
}
figcaption,
.thumbcaption,
div.caption{
font-family: "Authentic Sans Condensed 60";
font-size: var(--small-font-size);
line-height: var(--line-height);
letter-spacing: 0.03em;
margin: 0 0;
padding: 0;
position: absolute;
}
img{
width: auto;
height: auto;
filter: grayscale();
}
/*------------ headers -----------*/
div.item h1,
div.item h2{
display: none;
}
h1{
margin: 0;
font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
align-self: end;
font-weight: normal;
}
h1#cover_title{
display: none;
}
h1.outline,
h1.outside{
display: block !important;
text-align: center;
}
h1.inline{
display: block !important;
margin: -14px 0 var(--spacer-full) 0;
padding: 0 var(--spacer-half) 0 0;
}
h2, h3, h4, h5, h6{
font-size: 100%;
line-height: var(--line-height);
margin: var(--spacer-full) 0 0 0;
}
/* ------------ keywords --------------- */
div.keywords {
width: calc(5 * 208px);
columns: 3 auto;
font-family: monospace;
font-size: var(--small-font-size);
border-top: 3px solid;
height: 80px;
z-index: -1;
position: absolute;
bottom: -30px;
padding: var(--spacer-half) 0 !important;
transform: rotate(0deg) !important;
}
div.keywords p{
text-indent: -2em !important;
margin-left: 2em;
}
/*---------- resetting the text indents of first <p>'s ---------*/
div#editorial p:nth-of-type(5),
div#item-p1-a p:nth-of-type(2),
div#item-p1-b p:nth-of-type(2),
div#item-p1-c p:nth-of-type(3),
div#item-p2-a p:nth-of-type(2),
div#item-p2-b p:nth-of-type(3),
div#item-p2-c p:nth-of-type(2),
div#item-p3-a p:nth-of-type(3),
div#item-p3-b p:nth-of-type(3),
div#item-p3-c p:nth-of-type(2),
div#item-p4-a p:nth-of-type(2),
div#item-p4-b p:nth-of-type(2),
div#item-p4-c p:nth-of-type(2),
div#item-p4-d p:nth-of-type(2),
div#item-p5-a p:nth-of-type(3),
div#item-p5-c p:nth-of-type(2),
div#item-p6-a p:nth-of-type(3),
div#item-p6-b p:nth-of-type(2),
div#item-p6-c p:nth-of-type(2),
div#item-p7-a p:nth-of-type(2),
div#item-p7-b p:nth-of-type(3),
div#item-p7-c p:nth-of-type(3),
div#item-p8-a p:nth-of-type(2),
div#bibliography p:nth-of-type(2){
text-indent: 0 !important;
}
/* ------------- PAGE 1 ---------------- */
#h1-editorial{
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
font-family: 'Redaction 35 Regular';
font-size: 72px;
letter-spacing: 0px;
/*border-top: 4px solid;*/
padding-top: 52px;
margin-bottom: 25px;
}
div.item#editorial{
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 7;
columns: 4 auto;
}
div.item#editorial > p:first-of-type > b{
display: none !important;
}
div.item#editorial p:nth-of-type(3) > i{
margin: var(--spacer-full) 0;
display: block;
}
div#editorial p:nth-of-type(3) {
text-indent: 0 !important;
font-weight: bold;
}
div#editorial p:nth-of-type(4) {
font-size: var(--small-font-size);
margin-bottom: var(--spacer-full);
text-indent: 0 !important;
font-weight: bold;
}
#h1-p1-a{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 8;
grid-row-end: 10;
}
div.item#item-p1-a{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 10;
grid-row-end: 20;
columns: 2 auto;
}
#h1-p1-b {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 8;
grid-row-end: 10;
}
div.item#item-p1-b{
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 10;
grid-row-end: 20;
columns: 2 auto;
border-left: 1px solid;
}
div.item#item-p1-c{
grid-column-start: 5;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 20;
border-left: 1px solid;
}
div.item#item-p1-c p:first-of-type > b{
display: none !important;
}
div.cellular#cellular-p1-a{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 7;
grid-row-end: 9;
height: 52px;
width: 379px;
margin: var(--cellular-margin);
}
div.cellular#cellular-p1-b{
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 7;
grid-row-end: 9;
height: 155px;
width: 179px;
margin: var(--cellular-margin);
margin-top: 20px;
margin-left: 120px;
}
div.cellular#cellular-p1-b img{
width: 100%;
}
/* |||||||||| colophon |||||||||| */
div.item#colophon{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 20;
grid-row-end: 22;
columns: 5 auto;
column-fill: auto;
font-family: 'Inria Serif';
font-size: 9px;
background-color: rgb(240, 240, 240);
border-bottom: 5px double;
}
#colophon ul > li {
margin: 0 0 0 0.75em;
text-indent: -0.75em;
}
div.item#colophon h2 {
display: inline-block;
}
div.item#colophon p {
text-indent: 0;
}
div.item#colophon a {
display: inline-block !important;
}
div.item#colophon p:nth-of-type(5),
div.item#colophon p:nth-of-type(7),
div.item#colophon p:nth-of-type(10){
margin-top: 2em;
}
#colophon p:not(p:first-of-type) > b {
display: inline-block !important;
margin: 0 !important;
}
/* --- FONT LIST ---*/
div.item#colophon li {
list-style: none;
/*text-indent: -0.7em;*/
}
div.item#colophon li::before {
content: "- ";
}
div.item#colophon ul{
padding: 0;
margin: 0;
}
/* ------------- PAGE 2 ---------------- */
/* TODO ... */
/* ----------- cosmetics ------------- */
.mw-usertoollinks-talk,
.mw-usertoollinks-contribs{
display: none;
}