From 7d76cab5a919d362eaf2a0273b9c949f02d1697e Mon Sep 17 00:00:00 2001
From: Quentin Dufour <quentin@deuxfleurs.fr>
Date: Wed, 14 Jul 2021 21:40:13 +0200
Subject: [PATCH] Become responsive

---
 _includes/footer.html                         |   9 +-
 _layouts/default.html                         |   1 +
 _layouts/post.html                            |  24 +--
 _posts/2021-03-05-latex-dvi-integrer-image.md |   1 -
 assets/css/highlight.css                      | 150 ++++++++++++++++++
 assets/css/style.css                          | 148 +++++++++++++----
 index.html                                    |  12 +-
 keys.txt => ssh.keys                          |   0
 8 files changed, 296 insertions(+), 49 deletions(-)
 create mode 100644 assets/css/highlight.css
 rename keys.txt => ssh.keys (100%)
diff --git a/_includes/footer.html b/_includes/footer.html
index f6b6ad0..848764f 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,3 +1,8 @@
-<footer id="footer">
-    <p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.author }}</p>
+<footer>
+  <p>License <a href="http://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1">CC BY-SA 4.0</a>.
+     Les sources sont accessibles via le <a href="https://git.deuxfleurs.fr/quentin/quentin.dufour.io">dépôt Git</a>.
+  </p>
+  <p>Ce site est propulsé par <a href="https://jekyllrb.com/">Jekyll</a>,
+     servi par <a href="https://garagehq.deuxfleurs.fr">Garage</a> et hébergé par 
+     <a href="https://deuxfleurs.fr">Deuxfleurs</a>.</p>
 </footer>
diff --git a/_layouts/default.html b/_layouts/default.html
index dbc2819..0c30ddb 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -9,6 +9,7 @@
     <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="/feed.xml">
     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/typo.css">
+    <link rel="stylesheet" href="/assets/css/highlight.css">
     <link rel="shortcut icon" href="/assets/images/favicon.ico">
   </head>
   <body>
diff --git a/_layouts/post.html b/_layouts/post.html
index 9ffdda8..0c6ae35 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,12 +2,18 @@
 layout: default
 ---
 
-<article class="post">
-    <header>
-        <h1>{{ page.title }}</h1>
-        <h2 class="headline">{{ page.date | date:"%B %-d, %Y" }}</h2>
-    </header>
-    <section id="post-body">
-        {{content}}
-    </section>
-</article>
+<header>
+  <h1>{{ page.title }}</h1>
+  <div class="meta">Publié le {{ page.date | date:"%d/%m/%Y" }}</div>
+</header>
+
+<main>
+  <article class="post">
+    <div class="sidelinks"> <a href="/">← Retour</a> </div>
+    {{content}}
+    <div class="sidelinks"> <a href="/">← Retour</a> </div>
+  </article>
+</main>
+
+
+{% include footer.html %}
diff --git a/_posts/2021-03-05-latex-dvi-integrer-image.md b/_posts/2021-03-05-latex-dvi-integrer-image.md
index c483860..4136122 100644
--- a/_posts/2021-03-05-latex-dvi-integrer-image.md
+++ b/_posts/2021-03-05-latex-dvi-integrer-image.md
@@ -11,7 +11,6 @@ tags:
 
 Pour les compilateurs LaTeX compilant vers le format DVI-Tex (DeVice Independent) / PostScript, 
 il n'est pas possible d'intégrer directement des images au format JPG, PNG ou autre.
-
 Si aujourd'hui le plus simple est d'utiliser un compilateur LaTeX qui produit des fichiers au format PDF et supporte les formats d'image précédents,
 ce n'est pas toujours possible.
 
