From 7eda0e5b93d626dc304b987ddc49c2b5fa6a6a27 Mon Sep 17 00:00:00 2001
From: Phuoc CAO <phuoc@caotek.fr>
Date: Tue, 4 Oct 2022 21:56:22 +0200
Subject: [PATCH] new footer with columns

---
 cao_blogr/static/theme.css        | 68 +++++++++++++++++++++++++------
 cao_blogr/templates/home.jinja2   | 18 --------
 cao_blogr/templates/layout.jinja2 | 61 ++++++++++++++++++++++-----
 3 files changed, 107 insertions(+), 40 deletions(-)

diff --git a/cao_blogr/static/theme.css b/cao_blogr/static/theme.css
index 38db186..baee5f6 100644
--- a/cao_blogr/static/theme.css
+++ b/cao_blogr/static/theme.css
@@ -149,18 +149,6 @@ h5 {
   margin-left: 10px;
 }
 
-footer {
-  background-color: #2d2d30;
-  color: #f5f5f5;
-  padding: 32px;
-}
-footer a {
-  color: #f5f5f5;
-}
-footer a:hover {
-  color: #777;
-  text-decoration: none;
-}  
 .form-control {
   border-radius: 0;
 }
@@ -226,3 +214,59 @@ blockquote {
   display:block;
 }
 
+/* https://web-eau.net/blog/10-exemples-de-footer-pour-vous-inspirer */
+
+.footer-dark {
+  padding:40px;
+  color:#f0f9ff;
+  background-color:#282d32;
+}
+
+.footer-dark h3 {
+  margin-top:12px;
+  margin-bottom:12px;
+  font-weight:bold;
+  font-size:16px;
+}
+
+.footer-dark ul {
+  padding:0;
+  list-style:none;
+  line-height:1.6;
+  font-size:14px;
+  margin-bottom:0;
+}
+
+.footer-dark ul a {
+  color:inherit;
+  text-decoration:none;
+  opacity:0.6;
+}
+
+.footer-dark ul a:hover {
+  opacity:0.8;
+}
+
+.footer-dark .item.text {
+  margin-bottom:36px;
+}
+
+@media (max-width:767px) {
+  .footer-dark .item.text {
+    margin-bottom:0;
+  }
+}
+
+.footer-dark .item.text p {
+  opacity:0.6;
+  margin-bottom:0;
+}
+
+.footer-dark .copyright {
+  text-align:center;
+  padding-top:24px;
+  opacity:0.7;
+  font-size:15px;
+  margin-bottom:0;
+}
+
diff --git a/cao_blogr/templates/home.jinja2 b/cao_blogr/templates/home.jinja2
index af9454d..185f4a4 100644
--- a/cao_blogr/templates/home.jinja2
+++ b/cao_blogr/templates/home.jinja2
@@ -156,24 +156,6 @@
       <button class="btn btn-primary hidden" id="btnSubmit" type="submit" name="form.submitted">Envoyer</button>
       </div>
     </form>
-
-
-    <div class="row">
-      <div class="col-sm-6">
-        <p class="text-right">
-          <span class="glyphicon glyphicon-map-marker"></span><br>
-          <b>Méditation Sunyata Paris</b><br>
-          116 bd Maréchal Foch<br>
-          93160 NOISY LE GRAND<br>
-          <span class="label label-danger">RER A</span>&nbsp;station Bry sur Marne<br>
-          <span class="label label-primary">Bus 220</span>&nbsp;arrêt Verdun<br>
-      </div>
-      <div class="col-sm-6">
-        <p>
-          <span class="glyphicon glyphicon-envelope"></span><br>
-          contact@meditation-sunyata.paris
-        </p>
-      </div>
     </div>
   </div>
 
diff --git a/cao_blogr/templates/layout.jinja2 b/cao_blogr/templates/layout.jinja2
index 9df60e8..bcf1977 100644
--- a/cao_blogr/templates/layout.jinja2
+++ b/cao_blogr/templates/layout.jinja2
@@ -103,16 +103,57 @@
 </div>
 
 	<!-- Footer -->
