wip

assets/less/base/base.less

@@ -0,0 +1,18 @@
+h1, h2, h3 {
+    @apply .mb-2;
+}
+
+.content {
+    h2,
+    h3 {
+        @apply .mt-6;
+    }
+}
+
+p,
+ul,
+ol,
+table,
+pre {
+    @apply .mb-4;
+}

assets/less/base/images.less

@@ -0,0 +1,7 @@
+img.with-border {
+    @apply .border .border-solid .border-grey-light;
+}
+
+svg {
+    fill: currentColor;
+}

assets/less/components/blockquote.less

@@ -0,0 +1,3 @@
+blockquote {
+    @apply .border-l-4 .border-blue .pl-4;
+}

assets/less/components/button.less

@@ -0,0 +1,13 @@
+.button {
+    @apply .bg-blue;
+    @apply .inline-block;
+    @apply .rounded;
+    @apply .text-white;
+    @apply .px-4;
+    @apply .py-2;
+
+    &:active,
+    &:hover {
+        @apply .bg-blue-dark;
+    }
+}

assets/less/components/link.less

@@ -0,0 +1,3 @@
+.link {
+    @apply .text-blue;
+}

assets/less/components/markdown.less

@@ -0,0 +1,31 @@
+.markdown {
+    p,
+    li {
+        a {
+            @apply .link;
+        }
+    }
+
+    p,
+    li {
+        code {
+            @apply .bg-grey-lighter .inline-block .font-mono .text-xs;
+            padding: 1px 3px;
+        }
+    }
+
+    pre code,
+    pre code.hljs,
+    .hljs {
+        @apply .bg-grey-lighter;
+        @apply .block;
+        @apply .border-grey-dark;
+        @apply .border-l-4;
+        @apply .font-mono;
+        @apply .leading-loose;
+        @apply .overflow-x-scroll;
+        @apply .p-4;
+        @apply .rounded;
+        @apply .text-xs;
+    }
+}

assets/less/components/note.less

@@ -0,0 +1,16 @@
+.note {
+    @apply .bg-blue-lighter;
+    @apply .border-blue;
+    @apply .border-l-4;
+    @apply .mb-4;
+    @apply .p-4;
+    @apply .rounded;
+
+    & > *:last-child {
+        @apply .mb-0;
+    }
+
+    p a {
+        @apply .text-black;
+    }
+}

assets/less/components/post.less

@@ -1,31 +0,0 @@
-pre code,
-pre code.hljs,
-.hljs {
-    @apply .p-4;
-    @apply .text-sm;
-    @apply .border-l-4;
-    @apply .border-grey-dark;
-    @apply .block;
-    @apply .bg-grey-lighter;
-    @apply .overflow-x-scroll;
-    @apply .font-mono;
-}
-
-p,
-li {
-    code {
-        @apply .bg-grey-lighter .inline-block .font-mono;
-        padding: 1px 3px;
-    }
-}
-
-.note {
-    @apply .bg-blue-lighter;
-    @apply .p-4;
-    @apply .border-l-4;
-    @apply .border-blue;
-}
-
-.note > *:last-child {
-    @apply .mb-0;
-}

assets/less/components/post/about-author.less

@@ -1,4 +0,0 @@
-.about-author {
-    @apply .mr-4 .float-left .rounded-full;
-    width: 75px;
-}

assets/less/components/post/code.less

@@ -1,22 +0,0 @@
-p,
-li {
-    code {
-        @apply .bg-grey-lighter .inline-block .font-mono .text-xs;
-        padding: 1px 3px;
-    }
-}
-
-pre code,
-pre code.hljs,
-.hljs {
-    @apply .bg-grey-lighter;
-    @apply .block;
-    @apply .border-grey-dark;
-    @apply .border-l-4;
-    @apply .font-mono;
-    @apply .leading-loose;
-    @apply .overflow-x-scroll;
-    @apply .p-4;
-    @apply .rounded;
-    @apply .text-xs;
-}

assets/less/components/testimonial.less

@@ -1,5 +0,0 @@
-.testimonial-image {
-    @apply .rounded-full .mb-3 .ml-3;
-    height: 65px;
-    width: 65px;
-}

assets/less/site.less

@@ -3,79 +3,14 @@
 
 @tailwind preflight;
 
