Switch to Tailwind

2017-11-09 22:44:30 +00:00 · 2017-11-09 22:44:30 +00:00 · 0d4fd40873
commit 0d4fd40873
parent 3a8d5362f2
35 changed files with 1128 additions and 293 deletions
--- a/source/_includes/availability.html.twig
+++ b/source/_includes/availability.html.twig
@ -1,7 +1,7 @@
-<div class="lh-copy">
+<div class="block mb-4">
    <h2>Availability</h2>

-    <ul class="list pa0">
+    <ul class="">
        {% for type, value in site.availability %}
            <li>
                {% include 'availability/' ~ value %}
--- a/source/_includes/availability/limited.html.twig
+++ b/source/_includes/availability/limited.html.twig
@ -1,2 +1,2 @@
-<i class="mr1 fa fa-thumbs-o-up orange"></i>
+<i class="mr-1 fa fa-thumbs-o-up text-orange"></i>
 Currently have limited {{ type }}-time capacity.
--- a/source/_includes/availability/no.html.twig
+++ b/source/_includes/availability/no.html.twig
@ -1,2 +1,2 @@
-<i class="mr1 fa fa-thumbs-o-down dark-red"></i>
+<i class="mr-1 fa fa-thumbs-o-down text-red-dark"></i>
 Currently no spare {{ type }}-time capacity.
--- a/source/_includes/availability/yes.html.twig
+++ b/source/_includes/availability/yes.html.twig
@ -1,2 +1,2 @@
-<i class="mr1 fa fa-thumbs-o-up dark-green"></i>
+<i class="mr-1 fa fa-thumbs-o-up text-green-dark"></i>
 Currently have available {{ type }}-time capacity.
--- a/source/_includes/badges.html.twig
+++ b/source/_includes/badges.html.twig
@ -1,27 +1,26 @@
-<div>
-    <a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="db mb3 tc">
-        <img
-            src="{{ site.images_url }}/assets/images/badges/da-individual-member.png"
-            alt="Drupal Association Individual Member"
-            width="200"
+<div class="text-center">
+    <a href="https://assoc.drupal.org/membership"
+       title="I’m a Drupal Association member."
+       class="block mb-4">
+        <img src="{{ site.images_url }}/assets/images/badges/da-individual-member.png"
+             alt="Drupal Association Individual Member"
+             width="200"
        />
    </a>

