Improved styling

.eleventy.js

@@ -6,14 +6,15 @@ const markdownItClass = require('@toycode/markdown-it-class');
 
 const markdownClassMapping = {
   h1: ['hide'],
-  h2: ['text-3xl'],
+  h2: ['text-3xl', 'mt-6'],
-  h3: ['text-2xl'],
+  h3: ['text-2xl', 'mt-4'],
-  h4: ['text-xl'],
+  h4: ['text-xl', 'mt-2'],
-  h5: ['text-lg'],
+  h5: ['text-lg', 'mt-2'],
-  h6: ['font-bold'],
+  h6: ['font-bold', 'mt-2'],
-  a: ['text-blue-300', 'hover:underline'],
+  a: ['text-pink-700', 'hover:underline', 'focus:text-white', 'focus:bg-pink-700', 'focus:outline-link'],
   p: ['mb-2', 'text-gray-500'],
-  img: ['max-w-lg', 'rounded-lg', 'my-8'],
+  img: ['max-w-lg', 'rounded-lg'],
+  ul: ['list-disc', 'ml-4'],
 };
 
 module.exports = function(eleventyConfig) {

_includes/layout.njk

@@ -8,6 +8,9 @@
       </h1>
       <p class="ml-2 mt-1 text-sm text-gray-500 truncate">in {{ tags[0] | capitalize }}</p>
     </div>
+    <div class="-ml-2">
+      <p class="ml-8 text-sm text-gray-500">{{description}}</p>
+    </div>
   </div>
   <div class="bg-white overflow-hidden shadow sm:rounded-lg">
     <div class="px-4 py-5 sm:p-6">

tailwind.config.js

@@ -2,7 +2,11 @@ module.exports = {
   purge: ['./_site/**/*.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
-    extend: {},
+    extend: {
+      outline: {
+        link: ['1px dashed rgba(190, 24, 93)', '2px'],
+      },
+    },
   },
   variants: {
     extend: {},