ventresMousDotclearTheme/style-2018-09-13.css

/*
#d3d4d9 gris clair
#4b88a2 bleu vert
#bb0a21 rouge
#252627 gris foncé
#fff9fb blanc
*/

@font-face {
  font-family: 'komika';
  src: url('font/komika.eot');
  src: url('font/komika.eot?#iefix') format('embedded-opentype'), url('font/komika.woff') format('woff'), url('font/komika.ttf') format('truetype'), url('font/komika.svg#komika') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'lato';
  src: url('font/lato-regular.eot');
  src: url('font/lato-regular.eot?#iefix') format('embedded-opentype'), url('font/lato-regular.woff2') format('woff2'), url('font/lato-regular.woff') format('woff'), url('font/lato-regular.ttf') format('truetype'), url('font/lato-regular.svg#latoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'lato';
  src: url('font/lato-italic.eot');
  src: url('font/lato-italic.eot?#iefix') format('embedded-opentype'), url('font/lato-italic.woff2') format('woff2'), url('font/lato-italic.woff') format('woff'), url('font/lato-italic.ttf') format('truetype'), url('font/lato-italic.svg#latoitalic') format('svg');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'lato';
  src: url('font/lato-bolditalic.eot');
  src: url('font/lato-bolditalic.eot?#iefix') format('embedded-opentype'), url('font/lato-bolditalic.woff2') format('woff2'), url('font/lato-bolditalic.woff') format('woff'), url('font/lato-bolditalic.ttf') format('truetype'), url('font/lato-bolditalic.svg#latobold_italic') format('svg');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'lato';
  src: url('font/lato-bold.eot');
  src: url('font/lato-bold.eot?#iefix') format('embedded-opentype'), url('font/lato-bold.woff2') format('woff2'), url('font/lato-bold.woff') format('woff'), url('font/lato-bold.ttf') format('truetype'), url('font/lato-bold.svg#latobold') format('svg');
  font-weight: bold;
  font-style: normal;
}

nav, body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 130%;
  font-size: 110%;
}

nav {
  width: 100%;
}

input {
  font-family: sans-serif;
}

@media (min-width: 40em) {
  body {
    font-family: lato, sans-serif;
    background-color: #d3d4d9;
  }
  input {
    font-family: lato, sans-serif;
  }
}

a {
  color: #252627;
}

audio {
  box-shadow: -0.1em 0.1em 1em 0.1em rgba(0, 0, 0, 0.3);
}

li {
  list-style-type: none;
  position: relative;
  margin-bottom: 0.5em;
}

li::before {
  display: block;
  position: absolute;
  content: ' ';
  width: 1em;
  height: 1em;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYmIwYTIxIiBzdHJva2Utd2lkdGg9IjEuOSI+PHBhdGggZD0iTTE2IDlhNyA3IDAgMSAxLTctNyIgY29sb3I9IiMwMDAiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PHBhdGggZD0iTTUuNyAxMi4zbDQuNi00LjZtLTQuNiAwbDQuNiA0LjYiLz48L2c+PC9zdmc+);
  background-repeat: no-repeat;
  left: -1.5em;
  top: 0.1em;
}

