Sample Zine

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


/* Setzt alle automatisch eingestellten Ränder zurück */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Abschnitt für die Regeln die für die Druckansicht einer Seite gelten */
@media print {
    
    /* Verkleinert die Schriftgröße  */
    body {
        font-size: 69%;
    }

    /*Hier beginnt das Seiten Layout */
    @page {
        size: landscape;
        margin: 0;
        bleed: 0;
    }

    /* Definiert die für Zines typische Seitenaufteilung */
    .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;
    }

    /* Erzeugt Guidelines zwischen den Seiten des Zines */
    .zine-page {
        background: white;
        padding: 0.2rem;
        overflow: hidden;
    }

    /* Dreht die Zine Seiten die auf der oberen Hälfte der A4 Seite sind */
    .page-5,
    .page-4,
    .page-3,
    .page-2 {
        transform: rotate(180deg) translateX(-0.1px);
    }

    /* Weist jede Seite einem der definierten Bereiche zu */

    .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 =====




  
  
    
    
    
    Sample Zine
    
    
    
    
  

  
    
        Cover Page
    
    
        Content 1
    
    
        Content 2
    
    
        Content 3
    
    
        Content 4
    
    
        Content 5
    
    
        Content 6
    
    
        Backside