-p,
+@import 'base/base';
-li,
+@import 'base/images';
-td {
-    a {
-        @apply .text-blue;
-    }
-}
-
-.button {
-    @apply .bg-blue;
-    @apply .inline-block;
-    @apply .rounded;
-    @apply .text-white;
-    @apply .px-4;
-    @apply .py-2;
-
-    &:active,
-    &:hover {
-        @apply .bg-blue-dark;
-    }
-}
-
-blockquote {
-    @apply .border-l-4 .border-blue .pl-4;
-}
-
-img.with-border {
-    @apply .border .border-solid .border-grey-light;
-}
-
-h1, h2, h3 {
-    @apply .mb-2;
-}
-
-.content {
-    h2,
-    h3 {
-        @apply .mt-6;
-    }
-}
-
-p,
-ul,
-ol,
-table,
-pre,
-.note {
-    @apply .mb-4;
-}
-
-a {
-    @apply .text-grey-darkest;
-    text-decoration: none;
-}
-
-main a:not(.button) {
-    text-decoration: underline;
-}
-
-.bullets,
-main ul {
-    list-style: disc;
-    @apply .pl-4;
-}
-
-svg {
-    fill: currentColor;
-}
 
+@import 'components/button';
+@import 'components/link';
 @import 'components/listing';
-@import 'components/post';
+@import 'components/markdown';
-@import 'components/post/about-author';
+@import 'components/note';
-@import 'components/post/code';
 @import 'components/table';
 @import 'components/talk/slides';
 @import 'components/talk/video';

source/_layouts/default.html.twig

@@ -30,13 +30,13 @@
             <link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
         {% endfor %}
     </head>
-    <body class="text-grey-darkest text-sm leading-normal">
+    <body class="text-black text-sm leading-normal">
         <div class="navbar border-bottom border-b border-grey-light mb-6" role="banner">
             <header class="container mx-auto px-4">
                 <div class="md:flex">
                     <div class="w-full md:w-1/3 lg:w-1/4 flex items-center">
                         <div class="w-3/4 py-5">
-                            <a href="/" title="Home">
+                            <a href="/" title="Home" class="text-grey-darkest no-underline hover:underline">
                                 {{ site.title }}
                             </a>
                         </div>
@@ -116,7 +116,8 @@
 
             <footer class="border-t border-grey-light pt-4 mt-4" role="contentinfo">
                 <p>
-                    &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}. Built with <a href="https://sculpin.io">Sculpin</a> and <a href="https://tailwindcss.com">Tailwind CSS</a>.
+                    &copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}.
+                    Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>.
                 </p>
 
                 <div class="mt-2">

source/_layouts/post.html.twig

@@ -4,7 +4,7 @@
     {% include 'post/header' %}
     {% include 'post/intro-image' %}
 
-    <div class="content mb-6">
+    <div class="markdown mb-6">
         {% set limit = 'now'|date_modify('-12 months')|date('U') %}
         {% if page.date|date('U') < limit %}
             <div class="border-2 border-blue p-4 mb-4">
@@ -19,7 +19,10 @@
         {% block content %}{% endblock %}
     </div>
 
-    {% include 'post/twitter-link' %}
+    <div class="mb-4 italic text-grey-dark">
+        <p>Questions? Comments? I’m <a href="https://twitter.com/{{ site.twitter.name }}" class="link">@{{ site.twitter.name }}</a> on Twitter.</p>
+    </div>
+
     {% include 'post/tags' %}
     {% include 'post/pager' %}
     {% include 'post/about-author' %}

source/_layouts/talk.html.twig

@@ -2,8 +2,7 @@
 
 {% block content_wrapper %}
     <div>
-        <div>
+        <div class="markdown">
-            <h2>Abstract</h2>
             {{ page.summary|markdown }}
             {% block content %}{% endblock %}
         </div>

source/_partials/nav-item.html.twig

@@ -1,9 +1,7 @@
-{% set classes = [
+<a
-    '-mx-4 p-4 md:border-b-2 md:border-transparent md:ml-4 md:mr-0 md:p-0',
+    href="{{ href }}"
-    loop.first ? 'border-t border-grey-lighter md:border-t-0 md:border-transparent',
+    class="block text-grey-darkest no-underline p-4 border-l-2 md:border-l-0 md:border-b-2 border-transparent md:ml-4 md:mr-0 md:p-0 hover:border-grey-light {{ loop.first ? 'border-t border-grey-lighter md:border-t-0 md:border-transparent' }} {{ page.url matches '#' ~ pattern ~ '#' ? 'border-blue' }}"
-    page.url matches '#' ~ pattern ~ '#' ? 'md:bg-transparent md:border-blue',
+>
-] %}
-<a href="{{ href }}" class="{{ classes|join(' ')|trim }}">
     <span class="flex items-center h-full">
         {{- title -}}
     </span>

source/_partials/opensource/projects.html.twig

@@ -3,12 +3,12 @@
         <div class="md:w-1/2 md:px-2 mb-4 flex">
             <div class="border p-3 w-full flex flex-col {{ project.versions ? 'justify-between' }}">
                 <h3>
