Become responsive

2 years ago · 7d76cab5a9
parent 98c12bdc43
commit 7d76cab5a9
8 changed files with 294 additions and 47 deletions
--- 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>
--- 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>
--- 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 %}
--- 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.

--- a/assets/css/highlight.css
+++ 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;
+}
--- 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 p {
+  padding-top: 0.1rem !important;
+}
+
+footer::before {
+  content: "🙠 🙢 ";
+  display: block;
+  color: var(--color-accent);
 }

-footer > section {
-  width: 50%;
+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;
+}
+
+@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;
+  }
 }

-h2 {
-  position: absolute;
-  width: 180px;
-  margin: 0px 0px 0px -200px;
-  text-align: right;
-  padding: 5px 20px 0px 0px;
+
+
+@media screen and (max-width: 799px) {
+  h2::before {
+    content: "🙬 ";
+  }
+  h2::after {
+    content: " 🙮";
+  }
 }

 h3 {
@ -82,20 +121,24 @@ p {
  margin: 0;
 }

-.list ul {
-  padding: 0px;
+ul {
+  list-style: none;
 }

-.list li {
-  display: inline;
+article ul li::before {
+  content: "❦";
+  color: var(--color-accent);
+  padding-right: 1rem;
 }

-.list li:not(:first-child)::before {
-  content: "🙘";
-  display: inline-block;
-  vertical-align: middle;
-  width: 4rem;
-  text-align: center;
+
+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 {
@ -110,6 +153,35 @@ 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;
+}
+
+.list li {
+  display: inline;
+}
+
+.list li:not(:first-child)::before {
+  content: "🙘";
+  display: inline-block;
+  vertical-align: middle;
+  width: 4rem;
+  text-align: center;
+}
+
 .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%;
+  }
+}
--- 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 %}
--- a/ssh.keys
+++ b/ssh.keys