Add some formatting (and TOC)

capsule.opam

@@ -22,11 +22,11 @@ depends: [
   "dune" { >= "3.2" }
   "logs" {>= "0.7.0" }
   "cmdliner" { >= "1.0.0"}
+  "omd" { >= "2.0.0~alpha2" }
   "preface" { >= "0.1.0"}
   "yocaml" {pinned}
   "yocaml_unix" {pinned}
   "yocaml_yaml" {pinned}
-  "yocaml_markdown" {pinned}
   "yocaml_jingoo" {pinned}
   "mdx" {with-test}
   "merlin"

content/pages/test.md

@@ -5,26 +5,44 @@ synopsis:
   Une page d'exemple est objectivement très importante
   pour construire... au moins, _experimenter_ le fonctionnement
   du **générateur** !
-creation_date: 2022-05-25
+creation_date: 2022-05-24
+update_date: 2022-05-25
 tags: 
   - examples 
   - test
   - capsule
 ---
 
-# Qu'est-ce que le Lorem Ipsum?
+# Qu'est-ce que le `Lorem Ipsum`?
 
 Le **Lorem Ipsum** est simplement du faux texte employé dans la composition et
 la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de
 l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla
 ensemble des morceaux de texte pour réaliser un livre spécimen de polices de
 texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la
-bureautique informatique, sans que son contenu n'en soit modifié. Il a été
+bureautique informatique, sans que son contenu n'en soit modifié.
+
+## Un sous-titre en _gras_
+
+Il a été
 popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant
 des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des
 applications de mise en page de texte, comme Aldus PageMaker.
 
-## D'où vient-il?
+```ocaml
+type (_, _) path =
+  | Root : ('handler_return, 'handler_return) path
+  | Constant :
+      ('handler_function, 'handler_return) path * string
+      -> ('handler_function, 'handler_return) path
+  | Variable :
+      ('handler_function, 'new_variable -> 'handler_return) path
+      * 'new_variable variable
+      -> ('handler_function, 'handler_return) path
+let test = "foo"
+```
+
+### D'où vient-il?
 
 Contrairement à une opinion répandue, le Lorem Ipsum n'est pas simplement du
 texte aléatoire. Il trouve ses racines dans une oeuvre de la littérature latine

css/default.css

@@ -1,9 +1,117 @@
+:root {
+    --layout-bg-color: #ffffff;
+    --layout-font-color: #111111;
+    --layout-bg-rev-color: #e2e2e2;
+    --layout-font-rev-color: #333333;
+    --serif-font: 'Inria Serif', serif;
+    --sans-serif-font: 'Libre Franklin', sans-serif;
+    --mono-font: 'Inconsolata', monospace;
+}
+
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 body {
-    font-family: monospace;
+    min-height: 100vh;
+    background-color: var(--layout-bg-color);
+    color: var(--layout-font-color);
+    font-family: var(--serif-font);
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 400;
+    line-height: 1.8;
+}
+
+.container {
+    width: 100%;
+    max-width: 960px;
+    margin: auto;
+}
+
+main {
+    flex: 1;
+}
+
+footer {
+    flex: 0;
+    background-color: var(--layout-bg-rev-color);
+    color: var(--layout-font-rev-color);
+}
+
+.header {
+    margin: 64px 0 72px 0;
+}
+
+.header h1 {
+    font-size: 285%;
+    text-transform: uppercase;
+    font-weight: 900;
+    font-family: var(--sans-serif-font);
+    margin: 0;
+}
+
+.header time {
+    font-family: var(--mono-font);
+    background-color: var(--layout-bg-rev-color);
+    color: var(--layout-font-rev-color);
+    padding: 4px;
+    margin-right: 8px;
+    font-size: 80%;
+    font-weight: 600;
+}
+
+.header time:last-child {
+    margin-right: 0;
+}
+
+
+.header time::before {
+    font-family: var(--sans-serif-font);
+}
+
+.published-at::before {
+    content:"publié le";
+}
+
+.updated-at::before {
+    content:"modifié le";
+}
+
+.table-of-contents {
+    margin: 32px 0 64px;
+}
+
+.table-of-contents ul {
+    padding-left: 32px;
+    list-style: square;
+}
+
+.table-of-contents ul:first-child {
+    padding-left: 0;
+    list-style: none;
+}
+
+article {
+    margin-bottom: 172px;
+}
+
+
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+    font-family: var(--sans-serif-font);
+    font-weight: 800;
+}
+
+code {
+    font-family: var(--mono-font);
 }