PdfCSS:Toward a Minor Tech

@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");

: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: 12px;
	--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: "Peer-reviewed Newspaper Volume XX, Issue X, 2023 - FREE";
		font-family: monospace;
		font-size: 10px;
	}
}

/*------------- typography ------*/

body{
	hyphens: auto;
}

/*-------------- h1 --------------*/

h1{
	margin: 0;
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
}
h1#cover_title{
	display: none;
}
h1.outside{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	background-color: pink;
	font-family: "FT88-Gothique";
	text-align: center;
}
h1.inline{
	margin: 0;
	background-color: pink;
	font-family: "FT88-School";
	padding: 0 var(--spacer-half) 0 0;
}

/*-------------- other --------------*/

p{
	margin: 0;
}

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

figure { 
	margin: 0;
}
	figure img{
		margin: 0;
		object-fit: scale-down;
	}
figcaption{
	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);
}

/* ------------ 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-family: "Latitude-Regular";
	font-size: var(--font-size-latitude-regular);
	line-height: var(--line-height);
	column-fill: auto;
	padding: 0 var(--spacer-half);
	margin: 0;
}

.cell-width-one{
	width: var(--cell-width); 
}
.cell-width-two{
	width: calc(var(--cell-width) * 2);
}
.cell-width-three{
	width: calc(var(--cell-width) * 3);
}
.cell-width-four{
	width: calc(var(--cell-width) * 4);
}
.cell-width-five{
	width: calc(var(--cell-width) * 5);
}

.cell-height-one{
	height: var(--cell-height);
}
.cell-height-two{
	height: calc(var(--cell-height) * 2);
}
.cell-height-three{
	height: calc(var(--cell-height) * 3);
}
.cell-height-four{
	height: calc(var(--cell-height) * 4);
}
.cell-height-five{
	height: calc(var(--cell-height) * 5);
}
.cell-height-six{
	height: calc(var(--cell-height) * 6);
}
.cell-height-seven{
	height: calc(var(--cell-height) * 7);
}
.cell-height-eight{
	height: calc(var(--cell-height) * 8);
}
.cell-height-nine{
	height: calc(var(--cell-height) * 9);
}
.cell-height-ten{
	height: calc(var(--cell-height) * 10);
}

.columns-two{
	columns: 2 auto;
}
.columns-three{
	columns: 3 auto;
}
.columns-four{
	columns: 4 auto;
}
.columns-five{
	columns: 5 auto;
}

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

div.item#item-a{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 8;
	background-color: yellow;
	columns: 2 auto;
	border-left: 1px solid black;
	border-right: 1px solid black;
	font-family: "Computer Modern Concrete";
	font-size: var(--font-size-computer-modern);
}
div.item#item-b{
	grid-column-start: 4;
	grid-column-end: 5;
	grid-row-start: 4;
	grid-row-end: 7;
	background-color: green;
}
div.item#item-c{
	grid-column-start: 2;
	grid-column-end: 6;
	grid-row-start: 8;
	grid-row-end: 11;
	background-color: magenta;
	columns: 4 auto;
}
div.item#item-d{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 11;
	background-color: orange;
	font-family: "Redaction Regular";
}
div.item#item-e{
	grid-column-start: 5;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 6;
	background-color: cyan;
	font-family: "Lucette Regular";
}

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

div#page-2 div.item{
	border-top: 1px solid black;
	border-right: 1px solid black;
}
div#page-2{
	border-left: 1px solid black;
	border-bottom: 1px solid black;
}

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

#item-p3-a{
	background-color: lime;
	grid-column-start: 1;
	grid-column-end: 6;
	grid-row-start: 1;
	grid-row-end: 4;
	border-bottom: 1px solid black;
	margin-bottom: var(--spacer-full);
	transform: rotate(1deg);
}
#item-p3-b{
	background-color: violet;
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 11;
	padding-top: var(--spacer-full) !important;
	transform: rotate(-1deg);
}
#item-p3-c{
	background-color: yellow;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 9;
	grid-row-end: 11;
	transform: rotate(-2deg);
}
#item-p3-d{
	background-color: lightblue;
	grid-column-start: 3;
	grid-column-end: 6;
	grid-row-start: 5;
	grid-row-end: 9;
	border-left: 1px solid black;
	transform: rotate(1deg);
}
	h1#h1-p3{
		grid-column-start: 3;
		grid-column-end: 6;
		grid-row-start: 4;
		grid-row-end: 5;
		padding-top: var(--spacer-full) !important;
	}