This is an old revision of the document!

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 */
}

HTML

<!DOCTYPE html>
<html lang="en">
  <!-- Sprache des Dokuments -->
  <head>
    <meta charset="UTF-8" />
    <!-- Enthält auch Umlaute -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Zine</title>
    <!-- Tab Name -->
    <link rel="icon" type="image/x-icon" href="/icon.png" />
    <!--Favcon (Website Icon)-->
    <link rel="stylesheet" media="print" href="/css/zine-print-template.css">
  </head>

  <main class="zine">
    <header class="zine-page page-1">
        Cover Page
    </header>
    <section class="zine-page page-2">
        Content 1
    </section>
    <section class="zine-page page-3">
        Content 2
    </section>
    <section class="zine-page page-4">
        Content 3
    </section>
    <section class="zine-page page-5">
        Content 4
    </section>
    <section class="zine-page page-6">
        Content 5
    </section>
    <section class="zine-page page-7">
        Content 6
    </section>
    <footer class="zine-page page-8">
        Backside
    </footer>
  </main>
</html>

Table of Contents

Web-To-Print Zines

CSS

HTML