PdfCSS:Toward a Minor Tech: Difference between revisions

From creative crowd wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Tag: Manual revert
 
(125 intermediate revisions by 2 users not shown)
Line 5: Line 5:
@import url("https://cc.vvvvvvaria.org/fonts/Lucette/font/stylesheet.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/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{
:root{
--cell-height: 144px;
        --cell-height: 70px;
--cell-width: 208px; /* this is a visual guess, was needed for the images, but maybe not needed anymore */
        --cell-width: 208px; /* this is a visual guess, was needed for the images, but maybe not needed anymore */
--line-height: 16px;
        --line-height: 14px;
--font-size-latitude-regular: 12px;
        --font-size-latitude-regular: 11px;
--font-size-computer-modern: 12px;
        --font-size-computer-modern: 12px;
--small-font-size: 10px;
        --small-font-size: 9px;
--h1-font-size: 36px;
        --h1-font-size: 36px;
--h1-line-height: calc(3 * var(--line-height));
        --h1-line-height: 28px;
--spacer-half: 8px;
        --spacer-half: 7px;
--spacer-full: var(--line-height);
        --spacer-full: var(--line-height);
        --cellular-margin: 20px;
}
}


@page {
@page {
size: 297mm 420mm portrait;
        size: 297mm 420mm portrait;
margin: 100px 40px 40px 40px;
        margin: 70px 40px 40px 40px;
       
@top-left{
        @top-left{
content: "Toward a Minor Tech";
                content: "Toward a Minor Tech";
font-family: monospace;
                font-family: monospace;
font-size: 8px;
                font-size: var(--small-font-size);
}
        }
@top-right{
        @top-center{
content: "Peer-reviewed Newspaper Volume XX, Issue X, 2023 - FREE";
                content: counter(page);
font-family: monospace;
                font-family: "FT88-Gothique";
font-size: 10px;
                font-size: 20px;
}
        }
        @top-right{
                content: "A Peer-reviewed Newspaper, Volume 12, Issue 1, 2023";
                font-family: monospace;
                font-size: var(--small-font-size);
        }
}
}


Line 38: Line 48:


     @top-center{
     @top-center{
         content: "Toward a Minor Tech";
         content: "";
         font-family: "Redaction Bold";
         font-family: "Redaction Bold";
         font-size: 50px;
         font-size: 50px;
    }
    @top-left{
        content: "FREE";
     }
     }
}
}
Line 53: Line 66:


body{
body{
hyphens: auto;
        hyphens: auto;
line-height: var(--line-height);
        line-height: var(--line-height);
}
}


/*-------------- other --------------*/
/* ||||||| headers |||||||| */


p{
.font-school{
margin: 0;
    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;
}
}
div.mw-parser-output p{
.font-director{
     display: none;
     font-family: "Director-Regular";
}
}
div.page p{
.font-abordage{
     display: block !important;
     font-family: "Abordage";
}
}
 
.font-basalte{
a{
    font-family: "Basalte-Fond";
     word-break: break-word;
     font-size: 60px;
    letter-spacing: 2px;
}
}


/* ------------ grid ---------------- */
/* ||||||| body fonts |||||||| */


div.page {
.font-latitude{
display: grid;
    font-family: "Latitude-Regular";
grid-template-columns: repeat(5, 20%);
    font-size: 10px;
grid-template-rows: repeat(10, var(--cell-height));
}
margin: 0;
.font-lucette{
padding: 0;
    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;
}
}
div.item{
blockquote{
font-family: "Latitude-Regular";
    margin: var(--spacer-full) 0;
font-size: var(--font-size-latitude-regular);
    font-style: italic;
line-height: var(--line-height);
    line-height: var(--line-height);
column-fill: auto;
    text-indent: 0 !important;
padding: var(--spacer-full) var(--spacer-half);
margin: 0;
}
}
div.cellular{
blockquote p{
     background-color: black;
     text-indent: 0 !important;
    color: white;
}
}


.cell-width-one{
sup{
width: var(--cell-width);  
    line-height: 0;
}
}
.cell-width-two{
/*-------------- other --------------*/
width: calc(var(--cell-width) * 2);
 
p{
    margin: 0;
}
}
.cell-width-three{
div.mw-parser-output p{
width: calc(var(--cell-width) * 3);
    display: none;
}
}
.cell-width-four{
/* text indent paragraphs */
width: calc(var(--cell-width) * 4);
div.page p{
    display: block;
    text-indent: 1em;
}
}
.cell-width-five{
div.page p:nth-of-type(2) {
width: calc(var(--cell-width) * 5);
    text-indent: 0;
}
}


