PdfCSS:Toward a Minor Tech

From creative crowd wiki
Revision as of 15:08, 21 January 2023 by Manetta (talk | contribs)
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");

:root{
	--cell-height: 144px;
	--cell-width: 208px; /* this is a visual guess, was needed for the images, but maybe not needed anymore */
	--line-height: 16px;
	--font-size-latitude-regular: 11px;
	--font-size-computer-modern: 12px;
	--small-font-size: 10px;
	--h1-font-size: 36px;
	--h1-line-height: calc(3 * var(--line-height));
	--spacer-half: 8px;
	--spacer-full: var(--line-height);
}

@page {
	size: 297mm 420mm portrait;
	margin: 100px 40px 40px 40px;
	
	@top-left{
		content: "Toward a Minor Tech";
		font-family: monospace;
		font-size: 8px;
	}
	@top-right{
		content: "A Peer-reviewed Newspaper Volume 13, Issue 1, 2023";
		font-family: monospace;
		font-size: 10px;
	}
}

@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-gothique{
    font-family: "FT88-Gothique";
}
.font-italic{
    font-family: "FT88-Italic";
}
.font-bold{
    font-family: "FT88-Bold";
}
.font-director{
    font-family: "Director-Regular";
}
.font-abordage{
    font-family: "Abordage";
}
.font-basalte{
    font-family: "Basalte-Fond";
}

/* ||||||| body fonts |||||||| */

.font-latitude{
    font-family: "Latitude-Regular";
}
.font-lucette{
    font-family: "Lucette Regular";
}
.font-redaction{
    font-family: "Redaction";
}
.font-concrete{
    font-family: "Computer Modern Concrete";
    font-size: var(--font-size-computer-modern);
}
.font-inria-sans{
    font-family: "Inria Sans";
}
.font-inria-serif{
    font-family: "Inria Serif";
}

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 !important;
    text-indent: 1em;
}
div.page p:nth-of-type(2) {
    text-indent: 0;
}

/* margin bottom for author names */
div.page b {
    color: blue;
    margin: 0 0 var(--spacer-full) 0 !important;
    display: block;
    text-indent: 0;
}

a{
    word-break: break-all;
    display: inline-block;
}
ul{
    margin: var(--spacer-full) 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(10, var(--cell-height));
	margin: 0;
	padding: 0;
}
div.item{
	font-size: var(--font-size-latitude-regular);
	line-height: var(--line-height);
	column-fill: auto;
	padding: var(--spacer-full) var(--spacer-half);
	margin: 0;
}
div.image img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
div.cellular{
    border: thick double black;
    font-family: "Authentic Sans Condensed 90";
}
div.cellular p{
    text-indent: 0;
}


/* ------------ images -------------- */

.image,
figure { 
	margin: 0;
}
    image img,
	figure img{
		margin: 0;
		object-fit: scale-down;
	}
figcaption,
.thumbcaption,
div.caption{
	font-family: "monospace";
	font-size: var(--small-font-size);
	line-height: var(--line-height);
	margin: -4px 0;
	padding: 0;
	position: absolute;
	width: var(--cell-width);
}

img{
    width: auto;
    height: auto;
}

/*------------ headers -----------*/


div.item h1,
div.item h2{
    display: none;
}

h1{
	margin: 0;
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
}
h1#cover_title{
	display: none;
}
h1.outline,
h1.outside{
    display: block !important;
	background-color: pink;
	text-align: center;
}
h1.inline{
    display: block !important;
	margin: -16px 0 var(--spacer-full) 0;
	background-color: pink;
	padding: 0 var(--spacer-half) 0 0;
    font-size: 28px;
    line-height: calc(var(--line-height) * 2);
}
h2, h3, h4, h5, h6{
    font-size: 100%;
    line-height: var(--line-height);
    margin: var(--spacer-full) 0 0 0;
}

/* ------------- PAGE 1 ---------------- */

div.item#editorial{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 8;
	background-color: cyan;
    columns: 2 auto;
}
#h1-editorial{
    grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}
div.item#editorial > p:nth-of-type(1) > b{
    display: none;
}
div.item#editorial p:nth-of-type(3) > i{
    margin: var(--spacer-full) 0;
    display: block;
}
div#editorial p:nth-of-type(4) {
    font-size: 10px;
    font-family: monospace;
    margin-bottom: var(--spacer-full);
}

div.item#item-p1-a{
    grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 7;
	columns: 3 auto;
    background-color: violet;
}
#h1-p1-a{
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 3;
}
div.item#item-p1-b{
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 11;
	columns: 5 auto;
    background-color: orange;
}
div.cellular#cellular-1{
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 2;
}

/* ------------- PAGE 2 ---------------- */


div.item#contributors{
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 8;
	font-family: "Computer Modern Concrete";
	font-size: var(--font-size-computer-modern);
    background-color: cyan;
    columns: 3 auto;
}
#h1-contributors{
    grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
}
div#contributors p > b {
    margin: 0 !important;
    display: inline-block;
}

