feat: arrangements esthétiques

src/_includes/footer.njk

@@ -1 +1 @@
-<footer class="text-sm mt-8 pb-2 text-center">NonSco’llectif 2022 - Mentions légales</footer>
+<footer class="text-amber-100 text-sm mx-auto mt-8 pb-2 text-center absolute bottom-0 left-1/2 -translate-x-1/2 ">NonSco’llectif 2022 - Mentions légales</footer>

src/_includes/layouts/actualite.njk

@@ -7,5 +7,3 @@ templateClass: tmpl-post
 
 <p>{{ content | safe }}</p>
 
-<img class="max-w-96 mx-auto mt-8 px-16" src="{{ image }}" />
-

src/_includes/layouts/base.njk

@@ -40,10 +40,10 @@
       {{ content | safe }}
     </main>
 
-    {% include "footer.njk" %}
-
     </div>
 
+    {% include "footer.njk" %}
+
     <!-- Current page: {{ page.url | url }} -->
 
     <script defer data-domain="nonscollectif.arfaoui.net" src="https://plausible.io/js/plausible.js"></script>

src/actualites.njk

@@ -6,16 +6,16 @@ eleventyNavigation:
   order: 2
 ---
 
-{% set liste = collections.actualites %}
+{% set liste = collections.actualites | reverse  %}
 
-<ol class="lg:grid lg:gap-4 lg:grid-cols-3 flex">
+<ol class="flex flex-col lg:grid lg:gap-4 lg:grid-cols-3">
   {% for actualite in liste %}
     <li class="{% if actualite.url == url %} famille-item-active{% endif %}">
       <a href="{{ actualite.url | url }}" class="no-underline">
         <div class="flex flex-col border-2 border-amber-900 bg-amber-900 rounded-lg m-2 text-white drop-shadow-md">
           <span class="m-2 font-bold">{{ actualite.data.title }}</span>
-          <img src="{{actualite.data.image}}" />
+          <img class="max-h-56 object-cover" src="{{actualite.data.image}}" />
-          <blockquote class="text-sm m-2">{{ actualite.data.page.excerpt  }}</blockquote>
+          <blockquote class="text-sm m-2 h-28">{{ actualite.data.page.excerpt  }}</blockquote>
           <time class="bg-white text-amber-800 rounded-b-lg px-4 py-1 text-center" datetime="{{ actualite.date | htmlDateString }}">{{ actualite.date | readableDate }}</time>
         </div>
       </a>

src/actualites/2022-07-25-choix-avocat.md

@@ -16,3 +16,4 @@ NonSco’llectif s'est penché sur la question et partage ici son point de vue,
 
 [Ouvrir](/dl/Guide-Choix-avocat-NonScollectif.pdf){.centered-button target=_blank}
 
+<img class="max-w-96 mx-auto mt-8 px-16" src="{{ image }}" />

src/index.njk

@@ -31,15 +31,15 @@ layout: layouts/home.njk
 Dans les médias et sur les réseaux, on <a href="/on-parle-de-nous">parle de nous</a> !
 #}
 
-{% set liste = collections.actualites %}
+{% set liste = collections.actualites | reverse %}
 
 <ol class="flex flex-col">
     {% for actualite in liste %}
         <li class="{% if actualite.url == url %} famille-item-active{% endif %}">
             <a href="{{ actualite.url | url }}" class="no-underline">
-                <div class="flex flex-col md:flex-row bg-amber-900 rounded-xl m-2 text-white drop-shadow-md p-0 overflow-hidden relative">
+                <div class="flex flex-col justify-start md:flex-row bg-amber-900 rounded-xl m-2 text-white drop-shadow-md p-0 overflow-hidden relative">
                     <time class="absolute bottom-0 text-bold text-sm right-0 bg-white text-amber-800 px-4 py-1 text-center" datetime="{{ actualite.date | htmlDateString }}">{{ actualite.date | readableDate }}</time>
-                    <img class="hidden  w-48 md:block  md:rounded-none mx-auto" src="{{actualite.data.image}}" />
+                    <img class="hidden flex-none w-48 md:block  md:rounded-none" src="{{actualite.data.image}}" />
                     <div class="flex flex-col">
                         <span class="m-2 font-bold">{{ actualite.data.title }}</span>
                         <blockquote class="text-sm m-2">{{ actualite.data.page.excerpt  }}</blockquote>