-                    <a href="{{ project.url }}">
+                    <a href="{{ project.url }}" class="text-black no-underline hover:underline focus:underline">
                         {{ project.name }}
                     </a>
                 </h3>
 
-                <div class="flex-1">
+                <div class="markdown flex-1">
                     {{ project.description }}
                 </div>
 

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

@@ -1,7 +1,7 @@
 <div class="clearfix mt-4">
     <h2>About the Author</h2>
 
-    <div class="flex items-center">
+    <div class="flex">
         <div class="mr-4 flex-none leading-none">
             <img
                 src="{{ site.images_url }}{{ site.avatar.url }}"
@@ -10,6 +10,9 @@
             >
         </div>
 
-        <p class="mb-0">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 }}&utm_medium=about-author">{{ site.companies[site.work.company].name }}</a> and a part-time freelancer specialising in Drupal, Symfony and Laravel development and Linux systems administration.</p>
+        <p class="mb-0">
+            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>
 </div>

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

@@ -1,3 +0,0 @@
-<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>

source/_partials/posts/latest.html.twig

@@ -2,10 +2,10 @@
     <div class="widget lh-copy">
         <h2>Latest Blog Posts</h2>
 
-        <ul class="bullets">
+        <ul class="pl-4">
             {% for post in data.posts|slice(0, site.latest_posts) %}
                 <li>
-                    <a href="{{ post.url }}">
+                    <a href="{{ post.url }}" class="link">
                         {{ post.title }}
                     </a>
                 </li>

source/_partials/talks-table.html.twig

@@ -31,11 +31,11 @@
                     {% if not talk_page %}
                         <td>
                             {% if talk.talk.url is not empty %}
-                                <a href="{{ talk.talk.url }}">
+                                <a href="{{ talk.talk.url }}" class="link">
                                     {{ talk.talk.title }}
                                 </a>
                             {% else %}
-                                {{  talk.talk.title }}
+                                {{ talk.talk.title }}
                             {% endif %}
 
                             <div class="text-xs text-grey-dark">
@@ -50,7 +50,7 @@
 
                     <td>
                         {% if talk.event.website is not empty %}
-                            <a href="{{ talk.event.website }}">
+                            <a href="{{ talk.event.website }}" class="link">
                                 {{ talk.event.name }}
                             </a>
                         {% else %}
@@ -69,7 +69,7 @@
                             {% if talk.event.joindin and talk.event.date <= 'today'|date('Y-m-d') %}
                                 <a
                                     href="{{ talk.event.joindin }}"
-                                    class="button"
+                                    class="button no-underline"
                                     title="Read or leave feedback for this talk"
                                 >
                                     <i class="fa fa-comment-o"></i> joind.in

source/experience.html.twig

@@ -141,7 +141,7 @@ experiences:
                     </div>
 
                     {% if experience.description %}
-                        <div>
+                        <div class="markdown">
                             {{ experience.description|markdown }}
                         </div>
                     {% endif %}

source/index.md

@@ -11,6 +11,7 @@ use:
     - posts
     - testimonials
 ---
+<div class="markdown" markdown="1">
 # About Me
 
 <div class="mb-4 w-1/3 sm:w-1/4 lg:w-1/6">
