Initial commit
This commit is contained in:
603
app/tpl/print/less/global.less
Normal file
603
app/tpl/print/less/global.less
Normal file
@@ -0,0 +1,603 @@
|
||||
/**
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user