div#contributors p {
    text-indent: -0.5em !important;
}

div.item#item-p2-a{
	grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 8;
    columns: 2 auto;
	background-color: orange;
}
#h1-p2-a{
    grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 3;
}
div.item#item-p2-b{
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 11;
	background-color: yellow;
    columns: 4 auto;
}

/* ------------- PAGE 3 ---------------- */

div#item-p3-a{
	background-color: yellow;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 5;
	border-bottom: 1px solid black;
    columns: 3 auto;
}
div#item-p3-a img,
div#item-p3-a .thumbcaption,
div#item-p3-a .thumb{
    display: none;
}
div#img-p3-a-1{
    grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 3;
}
div#img-p3-a-2{
    grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 3;
	grid-row-end: 5;
    margin-top: -78px;
}
div#item-p3-b{
	background-color: violet;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 6;
	grid-row-end: 11;
    columns: 2 auto;
}
#h1-p3-b{
    grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
}
div#item-p3-c{
	background-color: lime;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 7;
	grid-row-end: 11;
	border-left: 1px solid black;
    columns: 3 auto;
}
div#item-p3-c h2{
    display: none;
}
#h1-p3-c{
    grid-column-start: 4;
	grid-column-end: 6;
	grid-row-start: 6;
	grid-row-end: 7;
}

/* ------------- PAGE 4 ---------------- */

div#item-p4-a{
	background-color: cyan;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 7;
	grid-row-end: 11;
	border-bottom: 1px solid black;
    columns: 3 auto;
}
#h1-p4-a{
    grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 6;
	grid-row-end: 7;
}
div#item-p4-b{
	background-color: yellow;
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 4;
	border-left: 1px solid black;
    columns: 5 auto;
}
div#item-p4-b img{
    display: none;
}
div#img-p4-b{
    grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 4;
	grid-row-end: 6;
}
div#item-p4-c{
	background-color: lime;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 6;
	grid-row-end: 11;
    columns: 2 auto;
}
div#img-p4-c{
    grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
}
#h1-p4-c{
    grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
}
div#item-p4-c img{
    display: none;
}
/* ------------- PAGE 5 ---------------- */

div#item-p5-a{
    grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 7;
    columns: 2 auto;
    background-color: violet;
}

#h1-p5-b{
    grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 2;
}
div#item-p5-b img,
div#item-p5-b .thumbcaption{
    display: none;
}
div#item-p5-b{
    grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 2;
	grid-row-end: 6;
    columns: 3 auto;
    background-color: orange;
}
div#img-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 9;
    z-index: 99;
    mix-blend-mode: multiply;
    margin-top: -62px;
    margin-left: 65px;
    margin-right: -80px;
}

#h1-p5-c{
    grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 7;
	grid-row-end: 8;
}
div#item-p5-c{
    grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 11;
    background-color: yellow;
    columns: 5 auto;
}

/* ------------- PAGE 6 ---------------- */

/* ------------- PAGE 7 ---------------- */

/* ------------- PAGE 8 ---------------- */

div.item#item-p8-b{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 11;
    background-color: orange;
}
div.item#item-p8-c{
	grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 2;
	grid-row-end: 8;
	columns: 1 auto;
    background-color: yellow;
}
div.item#item-p8-c img{
    max-width: 100%;
}
#h1-p8-c{
    grid-column-start: 2;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 2;
}
div.item#item-p8-c > p > b{
    display: none;
}
div.item#item-p8-d{
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 11;
    background-color: violet;
}

/* |||||||||| colophon |||||||||| */

div.item#colophon{
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 9;
	grid-row-end: 11;
	background-color: cyan;
    columns: 5 auto;
}
/* --- FONT LIST ---*/
div.item#colophon li {
    list-style: none;
    text-indent: -0.7em;
}
div.item#colophon li::before {
    content: "- ";
}
/* --- EDITORS LIST ---*/
div.item#colophon #editors li{
    display: inline-block;
    list-style: none;
    text-indent: -0.7em;
}
div.item#colophon #editors li::before{
    content:"";
}
div.item#colophon ul{
    padding: 0;
    margin: 0;
}
div.item#colophon #editors li::after{
    content: ", ";
    margin-left: -0.3em;
    margin-right: 0.3em;
}
div.item#colophon #editors li:last-of-type::after{
    content: "";
}
div.item#colophon > h2:first-of-type{
    margin-top: 0;
}

/* ----------- cosmetics ------------- */

.mw-usertoollinks-talk,
.mw-usertoollinks-contribs{
    display: none;
}
Retrieved from "http://cc.vvvvvvaria.org/wiki/index.php?title=PdfCSS:Toward_a_Minor_Tech&oldid=1286"