-    <div class="db mb3 dt">
+    <div class="mb-4 flex">
        {% for badge in [
            { image: 'acquia-d8-developer.png', alt: 'Acquia Certified Developer - Drupal 8 Exam Badge' },
-            { image: 'acquia-d8-back-end.png', alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge' }
+            { image: 'acquia-d8-back-end.png', alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge' },
        ] %}
-            <div class="dtc">
-                <img
-                    src="{{ site.images_url }}/assets/images/badges/{{ badge.image }}"
-                    alt="{{ badge.alt }}"
-                />
+            <div>
+                <img src="{{ site.images_url }}/assets/images/badges/{{ badge.image }}"
+                     alt="{{ badge.alt }}" />
            </div>
        {% endfor %}
    </div>

-    <a href="http://conference.phpnw.org.uk/phpnw17" class="db">
+    <a href="http://conference.phpnw.org.uk/phpnw17" class="block mb-4">
        <img src="{{ site.images_url }}/assets/images/badges/phpnw17.png" alt="">
    </a>
 </div>
--- a/source/_includes/meetups.html.twig
+++ b/source/_includes/meetups.html.twig
@ -4,15 +4,13 @@
    <ul class="list flex pa0 mt0">
        {% for meetup in site.meetups %}
            <li>
-                <a
-                    href="{{ meetup.url }}"
-                    title="{{ meetup.name }}"
-                    class="dib {% if not loop.last %}mr2{% endif %}">
+                <a href="{{ meetup.url }}"
+                   title="{{ meetup.name }}"
+                   class="dib mr-4">

-                    <img
-                        src="{{ site.images_url }}/assets/images/meetups/{{ meetup.logo }}"
-                        alt="{{ meetup.name }} logo"
-                        class="h3">
+                    <img src="{{ site.images_url }}/assets/images/meetups/{{ meetup.logo }}"
+                         alt="{{ meetup.name }} logo"
+                         class="h-16">
                </a>
            </li>
        {% endfor %}
--- a/source/_includes/nav.html.twig
+++ b/source/_includes/nav.html.twig
@ -1,19 +1,18 @@
-<header class="w-100 ph4-ns bg-white bb b--light-gray mb2">
-    <div class="db dt-ns mw9 center w-100">
-        <div class="db dtc-ns v-mid tl w-30">
-            <a href="/" class="dib f5 mt0 link black-70" title="Home">
+<div class="border-bottom border-b border-grey-lighter mb-4">
+    <header class="container mx-auto flex items-center">
+        <div class="w-1/4">
+            <a href="/" class="" title="Home">
                {{ site.title }}
            </a>
        </div>

-        <nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
+        <nav class="w-3/4 text-right">
            {% for link in site.nav_links %}
-                <a
-                    href="{{ link.href }}"
-                    class="nav-item {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'nav-item--active' }}">
+                <a href="{{ link.href }}"
+                   class="inline-block py-4 ml-4 {{ page.url matches '#^' ~ (link.pattern ?: link.href) ~ '/?#' ? 'border-b-2 border-blue' }}">
                    {{- link.title -}}
                </a>
            {% endfor %}
        </nav>
-    </div>
-</header>
+    </header>
+</div>
--- a/source/_includes/post/about-author.html.twig
+++ b/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>
--- a/source/_includes/post/feedback.html.twig
+++ b/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>
--- a/source/_includes/post/header.html.twig
+++ b/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>
--- a/source/_includes/post/pager.html.twig
+++ b/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>
--- a/source/_includes/post/twitter-link.html.twig
+++ b/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>
--- a/source/_includes/posts/latest.html.twig
+++ b/source/_includes/posts/latest.html.twig
@ -2,7 +2,7 @@
    <div class="lh-copy">
        <h2>Latest blog posts</h2>

-        <ul class="list pa0">
+        <ul class="bullets">
            {% for post in data.posts|slice(0, site.latest_posts) %}
                <li>
                    <a href="{{ post.url }}">
--- a/source/_includes/talk/events.html.twig
+++ b/source/_includes/talk/events.html.twig
@ -1,4 +1,4 @@
-<div class="mt4">
+<div class="mt-8">
    <h2>Events</h2>

    {% include "talks-table" with {
--- a/source/_includes/talk/slides.html.twig
+++ b/source/_includes/talk/slides.html.twig
@ -1,7 +1,8 @@
 {% if page.slides.embed %}
-    <div class="mt2">
+    <div class="mt-8">
        <h2>Slides</h2>
-        <div class="slides w-100 bg-center">
+
+        <div>
            {{ page.slides.embed|raw }}
        </div>
    </div>
--- a/source/_includes/talks-table-row.html.twig
+++ b/source/_includes/talks-table-row.html.twig
@ -1,16 +1,16 @@
-<tr class="striped--near-white">
-    <td class="pa2">
+<tr>
+    <td class="p-2">
        {{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }}

        {% if row.event.time is defined %}
-            <small class="db black-70">
+            <div class="text-xs text-grey-dark">
                {{ row.event.time }}
-            </small>
+            </div>
        {% endif %}
    </td>

    {% if not talk_page %}
-        <td class="pa2">
+        <td class="p-2">
            {% if row.talk.url is not empty %}
                <a href="{{ row.talk.url }}">
                    {{ row.talk.title }}
@ -19,17 +19,17 @@
                {{  row.talk.title }}
            {% endif %}

-            <small class="db black-70">
+            <div class="text-xs text-grey-dark">
                {% if row.talk.type %}
                    {{ row.talk.type }}
                {% else %}
                    {{ row.event.type|default('Talk') }}
                {% endif %}
-            </small>
+            </div>
        </td>
    {% endif %}

-    <td class="pa2">
+    <td class="p-2">
        {% if row.event.website is not empty %}
            <a href="{{ row.event.website }}">
                {{ row.event.name }}
@ -39,19 +39,18 @@
        {% endif %}

        {% if row.event.location is defined %}
-            <small class="db black-70">
+            <div class="text-xs text-grey-dark">
                {{ row.event.location }}
-            </small>
+            </div>
        {% endif %}
    </td>

    {% if not upcoming %}
-        <td class="ph2">
+        <td class="p-2">
            {% if row.event.feedback and row.event.date <= today %}
-                <a
-                    href="{{ row.event.feedback }}"
-                    class="button"
-                    title="Read or leave feedback for this talk">
+                <a href="{{ row.event.feedback }}"
+                   class="button"
+                   title="Read or leave feedback for this talk">
                    <i class="fa fa-comment-o"></i> joind.in
                </a>
            {% endif %}
--- a/source/_includes/talks-table.html.twig
+++ b/source/_includes/talks-table.html.twig
@ -1,17 +1,17 @@
 <div class="overflow-auto">
-    <table class="w-100 ba b--black-20">
+    <table class="talks-table w-full border border-grey-light">
        <thead>
-            <tr class="striped--near-white">
-                <th class="w-20-l pa2 tl bg-white">Date</th>
+            <tr>
+                <th class="w-1/4 p-2 text-left bg-white">Date</th>

                {% if not talk_page %}
-                    <th class="w-40-l pa2 tl bg-white">Talk</th>
+                    <th class="w-1/3 p-2 text-left bg-white">Talk</th>
                {% endif %}

-                <th class="pa2 tl bg-white">Event</th>
+                <th class="p-2 text-left bg-white">Event</th>

                {% if not upcoming %}
-                    <th class="w4 pa2 tl bg-white">Feedback</th>
+                    <th class="p-2 text-left bg-white">Feedback</th>
                {% endif %}
            </tr>
        </thead>