igor.milhit/css/style.css

/*
   ***************

   main stylesheet

   ***************
 */
/*
  ********************

    FONTS

  ********************
*/
/*
  ********************

     COLORS

  ********************
*/
/*
  ********************

      BREAKPOINTS

  ********************
*/
/*
  ********************

     OTHER MIXINS

  ********************
*/
html,
body {
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: [left-gutter] 1em [content] auto [right-gutter] 1em;
  grid-template-rows: [header] 30% [body] auto [footer] 30%;
  grid-column-gap: 0;
}
@media (min-width: 70em) {
  body {
    grid-template-columns: [left-gutter] 1fr [content] 2fr [right-gutter] 1fr;
    grid-column-gap: 1em;
  }
}
@media (min-width: 50em) and (max-width: 70em) {
  body {
    grid-template-columns: [left-gutter] 1fr [content] 4fr [right-gutter] 1fr;
    grid-column-gap: 1em;
  }
}

.header {
  grid-row: header;
  grid-column: left-gutter/4;
  display: grid;
  grid-template-columns: [header-left-gutter] 1em [title] auto [header-right-gutter] 1em;
  grid-template-rows: [title] auto [menu] auto;
  grid-column-gap: 0;
}
@media (min-width: 70em) {
  .header {
    grid-template-columns: [header-left-gutter] 1fr [title] 2fr [header-right-gutter] 1fr;
    grid-template-rows: [title] auto [menu] auto;
    grid-column-gap: 1em;
  }
}
@media (min-width: 50em) and (max-width: 70em) {
  .header {
    grid-template-columns: [header-left-gutter] 1fr [title] 4fr [header-right-gutter] 1fr;
    grid-template-rows: [title] auto [menu] auto;
    grid-column-gap: 1em;
  }
}
.header .title {
  grid-column: title;
  grid-row: title;
}
.header .menu {
  grid-row: menu;
  grid-column: title;
}

.footer {
  grid-row: footer;
  grid-column: left-gutter/4;
  display: grid;
  grid-template-columns: [footer-left-gutter] 1em [center] auto [footer-right-gutter] 1em;
  grid-column-gap: 0;
}
@media (min-width: 70em) {
  .footer {
    grid-template-columns: [footer-left-gutter] 1fr [center] 2fr [footer-right-gutter] 1fr;
    grid-column-gap: 1em;
  }
}
@media (min-width: 50em) and (max-width: 70em) {
  .footer {
    grid-template-columns: [footer-left-gutter] 1fr [center] 4fr [footer-right-gutter] 1fr;
    grid-column-gap: 1em;
  }
}
.footer ul {
  grid-column: center;
}

.content {
  grid-row: body;
  grid-column: content;
}

@media (min-width: 70em) {
  #contact {
    display: grid;
    grid-template-columns: [pers] 1fr [prof] 1fr;
    grid-column-gap: 1em;
  }
  #contact .perso {
    grid-column: pers;
  }
  #contact .prof {
    grid-column: prof;
  }
}

@font-face {
  font-family: "merriweatherlight";
  src: url("../fontsmerriweather_light-webfont.eot");
  src: url("../fontsmerriweather_light-webfont.eot?#iefix") format("embedded-opentype"), url("../fontsmerriweather_light-webfont.woff2") format("woff2"), url("../fontsmerriweather_light-webfont.woff") format("woff"), url("../fontsmerriweather_light-webfont.ttf") format("truetype"), url("../fontsmerriweather_light-webfont.svg#merriweather_lightregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "merriweatherlight";
  src: url("../fontsmerriweather-lightitalic-webfont.eot");
  src: url("../fontsmerriweather-lightitalic-webfont.eot?#iefix") format("embedded-opentype"), url("../fontsmerriweather-lightitalic-webfont.woff2") format("woff2"), url("../fontsmerriweather-lightitalic-webfont.woff") format("woff"), url("../fontsmerriweather-lightitalic-webfont.ttf") format("truetype"), url("../fontsmerriweather-lightitalic-webfont.svg#merriweatherlight_italic") format("svg");
  font-weight: normal;
  font-style: italic;
}
.header {
  background-color: #67536c;
  color: #eed7f4;
}
.header .title {
  display: flex;
  align-items: center;
  margin-top: 1em;
  padding-bottom: 0.5em;
}
.header .title .logo {
  height: 75%;
  border-radius: 50%;
}
.header .title h1 {
  font-weight: 200;
  flex-grow: 1;
  margin-left: 1em;
}
.header .menu ul {
  padding-left: 0;
  list-style: none;
}
.header .menu ul li {
  display: inline-block;
}
.header .menu ul {
  margin-top: 0;
}
.header .menu li {
  margin-right: 0.1em;
  margin-top: 1em;
}
.header .menu a {
  color: #eed7f4;
  text-decoration: none;
  padding: 5px;
  border: 1px solid;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #333333;
}

.content {
  color: #333333;
}
.content a {
  color: #bb5fd3;
}
.content a:hover {
  color: #eed7f4;
}
.content a:visited {
  color: #67536c;
}

#contact {
  font-size: 1.125rem;
}
#contact ul {
  padding-left: 0;
}
#contact ul li {
  list-style: none;
}

#personnel,
#professionnel,
#contact,
#online {
  margin-top: 2em;
}

#online section {
  display: flex;
  flex-wrap: wrap;
}
#online h2 {
  margin-bottom: 0;
}
#online p {
  margin-right: 1em;
}

.footer {
  background-color: #67536c;
  color: #eed7f4;
  text-align: right;
  margin-top: 2em;
}
.footer ul {
  margin: 2em 0;
}
.footer ul {
  padding-left: 0;
  list-style: none;
}
.footer ul li {
  display: inline-block;
}
.footer a {
  color: #eed7f4;
  text-decoration: none;
}

body {
  font-family: "merriweatherlight", serif;
  font-size: 1.25rem;
}

code {
  font-size: 0.875rem;
}

.smallcaps {
  font-variant: small-caps;
}

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