Merge branch 'layout'

2018-12-29 23:57:17 +00:00 · 2018-12-29 23:57:17 +00:00 · ced4121eff
parent e06622ded8 70f29ffd4b
commit ced4121eff
13 changed files with 137 additions and 178 deletions
--- a/assets/js/components/Navbar.vue
+++ b/assets/js/components/Navbar.vue
@ -2,7 +2,9 @@
  <div>
    <div class="sm:flex">
      <div class="w-full sm:w-1/3 lg:w-1/4 flex items-center">
-        <div class="w-3/4 py-5">{{ siteName }}</div>
+        <div class="w-3/4 py-5">
+          <div class="font-semibold">{{ siteTitle }}</div>
+        </div>

        <div class="w-1/4 text-right sm:hidden">
          <button type="button" class="nav-toggle appearance-none" @click="hidden = !hidden" aria-label="Toggle main menu">
@ -32,14 +34,8 @@
 <script>
 export default {
  props: {
-    siteName: {
-      type: String,
-      required: true,
-    },
-    pageUrl: {
-      type: String,
-      required: true,
-    },
+    siteTitle: String,
+    pageUrl: String,
  },

  methods: {
--- a/assets/sass/components/button.sass
+++ b/assets/sass/components/button.sass
@ -1,5 +1,5 @@
 .button
-  @apply bg-blue border-blue border-2 inline-block rounded-lg text-white no-underline px-4 py-2
+  @apply bg-blue border-blue border inline-block text-white no-underline py-1 px-3 rounded

  &:active,
  &:focus,
@ -7,4 +7,4 @@
    @apply bg-white text-blue

  &:focus
-    @apply px-4 py-2 m-0
+    @apply px-3 py-1 m-0
--- a/assets/sass/components/markdown.sass
+++ b/assets/sass/components/markdown.sass
@ -8,7 +8,7 @@
  p,
  li
    code
-      @apply bg-grey-lighter inline-block font-mono text-sm px-1 py-px border border-grey-light
+      @apply bg-grey-lighter inline-block font-mono text-xs px-1 py-px border border-grey-light

  p:last-child
    @apply mb-0
@ -16,7 +16,7 @@
  pre code,
  .hljs
    @apply bg-grey-lighter block border-grey-dark border-l-4 font-mono
-    @apply leading-loose overflow-x-scroll p-6 rounded text-sm
+    @apply leading-loose overflow-x-scroll p-6 rounded text-xs

  figure
    @apply block mb-8
--- a/source/_layouts/base.html.twig
+++ b/source/_layouts/base.html.twig
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="no-js text-sm md:text-base" lang="en-GB">
+<html class="no-js text-base md:text-lg" lang="en-GB">
    <head>
        <title>{% if page.title is defined and page.url != '//' %}{{ page.title }} | {% endif %}{{ site.title }} - {{ site.subtitle }}</title>
        {% include 'meta' %}
@ -16,7 +16,7 @@
            <link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
        {% endfor %}

-        <link href="https://fonts.googleapis.com/css?family=Barlow:300,400,700" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css?family=Barlow:400,600,700" rel="stylesheet">
    </head>
    <body class="font-sans text-black leading-normal">
        <div id="app" v-cloak>
--- a/source/_layouts/default.html.twig
+++ b/source/_layouts/default.html.twig
@ -5,35 +5,30 @@

    {% include 'layout/navbar' %}

-    <div class="container mx-auto px-4">
-        <div class="md:flex -mx-4">
-            <main id="main-content" class="md:w-2/3 lg:w-3/4 px-4 mb-8 lg:mb-0">
-                {% block page_title %}
-                    <h1>{{ page.title }}</h1>
-                {% endblock %}
-
-                {% block content_wrapper %}
-                    {% block content %}{% endblock %}
-                {% endblock %}
-            </main>
-
-            {% block sidebar_wrapper %}
-                <div class="md:w-1/3 lg:w-1/4 px-4" role="complementary">
-                    {% block sidebar %}
-                        {% include 'badges' %}
-                    {% endblock %}
-                </div>
+    <div class="mt-24 max-w-xl px-4 mx-auto">
+        <main id="main-content">
+            {% block page_title %}
+                <h1>{{ page.title }}</h1>
            {% endblock %}
-        </div>

-        <footer class="border-t border-grey-light pt-4 mt-4">
-            <p>
-                &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>.
-                Hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
-            </p>
+            {% block content_wrapper %}
+                {% block content %}{% endblock %}
+            {% endblock %}
+        </main>

-            {% include 'meetups' %}
+        <footer class="border-grey-light border-t mb-8 mt-10 pt-5">
+            <div class="md:flex md:justify-between">
+                <div>
+                    <p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p>
+                </div>
+
+                <div>
+                    <p>
+                        Built with <a class="link" href="https://sculpin.io">Sculpin</a> and <a class="link" href="https://tailwindcss.com">Tailwind CSS</a>,
+                        and hosted on <a class="link" href="https://www.netlify.com">Netlify</a>.
+                    </p>
+                </div>
+            </div>
        </footer>
    </div>
 {% endblock %}
--- a/source/_layouts/page.html.twig
+++ b/source/_layouts/page.html.twig
@ -1,5 +1,5 @@
 {% extends 'default' %}

 {% block content_top %}
-    <h1>{{ page.title }}</h1>
+    <h1 class="text-blue mb-4">{{ page.title }}</h1>
 {% endblock %}
--- a/source/_partials/badges.html.twig
+++ b/source/_partials/badges.html.twig
@ -1,56 +1,60 @@
-<div>
-    <div class="widget">
-        <div class="flex justify-center">
-            <a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="block mb-4 px-4 md:px-0 w-3/4">
-                <img src="/images/badges/da-individual-member.png" alt="Drupal Association Individual Member"/>
-            </a>
+<div class="block sm:flex md:block -mx-4">
+    <div class="px-4">
+        <div class="widget">
+            <div class="max-w-xs md:max-w-full mx-auto">
+                <a href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member." class="block mb-4 px-4 md:px-0 mx-10">
+                    <img src="/images/badges/da-individual-member.png" alt="Drupal Association Individual Member"/>
+                </a>
+            </div>
        </div>
    </div>

-    <div class="widget bg-grey-light p-4 rounded">
-        <div class="-mb-2">
-            <h2 class="visuallyhidden">Certifications</h2>
+    <div class="px-4">
+        <div class="widget bg-grey-light p-4 rounded">
+            <div class="-mb-3">
+                <h2 class="visuallyhidden">Certifications</h2>

-            {% include 'certification' with {
-                title: 'Acquia certified Grand Master - Drupal 8',
-                url: 'http://certification.acquia.com/user/1647756',
-                image: {
-                    filename: 'acquia-d8-grand-master.png',
-                    alt: 'Acquia Certified Grand Master - Drupal 8 Exam Badge',
-                },
-            } %}
+                {% include 'certification' with {
+                    title: 'Acquia certified Grand Master - Drupal 8',
+                    url: 'http://certification.acquia.com/user/1647756',
+                    image: {
+                        filename: 'acquia-d8-grand-master.png',
+                        alt: 'Acquia Certified Grand Master - Drupal 8 Exam Badge',
+                    },
+                } %}

-            {% include 'certification' with {
-                title: 'Acquia certified Developer - Drupal 8',
-                image: {
-                    filename: 'acquia-d8-developer.png',
-                    alt: 'Acquia Certified Developer - Drupal 8 Exam Badge',
-                },
-            } %}
+                {% include 'certification' with {
+                    title: 'Acquia certified Developer - Drupal 8',
+                    image: {
+                        filename: 'acquia-d8-developer.png',
+                        alt: 'Acquia Certified Developer - Drupal 8 Exam Badge',
+                    },
+                } %}

-            {% include 'certification' with {
-                title: 'Acquia certified Back End Specialist - Drupal 8',
-                image: {
-                    filename: 'acquia-d8-back-end.png',
-                    alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge',
-                },
-            } %}
+                {% include 'certification' with {
+                    title: 'Acquia certified Back End Specialist - Drupal 8',
+                    image: {
+                        filename: 'acquia-d8-back-end.png',
+                        alt: 'Acquia Certified Back End Specialist - Drupal 8 Exam Badge',
+                    },
+                } %}

-            {% include 'certification' with {
-                title: 'Acquia certified Front End Specialist - Drupal 8',
-                image: {
-                    filename: 'acquia-d8-front-end.png',
-                    alt: 'Acquia Certified Front End Specialist - Drupal 8 Exam Badge',
-                },
-            } %}
+                {% include 'certification' with {
+                    title: 'Acquia certified Front End Specialist - Drupal 8',
+                    image: {
+                        filename: 'acquia-d8-front-end.png',
+                        alt: 'Acquia Certified Front End Specialist - Drupal 8 Exam Badge',
+                    },
+                } %}

-            {% include 'certification' with {
-                title: 'Acquia certified Cloud Pro',
-                image: {
-                    filename: 'acquia-cloud-pro.png',
-                    alt: 'Acquia Certified Cloud Pro Exam Badge',
-                },
-            } %}
+                {% include 'certification' with {
+                    title: 'Acquia certified Cloud Pro',
+                    image: {
+                        filename: 'acquia-cloud-pro.png',
+                        alt: 'Acquia Certified Cloud Pro Exam Badge',
+                    },
+                } %}
+            </div>
        </div>
    </div>
 </div>
--- a/source/_partials/certification.html.twig
+++ b/source/_partials/certification.html.twig
@ -1,14 +1,14 @@
-<div class="flex mb-2">
-    <div class="w-16 mr-2 flex-none">
+<div class="flex mb-3">
+    <div class="w-16 mr-3 flex-none">
        <div class="flex flex-col items-center">
            <img src="/images/badges/{{ image.filename }}" alt="{{ image.alt }}" />
        </div>
    </div>

-    <div class="flex items-center">
-        <p class="mb-0 text-sm">
+    <div class="flex items-center ml-px">
+        <p class="text-sm mb-0 mr-1">
            {% if url %}
-                <a href="{{ url }}">{{ title }}</a>
+                <a href="{{ url }}" class="no-underline hover:underline focus:underline">{{ title }}</a>
            {% else %}
                {{ title }}
            {% endif %}
--- a/source/_partials/layout/navbar.html.twig
+++ b/source/_partials/layout/navbar.html.twig
@ -1,12 +1,9 @@
-<div class="border-bottom border-b border-grey-light mb-6">
-    <div class="container mx-auto">
+<div class="border-bottom border-b border-grey-light mb-6 fixed pin-t w-full bg-white">
+    <div class="px-4 md:px-8 mx-auto">
        <div class="block py-5 v-cloak-block">
-            {{ site.title }}
+            <div class="font-semibold">{{ site.title }}</div>
        </div>

-        <navbar
-            site-name="{{ site.title }}"
-            page-url="{{ page.url }}"
-        ></navbar>
+        <navbar site-title="{{ site.title }}" page-url="{{ page.url }}"></navbar>
    </div>
 </div>
--- a/source/_partials/post/questions-comments.html.twig
+++ b/source/_partials/post/questions-comments.html.twig
@ -1,7 +1,6 @@
-<div class="mb-4 italic text-grey-dark">
+<div class="mb-4">
    <p>
        Questions? Comments?
-        I’m <a href="https://twitter.com/{{ site.twitter.name }}" class="link">@{{ site.twitter.name }}</a> on Twitter,
-        or <a href="/contact" class="link">send me an email</a>.
+        I’m <a href="https://twitter.com/{{ site.twitter.name }}">@{{ site.twitter.name }}</a> on Twitter.
    </p>
 </div>
--- a/source/about.html.twig
+++ b/source/about.html.twig
@ -0,0 +1,43 @@
+---
+layout: default
+title: About Me
+meta:
+    og:
+        title: 'Oliver Davies - Full Stack Developer, System Administrator, PHP and Drupal specialist'
+
+        description: 'The personal website and blog of Oliver Davies, a Full Stack Developer and System Administrator from Wales, UK.'
+        type: website
+use:
+    - posts
+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="markdown mb-8">
+            <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="avatar"></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>
+
+            <p>I’m a Senior Developer at <a href="https://microserve.io?utm_source=oliverdavies.uk&amp;utm_medium=about-bio">Microserve</a>, part-time freelancer, former Developer at the <a href="https://www.drupal.org/association">Drupal Association</a>, open source contributor and advocate, mentor and conference speaker.</p>
+
+            <p>I primarily work with Drupal and am an <a href="https://certification.acquia.com/user/1647756">Acquia certified Drupal Grand Master</a>, but also use Symfony, Laravel and Sculpin, and have some experience working with JavaScript frameworks including Vue.js and Angular.</p>
+
+            <p>I’m a webmaster and documentation maintainer for <a href="https://www.drupal.org">Drupal.org</a>, and a provisional member of the <a href="https://www.drupal.org/security-team">Drupal Security team</a>. <a href="https://www.oliverdavies.uk/talks">I speak at various user groups and conferences</a>, and co-organise the <a href="https://www.drupalbristol.org.uk">Drupal Bristol user group</a>, <a href="https://phpsw.uk">PHPSW</a> and <a href="https://www.drupalcampbristol.co.uk">DrupalCamp Bristol</a>.</p>
+
+            <p>You can find me on <a href="https://twitter.com/opdavies">Twitter</a>, and see my open source work on <a href="https://www.drupal.org/u/opdavies">Drupal.org</a> and <a href="http://github.com/opdavies">GitHub</a> as well as on <a href="https://packagist.org/users/opdavies">Packagist</a>, <a href="https://www.npmjs.com/~opdavies">npm</a> and <a href="https://galaxy.ansible.com/opdavies">Ansible Galaxy</a>.</p>
+        </div>
+
+        {% include 'availability' %}
+        {% include 'posts/latest' %}
+    </div>
+
+    <div class="w-full md:w-2/5 lg:w-1/3 px-6">
+        {% include 'badges' %}
+    </div>
+</div>
+{% endblock %}
+
+{% block page_title %}{% endblock %}
--- a/source/about.md
+++ b/source/about.md
@ -1,76 +0,0 @@
---
-layout: default
-title: About Me
-meta:
-    og:
-        title: 'Oliver Davies - Full Stack Developer, System Administrator, PHP and Drupal specialist'
-        description: 'The personal website and blog of Oliver Davies, a Full Stack Developer and System Administrator from Wales, UK.'
-        type: website
-use:
-    - posts
-    - testimonials
-permalink: /
---
-<div class="markdown" markdown="1">
-<div class="mb-4 w-1/3 sm:w-1/4 lg:w-1/6">
-    <img
-        src="{{ site.avatar.url }}"
-        alt="Picture of Oliver"
-        class="avatar"
-    >
-</div>
-
-My name is Oliver Davies (aka [opdavies][1]) - a Full Stack Web Developer and System Administrator based in Wales, UK. I’m a {{ site.work.role }} at [{{ site.companies[site.work.company].name }}][20], part-time freelancer, former Developer at the [{{ site.companies.drupal_association.name }}][39], open source contributor and advocate, mentor and conference speaker.
-
-I primarily work with Drupal and am an [Acquia certified Drupal Grand Master][41], but also use Symfony, Laravel and Sculpin, and have some experience working with JavaScript frameworks including Vue.js and Angular.
-
-I’m a webmaster and documentation maintainer for [Drupal.org][42], and a provisional member of the [Drupal Security team][14]. [I speak at various user groups and conferences][40], and co-organise the [Drupal Bristol user group][15], [PHPSW][17] and [DrupalCamp Bristol][18].
-
-You can find me on [Twitter][21], and see my open source work on [Drupal.org][22] and [GitHub][23] as well as on [Packagist][24], [npm](https://www.npmjs.com/~opdavies) and [Ansible Galaxy][25].
-</div>
-
-{% include 'availability' %}
-{% include 'posts/latest' %}
-
-[1]: https://www.google.com/#q=opdavies
-[2]: https://www.drupal.org
-[3]: http://symfony.com
-[4]: http://git-scm.com
-[5]: https://en.wikipedia.org/wiki/Linux
-[6]: http://www.ansible.com
-[7]: https://assoc.drupal.org
-[8]: https://www.microserve.io
-[9]: http://precedent.com
-[10]: http://www.nomensa.com
-[11]: https://www.drupal.org/u/opdavies/issue-credits/3060
-[12]: https://www.drupal.org/project/user/381388
-[13]: https://www.drupal.org/user/381388/people-mentored
-[14]: https://www.drupal.org/security-team
-[15]: https://www.drupalbristol.org.uk
-[16]: https://groups.drupal.org/wales-uk
-[17]: https://phpsw.uk
-[18]: https://www.drupalcampbristol.co.uk
-[19]: {{site.url}}/talks/
-[20]: {{site.companies[site.work.company].url}}?utm_source={{site.short_url}}&utm_medium=about-bio
-[21]: {{site.twitter.url}}
-[22]: {{site.drupalorg.url_new}}
-[23]: {{site.github.url}}
-[24]: {{site.packagist.url}}
-[25]: {{site.ansible_galaxy.url}}
-[26]: {{site.speakerdeck.url}}
-[27]: {{site.linkedin.url}}
-[28]: {{site.youtube.channel_url}}
-[29]: http://silex.sensiolabs.org
-[30]: https://laravel.com
-[31]: https://sculpin.io
-[32]: https://docs.puppet.com/guides/faq.html#what-is-puppet
-[33]: {{site.joindin.url}}
-[34]: https://www.ctidigital.com
-[35]: {{site.wordpress.url}}
-[36]: https://www.reddit.com/user/opdavies
-[37]: http://stackoverflow.com/users/3012648/opdavies
-[38]: https://disqus.com/by/opdavies
-[39]: {{site.companies.drupal_association.url}}
-[40]: {{site.url}}/talks
-[41]: https://certification.acquia.com/user/1647756
-[42]: https://www.drupal.org
--- a/tailwind.js
+++ b/tailwind.js
@ -238,6 +238,7 @@ module.exports = {
    '10': '2.5rem',
    '12': '3rem',
    '16': '4rem',
+    '24': '6rem',
  },

  negativeMargin: {