|
|
| Line 1: |
Line 1: |
| @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/pad/p/minortech.css/export/txt");
| |
|
| |
|
| |
| :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.image a{
| |
| display: block;
| |
| }
| |
| 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: 4;
| |
| 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;
| |
| }
| |