This is an old revision of the document!
Table of Contents
Web-To-Print Zines
Auf der Wertstoffhof Website gibt es einige Seiten die sich auch als Zines ausdrucken lassen. Hier wird einmal das CSS und der HTML Code erklärt den man braucht um das ganz selber zu machen. Das ganze basiert auf der Zine-Machine von Rowan Merewood: https://rowan.fyi/made/zine-machine/
CSS
/* based on the Zine-Machine Project by Rowan Merewood: https://rowan.fyi/made/zine-machine/*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@media print {
body {
font-size: 69%;
}
/*Hier beginnt das Seiten Layout */
@page {
size: landscape;
margin: 0;
bleed: 0;
}
.zine {
width: 100vw;
height: 100vh;
display: grid;
grid-template-areas:
"page-5 page-4 page-3 page-2"
"page-6 page-7 page-8 page-1";
grid-template-columns: repeat(4, 25%);
grid-template-rows: repeat(2, 50%);
gap: 1px;
background: lightgrey;
}
.zine-page {
background: white;
padding: 0.2rem;
overflow: hidden;
}
.page-5,
.page-4,
.page-3,
.page-2 {
transform: rotate(180deg) translateX(-0.1px);
}
.page-1 {
grid-area: page-1;
}
.page-2 {
grid-area: page-2;
}
.page-3 {
grid-area: page-3;
}
.page-4 {
grid-area: page-4;
}
.page-5 {
grid-area: page-5;
}
.page-6 {
grid-area: page-6;
}
.page-7 {
grid-area: page-7;
}
.page-8 {
grid-area: page-8;
}
.page-5,
.page-4,
.page-3,
.page-2 {
transform: rotate(180deg);
}
/* Jetzt ist das Seiten Layout zuende */
/* Füg hier weitere Styles ein um den Look deines Zines zu verfeinern */
}