-	<footer class="text-center">
-			<div class="row">
-        <p class="text-center">
-          &copy; 2022&nbsp;-&nbsp;Méditation SUNYATA Paris
-          &nbsp;|&nbsp;<a href="{{ request.route_url('blog', id=1, slug='mentions-legales') }}">Mentions légales</a>
-          &nbsp;|&nbsp;<a href="{{ request.route_url('topic', topic='apropos') }}">A propos</a>
-          &nbsp;|&nbsp;<a href="https://www.ovhcloud.com/fr/mail/" target="__blank">Contact</a>
-        </p>
-			</div>
-	</footer>
+
+  <div class="footer-dark">
+    <footer>
+      <div class="row">
+        <div class="col-md-2 item">
+          <h3><a href="{{ request.route_url('topic', topic='enseignement') }}">ENSEIGNEMENT</a></h3>
+          <h3><a href="{{ request.route_url('topic', topic='pratique') }}">PRATIQUE</a></h3>
+          <h3><a href="{{ request.route_url('topic', topic='qigong') }}">QI GONG</a></h3>
+          <hr>
+          <h3><a href="{{ request.route_url('topic', topic='tu_hoc') }}">TU HỌC</a></h3>
+          <h3><a href="{{ request.route_url('topic', topic='tu_tap') }}">TU TẬP</a></h3>
+          <h3><a href="{{ request.route_url('topic', topic='qigong') }}">KHÍ CÔNG</a></h3>
+        </div>
+        <div class="col-md-4 item">
+          <h3>Les sites SUNYATA dans le monde</h3>
+          <ul>
+            <li><a href="https://ttkadelaide.wordpress.com/">Sunyata Adelaide, Australie</a></li>
+            <li><a href="http://hoithientanhkhongontario.org/">Sunyata Ontario, Canada</a></li>
+            <li><a href="http://www.meditationsunyatatoulouse.fr/">Sunyata Toulouse, France</a> (fr)</li>
+            <li><a href="https://www.sunyata-bw.de/">Sunyata Stuttgart, Allemagne</a> (de)</li>
+            <li><a href="http://www.sunyata-meditation-ch.org/">Sunyata Suisse</a> (fr)</li>
+            <li><a href="https://www.facebook.com/Sacramento.Tanhkhong">Sunyata Sacramento, CA, USA</a></li>
+            <li><a href="https://tanhkhong.org/">Monastère central, Perris, CA, USA</a></li>
+            <li><a href="http://www.sunyatameditation.org/">Monastère central, Perris, CA, USA</a> (en)</li>
+            <li><a href="https://thientanhkhong.org/">Sunyata Houston, TX, USA</a></li>
+          </ul>
+        </div>
+        <div class="col-md-2 item">
+          <h3>A propos</h3>
+          <ul>
+              <li><a href="{{ request.route_url('topic', topic='apropos') }}">Qui sommes nous</a></li>
+              <li><a href="{{ request.route_url('blog', id=1, slug='mentions-legales') }}">Mentions légales</a></li>
+              {% if request.authenticated_userid %}
+                <li><a href="https://www.ovhcloud.com/fr/mail/" target="__blank">Contact</a></li>
+              {% endif %}
+          </ul>
+        </div>
+        <div class="col-md-4 item text">
+            <h3>Méditation Sunyata Paris</h3>
+            <p>
+              116 bd Maréchal Foch<br>
+              93160 NOISY LE GRAND<br>
+              <span class="label label-danger">RER A</span>&nbsp;station Bry sur Marne<br>
+              <span class="label label-primary">Bus 220</span>&nbsp;arrêt Verdun<br>
+              <span class="glyphicon glyphicon-envelope"></span> : contact@meditation-sunyata.paris
+            </p>
+        </div>
+      </div>
+      <p class="copyright">&copy; 2022&nbsp;-&nbsp;Méditation SUNYATA Paris</p>
+    </footer>
+</div>
 
   <!-- Global site tag (gtag.js) - Google Analytics -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-NBVRNJ9C0Y"></script>