.cell-height-one{
/* margin bottom for author names */
height: var(--cell-height);
div.page b {
    margin: 0 0 var(--spacer-full) 0;
    display: block;
    text-indent: 0;
}
}
.cell-height-two{
 
height: calc(var(--cell-height) * 2);
a, a:active, a:visited{
    word-break: break-word;
    color: black;
}
}
.cell-height-three{
ul{
height: calc(var(--cell-height) * 3);
    margin: var(--spacer-full) 0;
    padding: 0;
}
}
.cell-height-four{
ol{
height: calc(var(--cell-height) * 4);
 
    margin-left: 0;
 
    padding: 0;
 
}
}
.cell-height-five{
ul > li{
height: calc(var(--cell-height) * 5);
    margin: var(--spacer-half) 0;
}
}
.cell-height-six{
 
height: calc(var(--cell-height) * 6);
/* ------------ grid ---------------- */
 
div.page {
        display: grid;
        grid-template-columns: repeat(5, 20%);
        grid-template-rows: repeat(21, var(--cell-height));
        margin: 0;
        padding: 0;
}
}
.cell-height-seven{
div.item{
height: calc(var(--cell-height) * 7);
        line-height: var(--line-height);
        column-fill: auto;
        padding: var(--spacer-full) var(--spacer-half);
        margin: 0;
}
}
.cell-height-eight{
div.item:nth-of-type(odd){
height: calc(var(--cell-height) * 8);
 
    transform: rotate(-0.5deg);
 
}
}
.cell-height-nine{
div.item:nth-of-type(even){
height: calc(var(--cell-height) * 9);
 
    transform: rotate(0.5deg);
 
}
}
.cell-height-ten{
div.cellular:nth-of-type(odd){
height: calc(var(--cell-height) * 10);
 
    transform: rotate(-1deg);
 
}
}
div.cellular:nth-of-type(even){


.columns-two{
    transform: rotate(1deg);
columns: 2 auto;
 
}
div.item br{
    display: none;
}
div.image img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}
}
.columns-three{
div.image a{
columns: 3 auto;
    display: block;
}
}
.columns-four{
div.cellular{
columns: 4 auto;
    border: 5px ridge;
    font-family: "Authentic Sans Condensed 90";
    font-size: 11px;
    background-color: rgb(240, 240, 240);
    padding: var(--spacer-half);
}
}
.columns-five{
div.cellular p{
columns: 5 auto;
    text-indent: 0;
}
}


Line 158: Line 251:
/* ------------ images -------------- */
/* ------------ images -------------- */


.image,
figure {  
figure {  
margin: 0;
    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;
}
}
figure img{
 
margin: 0;
img{
object-fit: scale-down;
    width: auto;
}
    height: auto;
figcaption{
    filter: grayscale();
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 -----------*/
/*------------ headers -----------*/
div.item h1,
div.item h2{
    display: none;
}


h1{
h1{
margin: 0;
    margin: 0;
font-size: var(--h1-font-size);
    font-size: var(--h1-font-size);
line-height: var(--h1-line-height);
    line-height: var(--h1-line-height);
    align-self: end;
    font-weight: normal;
}
}
h1#cover_title{
h1#cover_title{
display: none;
    display: none;
}
}
h1.outline,
h1.outline,
h1.outside{
h1.outside{
grid-column-start: 2;
    display: block !important;
grid-column-end: 4;
    text-align: center;
grid-row-start: 1;
grid-row-end: 2;
background-color: pink;
font-family: "FT88-Gothique";
text-align: center;
}
}
h1.inline{
h1.inline{
margin: -16px 0 var(--spacer-full) 0;
    display: block !important;
background-color: pink;
    margin: -14px 0 var(--spacer-full) 0;
font-family: "FT88-School";
    padding: 0 var(--spacer-half) 0 0;
padding: 0 var(--spacer-half) 0 0;
}
}
h2, h3, h4, h5, h6{
h2, h3, h4, h5, h6{
Line 205: Line 310:
     line-height: var(--line-height);
     line-height: var(--line-height);
     margin: var(--spacer-full) 0 0 0;
     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 ---------------- */
/* ------------- 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{
div.item#editorial{
grid-column-start: 1;
    grid-column-start: 1;
grid-column-end: 3;
    grid-column-end: 5;
grid-row-start: 1;
    grid-row-start: 2;
grid-row-end: 9;
    grid-row-end: 7;
background-color: cyan;
    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;
     columns: 2 auto;
}
}
div.item#item-p1-a{
#h1-p1-b {
     grid-column-start: 3;
     grid-column-start: 3;
grid-column-end: 6;
    grid-column-end: 5;
grid-row-start: 2;
    grid-row-start: 8;
grid-row-end: 8;
    grid-row-end: 10;
columns: 3 auto;
    background-color: violet;
}
}
div.item#item-p1-b{
div.item#item-p1-b{
grid-column-start: 1;
    grid-column-start: 3;
grid-column-end: 6;
    grid-column-end: 5;
grid-row-start: 8;
    grid-row-start: 10;
grid-row-end: 11;
    grid-row-end: 20;
columns: 4 auto;
    columns: 2 auto;
font-family: "Computer Modern Concrete";
    border-left: 1px solid;
font-size: var(--font-size-computer-modern);
}
     background-color: orange;
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.cellular#cellular-1{
div.item#colophon ul{
grid-column-start: 5;
    padding: 0;
grid-column-end: 6;
    margin: 0;
grid-row-start: 1;
grid-row-end: 2;
}
}


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


#h1-contributors{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: left;
}
div.item#contributors{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 12;
    columns: 3 auto;
    column-gap: 13px;
    height: 729px;
}
div#contributors p > b {
    margin: 0 !important;
    display: inline-block;
}
div#contributors p {
    text-indent: -0.5em !important;
}


div.item#contributors{
#h1-p2-a{
grid-column-start: 1;
    grid-column-start: 4;
grid-column-end: 2;
    grid-column-end: 6;
grid-row-start: 1;
    grid-row-start: 1;
grid-row-end: 11;
    grid-row-end: 2;
font-family: "Computer Modern Concrete";
font-size: var(--font-size-computer-modern);
    background-color: cyan;
}
}
div.item#item-p2-a{
div.item#item-p2-a{
grid-column-start: 2;
    grid-column-start: 4;
grid-column-end: 4;
    grid-column-end: 6;
grid-row-start: 1;
    grid-row-start: 2;
grid-row-end: 7;
    grid-row-end: 10;
     columns: 2 auto;
     columns: 2 auto;
background-color: orange;
    border-left: 1px solid;
    height: 644px !important; /*adjusted so as to not break quote*/
}
}
div.item#item-p2-b{
div.item#item-p2-b{
grid-column-start: 4;
    grid-column-start: 1;
