css/style.css

   1 /* Reset rules by Eric S. Meyer
   2    http://meyerweb.com/eric/tools/css/reset/
   3    v2.0 | 20110126
   4    License: none (public domain)
   5 */
   6 html, body, div, span, applet, object, iframe,
   7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   8 a, abbr, acronym, address, big, cite, code,
   9 del, dfn, em, img, ins, kbd, q, s, samp,
  10 small, strike, strong, sub, sup, tt, var,
  11 b, u, i, center,
  12 dl, dt, dd, ol, ul, li,
  13 fieldset, form, label, legend,
  14 table, caption, tbody, tfoot, thead, tr, th, td,
  15 article, aside, canvas, details, embed,
  16 figure, figcaption, footer, header, hgroup,
  17 menu, nav, output, ruby, section, summary,
  18 time, mark, audio, video {
  19   margin: 0;
  20   padding: 0;
  21   border: 0;
  22   font-size: 100%;
  23   font: inherit;
  24   vertical-align: baseline; }
  25
  26 /* HTML5 display-role reset for older browsers */
  27 article, aside, details, figcaption, figure,
  28 footer, header, hgroup, menu, nav, section {
  29   display: block; }
  30
  31 body {
  32   line-height: 1; }
  33
  34 ol, ul {
  35   list-style: none; }
  36
  37 blockquote, q {
  38   quotes: none; }
  39
  40 blockquote:before, blockquote:after,
  41 q:before, q:after {
  42   content: '';
  43   content: none; }
  44
  45 table {
  46   border-collapse: collapse;
  47   border-spacing: 0; }
  48
  49 h1 {
  50   font-family: 'Montserrat', sans-serif;
  51   font-weight: 800;
  52   text-transform: uppercase; }
  53
  54 h2 {
  55   font-family: 'Montserrat', sans-serif;
  56   font-weight: 800;
  57   text-transform: uppercase; }
  58
  59 h3 {
  60   font-family: 'Montserrat', sans-serif;
  61   font-weight: 800;
  62   text-transform: uppercase; }
  63
  64 h4 {
  65   font-family: 'Montserrat', sans-serif;
  66   font-weight: 800;
  67   text-transform: uppercase; }
  68
  69 h5 {
  70   font-family: 'Montserrat', sans-serif;
  71   font-weight: 800;
  72   text-transform: uppercase; }
  73
  74 h6 {
  75   font-family: 'Montserrat', sans-serif;
  76   font-weight: 800;
  77   text-transform: uppercase; }
  78
  79 div {
  80   margin: 0;
  81   padding: 0; }
  82
  83 .material-icons {
  84   line-height: 1em; }
  85
  86 dl dt {
  87   text-decoration: underline; }
  88 dl dd {
  89   margin-left: 2em; }
  90
  91 body {
  92   font-family: 'Open Sans', sans-serif;
  93   font-size: 16px;
  94   font-weight: 400;
  95   line-height: 1.5;
  96   background-color: #F5F5F5;
  97   background: radial-gradient(farthest-corner at 1% 1%, #F5F5F5 30%, #9E9E9E 100%); }
  98   body #wrapper {
  99     padding: 1em;
 100     padding-left: 4.5em;
 101     display: grid;
 102     grid-template-columns: 1fr 1fr 1fr 1fr;
 103     grid-template-rows: auto;
 104     grid-template-areas: "header header header header" "main main main main" "footer footer footer footer"; }
 105     body #wrapper #language {
 106       position: fixed;
 107       top: 0;
 108       left: 0;
 109       width: 7%;
 110       z-index: 99;
 111       margin: 0;
 112       padding: 0;
 113       color: #F5F5F5; }
 114     body #wrapper #menu {
 115       position: fixed;
 116       top: 0;
 117       left: 0;
 118       width: 10em;
 119       height: 100vh;
 120       background-color: #616161;
 121       -webkit-box-shadow: 0px 10px 25px #484848;
 122       -moz-box-shadow: 0px 10px 25px #484848;
 123       box-shadow: 0px 10px 25px #484848;
 124       transition: width 0.4s ease-in-out; }
 125       body #wrapper #menu.closed {
 126         width: 4em; }
 127         body #wrapper #menu.closed #menu-content {
 128           display: none; }
 129       body #wrapper #menu #menu-content {
 130         margin-top: 3em;
 131         text-align: center;
 132         padding-left: 1em;
 133         padding-right: 1em; }
 134     body #wrapper #header {
 135       grid-area: header;
 136       display: grid;
 137       grid-template-columns: 3fr 1fr;
 138       grid-template-rows: 1;
 139       grid-template-areas: "name photo"; }
 140       body #wrapper #header figure {
 141         grid-area: photo;
 142         width: 16em; }
 143         body #wrapper #header figure img {
 144           width: 16em;
 145           -webkit-box-shadow: -5px 5px 25px #484848;
 146           -moz-box-shadow: -5px 5px 25px #484848;
 147           box-shadow: -5px 5px 25px #484848; }
 148       body #wrapper #header #heading {
 149         grid-area: name;
 150         align-self: center;
 151         text-align: center;
 152         line-height: 2.5; }
 153         body #wrapper #header #heading div h1 {
 154           font-size: 3em;
 155           line-height: 2; }
 156         body #wrapper #header #heading div#address {
 157           text-transform: uppercase; }
 158           body #wrapper #header #heading div#address i {
 159             font-size: 1em;
 160             line-height: 1; }
 161     body #wrapper #main {
 162       grid-area: main; }
 163       body #wrapper #main #container #content {
 164         display: grid;
 165         grid-template-columns: 1fr 3fr;
 166         grid-template-rows: repeat(5, fit-content(100%));
 167         grid-column-gap: 1em;
 168         grid-template-areas: "profile-title profile-content" "working-title working-content" "studies-title studies-content" "knowledge-title knowledge-content" "personal-title personal-content"; }
 169         body #wrapper #main #container #content div, body #wrapper #main #container #content h2 {
 170           margin-top: 2em; }
 171         body #wrapper #main #container #content h2.personal-profile {
 172           grid-area: profile-title; }
 173         body #wrapper #main #container #content div.personal-profile {
 174           grid-area: profile-content;
 175           text-align: justify; }
 176         body #wrapper #main #container #content h2.working-experience {
 177           grid-area: working-title; }
 178         body #wrapper #main #container #content div.working-experience {
 179           grid-area: working-content; }
 180           body #wrapper #main #container #content div.working-experience div:first-child {
 181             margin-top: 0; }
 182         body #wrapper #main #container #content h2.studies {
 183           grid-area: studies-title; }
 184         body #wrapper #main #container #content div.studies {
 185           grid-area: studies-content; }
 186         body #wrapper #main #container #content h2.knowledge {
 187           grid-area: knowledge-title; }
 188         body #wrapper #main #container #content div.knowledge {
 189           grid-area: knowledge-content;
 190           text-align: justify; }
 191         body #wrapper #main #container #content h2.personal-details {
 192           grid-area: personal-title; }
 193         body #wrapper #main #container #content div.personal-details {
 194           grid-area: personal-content; }
 195         body #wrapper #main #container #content h2 {
 196           text-align: left; }
 197       body #wrapper #main #container #privacy {
 198         margin-top: 2em;
 199         display: grid;
 200         grid-template-columns: 1fr 3fr;
 201         grid-template-rows: auto;
 202         grid-row-gap: 1px;
 203         grid-template-areas: ". refs" ". privacy"; }
 204         body #wrapper #main #container #privacy div#refs {
 205           grid-area: refs; }
 206         body #wrapper #main #container #privacy div#notice {
 207           grid-area: privacy; }
 208         body #wrapper #main #container #privacy div#notice,
 209         body #wrapper #main #container #privacy div#refs {
 210           text-align: center;
 211           font-size: 0.7em;
 212           font-style: italic; }
 213     body #wrapper #footer {
 214       margin-top: 2em;
 215       font-size: 0.8em;
 216       grid-area: footer; }
 217       body #wrapper #footer p {
 218         display: grid;
 219         grid-template-columns: 1fr 1fr 1fr;
 220         grid-template-rows: auto;
 221         grid-column-gap: 1em;
 222         grid-template-areas: "mail name phone"; }
 223         body #wrapper #footer p span i {
 224           font-size: 0.75em; }
 225         body #wrapper #footer p span#mail {
 226           grid-area: mail;
 227           text-align: left; }
 228         body #wrapper #footer p span#name {
 229           grid-area: name;
 230           text-align: center; }
 231         body #wrapper #footer p span#phone {
 232           grid-area: phone;
 233           text-align: right; }
 234
 235 @page {
 236   size: A4;
 237   margin: 11mm 15mm 15mm 17mm; }
 238 @media print {
 239   body {
 240     background: none; }
 241     body #wrapper #language,
 242     body #wrapper #menu {
 243       display: none; }
 244     body #wrapper #header figure {
 245       width: 7em; }
 246       body #wrapper #header figure img {
 247         width: 7em;
 248         box-shadow: none; }
 249     body #wrapper #main #container #content div.working-experience div {
 250       page-break-inside: avoid; }
 251     body #wrapper #main #container #content div.knowledge {
 252       page-break-after: always !important; }
 253     body #wrapper #footer {
 254       position: fixed;
 255       bottom: 0;
 256       width: 100%; }
 257
 258   html, body {
 259     width: 210mm;
 260     height: 297mm; } }
 261
 262 /*# sourceMappingURL=style.css.map */