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

HTML