grid-column-end: 6;
    grid-column-end: 6;
grid-row-start: 1;
    grid-row-start: 17;
grid-row-end: 7;
    grid-row-end: 21;
background-color: yellow;
    columns: 5 auto;
     columns: 2 auto;
    margin-bottom: -20px;
    margin-top: 20px;
}
div#item-p2-b h1{
    border-top: 1px solid;
}
div#item-p2-b p:first-of-type{
    display: none !important;
}
 
div.cellular#cellular-p2-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 11;
    grid-row-end: 12;
    height: 80px;
    margin: 30px var(--cellular-margin) var(--cellular-margin) var(--cellular-margin);
}
 
#h1-p2-c {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 12;
    grid-row-end: 13;
    text-align: left !important;
     border-top: 1px solid;
}
}
div.item#item-p2-c{
div.item#item-p2-c{
grid-column-start: 2;
    grid-column-start: 1;
grid-column-end: 6;
    grid-column-end: 6;
grid-row-start: 7;
    grid-row-start: 13;
grid-row-end: 11;
    grid-row-end: 17;
background-color: violet;
     columns: 5 auto;
     columns: 4 auto;
}
}


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


#item-p3-a{
#h1-p3-a{
background-color: yellow;
    grid-column-start: 1;
grid-column-start: 1;
    grid-column-end: 4;
grid-column-end: 6;
    grid-row-start: 1;
grid-row-start: 1;
    grid-row-end: 2;
grid-row-end: 4;
    font-size: 24px;
border-bottom: 1px solid black;
    margin: 0 60px;
}
div#item-p3-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 8;
    columns: 3 auto;
}
div#item-p3-a p:first-of-type{
    display: none !important;
}
div#item-p3-a img,
div#item-p3-a .thumbcaption,
div#item-p3-a .thumb,
div#item-p3-a p:first-of-type{
    display: none;
}
div#img-p3-a-1{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 6;
}
div#img-p3-a-1 .caption{
    margin-top: var(--spacer-full);
}
div#img-p3-a-2{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 10;
    margin-top: -148px;
}
 
#h1-p3-b {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 13;
  grid-row-end: 14;
  border-top: 1px solid;
  padding-top: 8px;
}
div#item-p3-b {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 14;
  grid-row-end: 19;
  columns: 3 auto;
}
div.page div#item-p3-b p:not(p:nth-of-type(2)) > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.page div#item-p3-b p:first-of-type > b{
    display: none !important;
}
div#item-p3-b img,
div#item-p3-b .thumbcaption{
 
    display: none !important;
 
}
#img-p3-b-1 {
  grid-column-start: 1;
 
    grid-column-end: 2;
 
    grid-row-start: 18;
 
    grid-row-end: 20;
 
    margin: var(--spacer-half);
 
}
#img-p3-b-2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 18;
  grid-row-end: 20;
  margin: var(--spacer-half);
}
#img-p3-b-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 13;
  grid-row-end: 15;
  margin: var(--spacer-half);
}
 
