responsive tables and post page redesign for narrow viewport

templates/input.css

@@ -88,4 +88,33 @@
   .prose-compact pre code::after {
     content: none !important;
   }
+
+  .prose-compact table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    width: 100%;
+    @apply my-6;
+    font-size: 14px;
+    line-height: 1.45;
+  }
+
+  .prose-compact table tr {
+    background-color: #fff;
+    border-top: 1px solid #c6cbd1;
+  }
+
+  .prose-compact table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+
+  .prose-compact table th,
+  .prose-compact table td {
+    padding: 6px 13px;
+    border: 1px solid #dfe2e5;
+  }
+
+  .prose-compact table th {
+    font-weight: 600;
+    background-color: #f6f8fa;
+  }
 }

templates/post.html

@@ -2,8 +2,8 @@
 {% block title %}{{ post.title }}{% endblock %}
 {% block content %}
     <div class="max-w-4xl mx-auto">
-        <article class="bg-white rounded-lg shadow-md border border-gray-200">
+        <article>
-            <header class="px-8 pt-8 pb-6 border-b border-gray-100">
+            <header class="pb-4 mb-2 border-b-2 border-gray-100">
                 <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight">{{ post.title }}</h1>
                 <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between text-sm text-gray-600">
                     <div class="flex items-center space-x-4">
@@ -32,7 +32,7 @@
                     </div>
                 </div>
             </header>
-            <div class="px-8 py-8 prose-compact">{{ post.content | safe }}</div>
+            <div class="prose-compact">{{ post.content | safe }}</div>
         </article>
         <div class="mt-8 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-lg text-white p-8 text-center">
             <h3 class="text-2xl font-bold mb-2">Enjoyed this post?</h3>