diff --git a/assets/css/highlight.css b/assets/css/highlight.css
new file mode 100644
index 0000000..05f6b0b
--- /dev/null
+++ b/assets/css/highlight.css
@@ -0,0 +1,150 @@
+.highlight table td { padding: 5px; }
+.highlight table pre { margin: 0; }
+.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1 {
+  color: #888888;
+}
+.highlight .cp {
+  color: #cc0000;
+  font-weight: bold;
+}
+.highlight .cs {
+  color: #cc0000;
+  background-color: #fff0f0;
+  font-weight: bold;
+}
+.highlight .err {
+  color: #a61717;
+  background-color: #e3d2d2;
+}
+.highlight .gr {
+  color: #aa0000;
+}
+.highlight .gh {
+  color: #333333;
+}
+.highlight .gu {
+  color: #666666;
+}
+.highlight .gd {
+  color: #000000;
+  background-color: #ffdddd;
+}
+.highlight .gi {
+  color: #000000;
+  background-color: #ddffdd;
+}
+.highlight .ge {
+  font-style: italic;
+}
+.highlight .gs {
+  font-weight: bold;
+}
+.highlight .gl {
+  color: #888888;
+}
+.highlight .go {
+  color: #888888;
+}
+.highlight .gp {
+  color: #555555;
+}
+.highlight .gt {
+  color: #aa0000;
+}
+.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kr, .highlight .kv {
+  color: #008800;
+  font-weight: bold;
+}
+.highlight .kp {
+  color: #008800;
+}
+.highlight .kt {
+  color: #888888;
+  font-weight: bold;
+}
+.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+  color: #0000dd;
+  font-weight: bold;
+}
+.highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .s1 {
+  color: #dd2200;
+  background-color: #fff0f0;
+}
+.highlight .sa {
+  color: #008800;
+  font-weight: bold;
+}
+.highlight .se {
+  color: #0044dd;
+  background-color: #fff0f0;
+}
+.highlight .si {
+  color: #3333bb;
+  background-color: #fff0f0;
+}
+.highlight .sx {
+  color: #22bb22;
+  background-color: #f0fff0;
+}
+.highlight .sr {
+  color: #008800;
+}
+.highlight .ss {
+  color: #aa6600;
+  background-color: #fff0f0;
+}
+.highlight .na {
+  color: #336699;
+}
+.highlight .nb, .highlight .bp {
+  color: #003388;
+}
+.highlight .nc {
+  color: #bb0066;
+  font-weight: bold;
+}
+.highlight .no {
+  color: #003366;
+  font-weight: bold;
+}
+.highlight .nd {
+  color: #555555;
+}
+.highlight .ne {
+  color: #bb0066;
+  font-weight: bold;
+}
+.highlight .nf, .highlight .fm {
+  color: #0066bb;
+  font-weight: bold;
+}
+.highlight .nl {
+  color: #336699;
+}
+.highlight .nn {
+  color: #bb0066;
+  font-weight: bold;
+}
+.highlight .py {
+  color: #336699;
+  font-weight: bold;
+}
+.highlight .nt {
+  color: #bb0066;
+  font-weight: bold;
+}
+.highlight .nv, .highlight .vc, .highlight .vm {
+  color: #336699;
+}
+.highlight .vg {
+  color: #dd7700;
+}
+.highlight .vi {
+  color: #3333bb;
+}
+.highlight .ow {
+  color: #008800;
+}
+.highlight .w {
+  color: #bbbbbb;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index b3e1b49..86b3629 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -8,6 +8,12 @@ html {
   --color-second: #ffc0ba80;
 }
 