div#item-p3-c{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 9;
    grid-row-end: 13;
     columns: 5 auto;
     columns: 5 auto;
}
}
#item-p3-b{
div#item-p3-c h1{
background-color: violet;
    border-top: 1px solid;
grid-column-start: 1;
}
grid-column-end: 3;
div#item-p3-c h2{
grid-row-start: 4;
    display: none;
grid-row-end: 11;
}
 
div.cellular#cellular-p3-b{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 104px;
    margin: var(--cellular-margin);
}
 
div.cellular#cellular-p3-c{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 20;
    grid-row-end: 21;
    height: 40px;
    margin: var(--cellular-margin);
}
 
/* ------------- PAGE 4 ---------------- */
 
#h1-p4-a{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 13;
    grid-row-end: 14;
}
div#item-p4-a{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 14;
    grid-row-end: 21;
     columns: 3 auto;
     columns: 3 auto;
}
}
#item-p3-c{
 
background-color: lime;
div#item-p4-b{
grid-column-start: 3;
    grid-column-start: 1;
grid-column-end: 6;
    grid-column-end: 3;
grid-row-start: 4;
    grid-row-start: 1;
grid-row-end: 11;
    grid-row-end: 11;
border-left: 1px solid black;
    columns: 2 auto;
}
div#item-p4-b .thumb{
    display: none;
}
div#img-p4-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 6;
    margin-top: -4px;
}
 
#h1-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 11;
    grid-row-end: 12;
    margin-bottom: 10px;
    border-top: 1px solid black;
}
div#item-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 20;
    columns: 2 auto;
    margin-top: -10px;
}
div#img-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 20;
    grid-row-end: 21;
    margin-top: -1px;
    z-index: -1;
    margin-top: -10px;
    border: 1px solid;
    height: 84px;
}
div#img-p4-c div.caption{
    margin: 0;
    filter: unset !important;
}
div#item-p4-c img{
    display: none;
}
div#item-p4-c h3 + p{
    text-indent: 0 !important;
}
 
div#item-p4-d{
    columns: 3 auto;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 13;
    border-top: 1px solid;
    padding-top: 30px;
  margin-bottom: -20px;
  margin-top: 10px;
}
 
/* ------------- PAGE 5 ---------------- */
 
div#item-p5-a{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 13;
    columns: 2 auto;
}
div#item-p5-a h1.inline{
    font-size: 26px;
    line-height: 42px !important;
}
div#item-p5-a p:first-of-type b{
    display: none !important;
}
div#item-p5-a img{
  width: 200px;
  margin: var(--spacer-full) 0 0;
}
div#item-p5-a .thumbcaption{
  width: 200px;
}
 
#h1-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 24px;
}
div#item-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 13;
     columns: 3 auto;
     columns: 3 auto;
    margin-bottom: -25px;
}
div#item-p5-b p:first-of-type > b{
    display: none !important;
}
div#item-p5-b p:nth-of-type(3) {
  text-indent: 0 !important;
}
div#item-p5-b img,
div#item-p5-b .thumbcaption,
div#item-p5-b .thumb{
    display: none;
}
div#img-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    margin-top: -54px;
    margin-left: 20px;
    margin-right: -10px;
    z-index: -1;
}
}


/* ------------- PAGE 4 ---------------- */
div.cellular#cellular-p5-a{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 120px;
    margin: var(--cellular-margin);
}
 
div.cellular#cellular-p5-b{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 17;
    grid-row-end: 20;
    height: 218px;
    margin: var(--cellular-margin);
}
 
div.cellular#cellular-p5-b p:first-of-type{
    display: block !important;
}
 
div.cellular#cellular-p5-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 13;
    grid-row-end: 17;
    height: 253px;
    width: 304px;
    margin: var(--cellular-margin);
}
 
div.cellular#cellular-p5-c .thumbcaption,
div.cellular#cellular-p5-c .thumb,
div.cellular#cellular-p5-c .tright {
display: none;
}
 
#h1-p5-c{
    grid-column-start: 3;
 
    grid-column-end: 6;
 
    grid-row-start: 13;
 
    grid-row-end: 15;
 
    margin: 0 3em;
 
}
div#item-p5-c{
  grid-column-start: 3;
 
    grid-column-end: 6;
 
    grid-row-start: 15;
 
    grid-row-end: 21;
 
    columns: 3 auto;


