Tweaks

assets/js/components/Navbar.vue

@@ -20,7 +20,7 @@
       >
         <a
           v-for="item in items"
-          class="block text-black focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm"
+          class="block text-black no-underline focus:outline-none p-4 border-l-3 sm:border-l-0 sm:border-b-3 border-transparent hover:border-grey-light sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm"
           :class="{'border-blue hover:border-blue': isActive(item)}"
           :href="item.href"
         >

assets/sass/app.sass

@@ -2,10 +2,6 @@
 @import '~highlightjs/styles/github-gist'
 
 @tailwind preflight
-
-@import 'base/base'
-@import 'base/images'
-
 @tailwind components
 
 @import 'components/blockquote'

assets/sass/base/base.sass

@@ -1,35 +0,0 @@
-a
-  @apply text-blue no-underline
-
-  &:focus,
-  &:hover
-    @apply underline
-
-b,
-strong
-  @apply font-bold
-
-main a
-  @apply underline
-
-  &:focus,
-  &:hover
-    @apply no-underline
-
-  &:focus
-    @apply text-white bg-blue outline-none px-px -mx-px
-
-h1, h2, h3
-  @apply text-black mb-2 font-bold
-
-.content h2,
-.content h3
-  @apply mt-6
-
-p,
-ul,
-ol,
-blockquote,
-table,
-pre
-  @apply mb-6

assets/sass/base/images.sass

@@ -1,14 +0,0 @@
-img
-  &.has-border,
-  &.with-border
-    @apply border border-solid border-grey-light
-
-  &.has-padding,
-  &.with-padding
-    @apply p-2
-
-  &.avatar
-    @apply border p-1 rounded-full
-
-svg
-  fill: currentColor

assets/sass/components/markdown.sass

@@ -19,6 +19,27 @@
   p:last-child
     @apply mb-0
 
+  p,
+  ul,
+  ol,
+  blockquote,
+  table
+    @apply mb-4
+
+  pre
+    @apply my-8
+
+  a,
+  .link
+    @apply text-blue underline
+
+    &:focus,
+    &:hover
+      @apply no-underline
+
+    &:focus
+      @apply text-white bg-blue outline-none px-px -mx-px
+
   pre code,
   .hljs
     @apply block leading-loose overflow-x-scroll p-6

source/_layouts/default.html.twig

@@ -7,8 +7,10 @@
 
     <div class="mt-24 max-w-xl px-4 mx-auto">
         <main id="main-content">
-            {% block page_title %}
+            {% block page_title_wrapper %}
-                <h1>{{ page.title }}</h1>
+                <h1 class="mb-4">
+                    {% block page_title %}{{ page.title }}{% endblock %}
+                </h1>
             {% endblock %}
 
             {% block content_wrapper %}

source/_layouts/page.html.twig

@@ -1,5 +0,0 @@
-{% extends 'default' %}
-
-{% block content_top %}
-    <h1>{{ page.title }}</h1>
-{% endblock %}

source/_layouts/post.html.twig

@@ -1,6 +1,6 @@
-{% extends 'page' %}
+{% extends 'default' %}
 
-{% block page_title %}{% endblock %}
+{% block page_title_wrapper %}{% endblock %}
 
 {% block metaTags %}
 <meta name="twitter:card" content="summary">

source/_partials/availability.html.twig

@@ -1,5 +1,5 @@
 <div class="widget">
-    <h2>Availability</h2>
+    <h2 class="mb-2">Availability</h2>
 
     <ul class="pl-5">
         {% for type, value in site.availability %}

source/_partials/badges.html.twig

@@ -11,7 +11,7 @@
 
     <div class="px-4">
         <div class="widget bg-grey-light p-4 rounded">
