From 103f5a091838855c36ef1457a0a2fb02fd0e1240 Mon Sep 17 00:00:00 2001
From: Ghislaine Guerin <me@ghislaineguerin.com>
Date: Wed, 14 Feb 2024 16:44:17 -0300
Subject: [PATCH] fix responsive layout

---
 _includes/blog_card.html    | 4 ++--
 _includes/latest-posts.html | 2 +-
 _includes/tag_cloud.html    | 2 +-
 _layouts/blog.html          | 2 +-
 _layouts/post.html          | 2 +-
 assets/main.scss            | 1 +
 6 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/_includes/blog_card.html b/_includes/blog_card.html
index 2643bca4..7ceaa2a6 100644
--- a/_includes/blog_card.html
+++ b/_includes/blog_card.html
@@ -2,7 +2,7 @@
 {% assign author = site.data.authors[include.post.author] %}
 
 <li
-  class="{% if size == 'small' %}space-y-2 bg-white rounded p-4 w-1/3{% else %}space-y-4 text-lg bg-stone-50 rounded p-8{% endif %}"
+  class="mb-4 {% if size == 'small' %}space-y-2 bg-white rounded p-4 lg:w-1/3{% else %}space-y-4 text-lg bg-stone-50 rounded p-8{% endif %}"
 >
   <div class="space-y-2">
     
@@ -20,7 +20,7 @@
   </div>
   {% include tag_cloud.html %}
 
-  <div class="{% if size == 'small' %} h-40 {% else %} h-80 {% endif %} overflow-hidden w-full rounded-lg shadow-lg mb-6 relative">
+  <div class="{% if size == 'small' %} h-40 {% else %} lg:h-80 {% endif %} overflow-hidden w-full rounded-lg shadow-lg mb-6 relative">
     <img
       src="{{include.post.image}}"
       alt=""
diff --git a/_includes/latest-posts.html b/_includes/latest-posts.html
index 84c69e94..b59b7a1e 100644
--- a/_includes/latest-posts.html
+++ b/_includes/latest-posts.html
@@ -4,7 +4,7 @@
       <h3 class="text-4xl font-bold">Recent Blog Posts</h3>
     </div>
     
-    <ul class="latest-posts-list mx-auto gap-4 flex justify-center">
+    <ul class="latest-posts-list mx-auto gap-4 lg:flex justify-center">
       {% for post in site.posts limit:3 %}
         {% if post.url != page.url %}
           {% include blog_card.html post=post size='small' %}
diff --git a/_includes/tag_cloud.html b/_includes/tag_cloud.html
index 223a3b59..0629f86d 100644
--- a/_includes/tag_cloud.html
+++ b/_includes/tag_cloud.html
@@ -1,6 +1,6 @@
 {% if site.tags.size > 0 %}
   <div class="tag-cloud">
-    <ul class="flex items-center space-x-2">
+    <ul class="flex items-center flex-wrap gap-1">
       {% for tag in site.tags %}
         <li class="tag-item">
           <a href="{{ '/tag/' | append: tag[0] | relative_url }}" class="bg-red-500 bg-opacity-80 text-white rounded px-1 cursor-pointer text-sm hover:bg-blue-600">
diff --git a/_layouts/blog.html b/_layouts/blog.html
index 6e214c57..da2372ca 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -9,7 +9,7 @@
 
     <div class="angled lighter">
       <div
-        class="max-w-4xl mx-auto min-h-screen blog px-4 flex items-start leading-snug"
+        class="max-w-4xl -mt-12 z-10 relative mx-auto min-h-screen blog px-4 flex items-start leading-snug"
       >
         <ul class="space-y-8">
           {% for post in site.posts %}
diff --git a/_layouts/post.html b/_layouts/post.html
index 3c244412..9912bdd5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -7,7 +7,7 @@
   <div class="max-w-4xl mx-auto my-16 min-h-screen space-y-8">
 
 
-    <div class="p-8 h-full bg-white rounded">
+    <div class="p-8 mx-4 h-full bg-white rounded">
       <article class="space-y-8">
         <header class="space-y-2">
           <h1 class="text-5xl font-semibold">{{ page.title }}</h1>
diff --git a/assets/main.scss b/assets/main.scss
index 77ea2e28..c2fa2654 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -227,6 +227,7 @@ a[href^="https://"]:not(.icon-link):not(.button):not(.avatar-link)::after
   position: absolute;
   transform: skew(0deg, -1deg);
   left: 0;
+  z-index: 1;
 }
 
 .angled::before {