diff --git a/.eleventy.js b/.eleventy.js
index 04ab4b0..924829d 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -5,6 +5,8 @@ const pluginNavigation = require("@11ty/eleventy-navigation");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(pluginNavigation);
+ eleventyConfig.addPassthroughCopy("css");
+
eleventyConfig.addFilter("readableDate", dateObj => {
return DateTime.fromJSDate(dateObj, {zone: 'utc'}).setLocale("fr").toFormat("dd LLL yyyy");
});
diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index 8ea038b..210b482 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -8,8 +8,6 @@
-
-
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000..25c9c82
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,219 @@
+/* Colors */
+:root {
+ --lightgray: #e0e0e0;
+ --gray: #C0C0C0;
+ --darkgray: #333;
+ --navy: #17050F;
+ --blue: #082840;
+ --white: #fff;
+}
+
+/* Global stylesheet */
+* {
+ box-sizing: border-box;
+}
+
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font-family: -apple-system, system-ui, sans-serif;
+ color: var(--darkgray);
+ background-color: var(--white);
+}
+p:last-child {
+ margin-bottom: 0;
+}
+p,
+.tmpl-post li,
+img {
+ max-width: 37.5em; /* 600px /16 */
+}
+p,
+.tmpl-post li {
+ line-height: 1.45;
+}
+a[href] {
+ color: var(--blue);
+}
+a[href]:visited {
+ color: var(--navy);
+}
+main {
+ padding: 1rem;
+}
+main :first-child {
+ margin-top: 0;
+}
+header {
+ border-bottom: 1px dashed var(--lightgray);
+}
+header:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+table {
+ margin: 1em 0;
+}
+table td,
+table th {
+ padding-right: 1em;
+}
+
+pre,
+code {
+ font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+ line-height: 1.5;
+}
+pre {
+ font-size: 14px;
+ line-height: 1.375;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ -moz-tab-size: 2;
+ -o-tab-size: 2;
+ tab-size: 2;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ padding: 1em;
+ margin: .5em 0;
+ background-color: #f6f6f6;
+}
+code {
+ word-break: break-all;
+}
+
+/* Header */
+.home {
+ padding: 0 1rem;
+ float: left;
+ margin: 1rem 0; /* 16px /16 */
+ font-size: 1em; /* 16px /16 */
+}
+.home :link:not(:hover) {
+ text-decoration: none;
+}
+
+/* Nav */
+.nav {
+ padding: 0;
+ list-style: none;
+ float: left;
+ margin-left: 1em;
+}
+.nav-item {
+ display: inline-block;
+ margin-right: 1em;
+}
+.nav-item a[href]:not(:hover) {
+ text-decoration: none;
+}
+.nav-item-active {
+ font-weight: 700;
+ text-decoration: underline;
+}
+
+/* Posts list */
+.postlist {
+ list-style: none;
+ padding: 0;
+}
+.postlist-item {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ counter-increment: start-from -1;
+ line-height: 1.8;
+}
+.postlist-item:before {
+ display: inline-block;
+ pointer-events: none;
+ content: "" counter(start-from, decimal-leading-zero) ". ";
+ line-height: 100%;
+ text-align: right;
+}
+.postlist-date,
+.postlist-item:before {
+ font-size: 0.8125em; /* 13px /16 */
+ color: var(--darkgray);
+}
+.postlist-date {
+ word-spacing: -0.5px;
+}
+.postlist-link {
+ padding-left: .25em;
+ padding-right: .25em;
+ text-underline-position: from-font;
+ text-underline-offset: 0;
+ text-decoration-thickness: 1px;
+}
+.postlist-item-active .postlist-link {
+ font-weight: bold;
+}
+.tmpl-home .postlist-link {
+ font-size: 1.1875em; /* 19px /16 */
+ font-weight: 700;
+}
+
+
+/* Tags */
+.post-tag {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-transform: uppercase;
+ font-size: 0.75em; /* 12px /16 */
+ padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
+ margin-left: 0.6666666666667em; /* 8px /12 */
+ margin-top: 0.5em; /* 6px /12 */
+ margin-bottom: 0.5em; /* 6px /12 */
+ color: var(--darkgray);
+ border: 1px solid var(--gray);
+ border-radius: 0.25em; /* 3px /12 */
+ text-decoration: none;
+ line-height: 1.8;
+}
+a[href].post-tag,
+a[href].post-tag:visited {
+ color: inherit;
+}
+a[href].post-tag:hover,
+a[href].post-tag:focus {
+ background-color: var(--lightgray);
+}
+.postlist-item > .post-tag {
+ align-self: center;
+}
+
+/* Warning */
+.warning {
+ background-color: #ffc;
+ padding: 1em 0.625em; /* 16px 10px /16 */
+}
+.warning ol:only-child {
+ margin: 0;
+}
+
+/* Direct Links / Markdown Headers */
+.direct-link {
+ font-family: sans-serif;
+ text-decoration: none;
+ font-style: normal;
+ margin-left: .1em;
+}
+a[href].direct-link,
+a[href].direct-link:visited {
+ color: transparent;
+}
+a[href].direct-link:focus,
+a[href].direct-link:focus:visited,
+:hover > a[href].direct-link,
+:hover > a[href].direct-link:visited {
+ color: #aaa;
+}