/* ------------- PAGE 5 ---------------- */
}


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


/* ------------- PAGE 7 ---------------- */
div#item-p6-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 8;
    columns: 3 auto;
    margin-top: -15px;
 
    margin-bottom: 15px;
 
}
 
#item-p6-a img,
#item-p6-a .thumb,
#item-p6-a .thumbcaption {
    display: none;
}


/* ------------- PAGE 8 ---------------- */
#h1-p6-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    margin: 0 110px 10px 110px;
    font-size: 19px;
    line-height: 24px;
}
#img-p6-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
    margin-bottom: 15px;
    margin-top: -15px;
}
#item-p6-a p:first-of-type{
    display: none !important;
}


div#item-p6-b{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 15;
    columns: 2 auto;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: -10px;
    margin-bottom: -20px;
}


div.item#item-p8-a{
#h1-p6-c{
grid-column-start: 2;
    grid-column-start: 1;
grid-column-end: 5;
    grid-column-end: 4;
grid-row-start: 2;
    grid-row-start: 8;
grid-row-end: 8;
    grid-row-end: 9;
columns: 3 auto;
    margin: 0 70px -3px 70px;
font-family: "Computer Modern Concrete";
    font-size: 21px !important;
font-size: var(--font-size-computer-modern);
    background-color: yellow;
}
}
#h1-p8-a{
div#item-p6-c{
     grid-column-start: 2;
     grid-column-start: 1;
grid-column-end: 5;
    grid-column-end: 4;
grid-row-start: 1;
    grid-row-start: 9;
grid-row-end: 2;
    grid-row-end: 17;
    columns: 3 auto;
}
}
div.item#item-p8-a > p > b{
#item-p6-c img,
#item-p6-c .thumb {
     display: none;
     display: none;
}
#item-p6-c p:not(p:first-of-type) > b {
    margin-top: var(--spacer-full) !important;
    margin-bottom: 0 !important;
}
#img-p6-c-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 17;
    grid-row-end: 20;
    margin-bottom: var(--spacer-half);
}
#img-p6-c-2 {
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 16;
    grid-row-end: 23;
    margin-top: 10px;
    background: white;
    padding-left: 50px;
    margin-right: -50px;
}
#img-p6-c-2 .caption{
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    width: 495px;
    text-align: left;
}
#img-p6-c-3 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 16;
}
#img-p6-c-3 .caption{
    width: 208px;
}
#img-p6-c-1 img,
#img-p6-c-3 img{
    width: auto;
    max-width: 100%;
}
#img-p6-c-2 img{
    width: auto;
    max-width: 90%;
}
}


/* ------------- PAGE 7 ---------------- */
div.cellular#cellular-p7-a {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:20;
    grid-row-end:21;
    height:50px;
    width:192px;
    margin: auto 20px;
}
div.cellular#cellular-p7-b{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 63px;
    margin: -20px auto 40px -60px;
    width: 445px;
}
#h1-p7-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
div.item#item-p7-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 21;
}
div.item#item-p7-a b{
    hyphens: none;
}
div.item#item-p7-a pre{
    word-break: break-all;
    white-space: pre-wrap;
    margin: 0;
}
div.item#item-p7-a p:first-of-type > b{
}
div.item#item-p7-a p:not(p:first-of-type) > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.item#item-p7-a code > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.item#item-p7-a code{
    text-indent: -0.5em !important;
    display: block;
    font-size: var(--small-font-size);
}
div.item#item-p7-a u code {
  margin-left: -0.3em !important;
  margin-top: var(--spacer-half);
}
p:nth-of-type(13) > code {
  margin-bottom: var(--spacer-half);
}
div.item#item-p7-a i > b{
    display: inline-block !important;
    margin: 0 !important;
}


/* |||||||||| colophon |||||||||| */
div.item#item-p7-b{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 11;
    grid-row-end: 18;
    columns: 3 auto;
}


div.item#colophon{
#img-p7-c{
grid-column-start: 1;
    grid-column-start: 2;
grid-column-end: 6;
    grid-column-end: 6;
grid-row-start: 9;
    grid-row-start: 1;
grid-row-end: 11;
    grid-row-end: 8;
background-color: cyan;
    margin-top: -51px;
    columns: 5 auto;
    z-index: -1; 
    margin-left: -20px;
    margin-right: 20px;
}
#h1-p7-c{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 7;
}
div.item#item-p7-c{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 22;
}
div.page div.item#item-p7-c p:first-of-type{
    display: none !important;
}
div.item#item-p7-c p:nth-of-type(4){
    text-indent: 0 !important;
}
div.item#item-p7-c pre{
    word-break: break-all;
    white-space: pre-wrap;
  font-size: var(--small-font-size);
}
div.item#item-p7-c code{
  color: rgba(0,0,0,0.8);
  font-size: var(--small-font-size);
  display: block;
  text-indent: -4em;
  margin: 1em 0;
}
}
/* --- FONT LIST ---*/
div.item#item-p7-c img,
div.item#colophon li {
div.item#item-p7-c .thumb{
     list-style: none;
     display: none;
    text-indent: -0.7em;
}
}
div.item#colophon li::before {
 
     content: "- ";
