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

[curriculum.git] / css / style.css

/* Reset rules by Eric S. Meyer
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

h4 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

h6 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  text-transform: uppercase; }

div {
  margin: 0;
  padding: 0; }

.material-icons {
  line-height: 1em; }

dl dt {
  text-decoration: underline; }
dl dd {
  margin-left: 2em; }

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

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

  html, body {
    width: 210mm;
    height: 297mm; } }

/*# sourceMappingURL=style.css.map */