signs/public/signs.css

@page {
    margin: 0;
    size: A4 landscape;
}

@font-face {
    font-family: 'D-DIN Bold';
    src: url("https://media.k-space.ee/fonts/D-DIN-Bold.woff2") format("woff2");
    src: url("https://media.k-space.ee/fonts/D-DIN-Bold.woff") format('woff');
    src: url("https://media.k-space.ee/fonts/D-DIN-Bold.ttf") format('ttf');
    src: url("https://media.k-space.ee/fonts/D-DIN-Bold.otf") format('otf');
    src: url("D-DIN-Bold.woff2") format("woff2");
}

body {
    margin: 0
}

.sheet {
    display: table;
    margin: 0;
    position: relative;
    box-sizing: border-box;
    page-break-after: always;
    padding: 10mm;
    padding-top: 5mm;
    width: 297mm;
    height: 209mm;
    border-spacing: 0;
}

/* Put everything in the correct location */

.logo {
    display: table-row;
}

.logo img {
    height:35mm;
    pointer-events: none;
    float:initial;
}

.main {
    font-family: "D-DIN Bold", sans-serif;
    display: table-row;
    font-size: 25mm;
    width: 100%;
    height: 12.5cm;
    max-height: 12.5cm;
    margin: 0;
    text-align: center;
}

.subline {
    font-family: "D-DIN Bold", sans-serif;
    display: table-row;
    font-size: 12mm;
    text-align: center;
}

.editable {
    display: table-cell;
    vertical-align: middle;
    -webkit-user-modify: read-write;
       -moz-user-modify: read-write;
    user-modify: read-write;
    border: none;
    outline: none;

    -ms-word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

/** Screen **/

@media screen {

    body {
        background: #eee
    }

    .sheet {
        background: white;
        box-shadow: 0 .5mm 2mm rgba(0, 0, 0, .3);
        margin: 20mm auto;
    }

    .sheet, .sheet::before, .sheet::after {
        box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
        border: 1px solid #bbb;
    }

    .sheet::before, .sheet::after {
        content: "";
        position: absolute;
        width: 297mm;
        height: 210mm;
        background-color: #eee;
    }

    .sheet::before {
        right: 15px;
        top: 0;
        transform: rotate(-1deg);
        z-index: -1;
    }

    .sheet::after {
        top: 5px;
        right: -5px;
        transform: rotate(1deg);
        z-index: -2;
    }

}

@media print {

    body {
        width: 297mm
    }

    .sheet {
        overflow: hidden;
        /* Make input caret transparent */
        color: transparent;
        text-shadow: 0 0 0 #000;
    }

}