print css work

This commit is contained in:
alicestrt 2020-11-24 18:12:38 +01:00
parent f9f7e9f75e
commit 0065aef798
12 changed files with 137 additions and 38 deletions

25
content/circle.md Normal file
View File

@ -0,0 +1,25 @@
<pre>
,,lopes""""Nouri,,
,nve""' `""sh,
,ine" "ing,
,l" "ne,
,ai" _,,yay"""Base,,_ "tw,
,m" ,al"' `"d, "o,
,e' ,v" "o, `r,
,h' i" "n `k,
t' t' ,gPPRg, `w `i
h s dP' `Yb h s
g e 8) (8 i t
u f Yb dP r h
o o, "8ggg8" ,p e
r, mr oo ,t
`h, "ea ls" ,i'
`t, "th,_ _,an" ,t'
`ng `""dtornados""' le'
`uti oft'
"rib hep"
`"ist, ,ubl"'
`"ared, ,icat"'
``""ionthatwe""''
</pre>

View File

@ -1,20 +1,23 @@
Title: The Philosophy of Warnings Title: The Philosophy of Warnings
Author: Santiago Zabala Author: Santiago Zabala
Category: Articles Category: Articles
<div class="colophon">
<div id="title_edition">Title of the publication</div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget arcu at ligula vulputate euismod non eget risus. Nullam placerat risus nulla. Fusce in arcu dolor. Quisque nec dignissim nulla, a dapibus lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed quam sit amet sapien faucibus convallis ac a sem. Etiam commodo elit id consequat tempus.
<div id="amro">AMRO Servus etc</div> </p><p>
Fusce porttitor consectetur lacinia. Suspendisse facilisis ligula sed libero cursus, eget iaculis lectus vulputate. Nam lacinia massa vitae dapibus blandit. Donec tempus pulvinar ornare. Aliquam dictum accumsan tellus et ullamcorper. Nunc nisl tortor, hendrerit et sem eget, feugiat venenatis orci. Nullam condimentum fringilla commodo. </p></div>
<div class="first-page">
<div class="title">The Philosophy of Warnings</div> <div id="title_edition">Of Whirlpools and Tornadoes <br> Nourishing Networks</div>
<div id="amro">AMRO 2020</div>
<div class="author">Santiago Zabala</div> <div class="author">Santiago Zabala</div>
<div class="title">The Philosophy of Warnings</div>
<div class="published">Published in the *Institute of Arts and Ideas* on October 7,
2020</div>
<header id="pageheader">Some stuff here in the header</header> <div class="published">Published in the *Institute of Arts and Ideas* </div>
</div>
<header id="pageheader-issue">Nourishing Networks</header>
<header id="pageheader-theme">Theme</header>
<div class="essay_content"> <div class="essay_content">
<p>This month an undergraduate student told me his parents were using the <p>This month an undergraduate student told me his parents were using the
@ -123,7 +126,8 @@ realism by challenging our framed global order and its realist
advocates. This philosophy is not meant to rescue us *from* emergencies advocates. This philosophy is not meant to rescue us *from* emergencies
but rather rescue us *into* emergencies that we are trained to ignore.</p> but rather rescue us *into* emergencies that we are trained to ignore.</p>
</div> </div>
<div class="bio">
[[Santiago Zabala]{.underline}](http://www.santiagozabala.com/) is ICREA [[Santiago Zabala]{.underline}](http://www.santiagozabala.com/) is ICREA
Research Professor of Philosophy at the Pompeu Fabra University in Research Professor of Philosophy at the Pompeu Fabra University in
Barcelona. His most recent book is *Being at Large: Freedom in the Age Barcelona. His most recent book is *Being at Large: Freedom in the Age
of Alternative Facts* (McGill-Queen's University Press, 2020). of Alternative Facts* (McGill-Queen's University Press, 2020).</div>

View File

@ -9,7 +9,7 @@ body {
header, header,
#subscribe, #subscribe,
#instructions, #instructions,
footer{ footer{
position: relative; position: relative;
width: 100%; width: 100%;
@ -22,4 +22,4 @@ article.post{
margin: 2em 0; margin: 2em 0;
padding: 2em; padding: 2em;
background-color: rgb(240,240,240); background-color: rgb(240,240,240);
} }

View File

@ -1,52 +1,95 @@
@font-face { @font-face {
font-family: 'notcouriersans'; font-family: "White Rabbit";
src: url('../fonts/notcouriersans'); src: url("../fonts/whiterabbit/whitrabt.ttf") format("truetype");
} }
@font-face {
font-family: "IMB Plex Mono";
src: url("../fonts/imbplexmono/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
font-family: "IMB Plex Mono";
src: url("../fonts/imbplexmono/IBMPlexMono-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Printed Circuitboard";
src: url("../fonts/printedcircuit/PrintedCircuitBoard.ttf") format("truetype");
}
@font-face {
font-family: "Not Courier Sans";
src: url("../fonts/notcouriersans/NotCourierSans.ttf") format("truetype");
}
@page{ @page{
size:A4; size:A4;
@bottom-center {
content: counter(page);
font-size: 12px;
font-family: "White Rabbit";
}
} }
@page :left { @page :left {
margin-left: 0.4in; margin-left: 0.4in;
margin-right: 1.2in; margin-right: 1.2in;
@bottom-left {
content: counter(page);
font-size: 9px;
}
@top-left { @top-left {
content: element(pageheader, first-except); content: element(pageheader-issue, first-except);
font-size: 9px; font-size: 8px;
}
@top-right {
content: element(pageheader-theme, first-except);
font-size: 8px;
} }
} }
@page :right { @page :right {
margin-left: 1.2in; margin-left: 1.2in;
margin-right: 0.4in; margin-right: 0.4in;
@bottom-right {
content: counter(page);
font-size: 9px;
}
@top-right { @top-right {
content: element(pageheader, first-except); content: element(pageheader-issue, first-except);
font-size: 9px; font-size: 8px;
} }
@top-left {
content: element(pageheader-theme, first-except);
font-size: 8px;
}
} }
#pageheader{ #pageheader-issue{
position: running(pageheader); position: running(pageheader-issue);
font-family: 'White Rabbit';
}
#pageheader-theme{
position: running(pageheader-theme);
font-family: 'White Rabbit';
}
.first-page {
line-height: 1.6;
} }
.title { .title {
font-size: 25px; font-size: 20px;
text-align: center; text-align: center;
font-family: 'notcouriersans'; font-family: 'White Rabbit';
margin-top: 7in;
} }
.published { .published {
font-size: 20px; font-size: 20px;
font-family: 'notcouriersans'; font-family: 'White Rabbit';
page-break-after: always; page-break-after: always;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
@ -57,26 +100,53 @@
.author { .author {
font-size: 20px; font-size: 20px;
font-family: 'notcouriersans'; font-family: 'White Rabbit';
text-align: center; text-align: center;
margin-top: 7in;
} }
#title_edition { #title_edition {
font-size: 20px; font-size: 20px;
font-family: 'notcouriersans'; font-family: 'White Rabbit';
text-align: center; text-align: center;
page-break-before: always;
} }
#amro { #amro {
font-size: 20px; font-size: 20px;
font-family: 'notcouriersans'; font-family: 'White Rabbit';
text-align: center; text-align: center;
} }
.colophon {
column-count: 2;
column-gap: 40px;
column-fill: balance;
column-rule-width: medium;
page-break-before: always;
}
.essay_content { .essay_content {
font-family: 'notcouriersans'; font-family: 'Not Courier Sans';
font-weight: 300;
font-size: 18px; font-size: 18px;
page-break-before: always;
} }
.essay_content p:first-of-type {
margin-top: 100px;
}
.bio {
font-family: 'Not Courier Sans';
font-weight: 300;
font-size: 18px;
margin-top: 650px;
margin-left: 400px;
page-break-before: always;
}
@counter-style numeric {
suffix: "-- ";
prefix: " --";
}

Binary file not shown.