dossier/app/tpl/print/less/global.less

/**
 * LESS for magdev/resume print theme
 */

// MIXINS:START

//
// Mixins
//
.no-page-break-inside() {
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: avoid;
}
.border-radius(@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.border-box(@width) {
    border-right: @width solid @base-accent-color;
    border-bottom: (@width * 2) solid @base-background-color;
}

.clearfix() {
    &::after {
        display: block;
        content: '.';
        clear: both;
        visibility: hidden;
        height: 1px;
        font-size: 1px;
    }
}

// MIXINS:END

// VARS:START

//
// Variables
//

// Base styles
@base-font-family: Arial, Verdana;
@base-font-size: 10pt;
@base-font-color: #222;
@base-background-color: #fff;
@base-accent-color: #68d19b;

// Page format
@page-format: A4 portrait;
@page-margins: 11mm 17mm 17mm 17mm;

// Typography
@headline-small-font-style: italic;
@headline-font-weight: bold;
@headline-border-style: 1px solid @base-accent-color;

@headline-1-size: (@base-font-size + 8pt);
@headline-1-size-small: (@headline-1-size - 5pt);
@headline-1-color: @base-font-color;
@headline-1-color-small: lighten(@base-font-color, 20%);

@headline-2-size: (@base-font-size + 6pt);
@headline-2-size-small: (@headline-2-size - 4pt);
@headline-2-color: @base-font-color;
@headline-2-color-small: lighten(@base-font-color, 20%);

@headline-3-size: @base-font-size;
@headline-3-size-small: (@headline-3-size - 2pt);
@headline-3-color: lighten(@base-font-color, 30%);
@headline-3-color-small: lighten(@base-font-color, 15%);
@headline-3-spacing: .4pt;
@headline-3-transform: uppercase;

@headline-4-size: (@base-font-size + 1pt);
@headline-4-size-small: (@headline-4-size - 2pt);
@headline-4-color: @base-font-color;
@headline-4-color-small: lighten(@base-font-color, 20%);

@paragraph-size: @base-font-size;
@paragraph-size-small: (@paragraph-size - 2pt);
@paragraph-color: @base-font-color;
@paragraph-text-align: left;

@date-base-color: lighten(@base-font-color, 30%);
@date-start-color: @base-accent-color;


// Whitespace
@headline-margin: .5cm 0 .2cm;
@paragraph-margin: 0 0 .3cm;
@paragraph-line-height: (@paragraph-size + 2pt);
@column-space: .3cm;

@blockquote-vertical-space: .5cm;
@blockquote-horizontal-wide: 3cm;
@blockquote-horizontal-narrow: 1.5cm;

// Cover
@cover-border-width: 6pt;
@cover-text-position: 18cm 0 0 8cm;

// Intro
@intro-paragraph-size: (@paragraph-size + .5pt);
@intro-paragraph-line-height: (@intro-paragraph-size + 3pt);
@intro-photo-border-radius: 0;
@intro-photo-margin: .15cm 0 .3cm .5cm;
@intro-photo-align: right;
@intro-text-inset: .1cm;
@intro-text-right-inset: .5cm;
@intro-text-align: justify;

// Resume
@resume-column-space: @column-space;
@resume-border-width: @cv-border-width;
@resume-label-color: lighten(@base-font-color, 30%);
@resume-gutter-padding: .6cm;
@resume-text-inset: .1cm;
@resume-text-align: left;

// CV
@cv-column-space: @column-space;
@cv-border-width: 4pt;
@cv-label-color: lighten(@base-font-color, 30%);
@cv-text-align: @resume-text-align;


// VARS:END



//
// Styles
//


// Reset
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-style: normal;
}


// Grid
.row {
  display: flex;
}
.col {
  flex: 1;
}

.col-border { flex: 0 0 1%; }
.col-tenth { flex: 0 0 10%; }
.col-eighth { flex: 0 0 12.5%; }
.col-fifteen { flex: 0 0 15%; }
.col-fifth { flex: 0 0 20%; }
.col-quarter { flex: 0 0 25%; }
.col-third { flex: 0 0 33.3333334%; }
.col-half { flex: 0 0 50%; }
.col-resume { flex: 0 0 48.5%; }
.col-golden-narrow { flex: 0 0 38%; }
.col-golden-wide { flex: 0 0 62%; }


