PdfCSS:Content-Form (dummy): Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary |
||
| Line 192: | Line 192: | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(5, 20%); | grid-template-columns: repeat(5, 20%); | ||
grid-template-rows: repeat( | grid-template-rows: repeat(24, var(--cell-height)); | ||
margin: 0; | margin: 0; | ||
padding: 0; | padding: 0; | ||
Revision as of 17:35, 12 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: 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: 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);
}
/* ||||||| 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;
}
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;
}
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 -----------*/
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;
}
/* ------------- 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: 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;
}
#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: 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#item-p2-c{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 13;
grid-row-end: 17;
columns: 5 auto;
}
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);
}
/* ------------- PAGE 3 ---------------- */
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-b {
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 14;
grid-row-end: 19;
columns: 3 auto;
}
div#item-p3-c{
grid-column-start: 1;
grid-column-end: 6;
grid-row-start: 9;
grid-row-end: 13;
columns: 5 auto;
}
div.cellular#cellular-p3-a{
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-b{
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 20;
grid-row-end: 21;
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: 20;
columns: 2 auto;
margin-top: -10px;
}
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-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-c{
grid-column-start: 3;
grid-column-end: 6;
grid-row-start: 15;
grid-row-end: 21;
columns: 3 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: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 8;
columns: 3 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: 1;
grid-column-end: 4;
grid-row-start: 9;
grid-row-end: 17;
columns: 3 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: 7;
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.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;
}
/* ----------- cosmetics ------------- */
.mw-usertoollinks-talk,
.mw-usertoollinks-contribs{
display: none;
}