Adds gallery and video templates + Fixes & optimizes CSS

_includes/gallery.html

@@ -0,0 +1,18 @@
+
+<div id="aGallery" class="gallery post-gallery">
+	<link rel="stylesheet" href="/css/gallery.min.css">
+	<div class="images">
+		{% for image in URIs %}
+			<div {% if image == URIs[0] %}class="active"{% endif %} style="background-image: url(/img/blog/{{ image }})"></div>
+		{% endfor %}
+		<span class="left"></span>
+		<span class="right"></span>
+	</div>
+	<div class="thumbs">
+		{% for image in URIs %}
+			<div {% if image == URIs[0] %}class="active"{% endif %} style="background-image: url(/img/blog/{{ image }})"></div>
+		{% endfor %}
+	</div>
+	<script type="text/javascript" src="/js/hammer-2.0.8.min.js"></script>
+	<script type="text/javascript" src="/js/gallery.min.js"></script>
+</div>

_includes/video.html

@@ -0,0 +1,4 @@
+
+<div class="post-video">
+    <iframe src="{{ include.URL }}"></iframe>
+</div>

_posts/2013-09-14-phonebloks-le-projet-qui-va-sauver-la-plante.md

@@ -17,8 +17,6 @@ Donc, sur une carte spéciale, vous organisez l'agencement de vos blocs, pour fa
 
 Cette vidéo résume très bien le côté technique du projet :
 
-<iframe src="https://www.youtube.com/embed/oDAw7vW7H0c?version=3"></iframe>
+{% include video.html URL='https://www.youtube.com/embed/oDAw7vW7H0c' %}
 
 Donc fini l'obsolescence programmée. Car si l'un des blocs devient trop vieux, pas besoin de jeter le téléphone en entier ~~pour aller acheter le dernier iPhone~~, il suffit juste de changer LE bloc concerné...
-
-À suivre [ici](http://www.phoneblocks.com/) aussi.

_posts/2014-01-29-refresh-system-active-passive.md

@@ -6,6 +6,11 @@ layout: post
 category: Hacking
 ---
 
+{% assign URIs =
+    'refresh-system-active-passive_1.jpg;refresh-system-active-passive_2.jpg'
+    | split: ';' %}
+{% include gallery.html URIs=URIs %}
+
 ### Passive refresh
 
 I've bought and installed [that Heat Dissipation](http://dx.com/p/abs-heat-dissipation-panel-for-raspberry-pi-silver-white-1-x-3pcs-222212#.Ut2DzLRKG70) for Raspberry.

_posts/2014-06-12-concours-iter-robots-2014.md

@@ -6,6 +6,11 @@ layout: post
 category: Articles
 ---
 
+{% assign URIs =
+    'concours-iter-robots-2014_1.jpg;concours-iter-robots-2014_2.jpg;concours-iter-robots-2014_3.jpg'
+    | split: ';' %}
+{% include gallery.html URIs=URIs %}
+
 En tant que Projet de Terminale Sciences de l'Ingénieur, nous avons choisi de participer au Concours [ITER Robots 2014](http://www.itercad.org/robots2014.php).  
 Comme notre non-sélection après les épreuves de qualification nous est "restée en travers" (pour des raisons que l'on ne donnera pas ici), voici le code complet du robot que nous avions mis au point, pour faciliter le boulot des futurs participants (_troll_) :
 

_posts/2015-02-08-ce-qui-me-choque-ici-et-ce-quil-faut-relativiser.md

@@ -6,6 +6,8 @@ layout: post
 category: Articles
 ---
 
+{% include video.html URL='https://www.youtube.com/embed/o0P5axJWkgY' %}
+
 Le "choc" est à [10 min 09](http://youtu.be/o0P5axJWkgY?t=10m9s), à la fin de la plaidoirie.  
 Argumente ci-haut une jeune femme dans le cadre du [Concours des avocats 2015](http://www.memorial-caen.fr/les-evenements/evenements/concours-plaidoiries-eleves-avocats) à Caen.  
 Rien à redire quant à son discours; nous assistons ici à la discrimination d'une petite fille trisomique vis-à-vis de son témoignage, qui aurait dû être diffusé à la télévision, censuré par le [CSA](https://fr.wikipedia.org/wiki/Conseil_sup%C3%A9rieur_de_l%27audiovisuel_%28France%29).

css/styles.css

@@ -57,7 +57,6 @@ a:hover {
 }
 
 p {
-  max-width: 1024px;
   line-height: 1.6;
   margin: 1em auto;
   color: #232423;
@@ -65,7 +64,6 @@ p {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  display: block;
   opacity: 0.8;
   margin-left: 0;
   margin-right: 0;
@@ -143,7 +141,7 @@ div.highlighter-rouge {
   display: block;
   text-align: right;
   font-size: smaller;
-  padding-bot: 5px;
+  padding-bottom: 5px;
 }
 
 hr {
@@ -183,7 +181,9 @@ span.dates {
 }
 
 .post-content {
-  margin-top: 20px;
+  display: block;
+  max-width: 1024px;
+  margin: 20px auto 0 auto;
   text-align: left;
 }
 
@@ -208,13 +208,16 @@ span.dates {
   padding-right: 5px;
 }
 
+.post-content, .post-gallery, .post-video {
+  display: block;
+  margin: 40px auto 40px auto;
+}
+
 .post-content p > a > img {
   max-width: 100%;
-  margin: 40px auto 40px auto;
   border: 3px solid #25283D;
   transition: .3s ease-in-out;
   -webkit-transition: .3s ease-in-out;
-  display: block;
   margin-left: auto;
   margin-right: auto;
 }
@@ -223,11 +226,8 @@ span.dates {
 }
 
 .post-video {
-  margin: 20px auto 20px auto;
   position: relative;
-  padding-bottom: 56.25%;
-  padding-top: 30px;
-  height: 0;
+  padding-bottom: 56%;
   overflow: hidden;
 }
 .post-video iframe {