PdfCSS:Anarcho Krant Explorations

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