Ajout d'une CSS print

404.html

@@ -23,7 +23,8 @@
     <!-- Favicon  -->
     <link rel="icon" href="images/favicon.svg">
 
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="includes/style.css" media="screen">
+    <link rel="stylesheet" href="includes/print.css" media="print">
 
     <!-- Matomo -->
     <script type="text/javascript">

includes/print.css

@@ -0,0 +1,224 @@
+/**
+Généralités
+ */
+
+@font-face {
+    font-family: 'Montserrat';
+    src: local("Monserrat Regular"),
+    url('../fonts/Montserrat/montserrat-regular-webfont.woff2') format('woff2'),
+    url('../fonts/Montserrat/montserrat-regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Montserrat';
+    src: local("Monserrat SemiBold"),
+    url('../fonts/Montserrat/montserrat-semibold-webfont.woff2') format('woff2'),
+    url('../fonts/Montserrat/montserrat-semibold-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+:root {
+    --blue: #008dc6;
+    --citrus: #90ca28;
+    --dark-grey: #5b5b5b;
+}
+
+body {
+    margin: 0;
+    font-size: 16pt;
+    font-family: "Montserrat", sans-serif;
+    position: relative;
+    line-height: 1.3;
+    font-weight: 400;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-variant: small-caps;
+    font-weight: 600;
+}
+
+strong {
+    font-weight: 600;
+}
+
+.featured {
+    color: var(--citrus);
+}
+
+a {
+    color: inherit;
+}
+
+/***
+** éléments à masquer 
+***/
+
+.toggle,
+section.content nav,
+.toggle-accordion-content,
+.accordion-close,
+.project-buttons,
+.mentions nav,
+.err404 .half.blue {
+    display: none;
+}
+
+/**
+Accueil /  Fond
+ */
+
+header .half {
+    position: relative;
+    height: 110pt;
+}
+
+header .half p {
+    position: absolute;
+    margin: 0;
+}
+
+header  p.slogan {
+    bottom: 5em;
+    width: 100vw;
+    height: 1em;
+    margin: auto;
+    display: block;
+    text-align: center;
+    font-weight: 400;
+}
+header .name {
+    width: 5.5em;
+    /*! padding-left: 5px; */
+    text-transform: uppercase;
+    font-size: 3.2em;
+    font-weight: 600;
+    line-height: 0.7em;
+    left: calc(50vw - 2.75em);
+}
+
+header .name span.mar {
+    letter-spacing: -2px;
+}
+
+header .name span.cha {
+    letter-spacing: -0.09em;
+}
+
+header .name span.ha {
+    letter-spacing: 0.01em;
+}
+
+header .white .name {
+    bottom: -0.06em;
+}
+
+header .blue .name {
+    top: .055em;
+}
+
+header .name span.light {
+    opacity: 0.3;
+}
+
+header .white {
+    margin: 0;
+    color: var(--blue);
+    background-color: white;
+}
+
+header .blue {
+    color: white;
+    background-color: var(--blue);
+}
+
+
+/**
+* Contenu 
+**/
+
+.resume {
+    font-size: 1.3em;
+}
+
+/* LISTES FUNKY */
+
+section .content .historique,
+section .content .picto-list {
+    list-style: none;
+    position: relative;
+    padding: 0;
+}
+
+section .content .historique li {
+    position: relative;
+    padding-left: 2.5em;
+    margin-bottom: 0.6em;
+}
+
+section .content .historique span.date {
+    position: absolute;
+    width: 2.3em;
+    height: 1em;
+    font-size: 0.8em;
+    left: 0;
+    top: 3px;
+    color: var(--blue);
+}
+
+section .content .picto-list li {
+    position: relative;
+    padding-left: 2.3em;
+    margin-bottom: 0.8em;
+}
+
+section .content .picto-list svg {
+    position: absolute;
+    width: 2.3em;
+    height: 2em;
+    font-size: 0.7em;
+    left: 0;
+    top: 3px;
+    color: var(--citrus);
+}
+
+section .content .historique span.detail {
+    font-style: italic;
+    font-size: 0.9em;
+}
+
+/* --- */
+
+
+/* ICONES CONTACT */
+
+.contact {
+    padding-left : 1.5em;
+}
+
+.contact .button {
+    display: block;
+    position: relative;
+    margin-top: -1.1em;
+    margin-left: -1.5em;
+    width: 1em;
+    height: 1em;
+}
+
+.contact .button svg {
+    width: 1em;
+    height: 1em;
+    color: var(--blue);
+}
+
+/* --- */
+
+
+/* 404 */
+
+
+.err404 .half.white .err404 {
+    font-size: 5em;
+}

includes/style.css

@@ -1,12 +1,11 @@
 /**
 Généralités
  */
-/* polices à mettre en font-face une fois largeurs déterminées*/
 @font-face {
     font-family: 'Montserrat';
     src: local("Monserrat Regular"),
-    url('fonts/Montserrat/montserrat-regular-webfont.woff2') format('woff2'),
+    url('../fonts/Montserrat/montserrat-regular-webfont.woff2') format('woff2'),
-    url('fonts/Montserrat/montserrat-regular-webfont.woff') format('woff');
+    url('../fonts/Montserrat/montserrat-regular-webfont.woff') format('woff');
     font-weight: 400;
     font-style: normal;
 }
@@ -14,8 +13,8 @@ Généralités
 @font-face {
     font-family: 'Montserrat';
     src: local("Monserrat SemiBold"),
-    url('fonts/Montserrat/montserrat-semibold-webfont.woff2') format('woff2'),
+    url('../fonts/Montserrat/montserrat-semibold-webfont.woff2') format('woff2'),
-    url('fonts/Montserrat/montserrat-semibold-webfont.woff') format('woff');
+    url('../fonts/Montserrat/montserrat-semibold-webfont.woff') format('woff');
     font-weight: 600;
     font-style: normal;
 }

index.html

@@ -23,7 +23,8 @@
     <!-- Favicon  -->
     <link rel="icon" href="images/favicon.svg">
 
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="includes/style.css" media="screen">
+    <link rel="stylesheet" href="includes/print.css" media="print">
 
     <!-- Matomo -->
     <script type="text/javascript">

mentions-legales.html

@@ -23,7 +23,8 @@
     <!-- Favicon  -->
     <link rel="icon" href="images/favicon.svg">
 
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="includes/style.css" media="screen">
+    <link rel="stylesheet" href="includes/print.css" media="print">
 
     <!-- Matomo -->
     <script type="text/javascript">