Change a bit how the theme looks

content/2016.03.horizon.rst

@@ -5,6 +5,7 @@ L'horizon
 :headline: Temps de changer d'horizon. Mon départ de Mozilla et le début d'une
            nouvelle histoire.
 :category: thoughts
+:image: images/horizon.jpg
 
 .. epigraph::
 

content/2017.03.point.mi.parcours.md

@@ -2,6 +2,7 @@ Title: Brasserie du Vieux Singe — W.I.P.
 Headline: Retours sur ces quelques mois consacrés à la création de la brasserie du Vieux Singe.
 Date: 2017-06-26
 Category: thoughts
+Image: images/vieuxsinge.jpg
 
 Ça fait maintenant quelques mois que j'ai décidé de [changer de métier](https://www.vieuxsinge.com). Choix à la fois difficile et excitant. Une rupture qui laisse place à quelques étoiles dans les yeux. Enfin, je retrouve l'envie de créer, et je renoue avec mes rêves, ceux-la mêmes que je croyaient trop fous pour être à portée de main.
 

content/2017.09.neipa.md

@@ -2,6 +2,7 @@ Title: L'arrivée du trouble (ou comment faire des NEIPA ?)
 Headline: Traduction d'un article sur les New England IPA du magazine Américan « Brew Your Own »
 Date: 2017-10-17
 Category: biere
+Image: images/haze.jpg
 
 **Ceci est une traduction d'un article paru dans le magazine « Brew Your Own » en Octobre 2016, écrit par Dave Green**
 

content/2017.10.06.club-des-brasseurs-rennais.md

@@ -1,7 +1,8 @@
 Title: Un club des brasseurs amateurs Rennais
-Headline: si vous êtes dans le coin de Rennes et que vous voulez échanger sur la fabrication de bière, ne cherchez plus ;)
+Headline: Si vous êtes dans le coin de Rennes et que vous voulez échanger sur la fabrication de bière, ne cherchez plus ;)
 Date: 2017-11-06
 Category: biere
