This commit is contained in:
Oliver Davies 2018-05-29 01:33:00 +02:00
parent 9212cdb015
commit 13a3c1c866
28 changed files with 154 additions and 204 deletions

View file

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

View file

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

View file

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

View file

@ -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;
}
}

View file

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

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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;
}

View file

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

View file

@ -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;
}

View file

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

View file

@ -3,79 +3,14 @@
@tailwind preflight;
p,
li,
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 'base/base';
@import 'base/images';
@import 'components/button';
@import 'components/link';
@import 'components/listing';
@import 'components/post';
@import 'components/post/about-author';
@import 'components/post/code';
@import 'components/markdown';
@import 'components/note';
@import 'components/table';
@import 'components/talk/slides';
@import 'components/talk/video';

View file

@ -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">

View file

@ -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? Im <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' %}

View file

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

View file

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

View file

@ -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>

View file

@ -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>

View file

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

View file

@ -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>

View file

@ -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

View file

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

View file

@ -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

View file

@ -11,30 +11,8 @@ talks:
events:
- { date: '2014-08-19', event: swdug }
---
{% block breadcrumb %}
<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 %}
<p>Here are a list of my previous conference and user group talks:</p>
{% block content %}
<p>Here are a list of my previous conference and user group talks:</p>
{% include "talks-table" with { talks: getPastTalks(data.talks, site.events) } %}
{% include "talks-table" with { talks: getPastTalks(data.talks, site.events) } %}
<p>Upcoming talks can be found on the <a href="{{ site.url }}/talks">talks page</a>.</p>
{% endblock %}
<p>Upcoming talks can be found on the <a href="{{ site.url }}/talks" class="link">talks page</a>.</p>

View file

@ -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) %}
{% if not upcoming_talks.empty %}
{% include "talks-table" with { talks: upcoming_talks, upcoming: true } %}
{% else %}
<p>Nothing scheduled at the moment.</p>
{% endif %}
{% set upcoming_talks = getUpcomingTalks(data.talks, site.events) %}
{% if not upcoming_talks.empty %}
{% include "talks-table" with { talks: upcoming_talks, upcoming: true } %}
{% else %}
<p>Nothing scheduled at the moment.</p>
{% 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 %}

View file

@ -4,6 +4,7 @@ title: 'Test Driven Drupal: The Book'
mailchimp_url: 'https://oliverdavi.us18.list-manage.com/subscribe/post?u=b4ac8dd177796d37b93f9c285&amp;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, Im currently in the planning phase of a book and potentially some accompanying screencasts about it, focussing on Drupal 8.
Im still thinking about what use-cases to cover and examples to include, but here are some of the things Im considering:
@ -36,10 +37,10 @@ Im still thinking about what use-cases to cover and examples to include, but
Ill 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>

View file

@ -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">
<h2>{{ testimonial.name }}</h2>
<div class="mb-2">
<h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
{% if testimonial.role %}
<div class="text-grey-dark">

View file

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