PdfCSS:Toward a Minor Tech: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
Line 46: | Line 46: | ||
@bottom-left{ | @bottom-left{ | ||
content: "machine learning"; | content: "machine learning"; | ||
font-family: monospace; | |||
font-size: 8px; | |||
} | } | ||
} | } |
Revision as of 14:09, 20 January 2023
@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");
: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;
}
}
@page:first{
@top-center{
content: "Toward a Minor Tech";
font-family: "Redaction Bold";
font-size: 50px;
}
@bottom-left{
content: "machine learning";
font-family: monospace;
font-size: 8px;
}
}
/*------------- 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";
}
/* ||||||| 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";
}
/*-------------- other --------------*/
p{
margin: 0;
}
div.mw-parser-output p{
display: none;
}
div.page p{
display: block !important;
}
a{
word-break: break-word;
}
/* ------------ 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: var(--spacer-full) var(--spacer-half);
margin: 0;
}
div.cellular{
/*background-color: black;
color: white;*/
border: thick double black;
font-family: "Authentic Sans Condensed 90";
}
.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;
}
/* ------------ 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);
}
/*------------ headers -----------*/
h1{
margin: 0;
font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
}
h1#cover_title{
display: none;
}
h1.outline,
h1.outside{
background-color: pink;
text-align: center;
}
h1.inline{
margin: -16px 0 var(--spacer-full) 0;
background-color: pink;
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;
}
/* ------------- PAGE 1 ---------------- */
div.item#editorial{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 9;
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#item-p1-a{
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 8;
columns: 3 auto;
background-color: violet;
}
div.item#item-p1-b{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 9;
grid-row-end: 11;
columns: 5 auto;
font-family: "Computer Modern Concrete";
font-size: var(--font-size-computer-modern);
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: 3;
grid-row-start: 1;
grid-row-end: 11;
font-family: "Computer Modern Concrete";
font-size: var(--font-size-computer-modern);
background-color: cyan;
}
div.item#item-p2-a{
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 7;
columns: 2 auto;
background-color: orange;
}
div.item#item-p2-b{
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 7;
grid-row-end: 11;
background-color: yellow;
columns: 2 auto;
}
/* ------------- PAGE 3 ---------------- */
#item-p3-a{
background-color: yellow;
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 1;
grid-row-end: 4;
border-bottom: 1px solid black;
columns: 5 auto;
}
#item-p3-b{
background-color: violet;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 11;
columns: 3 auto;
}
#item-p3-c{
background-color: lime;
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 4;
grid-row-end: 11;
border-left: 1px solid black;
columns: 3 auto;
}
/* ------------- PAGE 4 ---------------- */
/* ------------- PAGE 5 ---------------- */
/* ------------- 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;
}