Update blog page styling

source/blog.html

@@ -9,13 +9,18 @@ use: [posts]
 {% block content %}
     <h1>Blog</h1>
 
-    <ul class="listing">
+    <ul class="list-reset">
         {% for post in page.pagination.items %}
-            <li class="listing-item">
+            <li class="mb-12">
-                {{ include('post/header', {
+                <h2 class="text-xl mb-1">
-                    page: post,
+                    <a href="{{ post.url }}" class="no-underline hover:underline focus:underline text-black hover:text-grey-darker focus:text-grey-darker">
-                    title_tag: 'h2'
+                        {{ post.title }}
-                }) }}
+                    </a>
+                </h2>
+
+                <div>
+                    <p class="text-grey-dark mb-2">{{ post.date|date('j F Y') }}</p>
+                </div>
 
                 {% include 'post/intro-image' with { page: post } %}
 
@@ -27,10 +32,6 @@ use: [posts]
                         {{ post.blocks.content|markdown }}
                     {% endif %}
                 </div>
-
-                <p class="mb-0">
-                    <a href="{{ post.url }}">Read more &rarr;</a>
-                </p>
             </li>
         {% endfor %}
     </ul>

tailwind.js

@@ -291,9 +291,64 @@ module.exports = {
     '100': '1',
   },
 
-  packages: {
+  svgFill: {
+    'current': 'currentColor',
   },
 
+  svgStroke: {
+    'current': 'currentColor',
+  },
+
+  modules: {
+    appearance: ['responsive'],
+    backgroundAttachment: ['responsive'],
+    backgroundColors: ['responsive', 'hover'],
+    backgroundPosition: ['responsive'],
+    backgroundRepeat: ['responsive'],
+    backgroundSize: ['responsive'],
+    borderColors: ['responsive', 'hover'],
+    borderRadius: ['responsive'],
+    borderStyle: ['responsive'],
+    borderWidths: ['responsive'],
+    cursor: ['responsive'],
+    display: ['responsive'],
+    flexbox: ['responsive'],
+    float: ['responsive'],
+    fonts: ['responsive'],
+    fontWeights: ['responsive', 'hover'],
+    height: ['responsive'],
+    leading: ['responsive'],
+    lists: ['responsive'],
+    margin: ['responsive'],
+    maxHeight: ['responsive'],
+    maxWidth: ['responsive'],
+    minHeight: ['responsive'],
+    minWidth: ['responsive'],
+    negativeMargin: ['responsive'],
+    opacity: ['responsive'],
+    overflow: ['responsive'],
+    padding: ['responsive'],
+    pointerEvents: ['responsive'],
+    position: ['responsive'],
+    resize: ['responsive'],
+    shadows: ['responsive'],
+    svgFill: [],
+    svgStroke: [],
+    textAlign: ['responsive'],
+    textColors: ['responsive', 'hover', 'focus'],
+    textSizes: ['responsive'],
+    textStyle: ['responsive', 'hover', 'focus'],
+    tracking: ['responsive'],
+    userSelect: ['responsive'],
+    verticalAlign: ['responsive'],
+    visibility: ['responsive'],
+    whitespace: ['responsive'],
+    width: ['responsive'],
+    zIndex: ['responsive'],
+  },
+
+  plugins: [],
+
   options: {
     important: true,
     separator: ':',