+Image: /images/refroidissement.jpg
 
 En Mars dernier, suite à quelques discussions entre brasseurs amateurs, on à décidé de monter [une liste de diffusion](https://framalistes.org/sympa/subscribe/brassam-rennes) pour faciliter les échanges autour du brassage amateur sur Rennes et ses alentours.
 

pelican.conf.py

@@ -5,7 +5,7 @@ AUTHOR = u'Alexis Métaireau'
 SITENAME = u"Carnets Web"
 THEME = "theme"
 DISQUS_SITENAME = 'notmyidea'
-STATIC_PATHS = ['static']
+STATIC_PATHS = ['static', 'images']
 
 SITEURL = ''
 RELATIVE_URLS = True

theme/static/css/poole.css

@@ -212,13 +212,29 @@ pre code {
 
 /* Quotes */
 blockquote {
-  padding: .5rem 1rem;
+  background: #f9f9f9;
-  margin: .8rem 0;
+  margin: 1.5em 10px;
-  color: #7a7a7a;
+  padding: 0.5em 10px;
-  background-color: #F2FBFE
+  quotes: "\201C""\201D""\2018""\2019";
 }
-blockquote p:last-child {
+blockquote:before {
-  margin-bottom: 0;
+  color: #ccc;
+  content: open-quote;
+  font-size: 4em;
+  line-height: 0.1em;
+  margin-right: 0.25em;
+  vertical-align: -0.4em;
+}
+blockquote:after {
+    color: #ccc;
+    content: close-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 1em;
+    vertical-align: -0.4em
+}
+blockquote p {
+  display: inline;
 }
 @media (min-width: 30em) {
   blockquote {
@@ -297,6 +313,12 @@ tbody tr:nth-child(odd) th {
   margin-right: auto;
 }
 
+.container-wide {
+  padding-left:  1rem;
+  padding-right: 1rem;
+  margin-left:  auto;
+  margin-right: auto;
+}
 
 /*
  * Masthead
@@ -354,6 +376,7 @@ tbody tr:nth-child(odd) th {
   margin-top: -.5rem;
   margin-bottom: 1rem;
   color: #9a9a9a;
+  text-align: center;
 }
 
 /* Related posts */

theme/static/css/styles.css

@@ -61,11 +61,19 @@ ul#blog_index li .post {
   flex-direction: column;
 }
 ul#blog_index li span a {
+    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
+    padding: 8px 5px;
+    text-transform: uppercase;
+    text-rendering: optimizeLegibility;
+    color: #202020;
+    letter-spacing: .1em;
+    box-decoration-break: clone;
+    background-color: #fff;
+
   flex: 1 auto;
   line-height: 1.3;
   padding: .6rem 1rem;
   font-weight: 100;
-  font-family: "Helvetica Neue Light", Helvetica, sans-serif;
   font-size: 1rem;
 }
 ul#blog_index time.updated::before {
@@ -73,6 +81,7 @@ ul#blog_index time.updated::before {
   color: rgba(0, 0, 0, 0.3);
 }
 .created {
+  display: block;
   padding: .6rem 1rem;
   font-weight: 400;
 }
@@ -80,10 +89,16 @@ ul#blog_index time.created::before {
   content: " Écrit le ";
   color: rgba(0, 0, 0, 0.3);
 }
-.headline {
-    padding: .6rem 1rem;
-}
 
 .post {
   margin-bottom: 0 !important;
 }
+
+.description {
+    display: block;
+    background-color: #fff;
+    opacity: 0.9;
+    padding: 10px;
+    text-align: justify;
+    justify-content: center;
+}

theme/static/js/instantclick.min.js

@@ -1,13 +0,0 @@
-/* InstantClick 3.1.0 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license */
-var InstantClick=function(d,e){function w(a){var b=a.indexOf("#");return 0>b?a:a.substr(0,b)}function z(a){for(;a&&"A"!=a.nodeName;)a=a.parentNode;return a}function A(a){var b=e.protocol+"//"+e.host;if(!(b=a.target||a.hasAttribute("download")||0!=a.href.indexOf(b+"/")||-1<a.href.indexOf("#")&&w(a.href)==k)){if(J){a:{do{if(!a.hasAttribute)break;if(a.hasAttribute("data-no-instant"))break;if(a.hasAttribute("data-instant")){a=!0;break a}}while(a=a.parentNode);a=!1}a=!a}else a:{do{if(!a.hasAttribute)break;
-if(a.hasAttribute("data-instant"))break;if(a.hasAttribute("data-no-instant")){a=!0;break a}}while(a=a.parentNode);a=!1}b=a}return b?!1:!0}function t(a,b,c,g){for(var d=!1,e=0;e<B[a].length;e++)if("receive"==a){var f=B[a][e](b,c,g);f&&("body"in f&&(c=f.body),"title"in f&&(g=f.title),d=f)}else B[a][e](b,c,g);return d}function K(a,b,c,g){d.documentElement.replaceChild(b,d.body);if(c){history.pushState(null,null,c);b=c.indexOf("#");b=-1<b&&d.getElementById(c.substr(b+1));g=0;if(b)for(;b.offsetParent;)g+=
-b.offsetTop,b=b.offsetParent;scrollTo(0,g);k=w(c)}else scrollTo(0,g);d.title=S&&d.title==a?a+String.fromCharCode(160):a;L();C.done();t("change",!1);a=d.createEvent("HTMLEvents");a.initEvent("instantclick:newpage",!0,!0);dispatchEvent(a)}function M(a){G>+new Date-500||(a=z(a.target))&&A(a)&&x(a.href)}function N(a){G>+new Date-500||(a=z(a.target))&&A(a)&&(a.addEventListener("mouseout",T),H?(O=a.href,l=setTimeout(x,H)):x(a.href))}function U(a){G=+new Date;(a=z(a.target))&&A(a)&&(D?a.removeEventListener("mousedown",
-M):a.removeEventListener("mouseover",N),x(a.href))}function V(a){var b=z(a.target);!b||!A(b)||1<a.which||a.metaKey||a.ctrlKey||(a.preventDefault(),P(b.href))}function T(){l?(clearTimeout(l),l=!1):v&&!m&&(p.abort(),m=v=!1)}function W(){if(!(4>p.readyState)&&0!=p.status){q.ready=+new Date-q.start;if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a=d.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText.replace(/<noscript[\s\S]+<\/noscript>/gi,"");y=a.title;
-u=a.body;var b=t("receive",r,u,y);b&&("body"in b&&(u=b.body),"title"in b&&(y=b.title));b=w(r);h[b]={body:u,title:y,scrollY:b in h?h[b].scrollY:0};for(var a=a.head.children,b=0,c,g=a.length-1;0<=g;g--)if(c=a[g],c.hasAttribute("data-instant-track")){c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML;for(var e=E.length-1;0<=e;e--)E[e]==c&&b++}b!=E.length&&(F=!0)}else F=!0;m&&(m=!1,P(r))}}function L(a){d.body.addEventListener("touchstart",U,!0);D?d.body.addEventListener("mousedown",M,!0):d.body.addEventListener("mouseover",
-N,!0);d.body.addEventListener("click",V,!0);if(!a){a=d.body.getElementsByTagName("script");var b,c,g,e;i=0;for(j=a.length;i<j;i++)b=a[i],b.hasAttribute("data-no-instant")||(c=d.createElement("script"),b.src&&(c.src=b.src),b.innerHTML&&(c.innerHTML=b.innerHTML),g=b.parentNode,e=b.nextSibling,g.removeChild(b),g.insertBefore(c,e))}}function x(a){!D&&"display"in q&&100>+new Date-(q.start+q.display)||(l&&(clearTimeout(l),l=!1),a||(a=O),v&&(a==r||m))||(v=!0,m=!1,r=a,F=u=!1,q={start:+new Date},t("fetch"),
-p.open("GET",a),p.send())}function P(a){"display"in q||(q.display=+new Date-q.start);l||!v?l&&r&&r!=a?e.href=a:(x(a),C.start(0,!0),t("wait"),m=!0):m?e.href=a:F?e.href=r:u?(h[k].scrollY=pageYOffset,m=v=!1,K(y,u,r)):(C.start(0,!0),t("wait"),m=!0)}var I=navigator.userAgent,S=-1<I.indexOf(" CriOS/"),Q="createTouch"in d,k,O,l,G,h={},p,r=!1,y=!1,F=!1,u=!1,q={},v=!1,m=!1,E=[],J,D,H,B={fetch:[],receive:[],wait:[],change:[]},C=function(){function a(a,e){n=a;d.getElementById(f.id)&&d.body.removeChild(f);f.style.opacity=
-"1";d.getElementById(f.id)&&d.body.removeChild(f);g();e&&setTimeout(b,0);clearTimeout(l);l=setTimeout(c,500)}function b(){n=10;g()}function c(){n+=1+2*Math.random();98<=n?n=98:l=setTimeout(c,500);g()}function g(){h.style[k]="translate("+n+"%)";d.getElementById(f.id)||d.body.appendChild(f)}function e(){d.getElementById(f.id)?(clearTimeout(l),n=100,g(),f.style.opacity="0"):(a(100==n?0:n),setTimeout(e,0))}function m(){f.style.left=pageXOffset+"px";f.style.width=innerWidth+"px";f.style.top=pageYOffset+
-"px";var a="orientation"in window&&90==Math.abs(orientation);f.style[k]="scaleY("+innerWidth/screen[a?"height":"width"]*2+")"}var f,h,k,n,l;return{init:function(){f=d.createElement("div");f.id="instantclick";h=d.createElement("div");h.id="instantclick-bar";h.className="instantclick-bar";f.appendChild(h);var a=["Webkit","Moz","O"];k="transform";if(!(k in h.style))for(var b=0;3>b;b++)a[b]+"Transform"in h.style&&(k=a[b]+"Transform");var c="transition";if(!(c in h.style))for(b=0;3>b;b++)a[b]+"Transition"in
-h.style&&(c="-"+a[b].toLowerCase()+"-"+c);a=d.createElement("style");a.innerHTML="#instantclick{position:"+(Q?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";d.head.appendChild(a);Q&&(m(),addEventListener("resize",m),addEventListener("scroll",m))},start:a,done:e}}(),R="pushState"in history&&(!I.match("Android")||I.match("Chrome/"))&&"file:"!=e.protocol;
-return{supported:R,init:function(){if(!k)if(R){for(var a=arguments.length-1;0<=a;a--){var b=arguments[a];!0===b?J=!0:"mousedown"==b?D=!0:"number"==typeof b&&(H=b)}k=w(e.href);h[k]={body:d.body,title:d.title,scrollY:pageYOffset};for(var b=d.head.children,c,a=b.length-1;0<=a;a--)c=b[a],c.hasAttribute("data-instant-track")&&(c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML,E.push(c));p=new XMLHttpRequest;p.addEventListener("readystatechange",W);L(!0);C.init();t("change",!0);addEventListener("popstate",
-function(){var a=w(e.href);a!=k&&(a in h?(h[k].scrollY=pageYOffset,k=a,K(h[a].title,h[a].body,!1,h[a].scrollY)):e.href=e.href)})}else t("change",!0)},on:function(a,b){B[a].push(b)}}}(document,location);

theme/templates/article.html

@@ -14,19 +14,57 @@
   {% endfor %}
 {% endblock %}
 
+{% block extrahead %}
+<style>
+
+h1 {
+    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
+    padding: 80px 50px;
+    text-align: center;
+    text-transform: uppercase;
+    text-rendering: optimizeLegibility;
+    color: #202020;
+    letter-spacing: .1em;
+    text-shadow:
+        -1px -1px 1px #111,
+        2px 2px 1px #eaeaea;
+}
+
+#main {
+    text-align: justify;
+    text-justify: inter-word;
+}
+#main h1 {
+    padding: 10px;
+}
+
+.post-headline {
+    padding: 15px;
+}
+</style>
+{% if article.image %}
+<style>
+#illustration {
+    max-width: 800px;
+    align: center;
+    margin: auto;
+}
+</style>
+{% endif %}
+{% endblock %}
+
 {% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
 
 {% block content %}
-<div class="posts">
+<div id="main" class="posts">
+<h1 class="post-title">{{ article.title }}</h1>
+<span class="post-date">{{ article.locale_date | capitalize }}</span>
+<img id="illustration" src="{{ article.image}}" />
 <div class="post article">
-    <h1 class="post-title">
-      {{ article.title }}
-    </h1>
     {% if article.headline %}
-    <h2 class="post-title">{{ article.headline }}</h2>
+    <h2 class="post-headline">{{ article.headline }}</h2>
     {% endif %}
-    <span class="post-date">{{ article.locale_date | capitalize }}</span>
+    <h1>🌟</h1>
-
     {{ article.content }}
   </div>
 </div>

theme/templates/base.html

@@ -57,7 +57,7 @@
         </div>
       </div>
 
-      <div class="container content">
+      <div class="{% block containerclass %}container{% endblock %} content">
         {% block content %}{% endblock %}
       </div>
 
@@ -123,7 +123,5 @@
       <!-- End Piwik Code -->
       {% endif %}
      </div>
-  <script src="{{ SITEURL }}/theme/js/instantclick.min.js" data-no-instant></script>
-  <script data-no-instant>InstantClick.init();</script>
   </body>
 </html>

theme/templates/index.html

@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% block containerclass %}container-wide{% endblock %}
 {% block extrahead %}
 <style>
 
@@ -8,13 +9,13 @@
 <div class="content-title">
 {% block content_title %}{% endblock %}
 
-<p>Bonjour, et bienvenue sur mes (<a href="/pages/about.html">Alexis</a>) carnets. Il s'agit de réflexions que je souhaite partager, bonne lecture !</p>
+<p>Bonjour, et bienvenue sur mes (<a href="/pages/about.html">Alexis</a>) carnets. Il s'agit de réflexions que je souhaite partager, depuis 2009. Bonne lecture !</p>
 
 <div class="posts">
   <ul id="blog_index">
   {% for article in articles_page.object_list %}
   {% if not article.unlisted or article.category == category %}
-  <li><span class="post"><a class="post_title" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></span><span class="headline">{{ article.headline }}</span><time class="created" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></li>
+  <li style="background-image: url('{{ article.image }}') !important;"><span class="post"><a class="post_title" href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a></span><span class="description"><span class="headline">{{ article.headline }}</span><time class="created" datetime="{{ article.date.isoformat() }}">{{ article.locale_date }}</time></span></li>
   {% endif %}
   {% endfor %}
   </ul>