/* ------------- PAGE 8 ---------------- */
 
div.cellular#cellular-p8-a{
    grid-column-start: 1;
    grid-column-end: 2;
     grid-row-start: 19;
    grid-row-end: 21;
    width: 129px;
    height: 126px;
    margin: 25px auto auto auto;
}
}
/* --- EDITORS LIST ---*/
 
div.item#colophon #editors li{
div.cellular#cellular-p8-a img {
     display: inline-block;
    height: 72px;
     list-style: none;
    width: auto;
     text-indent: -0.7em;
     display: block;
     margin: auto;
     padding: var(--spacer-half);
}
}
div.item#colophon #editors li::before{
 
    content:"";
div.cellular#cellular-p8-b{
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 18;
  grid-row-end: 20;
  margin: 45px auto auto auto;
  width: 170px;
  height: 236px;
}
}
div.item#colophon ul{
 
     padding: 0;
div.item#item-p8-a h1{
    margin: 0;
 
     font-size: 20px !important;
 
}
}
div.item#colophon #editors li::after{
div.item#item-p8-a{
     content: ", ";
     grid-column-start: 1;
     margin-left: -0.3em;
     grid-column-end: 2;
     margin-right: 0.3em;
    grid-row-start: 1;
     grid-row-end: 19;
}
}
div.item#colophon #editors li:last-of-type::after{
 
     content: "";
div#bibliography{
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 22;
    columns: 4 auto;
    background-color: white;
    transform:rotate(0deg) !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    column-gap: 8px;
     font-size: 12.8px;
}
}
div.item#colophon > h2:first-of-type{
 
     margin-top: 0;
div#bibliography h2 {
     display: inline-block;
}
}



Latest revision as of 10:07, 6 June 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");
@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: "Toward a Minor Tech";
                font-family: monospace;
                font-size: var(--small-font-size);
        }
        @top-center{
                content: counter(page);
                font-family: "FT88-Gothique";
                font-size: 20px;
        }
        @top-right{
                content: "A Peer-reviewed Newspaper, Volume 12, Issue 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 ---------------- */

#h1-contributors{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    text-align: left;
}
div.item#contributors{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 12;
    columns: 3 auto;
    column-gap: 13px;
    height: 729px;
}
div#contributors p > b {
    margin: 0 !important;
    display: inline-block;
}

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

#h1-p2-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
}
div.item#item-p2-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 10;
    columns: 2 auto;
    border-left: 1px solid;
    height: 644px !important; /*adjusted so as to not break quote*/
}
div.item#item-p2-b{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 17;
    grid-row-end: 21;
    columns: 5 auto;
    margin-bottom: -20px;
    margin-top: 20px;
}
div#item-p2-b h1{
    border-top: 1px solid;
}
div#item-p2-b p:first-of-type{
    display: none !important;
}

div.cellular#cellular-p2-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 11;
    grid-row-end: 12;
    height: 80px;
    margin: 30px var(--cellular-margin) var(--cellular-margin) var(--cellular-margin);
}

#h1-p2-c {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 12;
    grid-row-end: 13;
    text-align: left !important;
    border-top: 1px solid;
}
div.item#item-p2-c{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 13;
    grid-row-end: 17;
    columns: 5 auto;
}

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

#h1-p3-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 24px;
    margin: 0 60px;
}
div#item-p3-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 8;
    columns: 3 auto;
}
div#item-p3-a p:first-of-type{
    display: none !important;
}
div#item-p3-a img,
div#item-p3-a .thumbcaption,
div#item-p3-a .thumb,
div#item-p3-a p:first-of-type{
    display: none;
}
div#img-p3-a-1{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 6;
}
div#img-p3-a-1 .caption{
    margin-top: var(--spacer-full);
}
div#img-p3-a-2{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 10;
    margin-top: -148px;
}