@@ -43,6 +44,7 @@ You can usually find me on Twitter ([@{{ site.twitter.name }}][21]) and IRC ({{
 - User group and conference organiser
 - Blogger and author
 - Speaker
+</div>
 
 [1]: https://www.google.com/#q=opdavies
 [2]: https://www.drupal.org

source/talks-archive.html.twig

@@ -11,30 +11,8 @@ talks:
       events:
           - { date: '2014-08-19', event: swdug }
 ---
-{% block breadcrumb %}
+<p>Here are a list of my previous conference and user group talks:</p>
-    <div class="breadcrumb border-b border-grey-lighter mb-6 -mt-6 bg-grey-lightest">
-        <div class="container mx-auto px-4">
-            <ul class="flex pl-0 mb-0">
-                <li class="list-reset flex items-center">
-                    <a class="inline py-2" href="{{ site.url }}/">Home</a>
-                    {% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
-                </li>
-                <li class="list-reset flex items-center">
-                    <a class="inline py-2" href="{{ site.url }}/talks">Talks</a>
-                     {% include "svg/chevron-right" with { class: 'text-grey-light mx-1', style: "height: 20px" } %}
-                </li>
-                <li class="list-reset flex truncate">
-                    <span class="inline py-2 truncate">Archive</span>
-                </li>
-            </ul>
-        </div>
-    </div>
-{% endblock %}
 
-{% block content %}
+{% include "talks-table" with { talks: getPastTalks(data.talks, site.events) } %}
-    <p>Here are a list of my previous conference and user group talks:</p>
 
-    {% include "talks-table" with { talks: getPastTalks(data.talks, site.events) } %}
+<p>Upcoming talks can be found on the <a href="{{ site.url }}/talks" class="link">talks page</a>.</p>
-
-    <p>Upcoming talks can be found on the <a href="{{ site.url }}/talks">talks page</a>.</p>
-{% endblock %}

source/talks.html.twig

@@ -6,20 +6,24 @@ meta:
 use: [talks]
 ---
 {% block content %}
-    <p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="{{ site.url }}/contact">get in touch</a>.</p>
+    <p>I regularly speak at conferences and user groups about a range of subjects including Drupal, Sculpin and Git. If you would like to me to speak at your group or conference, please <a href="/contact" class="link">get in touch</a>.</p>
 
-    <h2>Upcoming Talks</h2>
+    <div>
+        <h2>Upcoming Talks</h2>
 
-    {% set upcoming_talks = getUpcomingTalks(data.talks, site.events) %}
+        {% set upcoming_talks = getUpcomingTalks(data.talks, site.events) %}
-    {% if not upcoming_talks.empty %}
+        {% if not upcoming_talks.empty %}
-        {% include "talks-table" with { talks: upcoming_talks, upcoming: true } %}
+            {% include "talks-table" with { talks: upcoming_talks, upcoming: true } %}
-    {% else %}
+        {% else %}
-        <p>Nothing scheduled at the moment.</p>
+            <p>Nothing scheduled at the moment.</p>
-    {% endif %}
+        {% endif %}
+    </div>
 
-    <h2>Last 5 Talks</h2>
+    <div>
+        <h2>Last 5 Talks</h2>
 
-    {% include "talks-table" with { talks: getPastTalks(data.talks, site.events)|slice(0,5) } %}
+        {% include "talks-table" with { talks: getPastTalks(data.talks, site.events)|slice(0,5) } %}
 
-    <p>All previous talks can be found in the <a href="{{ site.url }}/talks/archive">talks archive</a>.</p>
+        <p>All previous talks can be found in the <a href="/talks/archive" class="link">talks archive</a>.</p>
+    </div>
 {% endblock %}

source/test-driven-drupal.md

@@ -4,6 +4,7 @@ title: 'Test Driven Drupal: The Book'
 mailchimp_url: 'https://oliverdavi.us18.list-manage.com/subscribe/post?u=b4ac8dd177796d37b93f9c285&id=033c84e0d5'
 contact_email: 'oliver@testdrivendrupal.com'
 ---
+<div class="markdown" markdown="1">
 Having [given talks][1] 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:
@@ -36,10 +37,10 @@ I’m still thinking about what use-cases to cover and examples to include, but
 I’ll most likely be publishing it via Leanpub, and will be sending free chapters, early-bird discounts and links to screencasts and blog posts as I write the book to subscribers of the mailing list.
 
 If you have questions or would like to suggest something for me to include in the book, please <a href="mailto:{{ page.contact_email }}">contact me</a>.
-
 ## Mailing List
 
 Enter your email address to subscribe to the Test Driven Drupal mailing list.
+</div>
 
 <div id="mc_embed_signup">
     <form action="{{ page.mailchimp_url }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate p-0" target="_blank" novalidate>

source/testimonials.html.twig

@@ -69,19 +69,19 @@ testimonials:
 {% block content %}
     <div class="listing">
         {% for testimonial in page.testimonials|reverse %}
-            <article class="listing-item">
+            <article class="mb-12">
                 {% if testimonial.image %}
                     <div class="float-right mb-4 ml-4">
                         <img
                             src="{{ site.url }}/build/images/testimonials/{{ testimonial.image }}"
                             alt="{{ testimonial.name }}"
-                            class="rounded-full w-24 h-24"
+                            class="rounded-full w-16 h-16"
                         >
                     </div>
                 {% endif %}
 
-                <div class="mb-4">
+                <div class="mb-2">
-                    <h2>{{ testimonial.name }}</h2>
+                    <h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
 
                     {% if testimonial.role %}
                         <div class="text-grey-dark">

tailwind.js

@@ -284,10 +284,10 @@ module.exports = {
     backgroundPosition: ['responsive'],
     backgroundRepeat: ['responsive'],
     backgroundSize: ['responsive'],
-    borderColors: ['responsive', 'hover'],
+    borderColors: ['responsive', 'hover', 'focus'],
     borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
+    borderStyle: ['responsive', 'hover', 'focus'],
-    borderWidths: ['responsive'],
+    borderWidths: ['responsive', 'hover', 'focus'],
     cursor: ['responsive'],
     display: ['responsive'],
     flexbox: ['responsive'],