Recommended articles

styles/output.css

@@ -756,6 +756,10 @@ video {
   margin-top: 1rem;
 }
 
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .block {
   display: block;
 }
@@ -804,6 +808,10 @@ video {
   height: auto;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-\[236px\] {
   max-height: 236px;
 }
@@ -832,6 +840,10 @@ video {
   width: 320px;
 }
 
+.w-0 {
+  width: 0px;
+}
+
 .max-w-\[24rem\] {
   max-width: 24rem;
 }
@@ -962,6 +974,10 @@ video {
   border-width: 2px;
 }
 
+.border-l {
+  border-left-width: 1px;
+}
+
 .border-blue-300 {
   --tw-border-opacity: 1;
   border-color: rgb(130 195 247 / var(--tw-border-opacity, 1));
@@ -982,6 +998,11 @@ video {
   border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
 }
 
+.border-l-slate-300 {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 253 / var(--tw-bg-opacity, 1));
@@ -1993,6 +2014,10 @@ article a:visited {
 
 /* } */
 
+.first\:border-l-0:first-child {
+  border-left-width: 0px;
+}
+
 .visited\:text-blue-950:visited {
   color: rgb(11 39 70 );
 }
@@ -2186,6 +2211,14 @@ article a:visited {
     margin-top: 5rem;
   }
 
+  .lg\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .lg\:mb-10 {
+    margin-bottom: 2.5rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -2228,6 +2261,11 @@ article a:visited {
     font-size: 1.125rem;
     line-height: 1.75rem;
   }
+
+  .lg\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -2259,10 +2297,30 @@ article a:visited {
     display: block;
   }
 
+  .xl\:flex {
+    display: flex;
+  }
+
   .xl\:grid {
     display: grid;
   }
 
+  .xl\:hidden {
+    display: none;
+  }
+
+  .xl\:auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+
+  .xl\:auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+
+  .xl\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
   .xl\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -2271,15 +2329,36 @@ article a:visited {
     grid-template-columns: 1fr 2fr;
   }
 
+  .xl\:justify-start {
+    justify-content: flex-start;
+  }
+
   .xl\:gap-8 {
     gap: 2rem;
   }
 
+  .xl\:gap-5 {
+    gap: 1.25rem;
+  }
+
+  .xl\:gap-10 {
+    gap: 2.5rem;
+  }
+
   .xl\:gap-x-32 {
     -moz-column-gap: 8rem;
          column-gap: 8rem;
   }
 
+  .xl\:border-l {
+    border-left-width: 1px;
+  }
+
+  .xl\:border-slate-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+  }
+
   .xl\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;
@@ -2293,6 +2372,10 @@ article a:visited {
   .xl\:font-medium {
     font-weight: 500;
   }
+
+  .xl\:first\:border-l-0:first-child {
+    border-left-width: 0px;
+  }
 }
 
 @media print {

templates/blog_post.html

@@ -35,18 +35,30 @@
 <!-- TODO: Next recommendations for reading -->
 <!-- TODO: Back to all posts -->
 
-{# footer #}
-<footer>
-    <hr class="border-slate-300 m-5 md:my-8">
+<footer class="max-w-maxindex mx-auto">
 
-    <ul class="mx-5">
-      {% for post in recommended_posts %}
-      <li>
-        {% include "components/blog_post_preview.html" %}
-        <!-- TODO hidden block media -->
-        <hr class="border-slate-300 my-5 md:my-8 hidden lg:block">
-      </li>
-      {% endfor %}
-    </ul>
+{% if recommended_posts.len() > 0 %}
+<section id="recommended-articles">
+  <hr class="border-slate-300 m-5 md:my-8">
+
+  <h2 class="m-5 text-2xl md:text-2xl lg:text-4xl lg:mt-8 text-blue-900 lg:mb-10 font-bold">Further reading</h2>
+  <ul class="mx-5 xl:flex xl:justify-start xl:gap-10">
+    {% for post in recommended_posts %}
+    <li class="flex-1">
+      {% include "components/blog_post_preview.html" %}
+      <hr class="border-slate-300 my-5 md:my-8 xl:hidden">
+    </li>
+    {% if !loop.last %}
+      <div class="h-auto w-0 border-l border-slate-300 hidden xl:block"></div>
+    {% endif %}
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}
+
+<section class="text-center my-3 md:text-lg">
+ <a href="/blog">see all blog posts</a> 
+</section>
 </footer>
 {% endblock %}
+ <!-- xl:border-l xl:border-slate-300 xl:first:border-l-0 xl: -->