playing with printer layout to get it to print the cv correctly

[curriculum.git] / css / source / style.scss

@import "colors";
@import "reset";
@import "tools";
@import "formatting";
/// Base font size setting
$em-base: 16px;

body {
        font: {
            family: 'Open Sans', sans-serif;
            size: $em-base;
            weight: 400;
        }
        line-height: 1.5;
        background-color: $primary-color-light;
    background: radial-gradient(farthest-corner at 1% 1%, $primary-color-light 30%, $primary-color 100%);
        #wrapper {
                padding: 1em;
                padding-left: 4.5em;
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                grid-template-rows: auto;
                grid-template-areas:
                        "header header header header"
                        "main main main main"
                        "footer footer footer footer";
                #language {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 7%;
                        z-index: 99;
                        margin: 0;
                        padding: 0;
                        color: $primary-color-light;
                }
                #menu {
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 10em;
                        height: 100vh;
                        background-color: $primary-color-dark;
                        @include box-shadow(0, 10, 25, $standard-box-shadow-color);
                        transition: width 0.4s ease-in-out;
                        &.closed {
                                width: 4em;
                                #menu-content {
                                        display: none;
                                }
                        }
                        #menu-content {
                                margin-top: 3em;
                                text-align: center;
                                padding-left: 1em;
                                padding-right: 1em;
                                #print-page {
                                        i {
                                                font-size: 6em;
                                                color: $primary-color-light;
                                        }
                                }
                        }
                }
                #header {
                        grid-area: header;
                        display: grid;
                        grid-template-columns: 3fr 1fr;
                        grid-template-rows: 1;
                        grid-template-areas:
                                "name photo";
                        figure {
                                grid-area: photo;
                                width: 16em;
                                img {
                                        width: 16em;
                                        @include box-shadow(-5, 5, 25, $standard-box-shadow-color);
                                }
                        }
                        #heading {
                                grid-area: name;
                                align-self: center;
                                text-align: center;
                                line-height: 2.5;
                                div {
                                        h1 {
                                                font-size: 3em;
                                                line-height: 2;
                                        }
                                }
                                div#address {
                                        text-transform: uppercase;
                                        i {
                                                font-size: 1em;
                                                line-height: 1;
                                        }
                                }
                        }
                }
                #main {
                        grid-area: main;
                        #container {
                                #content {
                                        display: grid;
                                        grid-template-columns: 1fr 3fr;
                                        grid-template-rows: repeat(5, fit-content(100%));
                                        grid-column-gap: 1em;
                                        grid-template-areas:
                                                "profile-title profile-content"
                                                "working-title working-content"
                                                "studies-title studies-content"
                                                "knowledge-title knowledge-content"
                                                "personal-title personal-content";
                                        div, h2 {
                                                margin-top: 2em;
                                        }
                                        h2.personal-profile {
                                                grid-area: profile-title;
                                        }
                                        div.personal-profile {
                                                grid-area: profile-content;
                                                text-align: justify;
                                        }
                                        h2.working-experience {
                                                grid-area: working-title;
                                        }
                                        div.working-experience {
                                                grid-area: working-content;
                                                div:first-child {
                                                        margin-top: 0;
                                                }
                                        }
                                        h2.studies {
                                                grid-area: studies-title;
                                        }
                                        div.studies {
                                                grid-area: studies-content;
                                        }
                                        h2.knowledge {
                                                grid-area: knowledge-title;
                                        }
                                        div.knowledge {
                                                grid-area: knowledge-content;
                                                text-align: justify;
                                        }
                                        h2.personal-details {
                                                grid-area: personal-title;
                                        }
                                        div.personal-details {
                                                grid-area: personal-content;
                                        }
                                        h2 {
                                                text-align: left;
                                        }
                                }
                                #privacy {
                                        margin-top: 2em;
                                        display: grid;
                                        grid-template-columns: 1fr 3fr;
                                        grid-template-rows: auto;
                                        grid-row-gap: 1px;
                                        grid-template-areas:
                                                ". refs"
                                                ". privacy";
                                        div#refs {
                                                grid-area: refs;
                                        }
                                        div#notice {
                                                grid-area: privacy;
                                        }
                                        div#notice,
                                        div#refs {
                                                text-align: center;
                                                font-size: 0.7em;
                                                font-style: italic;
                                        }
                                }
                        }
                }
                #footer {
                        margin-top: 2em;
                        font-size: 0.8em;
                        grid-area: footer;
                        p {
                                display: grid;
                                grid-template-columns: 1fr 1fr 1fr;
                                grid-template-rows: auto;
                                grid-column-gap: 1em;
                                grid-template-areas:
                                        "mail name phone";
                                span i {
                                        font-size: 0.75em;
                                }
                                span#mail {
                                        grid-area: mail;
                                        text-align: left;
                                }
                                span#name {
                                        grid-area: name;
                                        text-align: center;
                                }
                                span#phone {
                                        grid-area: phone;
                                        text-align: right;
                                }
                        }
                }
        }
}

@page {
  size: A4;
  margin: 17mm 15mm 17mm 15mm;
}

@media print {
        body {
                background: none;
                #wrapper {
                        #language,
                        #menu {
                                display: none;
                        }
                        #header {
                                figure {
                                        width: 8em;
                                        img {
                                                width: 8em;
                                                box-shadow: none;
                                        }
                                }
                        }
                        #main {
                                #container {
                                        #content {
                                                div.working-experience {
                                                        div {
                                                            page-break-inside: avoid;
                                                        }
                                                }
                                                div.knowledge {
                                                        p:last-child {
                                                            page-break-after: always !important;
                                                        }
                                                }
                                                h2.personal-details {
                                                        page-break-before: always;
                                                }
                                        }
                                }
                        }
                        #footer {
                                position: fixed;
                                bottom: 0;
                                width: 100%;
                                p {
                                        span {
                                        }
                                        span#mail {
                                        }
                                        span#name {
                                        }
                                        span#phone {
                                        }
                                }
                        }
                }
        }
        html, body {
            width: 210mm;
            height: 297mm;
        }
}