// Page settings for printing
@page {
  size: @page-format;
  margin: @page-margins;
}

// Base elements
html, body {
    background-color: @base-background-color;
    font-family: @base-font-family;
    font-size: @base-font-size;
    color: @base-font-color;
}
section {
    page-break-before: always;
}

h1, h2, h3 {
  font-weight: @headline-font-weight;
  margin: @headline-margin;
  page-break-after: avoid;

  small {
      font-style: @headline-small-font-style;
  }
}
h1 {
    font-size: @headline-1-size;
    margin-top: 0;

    small {
      font-size: @headline-1-size-small;
      color: @headline-1-color-small;
    }
}
h2 {
    font-size: @headline-2-size;
    border-bottom: @headline-border-style;
    margin-top: 0;

    small {
      font-size: @headline-2-size-small;
      color: @headline-2-color-small;
    }
}
h3 {
    font-size: @headline-3-size;
    color: @headline-3-color;
    letter-spacing: @headline-3-spacing;
    text-transform: @headline-3-transform;

    small {
      font-size: @headline-3-size-small;
      color: @headline-3-color-small;
      text-transform: none;
    }
}
p {
    margin: @paragraph-margin;
    font-size: @paragraph-size;
    text-align: @paragraph-text-align;
    color: @paragraph-color;

    small {
        font-size: @paragraph-size-small;
    }
}
ul, ol, li {
    list-style-type: none;
}

a, a:active, a:hover, a:visited {
    text-decoration: none;
    color: @base-font-color;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}
blockquote {
    padding: .3cm 1cm .15cm;
    color: lighten(@base-font-color, 30%);
    background-color: lighten(@base-font-color, 80%);
    border: 1px solid lighten(@base-font-color, 80%);
    font-style: italic;
    .border-radius(5pt);
    .clearfix();

    .text {
        font-family: Georgia;
        font-size: (@paragraph-size + 2pt);
        font-style: italic;
    }
    .author {
        font-family: Georgia;
        font-size: (@paragraph-size - 1pt);
        font-style: italic;
        float: right;
        margin-top: .2cm;
    }
}
blockquote:nth-child(even) {
    margin: @blockquote-vertical-space @blockquote-horizontal-wide @blockquote-vertical-space @blockquote-horizontal-narrow;
}
blockquote:nth-child(odd) {
    margin: @blockquote-vertical-space @blockquote-horizontal-narrow @blockquote-vertical-space @blockquote-horizontal-wide;
}


dl.horizontal {
    dl {
        .no-page-break-inside();
    }
    dt, dd {
        display: inline-block;
        line-height: 14pt;
    }
    dt {
        text-align: right;
        padding-right: .2cm;
        font-size: (@base-font-size - 1pt);
        vertical-align: top;
        color: @resume-label-color;
        margin-top: .5pt;
    }
    dd {
        font-size: @base-font-size;
        text-align: @resume-text-align;

        li, p {
            padding-left: 0;
            padding-right: 0;
        }
    }
}



// Cover page
.cover {
    .col-border {
        .border-box(@cover-border-width);
    }
    .col-content {
        padding-left: .3cm;
    }
    .text {
        margin: @cover-text-position;

        h1 {
            font-size: 30pt;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: .5cm;
            line-height: 26pt;
        }

        .tagline {
            font-size: 20pt;
            color: lighten(@base-font-color, 30%);
        }

        .subtitle {
            font-size: 12pt;
            font-style: italic;
            color: @base-accent-color;
            margin-bottom: 0;
        }
    }
}


// Certificate pages
.certs {
    .certificate {
        text-align: center;
        page-break-after: always;


        figcaption {
            text-align: left;
            margin-bottom: .2cm;

            h3 {
                small {
                    text-transform: none;
                    display: block;
                }
            }
        }

        img {
            width: 95%;
            height: auto;
        }
    }
}



