Blog list styling

package.json

@@ -17,6 +17,7 @@
     "laravel-mix": "^2.1.11",
     "laravel-mix-purgecss": "^2.1.2",
     "laravel-mix-tailwind": "^0.1.0",
-    "tailwindcss": "^0.6"
+    "tailwindcss": "^0.6",
+    "tailwindcss-visuallyhidden": "^1.0.1"
   }
 }

source/blog.html

@@ -12,39 +12,25 @@ use: [posts]
     <ul class="list-reset">
         {% for post in page.pagination.items %}
             <li class="mb-12">
-                <h2 class="text-xl mb-1">
+                <h2 class="text-xl mb-2">
                     <a href="{{ post.url }}" class="no-underline hover:underline focus:underline text-black hover:text-grey-darker focus:text-grey-darker">
                         {{ 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 } %}
 
                 <div class="markdown mb-4">
                     {% if post.summary %}
                         {{ post.summary|markdown }}
-                        <div>
-                            <a
-                                class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
-                                href="{{ post.url }}"
-                            >
-                                Continue reading <span class="element-invisible">about {{ post.title }}
-                            </a>
-                        </div>
                     {% elseif post.blocks.excerpt %}
                         {{ post.blocks.excerpt|markdown }}
-                        <div>
-                            <a
-                                class="button text-grey-darker rounded-lg border border-grey-light bg-grey-lightest no-underline hover:underline focus:underline"
-                                href="{{ post.url }}"
-                            >
-                                Continue reading <span class="element-invisible">about {{ post.title }}
-                            </a>
-                        </div>
+                        <a
+                            href="{{ post.url }}"
+                            class="inline-block bg-blue hover:bg-blue-dark focus:bg-blue-dark px-4 py-3 rounded no-underline hover:underline focus:underline text-white">
+                                Read more
+                                <span class="visuallyhidden">about {{ post.title }}</span>
+                        </a>
                     {% else %}
                         {{ post.blocks.content|markdown }}
                     {% endif %}

tailwind.js

@@ -331,6 +331,7 @@ module.exports = {
       center: true,
       padding: '1rem',
     }),
+    require('tailwindcss-visuallyhidden')(),
   ],
 
   options: {

yarn.lock

@@ -6928,6 +6928,10 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+tailwindcss-visuallyhidden@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"
+
 tailwindcss@^0.6:
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.6.4.tgz#b0aa8a10c34d3fed7a5f32482ef92d5d416353ee"