img, audio {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

img.EntryFirstImage {
  max-width: 100%;
  display: block;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
}

section, aside {
  background-color: #fff9fb;
  overflow-x: hidden;
  padding: 1.5em 1.5em 0 1.5em;
}

header p {
  padding: 1.5em 1.5em 0 1.5em;
  color: rgba(0, 0, 0, .4);
  font-size: 1em;
}

article {
  background-color: #fff9fb;
}

@media (min-width: 40em) {
  section, aside {
    max-width: 40em;
    margin: 1em auto;
    background-color: #fff9fb;
    border-radius: 3em;
    box-shadow: -0.1em 0.1em 1em 0.1em rgba(0, 0, 0, 0.3);
  }
  img.EntryFirstImage {
    max-width: 15em;
    float: right;
    left: none;
    transform: none;
  }
  article {
    overflow: auto;
  }
}

@media (min-width: 76em) {
  /* mise en deux colonnes */
  section {
    float: left;
    width: 40em;
    margin: 0.5em 0.5em 0.5em 2em;
  }
  aside {
    float: left;
    width: 20em;
    margin: 0.5em 0.5em;
  }
}

footer {
  clear: both;
  padding: 1em 2em;
}

/* Prelude */

nav ul li::before {
  display: none;
}

nav ul {
  margin: 0;
  padding-left: 1.5em;
}

@media (min-width: 40em) {
  nav ul {
    text-align: center;
  }
  nav ul li {
    display: inline-block;
  }
  nav ul li::after {
    content: ' | ';
  }
  nav ul li:last-child::after {
    display: none;
  }
}

/* Titles */

h1, h2, h3, h4, h5, h6 {
  font-family: komika;
}

h1 {
  background-color: #bb0a21;
  margin-top: 0;
  font-size: 150%;
}

h2 {
  background-color: #252627;
  font-size: 120%;
}

h2 em {
  font-size: 80%;
}

h1, h2 {
  position: relative;
  left: 0;
  color: #fff9fb;
  padding: 1.3em 0.7em 1.3em 4.2em;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDIuOSIgaGVpZ2h0PSIzMDIuOSI+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIwIj48cGF0aCBkPSJNMjkzIDE1MS40YzAgNzgtNjMuNSAxNDEuNS0xNDEuNiAxNDEuNUM3My40IDI5MyAxMCAyMjkgMTAgMTUxIDEwIDczLjIgNzMuMyAxMCAxNTEuNCAxMGM3OCAwIDE0MS41IDYzLjMgMTQxLjUgMTQxLjR6IiBjb2xvcj0iIzAwMCIgb3ZlcmZsb3c9InZpc2libGUiLz48ZyBzdHJva2Utd2lkdGg9IjEyIj48cGF0aCBkPSJNMTcwLjMgMTc3YzAgMjQuNC0yMCA0NC4zLTQ0LjQgNDQuMy0yNSAwLTQ1LTIwLTQ1LTQ0LjQgMC0yNSAyMC00NSA0NC40LTQ1IiBjb2xvcj0iIzAwMCIgb3ZlcmZsb3c9InZpc2libGUiLz48cGF0aCBkPSJNMTA1LjQgMTk3LjVsMjktMjltLTI5IDBsMjkgMjkiLz48L2c+PC9nPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-size: 3.7em;
  background-position: 0.2em center;
  line-height: 150%;
}

.homelink {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 3.7em;
  height: 100%;
  overflow: hidden;
  color: transparent;
}

@media (max-width: 40em) {
  h1 {
    font-size: 140%;
  }
  h2 {
    font-size: 100%;
    position: relative;
    left: -1.5em;
    width: calc(100% - 1.9em);
  }
}

@media (min-width: 40em) {
  h1, h2 {
    padding: 1.3em 0.7em 1.3em 4.2em;
  }
  h2 {
    border-radius: 4em;
  }
}

h1 a, h2 a {
  color: #fff9fb;
  text-decoration: none;
}

/* Post info */

p.post-info, p.post-info-co {
  text-align: center;
  color: #4b88a2;
  font-size: 90%;
}

p.day-date {
  display: none;
}

/* Tags */

ul.post-tags, #blognav .tags ul, #blognav .tags p {
  margin: 0;
  padding: 0;
  text-align: center;
}

@media (max-width: 40em) {
  ul.post-tags, #blognav .tags ul {
    font-size: 80%;
  }
}

ul.post-tags li, #blognav .tags li {
  list-style-type: none;
  display: inline-block;
}

ul.post-tags li::before, #blognav .tags li::before {
  display: none;
}

ul.post-tags li a, #blognav .tags li a {
  display: block;
  margin: 0 0.5em 0 0;
  padding: 0;
  background-color: #4b88a2;
  border-radius: 2em;
  padding: 0.5em 1em;
  color: #fff9fb;
  text-decoration: none;
}

/* Sidebar */

#sidebar {
  background-color: #d3d4d9;
}

/* Footer */

footer {
  background-color: #bb0a21;
  color: #d3d4d9;
}

@media (min-width: 40em) {
  footer {
    border-radius: 0 0 3em 3em;
  }
}

footer a {
  color: #fff9fb;
}

/* Forms */

fieldset {
  border: none;
  background-color: #4b88a2;
  color: #fff;
}

input[type="submit"] {
  padding: 0.5em 1em;
  font-size: 110%;
}

input[type="text"], textarea {
  padding: 0.5em 1em;
  font-size: 110%;
}

.field {
  width: 100%;
}

.field input, .field textarea {
  width: 100%;
  box-sizing: border-box;
}

/*Search form */

#search input[type="text"] {
  width: 10em;
}

.wholearticlelink {
  text-decoration: none;
}