// Introduction page
.intro {
    h4 {
        border-bottom: 1pt solid lighten(@base-font-color, 40%);
        margin-bottom: 2pt;
        margin-top: 1.2cm;
        display: inline-block;
    }
    .toc {
        list-style-position: inside;
        padding-left: .3cm;

        li {
            list-style-type: circle;
            font-size: @base-font-size;
        }
    }
    .content {
        padding-left: @intro-text-inset;
        padding-right: @intro-text-right-inset;
        .clearfix();

        h2, h3 {
            margin-left: -@intro-text-inset;
            margin-right: -(@intro-text-inset + @intro-text-right-inset);
        }
    }
    .quotes {
        &.top {
            margin-bottom: 1cm;
        }
        &.bottom {
            margin-top: 1cm;
        }
    }
    p, li {
        line-height: @intro-paragraph-line-height;
        font-size: @intro-paragraph-size;
        text-align: @intro-text-align;
    }
    .photo {
        float: @intro-photo-align;
        margin: @intro-photo-margin;
        height: auto;
        .border-radius(@intro-photo-border-radius);
    }
}


// Curriculum vitae
.cv {
    .cv-entry {
        .no-page-break-inside();
        margin-bottom: .5cm;

        h4 {
            font-weight: bold;
            font-size: @headline-4-size;
            color: @headline-4-color;

            small {
                font-size: @headline-4-size-small;
                font-style: italic;
                color: @headline-4-color-small;
            }
        }

        p {
            text-align: @cv-text-align;
            small {
                color: @cv-label-color;
                font-style: italic;
            }
        }
        .col-date {
            padding-right: @column-space;
            .border-box(@cv-border-width);
        }
        .col-info {
            padding-left: @column-space;

            p {
                margin-bottom: .1cm;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .date {
            font-size: @base-font-size;
            font-weight: bold;
            text-align: right;
            color: @date-base-color;

            .start, .end {
                display: block;
            }

            .start {
                font-size: (@base-font-size + 4pt);
                font-weight: bold;
                color: @date-start-color;
            }
        }

        .company {
            font-size: (@base-font-size - 1pt);
            font-style: italic;
        }
    }
}


// Projects
.projects {
    
    .content {
        padding-left: @intro-text-inset;
        padding-right: @intro-text-right-inset;
        .clearfix();

        h2, h3 {
            margin-left: -@intro-text-inset;
            margin-right: -(@intro-text-inset + @intro-text-right-inset);
        }
    }
    .short-description {
        font-weight: bold;
        font-size: (@base-font-size + .5pt);
    }
    dl.horizontal {
        display: none;
        dt {
            text-align: left;
            width: 1cm;
        }
        dd {
            padding-right: 1cm;
            p {
                margin: 0;
            }
        }
    }
    p, li {
        line-height: @intro-paragraph-line-height;
        font-size: @intro-paragraph-size;
        text-align: @intro-text-align;
    }
}

// Resume
.resume {

    dl.horizontal {
        dt {
            width: 2.1cm;
        }
        dd {
            width: 6cm;
        }
    }
    li, p {
        font-size: @base-font-size;
        text-align: @resume-text-align;
        padding-left: @resume-text-inset;
        padding-right: @resume-gutter-padding;
    }
    .col-resume {
        margin-top: .45cm;

        h3:first-child {
            margin-top: .05cm;
        }
    }
    .col-1 {
        .border-box(@resume-border-width);
        flex: 0 0 47.5%;
    }
    .col-2 {
        padding-left: @resume-gutter-padding;
        flex: 0 0 50.5%;

        li {
            margin-bottom: 3pt;
        }
    }
}

// Footers and headers or PDF generation
footer,
header {
    display: block;

    .left {
        text-align: left;
    }
    .center {
        text-align: center;
    }
    .right {
        text-align: right;
    }
}


// Specific screen styles
@media screen {
    html, body {
        height: 100%;
    }
    body {
        margin: 20px 30px 0;
        width: 19.5cm;
    }
    section {
        margin-bottom: 2cm;

        &.cover {
            .text {
                margin: 0;
            }
        }
    }
    .certs {
        .certificate {
            margin-bottom: 1.5cm;
        }
    }
}