#h1-p3-b {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 13;
  grid-row-end: 14;
  border-top: 1px solid;
  padding-top: 8px;
}
div#item-p3-b {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 14;
  grid-row-end: 19;
  columns: 3 auto;
}
div.page div#item-p3-b p:not(p:nth-of-type(2)) > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.page div#item-p3-b p:first-of-type > b{
    display: none !important;
}
div#item-p3-b img,
div#item-p3-b .thumbcaption{

    display: none !important;

}
#img-p3-b-1 {
  grid-column-start: 1;

    grid-column-end: 2;

    grid-row-start: 18;

    grid-row-end: 20;

    margin: var(--spacer-half);

}
#img-p3-b-2 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 18;
  grid-row-end: 20;
  margin: var(--spacer-half);
}
#img-p3-b-3 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 13;
  grid-row-end: 15;
  margin: var(--spacer-half);
}

div#item-p3-c{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 9;
    grid-row-end: 13;
    columns: 5 auto;
}
div#item-p3-c h1{
    border-top: 1px solid;
}
div#item-p3-c h2{
    display: none;
}

div.cellular#cellular-p3-b{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 104px;
    margin: var(--cellular-margin);
}

div.cellular#cellular-p3-c{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 20;
    grid-row-end: 21;
    height: 40px;
    margin: var(--cellular-margin);
}

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

#h1-p4-a{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 13;
    grid-row-end: 14;
}
div#item-p4-a{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 14;
    grid-row-end: 21;
    columns: 3 auto;
}

div#item-p4-b{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 11;
    columns: 2 auto;
}
div#item-p4-b .thumb{
    display: none;
}
div#img-p4-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 6;
    margin-top: -4px;
}

#h1-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 11;
    grid-row-end: 12;
    margin-bottom: 10px;
    border-top: 1px solid black;
}
div#item-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 20;
    columns: 2 auto;
    margin-top: -10px;
}
div#img-p4-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 20;
    grid-row-end: 21;
    margin-top: -1px;
    z-index: -1;
    margin-top: -10px;
    border: 1px solid;
    height: 84px;
}
div#img-p4-c div.caption{
    margin: 0;
    filter: unset !important;
}
div#item-p4-c img{
    display: none;
}
div#item-p4-c h3 + p{
    text-indent: 0 !important;
}

div#item-p4-d{
    columns: 3 auto;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 13;
    border-top: 1px solid;
    padding-top: 30px;
  margin-bottom: -20px;
  margin-top: 10px;
}

/* ------------- PAGE 5 ---------------- */

div#item-p5-a{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 13;
    columns: 2 auto;
}
div#item-p5-a h1.inline{
    font-size: 26px;
    line-height: 42px !important;
}
div#item-p5-a p:first-of-type b{
    display: none !important;
}
div#item-p5-a img{
   width: 200px;
  margin: var(--spacer-full) 0 0;
}
div#item-p5-a .thumbcaption{
   width: 200px;
}

#h1-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 24px;
}
div#item-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 13;
    columns: 3 auto;
    margin-bottom: -25px;
}
div#item-p5-b p:first-of-type > b{
    display: none !important;
}
div#item-p5-b p:nth-of-type(3) {
  text-indent: 0 !important;
}
div#item-p5-b img,
div#item-p5-b .thumbcaption,
div#item-p5-b .thumb{
    display: none;
}
div#img-p5-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 5;
    margin-top: -54px;
    margin-left: 20px;
    margin-right: -10px;
    z-index: -1;
}

div.cellular#cellular-p5-a{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 120px;
    margin: var(--cellular-margin);
}

div.cellular#cellular-p5-b{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 17;
    grid-row-end: 20;
    height: 218px;
    margin: var(--cellular-margin);
}

div.cellular#cellular-p5-b p:first-of-type{
    display: block !important;
}

div.cellular#cellular-p5-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 13;
    grid-row-end: 17;
    height: 253px;
    width: 304px;
    margin: var(--cellular-margin);
}

div.cellular#cellular-p5-c .thumbcaption,
div.cellular#cellular-p5-c .thumb,
div.cellular#cellular-p5-c .tright {
display: none;
}

#h1-p5-c{
    grid-column-start: 3;

    grid-column-end: 6;

    grid-row-start: 13;

    grid-row-end: 15;

    margin: 0 3em;

}
div#item-p5-c{
   grid-column-start: 3;

    grid-column-end: 6;

    grid-row-start: 15;

    grid-row-end: 21;

    columns: 3 auto;

}

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

div#item-p6-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 8;
    columns: 3 auto;
    margin-top: -15px;

    margin-bottom: 15px;

}

#item-p6-a img, 
#item-p6-a .thumb, 
#item-p6-a .thumbcaption {
    display: none;
}

#h1-p6-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    margin: 0 110px 10px 110px;
    font-size: 19px;
    line-height: 24px;
}
#img-p6-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 3;
    margin-bottom: 15px;
    margin-top: -15px;
}
#item-p6-a p:first-of-type{
    display: none !important;
}