+@media screen and (max-width: 499px) {
+  html {
+    font-size: 50%;
+  }
+}
+
 body {
   margin: 0px; 
   padding: 0px;
@@ -16,34 +22,47 @@ body {
   text-rendering: optimizeLegibility;
   font-feature-settings: "kern", "liga", "dlig", "salt";
   font-size: 2.4rem;
-  line-height: 1.7;
-}
-
-main > section, footer {
-  max-width: 1000px;
-  padding: 3rem 3rem 3rem 200px;
-  margin: auto;
+  line-height: 1.6;
 }
 
 header {
-  width: 100%;
   text-align: center;
+  margin: 3rem 1rem 3rem 1rem;
+  padding: 0px;
+}
+
+header > .meta {
   padding-top: 3rem;
-  padding-bottom: 3rem;
 }
 
 footer {
-  display: flex;
+  text-align: center;
+  font-size: 1.6rem;
+  color: var(--color-text-second);
+  padding: 0rem 1rem 2rem 1rem;
 }
 
-footer > section {
-  width: 50%;
+footer p {
+  padding-top: 0.1rem !important;
+}
+
+footer::before {
+  content: "🙠 🙢 ";
+  display: block;
+  color: var(--color-accent);
+}
+
+main > section, main > article {
+  max-width: 1000px;
+  padding: 3rem;
+  margin: auto;
 }
 
 h1 {
   font-size: 4.8rem;
   font-weight: 500;
   margin: 0px;
+  padding: 0px;
 }
 h1::after {
   content: "🙡 🙣";
@@ -52,20 +71,40 @@ h1::after {
   color: var(--color-accent);
 }
 
-h2, h3 {
+h2, h3, header > .meta, .sidelinks {
   font-variant: small-caps;
+  font-weight: 700;
   text-transform: lowercase;
   letter-spacing: 0.1em;
   font-size: 1.8rem;
   margin-top: 0px;
+  line-height: 1.3;
 }
 
-h2 {
-  position: absolute;
-  width: 180px;
-  margin: 0px 0px 0px -200px;
-  text-align: right;
-  padding: 5px 20px 0px 0px;
+@media screen and (min-width: 800px) {
+  main > section, main > article {
+    padding-left: 200px;
+  }
+
+  h2, .sidelinks {
+    display: block;
+    position: absolute;
+    width: 180px;
+    margin: 5px 0px 0px -200px;
+    text-align: right;
+    padding: 0px 20px 0px 0px;
+  }
+}
+
+
+
+@media screen and (max-width: 799px) {
+  h2::before {
+    content: "🙬 ";
+  }
+  h2::after {
+    content: " 🙮";
+  }
 }
 
 h3 {
@@ -82,6 +121,51 @@ p {
   margin: 0;
 }
 
+ul {
+  list-style: none;
+}
+
+article ul li::before {
+  content: "❦";
+  color: var(--color-accent);
+  padding-right: 1rem;
+}
+
+
+p + p,
+* + h2,
+h2:not(:first-child) + p,
+h2:not(:first-child) + .highlighter-rouge
+h2:not(:first-child) + pre
+{
+  padding-top: 5rem;
+}
+
+a, a:hover, a:visited {
+  padding: 0rem 0.6rem;
+  margin: 0rem -0.6rem;
+  color: var(--color-accent);
+  text-decoration: none;
+  transition: background-color 400ms;
+}
+
+a:hover {
+  background-color: var(--color-second);
+}
+
+img {
+  max-width: 100%;
+}
+
+blockquote {
+  font-style: italic;
+  border-left: solid 1rem var(--color-accent);
+  padding-left: 2rem;
+}
+
+/* 
+ * Composants maison
+ */
 .list ul {
   padding: 0px;
 }
@@ -98,18 +182,6 @@ p {
   text-align: center;
 }
 
-a, a:hover, a:visited {
-  padding: 0rem 0.6rem;
-  margin: 0rem -0.6rem;
-  color: var(--color-accent);
-  text-decoration: none;
-  transition: background-color 400ms;
-}
-
-a:hover {
-  background-color: var(--color-second);
-}
-
 .card {
   margin-bottom: 1.8rem;
 }
@@ -118,3 +190,17 @@ a:hover {
   font-size: 1.6rem;
   color: var(--color-text-second);
 }
+
+.highlighter-rouge, pre {
+  overflow-x: auto;
+}
+
+@media screen and (min-width: 800px) {
+  .blocks {
+    display: flex;
+  }
+
+   .blocks > section {
+    width: 50%;
+  }
+}
diff --git a/index.html b/index.html
index 7de1382..c6f8669 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@ layout: default
               <a href="/feed.xml">Flux RSS</a>
             </li>
             <li>
-              <a href="https://git.deuxfleurs.fr">Git</a> (<a href="/ssh.keys">SSH</a>)
+              <a href="https://git.deuxfleurs.fr/quentin">Git</a> (<a href="/ssh.keys">SSH</a>)
             </li>
             <li>
               <a href="/cv.pdf">CV</a>
@@ -96,11 +96,10 @@ layout: default
           </div>
         </section>
       </section>
-    </main>
 
-    <footer>
-      <h2>Des liens</h2>
-      <section>
+      <section class="blocks" id="links">
+        <h2>Des liens</h2>
+        <section>
         <h3>Pour des rencontres</h3>
 
         <div class="card">
@@ -179,4 +178,5 @@ layout: default
         </div>
 
       </section>
-    </footer>
+    </section>
+{% include footer.html %}
diff --git a/keys.txt b/ssh.keys
similarity index 100%
rename from keys.txt
rename to ssh.keys
