PdfCSS:Content-Form: Difference between revisions

This page was last edited on 18 January 2024, at 16:58.
No edit summary
No edit summary
Line 733: Line 733:
}
}
div.item#item-p9-c{
div.item#item-p9-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}
/* ------------- PAGE 10 ---------------- */
div.item#item-p10-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p10-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p10-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}
/* ------------- PAGE 11 ---------------- */
div.item#item-p11-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p11-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p11-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}
/* ------------- PAGE 12 ---------------- */
div.item#item-p12-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p12-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p12-c{
     grid-column-start: 2;
     grid-column-start: 2;
     grid-column-end: 5;
     grid-column-end: 5;

Revision as of 16:58, 18 January 2024

@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: 72px;
        --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: 315mm 470mm portrait;
        margin: 70px 40px 40px 40px;
        
        @top-left{
                content: "Content/Form";
                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 13, Issue 1, 2024";
                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);
    font-size: 11px;
    line-height: 1.6;
}

/* ||||||| 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(24, 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;
    /*border: 1px dotted magenta;*/
}

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 h2{

    font-family: "FT88-Gothique";

    font-size: 250% !important;

    line-height: 1 !important;

}
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;
}
div.cellular img{
    width: 100%;
    height: auto;
    margin: 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 -----------*/

h1{
    margin: 0;
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    align-self: end;
    font-weight: normal;
}
h1#title{

    font-family: "FT88-School";

    font-size: 500% !important;

    margin-bottom: 0.5em !important;

}
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: 0 0 var(--spacer-full) 0;
}

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

div.item#editorial{
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 7;
    columns: 4 auto;
}

div.item#item-p1-a{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 10;
    grid-row-end: 20;
    columns: 2 auto;
}
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.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;
}

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

div.item#colophon{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 22;
    grid-row-end: 24;
    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;
}
#colophon p:not(p:first-of-type) > b {
    display: inline-block !important;
    margin: 0 !important;
    }
div.item#colophon li {
    list-style: none;
}
div.item#colophon li::before {
    content: "- ";
}
div.item#colophon ul{
    padding: 0;
    margin: 0;
}

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

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#item-p2-a{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 12;
    columns: 2 auto;
    border-left: 1px solid;
}
div.item#item-p2-b{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 19;
    grid-row-end: 23;
    columns: 5 auto;
    margin-bottom: -20px;
    margin-top: 20px;
}
div.item#item-p2-c{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 15;
    grid-row-end: 19;
    columns: 5 auto;
}

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

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

div#item-p3-a{
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 3 auto;
}
div#item-p3-b {
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 15;
  grid-row-end: 22;
  columns: 3 auto;
}
div#item-p3-c{
    grid-column-start: 1;
    grid-column-end: 6;
    grid-row-start: 10;
    grid-row-end: 14;
    columns: 5 auto;
}

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

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

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-c{
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 12;
    grid-row-end: 22;
    columns: 2 auto;
    margin-top: -10px;
}
div#item-p4-d{
    columns: 3 auto;
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 10;
    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-b{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 11;
    columns: 2 auto;
    margin-bottom: -25px;
}
div#item-p5-c{
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 14;
    grid-row-end: 24;
    columns: 2 auto;
}

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-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);
}

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

div#item-p6-a{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 13;
    columns: 2 auto;
    margin-top: -15px;
    margin-bottom: 15px;
}
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-p6-c{
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 14;
    grid-row-end: 24;
    columns: 2 auto;
}

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

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-b{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 11;
    grid-row-end: 18;
    columns: 3 auto;
}
div.item#item-p7-c{
    grid-column-start: 5;
    grid-column-end: 6;
    grid-row-start: 3;
    grid-row-end: 22;
}

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;
}

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

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: 24;
    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.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: 19;
  grid-row-end: 24;
  margin: 45px auto auto auto;
  width: 170px;
  height: 236px;
}

/* ------------- PAGE 9 ---------------- */

div.item#item-p9-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p9-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p9-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}

/* ------------- PAGE 10 ---------------- */

div.item#item-p10-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p10-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p10-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}

/* ------------- PAGE 11 ---------------- */

div.item#item-p11-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p11-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p11-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}

/* ------------- PAGE 12 ---------------- */

div.item#item-p12-a{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 19;
}
div.item#item-p12-b{
    grid-column-start: 3;
    grid-column-end: 6;
    grid-row-start: 2;
    grid-row-end: 9;
    columns: 2 auto;
}
div.item#item-p12-c{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 12;
    grid-row-end: 19;
    columns: 3 auto;
}

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

.mw-usertoollinks-talk,
.mw-usertoollinks-contribs{
    display: none;
}
Retrieved from "http://10.10.12.4/index.php?title=PdfCSS:Content-Form&oldid=263"