div#item-p6-b{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 6;
    grid-row-end: 15;
    columns: 2 auto;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: -10px;
    margin-bottom: -20px;
}

#h1-p6-c{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 8;
    grid-row-end: 9;
    margin: 0 70px -3px 70px;
    font-size: 21px !important;
}
div#item-p6-c{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 9;
    grid-row-end: 17;
    columns: 3 auto;
}
#item-p6-c img,
#item-p6-c .thumb {
    display: none;
}
#item-p6-c p:not(p:first-of-type) > b {
    margin-top: var(--spacer-full) !important;
    margin-bottom: 0 !important;
}
#img-p6-c-1 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 17;
    grid-row-end: 20;
    margin-bottom: var(--spacer-half);
}
#img-p6-c-2 {
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 16;
    grid-row-end: 23;
    margin-top: 10px;
    background: white;
    padding-left: 50px;
    margin-right: -50px;
}
#img-p6-c-2 .caption{
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    width: 495px;
    text-align: left;
}
#img-p6-c-3 {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 16;
}
#img-p6-c-3 .caption{
    width: 208px;
}
#img-p6-c-1 img,
#img-p6-c-3 img{
    width: auto;
    max-width: 100%;
}
#img-p6-c-2 img{
    width: auto;
    max-width: 90%;
}

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

div.cellular#cellular-p7-a {
    grid-column-start:2;
    grid-column-end:3;
    grid-row-start:20;
    grid-row-end:21;
    height:50px;
    width:192px;
    margin: auto 20px;
}

div.cellular#cellular-p7-b{
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 19;
    grid-row-end: 21;
    height: 63px;
    margin: -20px auto 40px -60px;
    width: 445px;
}

#h1-p7-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}
div.item#item-p7-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 21;
}
div.item#item-p7-a b{
    hyphens: none;
}
div.item#item-p7-a pre{
    word-break: break-all;
    white-space: pre-wrap;
    margin: 0;
}
div.item#item-p7-a p:first-of-type > b{
}
div.item#item-p7-a p:not(p:first-of-type) > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.item#item-p7-a code > b{
    display: inline-block !important;
    margin: 0 !important;
}
div.item#item-p7-a code{
    text-indent: -0.5em !important;
    display: block;
    font-size: var(--small-font-size);
}
div.item#item-p7-a u code {
  margin-left: -0.3em !important;
  margin-top: var(--spacer-half);
}
p:nth-of-type(13) > code {
  margin-bottom: var(--spacer-half);
}
div.item#item-p7-a i > b{
    display: inline-block !important;
    margin: 0 !important;
}

div.item#item-p7-b{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 11;
    grid-row-end: 18;
    columns: 3 auto;
}

#img-p7-c{
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 8;
    margin-top: -51px;
    z-index: -1;  
    margin-left: -20px;
    margin-right: 20px;
}
#h1-p7-c{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 5;
    grid-row-end: 7;
}
div.item#item-p7-c{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 7;
    grid-row-end: 22;
}
div.page div.item#item-p7-c p:first-of-type{
    display: none !important;
}
div.item#item-p7-c p:nth-of-type(4){
    text-indent: 0 !important;
}
div.item#item-p7-c pre{
    word-break: break-all;
    white-space: pre-wrap;
  font-size: var(--small-font-size);
}
div.item#item-p7-c code{
  color: rgba(0,0,0,0.8);
  font-size: var(--small-font-size);
  display: block;
  text-indent: -4em;
  margin: 1em 0;
}
div.item#item-p7-c img,
div.item#item-p7-c .thumb{
    display: none;
}

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

div.cellular#cellular-p8-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 19;
    grid-row-end: 21;
    width: 129px;
    height: 126px;
    margin: 25px auto auto auto;
}

div.cellular#cellular-p8-a img {
    height: 72px;
    width: auto;
    display: block;
    margin: auto;
    padding: var(--spacer-half);
}

div.cellular#cellular-p8-b{
  grid-column-start: 5;
  grid-column-end: 6;
  grid-row-start: 18;
  grid-row-end: 20;
  margin: 45px auto auto auto;
  width: 170px;
  height: 236px;
}

div.item#item-p8-a h1{

    font-size: 20px !important;

}
div.item#item-p8-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}

div#bibliography{
    grid-column-start: 2;
    grid-column-end: 6;
    grid-row-start: 1;
    grid-row-end: 22;
    columns: 4 auto;
    background-color: white;
    transform:rotate(0deg) !important;
    overflow-wrap: break-word;
    word-wrap: break-word;
    column-gap: 8px;
    font-size: 12.8px;
}

div#bibliography h2 {
    display: inline-block;
}

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

.mw-usertoollinks-talk,
.mw-usertoollinks-contribs{
    display: none;
}