fix responsive layout

_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=""

_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' %}

_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">

_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 %}

_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>

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 {