-            <div class="-mb-3">
+            <div class="markup -mb-3">
                 <h2 class="visuallyhidden">Certifications</h2>
 
                 {% include 'certification' with {

source/_partials/blog/post-summary.html.twig

@@ -0,0 +1,14 @@
+<h2 class="text-2xl mb-1">{{ post.draft ? 'Draft: '|upper }}{{ post.title }}</h2>
+
+<p class="text-sm text-grey-dark mb-4">Posted on {{ post.date|date('jS F Y') }}</p>
+
+{% include 'post/intro-image' with { page: post } %}
+
+<div class="markup mb-4">
+    <p>{{ post.excerpt }}</p>
+</div>
+
+<a href="{{ post.url }}" class="button">
+    Read more
+    <span class="visuallyhidden">about {{ post.title }}</span>
+</a>

source/_partials/layout/footer.html.twig

@@ -1,13 +1,13 @@
 <footer class="border-grey-light border-t mb-8 mt-10 pt-5 text-sm">
-    <div class="md:flex md:justify-between">
+    <div class="markup md:flex md:justify-between">
         <div>
             <p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p>
         </div>
 
         <div>
             <p>
-                Built with <a href="https://sculpin.io">Sculpin</a> and <a href="https://tailwindcss.com">Tailwind CSS</a>,
+                Built with <a class="no-underline hover:underline" href="https://sculpin.io">Sculpin</a> and <a class="no-underline hover:underline" href="https://tailwindcss.com">Tailwind CSS</a>,
-                and hosted on <a href="https://www.netlify.com">Netlify</a>.
+                and hosted on <a class="no-underline hover:underline" href="https://www.netlify.com">Netlify</a>.
             </p>
         </div>
     </div>

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

@@ -1,13 +1,13 @@
-<div>
+<div class="markup">
     <h2>About the Author</h2>
 
     <div class="flex items-center">
         <div class="mr-4 flex-none leading-none">
-            <img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="avatar w-16">
+            <img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="w-16 rounded-full border border-grey">
         </div>
 
         <p class="text-sm mb-0">
-            Oliver Davies is a Web Developer and System Administrator based in the UK.
+            Oliver Davies is a Full Stack Web Developer and System Administrator based in the UK.
             He is a {{ site.work.role }} at <a href="{{ site.companies[site.work.company].url }}?utm_source={{ site.short_url }}&amp;utm_medium=about-author" class="link">{{ site.companies[site.work.company].name }}</a> and a part-time freelancer specialising in Drupal, Symfony and Laravel development and Linux systems administration.
         </p>
     </div>

source/_partials/post/header.html.twig

@@ -1,8 +1,7 @@
-{% set title_tag = title_tag ?: 'h1' %}
+<div class="mb-8 bg-blue-light">
-<{{ title_tag }} class="leading-tight mb-1">
+    <h1 class="leading-tight mb-2">{{ page.title }}</h1>
-    {{ page.title }}
-</{{ title_tag }}>
 
-<p class="text-grey-dark">
+    <p class="text-grey-dark">
-    <span class="visuallyhidden">Posted on </span>{{ page.date|date('jS F Y') }}
+        <span class="visuallyhidden">Posted on </span>{{ page.date|date('jS F Y') }}
-</p>
+    </p>
+</div>

source/_partials/post/questions-comments.html.twig

@@ -1,4 +1,4 @@
-<div class="mb-4">
+<div class="markup mb-4">
     <p>
         Questions? Comments?
         I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.

source/_partials/posts/latest.html.twig

@@ -1,6 +1,6 @@
 {% if data.posts and page.url != '/blog' %}
-    <div class="widget lh-copy">
+    <div class="markup">
-        <h2>Latest Blog Posts</h2>
+        <h2 class="mb-2">Latest Blog Posts</h2>
 
         <ul class="pl-4">
             {% for post in data.posts|slice(0, site.latest_posts) %}

source/_partials/talks-table.html.twig

@@ -27,7 +27,7 @@
                     </td>
 
                     {% if not talk_page %}
-                        <td class="whitespace-no-wrap xl:whitespace-normal">
+                        <td class="markup whitespace-no-wrap xl:whitespace-normal">
                             {% if talk.talk.url is not empty %}
                                 <a href="{{ talk.talk.url }}">
                                     {{ talk.talk.title }}
@@ -46,7 +46,7 @@
                         </td>
                     {% endif %}
 
-                    <td class="whitespace-no-wrap xl:whitespace-normal">
+                    <td class="markup whitespace-no-wrap xl:whitespace-normal">
                         {% if talk.event.url is not empty %}
                             <a href="{{ talk.event.url }}">
                                 {{ talk.event.name }}
@@ -67,7 +67,7 @@
                             {% if talk.event.joindin and talk.event.date <= 'today'|date('Y-m-d') %}
                                 <a
                                     href="{{ talk.event.joindin }}"
-                                    class="button no-underline"
+                                    class="button"
                                     title="Read or leave feedback for this talk"
                                 >
                                     <i class="fa fa-comment-o"></i> joind.in

source/about.html.twig

@@ -13,10 +13,8 @@ permalink: /
 {% block content %}
 <div class="md:flex -mx-6">
     <div class="w-auto md:flex-1 px-6 mb-12 md:mb-0">
-        <h1 class="mb-6">About Me</h1>
-
         <div class="markup mb-8">
-            <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="avatar"></div>
+            <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-grey"/></div>
 
             <p>Hi, I’m Oliver Davies (aka <a href="https://www.google.com/#q=opdavies">opdavies</a>) - a Full Stack Web Developer and System Administrator based in Wales, UK.</p>
 
@@ -38,5 +36,3 @@ permalink: /
     </div>
 </div>
 {% endblock %}
-
-{% block page_title %}{% endblock %}

source/blog.html

@@ -4,22 +4,10 @@ title: Blog
 use: [posts]
 ---
 {% block content %}
-    <ul class="list-reset -mx-4">
+    <ul class="list-reset -mt-2 -mx-4">
         {% for post in data.posts %}
             <li class="p-4 mb-12 {{ post.draft ? 'bg-blue-lighter' }}">
-                <h2 class="text-2xl mb-1">{{ post.draft ? 'Draft: '|upper }}{{ post.title }}</h2>
+                {% include 'blog/post-summary' %}
-                <p class="text-sm text-grey-dark mb-4">Posted on {{ post.date|date('jS F Y') }}</p>
-
-                {% include 'post/intro-image' with { page: post } %}
-
-                <div class="markup">
-                    <p>{{ post.excerpt }}</p>
-
-                    <a href="{{ post.url }}" class="button">
-                        Read more
-                        <span class="visuallyhidden">about {{ post.title }}</span>
-                    </a>
-                </div>
             </li>
         {% endfor %}
     </ul>

source/contact.html.twig

@@ -4,7 +4,7 @@ layout: default
 use: [posts]
 ---
 {% block content %}
-    <div>
+    <div class="mt-2 mb-6">
         <p>To send me an email, complete the form below.</p>
     </div>
 

source/cv.html.twig

@@ -1,5 +1,5 @@
 ---
-layout: page
+layout: default
 title: Curriculum Vitae
 experience:
     - company: microserve

source/talks.html.twig

@@ -34,13 +34,12 @@ talks:
         date: '2019-01-28'
 ---
 {% block content %}
-    <p>
+    <div class="markup mb-6">
-        I regularly speak at conferences and user groups about a range of subjects including PHP, Drupal, automated testing, Git and systems administration.
+        <p>I regularly speak at conferences and user groups about a range of subjects including PHP, Drupal, automated testing, Git and systems administration.</p>
-        If you would like to me to speak at your group or conference, please <a href="/contact">get in touch</a>.
+    </div>
-    </p>
 
     <div class="mb-6">
-        <h2>Upcoming Talks</h2>
+        <h2 class="mb-2">Upcoming Talks</h2>
 
         {% set upcoming_talks = getUpcomingTalks(data.talks|merge(page.talks), site.events) %}
         {% if not upcoming_talks.empty %}
@@ -54,7 +53,7 @@ talks:
     </div>
 
     <div>
-        <h2>Previous Talks</h2>
+        <h2 class="mb-2">Previous Talks</h2>
 
         {% include "talks-table" with {
             talks: getPastTalks(data.talks|merge(page.talks), site.events)

source/test-driven-drupal.md

@@ -5,7 +5,7 @@ mailchimp_url: 'https://oliverdavi.us18.list-manage.com/subscribe/post?u=b4ac8dd
 contact_email: 'oliver@testdrivendrupal.com'
 ---
 {% block content %}
-<div class="markdown" markdown="1">
+<div class="markdown mb-6" markdown="1">
 Having [given talks][1] and workshops, been a guest on podcasts and [written blog posts][0] about automated testing in Drupal, I’m currently in the planning phase of a book and potentially some accompanying screencasts about it, focussing on Drupal 8.
 
 I’m still thinking about what use-cases to cover and examples to include, but here are some of the things I’m considering:

tailwind.js

@@ -3,24 +3,20 @@ var colors = {
   'transparent': 'transparent',
 
   'black': '#222b2f',
-  'grey-darkest': '#364349',
+  'blue': '#0678be',
-  'grey-darker': '#596a73',
+  'blue-dark': '#2779bd',
-  'grey-dark': '#70818a',
+  'blue-lighter': '#bcdefa',
+  'green-dark': '#1f9d55',
   'grey': '#9babb4',
+  'grey-dark': '#70818a',
+  'grey-darker': '#596a73',
+  'grey-darkest': '#364349',
   'grey-light': '#dae4e9',
   'grey-lighter': '#f2f2f2',
   'grey-lightest': '#fafcfc',
-  'white': '#ffffff',
-
-  'blue-dark': '#2779bd',
-  'blue': '#0678be',
-  'blue-lighter': '#bcdefa',
-
-  'red-dark': '#cc1f1a',
-
   'orange': '#f6993f',
-
+  'red-dark': '#cc1f1a',
-  'green-dark': '#1f9d55',
+  'white': '#ffffff',
 }
 
 module.exports = {