Make gitoyen page responsive

content/pages/02_gitoyen.md

@@ -18,17 +18,23 @@ démarche.
 
 ## Nos valeurs
 
-![pas de profits]({filename}/images/nonprofit.jpg)
-Pas de profits
-{: .valeurs .nonprofit }
+<div class="col1of1">
+  <div class="col1of3">
+    <img src="../images/nonprofit.jpg" alt="Pas de profits" class="col1of1 row7 p2">
+    <p>Pas de profits</p>
+  </div>
+
+  <div class="col1of3">
+    <img src="../images/partager.jpg" alt="Du partage" class="col1of1 row7 p2">
+    <p>Du partage</p>
+  </div>
+
+  <div class="col1of3">
+    <img src="../images/collaborer.jpg" alt="De l'entraide" class="col1of1 row7 p2">
+    <p>De l'entraide</p>
+  </div>
+</div>
 
-![du partage]({filename}/images/partager.jpg)
-Du partage
-{: .valeurs .partage }
-
-![de l'entraide]({filename}/images/collaborer.jpg)
-De l'entraide
-{: .valeurs .entraide }
 
 Notre participation à Gitoyen, sous forme de bénévolat, nous permet de :
 

theme/static/css/main.css

@@ -20,10 +20,12 @@ body {
   color: #000305;
   font-family: 'Lato', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
   line-height: 1.429;
-  margin: 0;
   padding: 0;
   text-align: left;
   position: relative;
+  clear: both;
+  margin: 0 auto;
+  width: 100%;
 }
 
 /* Headings */
@@ -31,8 +33,8 @@ h1 {font-size: 2em }
 h2 {
   font-size: 2.5em;
   text-transform: uppercase;
-  padding-top:90px;
-  margin-bottom: .8em; /* 22px */
+  padding-top: 3rem;
+  margin-bottom: 0.8rem;
 }
 
 h2:first-child {margin-top:0;}	/* 22px */
@@ -147,11 +149,6 @@ aside, nav, article, figure {
 }
 
 /***** Layout *****/
-.body {
-  clear: both;
-  margin: 0 auto;
-  width: 100%;
-}
 img.right, figure.right {float: right; margin: 0 0 2em 2em;}
 img.left, figure.left {float: left; margin: 0 2em 2em 0;}
 

theme/templates/page.html

@@ -2,12 +2,12 @@
 {% block title %}{{ page.title }}{% endblock %}
 {% block content %}
 
-  <h1 class="entry-title"><span>{{ page.title }}</span></h1>
+  <h1 class="entry-title col1of1"><span>{{ page.title }}</span></h1>
   {% if page.toc %}
-  <nav id="side-nav">
+  <nav id="side-nav" class="col1of3">
     {{ page.toc }}
   </nav>
-  <div id="content">
+  <div id="content" class="col2of3">
   {% endif %}
 
   {% import 'translations.html' as translations with context %}