Switch to Tailwind

source/_includes/post/about-author.html.twig

@@ -1,7 +1,9 @@
-<div class="cf mt2">
+<div class="clearfix mt-4">
     <h2>About the Author</h2>
 
-    <img src="{{ site.images_url }}{{ site.avatar.url }}" alt="Picture of Oliver" class="w3 mr3 br-100 fl">
+    <img src="{{ site.images_url }}{{ site.avatar.url }}"
+         alt="Picture of Oliver"
+         class="w-1/6 mr-4 float-left rounded-full">
 
     <p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a {{ site.work.role }} at <a href="{{ site.companies[site.work.company].url }}?utm_source={{ site.short_url }}&utm_medium=about-author">{{ site.companies[site.work.company].name }}</a> and also provides freelance consultancy services for Drupal, Symfony and Laravel applications and Linux servers.</p>
 </div>

source/_includes/post/feedback.html.twig

@@ -1,3 +1,3 @@
-<p class="post-feedback" style="font-style: italic">
+<p class="mb-4 italic text-grey-dark">
     <b>Have feedback on this post?</b> <a href="mailto:{{ site.email }}?subject=Feedback: {{ page.title }}">Email me</a> or <a href="https://twitter.com/intent/tweet?text=@{{ site.twitter.name }}&url={{ site.url }}{{ page.url|url_encode }}">send me a tweet</a>.
 </p>

source/_includes/post/header.html.twig

@@ -3,6 +3,6 @@
     {{ page.title }}
 </{{ title_tag }}>
 
-<p class="mt0 black-50">
+<p class="text-grey-dark">
     {{ page.date|date('jS F Y') }}
 </p>

source/_includes/post/pager.html.twig

@@ -1,15 +1,15 @@
-<div class="flex mt3">
+<div class="flex mt-8 -mx-4">
     {% if page.previous_post %}
-        <div class="w-50-ns">
-           <a href="{{ page.previous_post.url }}" class="blue hover-blue">
+        <div class="w-1/2 px-4">
+           <a href="{{ page.previous_post.url }}" class="text-blue @text-blue-dark">
                 &laquo; {{ page.previous_post.title }}
             </a>
         </div>
     {% endif %}
 
     {% if page.next_post %}
-        <div class="w-50-ns tr">
-            <a href="{{ page.next_post.url }}" class="blue hover-blue">
+        <div class="w-1/2 px-4 text-right">
+            <a href="{{ page.next_post.url }}" class="text-blue @text-blue-dark">
                 {{ page.next_post.title }} &raquo;
             </a>
         </div>

source/_includes/post/twitter-link.html.twig

@@ -1,3 +1,3 @@
-<div class="i mb3 black-60">
-    Questions? Comments? I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.
+<div class="mb-4 italic text-grey-dark">
+    <p>Questions? Comments? I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.</p>
 </div>