opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'update-tailwind'

Browse source
This commit is contained in:
Oliver Davies 2019-03-21 09:38:16 +00:00
parent 465ad91c2f 3cac471fef
commit ca804e4d5c
38 changed files with 83 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/css/app.css
View file

@ -19,7 +19,7 @@ img {
} }
a { a {
@apply text-blue no-underline; @apply text-blue-600 no-underline;
&:hover { &:hover {
@apply underline @apply underline

2
assets/css/components/blockquote.css
View file

@ -1,3 +1,3 @@
blockquote { blockquote {
@apply border-l-4 border-blue pl-4 px-6 py-2 @apply border-l-4 border-blue-600 pl-4 px-6 py-2
} }

4
assets/css/components/button.css
View file

@ -1,5 +1,5 @@
.button { .button {
@apply bg-blue border-blue border inline-block text-white no-underline py-2 px-3 rounded text-sm; @apply bg-blue-600 border-blue-600 border inline-block text-white no-underline py-2 px-3 rounded text-sm;
&:focus { &:focus {
@apply py-2 px-3 m-0 @apply py-2 px-3 m-0
@ -8,6 +8,6 @@
&:active, &:active,
&:focus, &:focus,
&:hover { &:hover {
@apply bg-white text-blue @apply bg-white text-blue-600
} }
} }

10
assets/css/components/markup.css
View file

@ -22,14 +22,18 @@
} }
} }
ul {
@apply list-disc ml-5
}
code { code {
@apply bg-grey-lighter font-mono text-sm @apply bg-gray-200 font-mono text-sm
} }
p, p,
li { li {
code { code {
@apply inline-block border border-grey-light font-bold mx-px p-1 leading-none @apply inline-block border border-gray-300 font-bold mx-px p-1 leading-none
} }
} }
@ -44,6 +48,6 @@
} }
figcaption { figcaption {
@apply italic text-sm text-grey-darker text-center mb-0 mt-1 @apply italic text-sm text-gray-800 text-center mb-0 mt-1
} }
} }

2
assets/css/components/note.css
View file

@ -1,5 +1,5 @@
.note { .note {
@apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded; @apply bg-blue-200 border-blue-600 border-l-4 mb-4 p-4 rounded;
> *:not(:first-child) { > *:not(:first-child) {
@apply mt-6 @apply mt-6

2
assets/css/components/talks/video.css
View file

@ -1,6 +1,6 @@
.talk-video { .talk-video {
iframe, iframe,
embed { embed {
@apply absolute h-full pin-l pin-t w-full @apply absolute h-full left-0 top-0 w-full
} }
} }

6
assets/js/components/Navbar.vue
View file

@ -8,7 +8,7 @@
<div class="w-1/4 text-right sm:hidden"> <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"> <button type="button" class="nav-toggle appearance-none" @click="hidden = !hidden" aria-label="Toggle main menu">
<svg class="fill-current text-grey-dark w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg> <svg class="fill-current text-gray-600 w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16.4 9H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zm0 4H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1zM3.6 7h12.8c.552 0 .6-.447.6-1 0-.553-.048-1-.6-1H3.6c-.552 0-.6.447-.6 1 0 .553.048 1 .6 1z"/></svg>
</button> </button>
</div> </div>
</div> </div>
@ -20,8 +20,8 @@
> >
<a <a
v-for="item in items" v-for="item in items"
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 focus:border-grey-light focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px" 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-gray-300 focus:border-gray-300 focus:bg-white sm:ml-4 sm:mr-0 sm:p-0 hover:no-underline text-sm -mb-px"
:class="{'border-blue hover:border-blue': isActive(item)}" :class="{'border-blue-600 hover:border-blue-600': isActive(item)}"
:href="item.href" :href="item.href"
> >
<span class="flex items-center h-full">{{ item.title }}</span> <span class="flex items-center h-full">{{ item.title }}</span>

2
package.json
View file

@ -14,7 +14,7 @@
"laravel-mix": "^2.1.11", "laravel-mix": "^2.1.11",
"laravel-mix-purgecss": "^2.1.2", "laravel-mix-purgecss": "^2.1.2",
"postcss-nested": "^4.1.2", "postcss-nested": "^4.1.2",
"tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next", "tailwindcss": "^1.0.0-beta.3",
"tailwindcss-skip-link": "^1.0.0", "tailwindcss-skip-link": "^1.0.0",
"tailwindcss-visuallyhidden": "^1.0.1", "tailwindcss-visuallyhidden": "^1.0.1",
"tailwindcss-vuejs": "^1.0.0", "tailwindcss-vuejs": "^1.0.0",

2
source/_layouts/app.html.twig
View file

@ -20,7 +20,7 @@
<link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}"> <link rel="icon" href="{{ site.favicon.url }}?s={{ size }}" sizes="{{ size }}x{{ size }}">
{% endfor %} {% endfor %}
</head> </head>
<body class="antialiased font-sans text-grey-darkest leading-normal"> <body class="antialiased font-sans text-gray-800 leading-normal">
<div id="app" v-cloak> <div id="app" v-cloak>
{% block body %}{% endblock %} {% block body %}{% endblock %}
</div> </div>

2
source/_layouts/default.html.twig
View file

@ -1,7 +1,7 @@
{% extends 'app' %} {% extends 'app' %}
{% block body %} {% block body %}
<a href="#main-content" class="skip-link absolute pin-t pin-l text-white bg-blue p-4 focus:outline-none"> <a href="#main-content" class="skip-link absolute top-0 left-0 text-white bg-blue-600 p-4 focus:outline-none">
Skip to main content Skip to main content
</a> </a>

2
source/_partials/about/availability.html.twig
View file

@ -1,7 +1,7 @@
<div class="widget"> <div class="widget">
<h2 class="mb-2">Availability</h2> <h2 class="mb-2">Availability</h2>
<ul class="pl-5"> <ul class="list-disc pl-5">
{% for type, value in site.availability %} {% for type, value in site.availability %}
<li> <li>
{% include 'about/availability/' ~ value %} {% include 'about/availability/' ~ value %}

2
source/_partials/about/badges.html.twig
View file

@ -10,7 +10,7 @@
</div> </div>
<div class="px-4"> <div class="px-4">
<div class="widget bg-grey-light p-4 rounded"> <div class="widget bg-gray-300 p-4 rounded">
<div class="-mb-3"> <div class="-mb-3">
<h2 class="visuallyhidden">Certifications</h2> <h2 class="visuallyhidden">Certifications</h2>

2
source/_partials/blog/post-summary.html.twig
View file

@ -14,7 +14,7 @@
</div> </div>
<div> <div>
<a href="{{ post.url }}" class="text-sm text-grey-dark hover:text-grey-darker"> <a href="{{ post.url }}" class="text-sm text-gray-600 hover:text-gray-800">
Read more Read more
<span class="visuallyhidden">about '{{ post.title }}'</span> <span class="visuallyhidden">about '{{ post.title }}'</span>
&rarr; &rarr;

4
source/_partials/cv/experience.html.twig
View file

@ -4,14 +4,14 @@
{% for item in page.experience %} {% for item in page.experience %}
<li class="mb-12"> <li class="mb-12">
{% if site.companies[item.company].url %} {% if site.companies[item.company].url %}
<h3><a href="{{ site.companies[item.company].url }}" class="text-inherit no-underline hover:underline focus:bg-grey-darkest">{{ site.companies[item.company].name }}</a></h3> <h3><a href="{{ site.companies[item.company].url }}" class="text-inherit no-underline hover:underline focus:bg-gray-900">{{ site.companies[item.company].name }}</a></h3>
{% else %} {% else %}
<h3>{{ site.companies[item.company].name }}</h3> <h3>{{ site.companies[item.company].name }}</h3>
{% endif %} {% endif %}
{% for role in item.roles %} {% for role in item.roles %}
<div> <div>
<h4 class="mb-3 text-grey-darker">{{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})</h4> <h4 class="mb-3 text-gray-800">{{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})</h4>
{{ role.description|markdown }} {{ role.description|markdown }}
</div> </div>

2
source/_partials/layout/footer.html.twig
View file

@ -1,4 +1,4 @@
<footer class="border-grey-light border-t mb-8 mt-10 pt-5 text-sm"> <footer class="border-gray-300 border-t mb-8 mt-10 pt-5 text-sm">
<div class="md:flex md:justify-between"> <div class="md:flex md:justify-between">
<div> <div>
<p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p> <p>&copy; 2010-{{ 'now'|date('Y') }} {{ site.title }}</p>

2
source/_partials/layout/navbar.html.twig
View file

@ -1,4 +1,4 @@
<div class="border-bottom border-b border-grey-light mb-6 fixed pin-t w-full bg-white z-20"> <div class="border-bottom border-b border-gray-300 mb-6 fixed top-0 w-full bg-white z-20">
<div class="px-4 md:px-8 mx-auto"> <div class="px-4 md:px-8 mx-auto">
<div class="block py-5 v-cloak-block"> <div class="block py-5 v-cloak-block">
<div class="font-semibold text-sm">{{ site.title }}</div> <div class="font-semibold text-sm">{{ site.title }}</div>

2
source/_partials/opensource/projects.html.twig
View file

@ -15,7 +15,7 @@
{% if project.versions %} {% if project.versions %}
<div class="mt-4 text-right"> <div class="mt-4 text-right">
{% for version in project.versions %} {% for version in project.versions %}
<span class="text-xs ml-1 px-1 py-1 bg-grey-light text-grey-dark rounded">{% spaceless %} <span class="text-xs ml-1 px-1 py-1 bg-gray-300 text-gray-600 rounded">{% spaceless %}
Drupal {{ version }} Drupal {{ version }}
{% endspaceless %}</span> {% endspaceless %}</span>
{% endfor %} {% endfor %}

4
source/_partials/pages/book/signup-form.html.twig
View file

@ -6,8 +6,8 @@
</div> </div>
<div class="flex overflow-hidden"> <div class="flex overflow-hidden">
<input type="email" value="" name="EMAIL" class="required email block w-full border border-grey p-3 pl-5 rounded-l-full" placeholder="enter your email" aria-label="Email"> <input type="email" value="" name="EMAIL" class="required email block w-full border border-gray p-3 pl-5 rounded-l-full" placeholder="enter your email" aria-label="Email">
<button type="submit" name="subscribe" class="block w-auto border border-grey border-l-0 py-3 pl-5 pr-6 rounded-r-full bg-blue text-white">Subscribe</button> <button type="submit" name="subscribe" class="block w-auto border border-gray border-l-0 py-3 pl-5 pr-6 rounded-r-full bg-blue-600 text-white">Subscribe</button>
</div> </div>
</div> </div>
</form> </form>

12
source/_partials/post-pager.html.twig
View file

@ -2,11 +2,11 @@
<ul class="list-reset inline-flex"> <ul class="list-reset inline-flex">
<li> <li>
{% if page.pagination.page == 1 %} {% if page.pagination.page == 1 %}
<span class="rounded-l-lg p-3 border border-grey text-grey -mr-px cursor-not-allowed"> <span class="rounded-l-lg p-3 border border-gray text-gray -mr-px cursor-not-allowed">
Previous Previous
</span> </span>
{% else %} {% else %}
<a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px"> <a href="{{ page.pagination.previous_page.url }}" class="rounded-l-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
Previous Previous
</a> </a>
{% endif %} {% endif %}
@ -15,11 +15,11 @@
{% for i in range(1, page.pagination.total_pages) %} {% for i in range(1, page.pagination.total_pages) %}
<li class="{{ i > (page.pagination.page + 2) or i < (page.pagination.page - 2) ? 'hidden sm:block' }}"> <li class="{{ i > (page.pagination.page + 2) or i < (page.pagination.page - 2) ? 'hidden sm:block' }}">
{% if i == page.pagination.page %} {% if i == page.pagination.page %}
<span class="p-3 border border-grey text-white bg-blue -mr-px"> <span class="p-3 border border-gray text-white bg-blue-600 -mr-px">
{{ i }} {{ i }}
</span> </span>
{% else %} {% else %}
<a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey -mr-px"> <a href="{{ i == 1 ? '/blog' : '/blog/page/' ~ i ~ '.html' }}" class="link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray -mr-px">
{{ i }} {{ i }}
</a> </a>
{% endif %} {% endif %}
@ -28,11 +28,11 @@
<li> <li>
{% if page.pagination.next_page.url %} {% if page.pagination.next_page.url %}
<a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-grey-lighter focus:underline p-3 border border-grey"> <a href="{{ page.pagination.next_page.url }}" class="rounded-r-lg link no-underline hover:underline hover:bg-gray-200 focus:underline p-3 border border-gray">
Next Next
</a> </a>
{% else %} {% else %}
<span class="rounded-r-lg p-3 border border-grey text-grey cursor-not-allowed"> <span class="rounded-r-lg p-3 border border-gray text-gray cursor-not-allowed">
Next Next
</span> </span>
{% endif %} {% endif %}

2
source/_partials/post/about-author.html.twig
View file

@ -3,7 +3,7 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="mr-4 flex-none leading-none"> <div class="mr-4 flex-none leading-none">
<img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="w-16 rounded-full border border-grey"> <img src="{{ site.avatar.url }}" alt="Picture of Oliver" class="w-16 rounded-full border border-gray">
</div> </div>
<p class="mb-0"> <p class="mb-0">

2
source/_partials/post/feedback.html.twig
View file

@ -1,3 +1,3 @@
<p class="mb-4 italic text-grey-dark"> <p class="mb-4 italic text-gray-600">
<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>. <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> </p>

2
source/_partials/post/header.html.twig
View file

@ -1,7 +1,7 @@
<div class="mb-8"> <div class="mb-8">
<h1 class="leading-tight mb-2">{{ page.title }}</h1> <h1 class="leading-tight mb-2">{{ page.title }}</h1>
<p class="text-grey-dark"> <p class="text-gray-600">
{% include 'posts/post-date' with { post: page } %} {% include 'posts/post-date' with { post: page } %}
</p> </p>
</div> </div>

2
source/_partials/post/old-post-message.html.twig
View file

@ -1,5 +1,5 @@
{% if page.date|date('U') < 'now'|date_modify('-12 months')|date('U') %} {% if page.date|date('U') < 'now'|date_modify('-12 months')|date('U') %}
<div class="border-2 border-blue p-4 mb-6"> <div class="border-2 border-blue-600 p-4 mb-6">
<p class="text-sm mb-0"> <p class="text-sm mb-0">
<span class="font-bold">Warning:</span> <span class="font-bold">Warning:</span>
This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date. This post is over a year old. I don't always update old posts with new information, so some of this information may be out of date.

2
source/_partials/post/tags.html.twig
View file

@ -4,7 +4,7 @@
<ul class="list-reset flex flex-wrap"> <ul class="list-reset flex flex-wrap">
{% for tag in page.tags|sort %} {% for tag in page.tags|sort %}
<li> <li>
<a href="/blog/tags/{{ tag }}" class="text-xs py-1 px-2 mr-1 mb-1 bg-grey-lighter text-grey-darker leading-none no-underline hover:underline focus:bg-grey-darker focus:text-white focus:outline-none"> <a href="/blog/tags/{{ tag }}" class="text-xs py-1 px-2 mr-1 mb-1 bg-gray-200 text-gray-800 leading-none no-underline hover:underline focus:bg-gray-800 focus:text-white focus:outline-none">
{{- tag -}} {{- tag -}}
</a> </a>
</li> </li>

4
source/_partials/talk/events.html.twig
View file

@ -2,7 +2,7 @@
<div class="mt-8"> <div class="mt-8">
<h2 class="mb-2">Presented at</h2> <h2 class="mb-2">Presented at</h2>
<ul class="markup"> <ul class="markup list-disc ml-5">
{% for event in page.events %} {% for event in page.events %}
<li> <li>
{% set eventData = site.events[event.event] %} {% set eventData = site.events[event.event] %}
@ -14,7 +14,7 @@
{% if eventData.location %} {% if eventData.location %}
in {{ eventData.location }} in {{ eventData.location }}
{% endif %} {% endif %}
<span class="text-grey-darker">- {{ event.date|date('jS F Y') }}</span> <span class="text-gray-800">- {{ event.date|date('jS F Y') }}</span>
</li> </li>
{% endfor %} {% endfor %}
</ul> </ul>

6
source/_partials/talks/table.html.twig
View file

@ -20,7 +20,7 @@
</span> </span>
{% if talk.event.time is defined %} {% if talk.event.time is defined %}
<div class="text-xs text-grey-dark"> <div class="text-xs text-gray-600">
{{ talk.event.time }} {{ talk.event.time }}
</div> </div>
{% endif %} {% endif %}
@ -36,7 +36,7 @@
{{ talk.talk.title }} {{ talk.talk.title }}
{% endif %} {% endif %}
<div class="text-xs text-grey-dark"> <div class="text-xs text-gray-600">
{% if talk.talk.type %} {% if talk.talk.type %}
{{ talk.talk.type }} {{ talk.talk.type }}
{% else %} {% else %}
@ -56,7 +56,7 @@
{% endif %} {% endif %}
{% if talk.event.location is defined %} {% if talk.event.location is defined %}
<div class="text-xs text-grey-dark"> <div class="text-xs text-gray-600">
{{ talk.event.location }} {{ talk.event.location }}
</div> </div>
{% endif %} {% endif %}

8
source/_partials/talks/talk.html.twig
View file

@ -1,13 +1,15 @@
<article> <article>
<h3 class="text-lg text-black mb-1">{{ talk.title }}</h3> <h3 class="text-lg text-black mb-1">
{{ talk.title }}
</h3>
<div class="text-grey-darkest"> <div>
<p>{{ talk.description }}</p> <p>{{ talk.description }}</p>
</div> </div>
{% if talk.url %} {% if talk.url %}
<footer class="mt-1"> <footer class="mt-1">
<a href="{{ talk.url }}" class="text-sm text-grey-dark hover:text-grey-darkest focus:text-grey-darkest no-underline hover:underline"> <a href="{{ talk.url }}" class="text-sm text-gray-600 hover:text-gray-900 focus:text-gray-900 no-underline hover:underline">
Find out more Find out more
<span class="visuallyhidden">about {{ talk.title }}</span> <span class="visuallyhidden">about {{ talk.title }}</span>
&rarr; &rarr;

12
source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md
View file

@ -93,7 +93,7 @@ export default {
<div class="font-serif"> <div class="font-serif">
<h1 class="font-normal">Welcome to {{ title }}</h1> <h1 class="font-normal">Welcome to {{ title }}</h1>
<p>No front page content has been created yet.</p> <p>No front page content has been created yet.</p>
<p>Follow the <a href="#0" class="text-blue-dark hover:text-blue no-underline border-b border-blue border-dotted hover:bg-solid">User Guide</a> to start building your site.</p> <p>Follow the <a href="#0" class="text-blue-dark hover:text-blue-600 no-underline border-b border-blue-600 border-dotted hover:bg-solid">User Guide</a> to start building your site.</p>
</div> </div>
<div class="mt-10"> <div class="mt-10">
@ -106,13 +106,13 @@ export default {
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6"> <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
<div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6"> <div class="w-full md:w-1/3 lg:w-1/4 flex-none md:px-6">
<div class="p-4" style="background-color: #f6f6f2"> <div class="p-4" style="background-color: #f6f6f2">
<h2 class="font-serif font-normal text-base text-grey-darkest border-b border-solid border-grey-light mb-3">Search</h2> <h2 class="font-serif font-normal text-base text-gray-900 border-b border-solid border-gray-300 mb-3">Search</h2>
<div> <div>
<form action="#" class="flex"> <form action="#" class="flex">
<input type="text" class="border border-solid border-grey p-2 w-full xl:w-auto"> <input type="text" class="border border-solid border-gray p-2 w-full xl:w-auto">
<button type="submit" class="bg-grey-light px-3 rounded-full border-b border-solid border-grey-dark ml-2 flex-none" style="background-color: #f0f0f0"> <button type="submit" class="bg-gray-300 px-3 rounded-full border-b border-solid border-gray-600 ml-2 flex-none" style="background-color: #f0f0f0">
<img src="img/loupe.svg" class="block"> <img src="img/loupe.svg" class="block">
</button> </button>
</form> </form>
@ -127,7 +127,7 @@ export default {
<div id="footer" class="text-xs text-white"> <div id="footer" class="text-xs text-white">
<div class="container mx-auto px-4 pt-16 pb-4"> <div class="container mx-auto px-4 pt-16 pb-4">
<div class="border-t border-solid border-grey-darkest pt-6 -mb-6"> <div class="border-t border-solid border-gray-900 pt-6 -mb-6">
<div class="mb-6"> <div class="mb-6">
<p><a href="#0">Contact</a></p> <p><a href="#0">Contact</a></p>
</div> </div>
@ -197,7 +197,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
<div> <div>
<button <button
type="button" type="button"
class="w-full p-3 block sm:hidden bg-blue-light text-sm text-grey-darker text-left focus:outline-none" class="w-full p-3 block sm:hidden bg-blue-light text-sm text-gray-800 text-left focus:outline-none"
@click="open = !open" @click="open = !open"
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">

2
source/_posts/2018-12-16-published-my-first-npm-package.md
View file

@ -68,7 +68,7 @@ Within my `navbar.html.twig` partial, I have a placeholder div that also contain
{% raw %}<div v-pre markdown="1"> {% raw %}<div v-pre markdown="1">
```twig ```twig
<div class="border-bottom border-b border-grey-light mb-6"> <div class="border-bottom border-b border-gray-300 mb-6">
<div class="container mx-auto"> <div class="container mx-auto">
<div class="block py-5 v-cloak-block"> <div class="block py-5 v-cloak-block">
{{ site.title }} {{ site.title }}

8
source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md
View file

@ -59,7 +59,7 @@ I added a `style` section within `Welcome.vue`, and added some default styling f
<div id="footer" class="text-xs text-white"> <div id="footer" class="text-xs text-white">
<div class="container mx-auto px-4 pt-16 pb-4"> <div class="container mx-auto px-4 pt-16 pb-4">
<div class="border-t border-solid border-grey-darkest pt-6 -mb-6"> <div class="border-t border-solid border-gray-900 pt-6 -mb-6">
<div class="mb-6"> <div class="mb-6">
<p><a href="#0">Contact</a></p> <p><a href="#0">Contact</a></p>
</div> </div>
@ -90,11 +90,11 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc
@apply underline @apply underline
#main a #main a
@apply text-blue-dark no-underline border-b border-blue border-dotted @apply text-blue-dark no-underline border-b border-blue-600 border-dotted
&:hover, &:hover,
&:focus &:focus
@apply text-blue border-solid @apply text-blue-600 border-solid
#footer a #footer a
@apply text-white no-underline border-b border-dotted border-white @apply text-white no-underline border-b border-dotted border-white
@ -114,7 +114,7 @@ As well as being able to extract re-usable components within Tailwind, the same
// src/components/Sidebar.vue // src/components/Sidebar.vue
<template> <template>
<div class="bg-grey-lighter p-4 mb-4"> <div class="bg-gray-200 p-4 mb-4">
<slot></slot> <slot></slot>
</div> </div>
</template> </template>

6
source/_posts/rebuilding-acquia-dashboard-with-vuejs-tailwind-css.md
View file

@ -108,21 +108,21 @@ This was the first page that I rebuilt - the Environments page for an applicatio
Vue Router is configured to show the Vue Router is configured to show the
<figure> <figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-grey-light p-2"> <img src="/images/blog/rebuilding-acquia-vue-tailwind/2-environments.png" alt="A screenshot of the rebuilt Environments page." class="border border-gray-300 p-2">
<figcaption>The rebuilt Environments page for an application.</figcaption> <figcaption>The rebuilt Environments page for an application.</figcaption>
</figure> </figure>
## The applications page ## The applications page
<figure> <figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-grey-light p-2"> <img src="/images/blog/rebuilding-acquia-vue-tailwind/1-applications.png" alt="A screenshot of the rebuilt Applications page." class="border border-gray-300 p-2">
<figcaption>The rebuilt Applications page.</figcaption> <figcaption>The rebuilt Applications page.</figcaption>
</figure> </figure>
## An environment page ## An environment page
<figure> <figure>
<img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-grey-light p-2"> <img src="/images/blog/rebuilding-acquia-vue-tailwind/3-environment.png" alt="A screenshot of the rebuilt page for an environment within an application." class="border border-gray-300 p-2">
<figcaption>The rebuilt page for an environment within an application.</figcaption> <figcaption>The rebuilt page for an environment within an application.</figcaption>
</figure> </figure>

2
source/about.html.twig
View file

@ -13,7 +13,7 @@ wide: true
<div class="md:flex -mx-6"> <div class="md:flex -mx-6">
<div class="w-auto md:flex-1 px-6 mb-12 md:mb-0"> <div class="w-auto md:flex-1 px-6 mb-12 md:mb-0">
<div class="markup spaced-y-4 mb-8"> <div class="markup spaced-y-4 mb-8">
<div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-grey"/></div> <div class="mb-4 w-32"><img src="/images/me-precedent.jpg" alt="Picture of Oliver" class="rounded-full border border-gray"/></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>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>

2
source/articles/archive.html.twig
View file

@ -11,7 +11,7 @@ use: [posts]
<div class="-mx-4 spaced-y-4"> <div class="-mx-4 spaced-y-4">
{% for post in data.posts %} {% for post in data.posts %}
<article class="p-4 {{ post.draft ? 'bg-blue-lighter' }}"> <article class="p-4 {{ post.draft ? 'bg-blue-200' }}">
{% include 'blog/post-summary' with { {% include 'blog/post-summary' with {
show_date: true, show_date: true,
} %} } %}

2
source/experience.html.twig
View file

@ -146,7 +146,7 @@ experiences:
</a> </a>
{%- endif %} {%- endif %}
<div class="text-sm text-grey-dark"> <div class="text-sm text-gray-600">
{{ helpers.roleText(experience) }} {{ helpers.roleText(experience) }}
</div> </div>
</div> </div>

4
source/podcasts.html.twig
View file

@ -24,13 +24,13 @@ episodes:
<article> <article>
<h2 class="text-lg">{{ podcast.name }}: {{ episode.title }}</h2> <h2 class="text-lg">{{ podcast.name }}: {{ episode.title }}</h2>
<time class="text-sm text-grey-darker block mt-px mb-2" datetime="{{ episode.date|date('Y-m-d') }}"> <time class="text-sm text-gray-800 block mt-px mb-2" datetime="{{ episode.date|date('Y-m-d') }}">
{{ episode.date|date('jS F Y') }} {{ episode.date|date('jS F Y') }}
</time> </time>
<p>{{ episode.description }}</p> <p>{{ episode.description }}</p>
<a href="{{ episode.url }}" class="inline-block mt-2 text-sm text-grey-dark hover:text-grey-darker focus:text-grey-darker"> <a href="{{ episode.url }}" class="inline-block mt-2 text-sm text-gray-600 hover:text-gray-800 focus:text-gray-800">
{{ episode.video ? 'Watch' : 'Listen to' }} this {{ episode.video ? 'Watch' : 'Listen to' }} this
<span class="visuallyhidden">{{ podcast.name }}</span> <span class="visuallyhidden">{{ podcast.name }}</span>
episode &rarr; episode &rarr;

16
source/testimonials.html.twig
View file

@ -5,13 +5,13 @@ use: [posts]
testimonials: testimonials:
- name: Ed Welsby - name: Ed Welsby
image: ed-welsby.png image: ed-welsby.png
role: Senior Developer at <a class="text-blue inline-block" href="http://www.proctors.co.uk">Proctor & Stevenson</a> role: Senior Developer at <a class="text-blue-600 inline-block" href="http://www.proctors.co.uk">Proctor & Stevenson</a>
text: | text: |
Oliver was great to work with, he has a solid knowledge of the various aspects of web development and never minded helping me out with Linux commands! Oliver was great to work with, he has a solid knowledge of the various aspects of web development and never minded helping me out with Linux commands!
- name: Brian Healy - name: Brian Healy
image: brian-healy.png image: brian-healy.png
role: Director of Business Development at <a class="text-blue inline-block" href="http://tincan.co.uk">Tincan</a>. role: Director of Business Development at <a class="text-blue-600 inline-block" href="http://tincan.co.uk">Tincan</a>.
text: | text: |
Oliver was fantastic to work with - pro-active and highly responsive, he worked well remotely and as part of a project team. His understanding of the project requirement(s) and ability to translate it into working code was essential and he delivered. Oliver was fantastic to work with - pro-active and highly responsive, he worked well remotely and as part of a project team. His understanding of the project requirement(s) and ability to translate it into working code was essential and he delivered.
@ -31,21 +31,21 @@ testimonials:
Oliver is seasoned Drupal and all round highly skilled and experienced web developer. I have worked with Oliver on an important project where he was reliable, prompt and ensured strict client deadline delivery and confidentiality at all times. Oliver is seasoned Drupal and all round highly skilled and experienced web developer. I have worked with Oliver on an important project where he was reliable, prompt and ensured strict client deadline delivery and confidentiality at all times.
- name: James Chapman - name: James Chapman
role: Director at <a class="text-blue inline-block" href="http://www.developmentdoneright.co.uk">Development Done Right</a> role: Director at <a class="text-blue-600 inline-block" href="http://www.developmentdoneright.co.uk">Development Done Right</a>
image: james-chapman.png image: james-chapman.png
text: | text: |
We used Oliver on a number of occasions throughout 2012 and I have to say we've been delighted with his work. His skills working with Drupal are excellent particularly with custom module development and we wouldn’t hesitate to recommend him others. We used Oliver on a number of occasions throughout 2012 and I have to say we've been delighted with his work. His skills working with Drupal are excellent particularly with custom module development and we wouldn’t hesitate to recommend him others.
- name: Léonie Watson - name: Léonie Watson
role: > role: >
Director of Accessibility at <a class="text-blue inline-block" href="http://www.nomensa.com">Nomensa</a> Director of Accessibility at <a class="text-blue-600 inline-block" href="http://www.nomensa.com">Nomensa</a>
image: leonie-watson.jpg image: leonie-watson.jpg
text: | text: |
Oliver is a flexible and hardworking developer, with a terrific knowledge of Drupal. He promotes accessibility best practice within the Drupal community, and is always happy to share his knowledge with other people. Oliver is a flexible and hardworking developer, with a terrific knowledge of Drupal. He promotes accessibility best practice within the Drupal community, and is always happy to share his knowledge with other people.
- name: Holly Ross - name: Holly Ross
role: > role: >
Executive Director at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a> Executive Director at the <a class="text-blue-600 inline-block" href="https://assoc.drupal.org">Drupal Association</a>
image: holly-ross.png image: holly-ross.png
text: | text: |
Oliver has been an outstanding contributor to the Drupal Association team. He is a talented developer who writes great code and applies his curiosity and love of learning to every project. He is also a fantastic team member, who gives to the team as much as he gets. Oliver has been an outstanding contributor to the Drupal Association team. He is a talented developer who writes great code and applies his curiosity and love of learning to every project. He is also a fantastic team member, who gives to the team as much as he gets.
@ -53,7 +53,7 @@ testimonials:
Oliver is the embodiment of everything good about the Drupal community. Oliver is the embodiment of everything good about the Drupal community.
- name: Josh Mitchell - name: Josh Mitchell
role: CTO at the <a class="text-blue inline-block" href="https://assoc.drupal.org">Drupal Association</a> role: CTO at the <a class="text-blue-600 inline-block" href="https://assoc.drupal.org">Drupal Association</a>
image: josh-mitchell.png image: josh-mitchell.png
text: | text: |
Oliver is a skilled Drupal developer with a passion for the Drupal community. As his direct supervisor, I was able to watch Oliver grow with the Drupal Association and contribute an amazing amount of effort and integrity to all of his work. Oliver is a skilled Drupal developer with a passion for the Drupal community. As his direct supervisor, I was able to watch Oliver grow with the Drupal Association and contribute an amazing amount of effort and integrity to all of his work.
@ -62,7 +62,7 @@ testimonials:
- name: Chris Jarvis - name: Chris Jarvis
image: chris-jarvis.jpg image: chris-jarvis.jpg
role: Developer at <a class="text-blue inline-block" href="https://microserve.io">Microserve</a> role: Developer at <a class="text-blue-600 inline-block" href="https://microserve.io">Microserve</a>
text: | text: |
Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more. Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more.
--- ---
@ -85,7 +85,7 @@ testimonials:
<h2 class="mb-1 leading-none">{{ testimonial.name }}</h2> <h2 class="mb-1 leading-none">{{ testimonial.name }}</h2>
{% if testimonial.role %} {% if testimonial.role %}
<div class="text-grey-dark text-sm"> <div class="text-gray-600 text-sm">
{{ testimonial.role|raw }} {{ testimonial.role|raw }}
</div> </div>
{% endif %} {% endif %}

19
tailwind.config.js
View file

@ -1,24 +1,9 @@
let defaultConfig = require('tailwindcss/defaultConfig')() let defaultConfig = require('tailwindcss/defaultConfig')
let defaultTheme = require('tailwindcss/defaultTheme')() let defaultTheme = require('tailwindcss/defaultTheme')
module.exports = { module.exports = {
theme: { theme: {
extend: { extend: {
color: {
blue: {
dark: '#2779bd',
default: 'hsl(203, 94%, 38%)',
lighter: '#bcdefa',
},
grey: {
dark: '#70818a',
darker: '#596a73',
default: '#9babb4',
light: 'hsl(203, 25%, 88%)',
lighter: 'hsl(203, 22%, 95%)',
lightest: '#fafcfc',
},
},
fontFamily: { fontFamily: {
mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono], mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono],
}, },

23
yarn.lock
View file

@ -361,13 +361,6 @@ babel-core@^6.24.1, babel-core@^6.26.0:
slash "^1.0.0" slash "^1.0.0"
source-map "^0.5.7" source-map "^0.5.7"
babel-extract-comments@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
dependencies:
babylon "^6.18.0"
babel-generator@^6.26.0: babel-generator@^6.26.0:
version "6.26.1" version "6.26.1"
resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@ -6528,14 +6521,6 @@ strip-bom@^3.0.0:
resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3" resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM= integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
strip-comments@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
dependencies:
babel-extract-comments "^1.0.0"
babel-plugin-transform-object-rest-spread "^6.26.0"
strip-eof@^1.0.0: strip-eof@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@ -6626,9 +6611,10 @@ tailwindcss-vuejs@^1.0.0:
resolved "https://registry.yarnpkg.com/tailwindcss-vuejs/-/tailwindcss-vuejs-1.1.2.tgz#1c7b6de4ad8b8c841e9e3fc3d7565e6a09819f7b" resolved "https://registry.yarnpkg.com/tailwindcss-vuejs/-/tailwindcss-vuejs-1.1.2.tgz#1c7b6de4ad8b8c841e9e3fc3d7565e6a09819f7b"
integrity sha512-6P5EXM9XW6qprbEuh26pNLM2lj1nbgHT9oeSqsAcrrVx5u0uxywch86x5Bq/VRNqieNbdCZht5zC/3QNW4nE+w== integrity sha512-6P5EXM9XW6qprbEuh26pNLM2lj1nbgHT9oeSqsAcrrVx5u0uxywch86x5Bq/VRNqieNbdCZht5zC/3QNW4nE+w==
"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next": tailwindcss@^1.0.0-beta.3:
version "0.7.3" version "1.0.0-beta.3"
resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.3.tgz#66ac8e15377f4038cea6877e834a54edbc5ca295"
integrity sha512-J3KZ0gtpz1XVQ/D2xTuBMII1KmEb9LrQibIWtFRAXpa81yIeDM3v1g88M3Qr/lnjrJymi7zC3T2f9AdGuZ4oMw==
dependencies: dependencies:
autoprefixer "^9.4.5" autoprefixer "^9.4.5"
bytes "^3.0.0" bytes "^3.0.0"
@ -6644,7 +6630,6 @@ tailwindcss-vuejs@^1.0.0:
postcss-nested "^4.1.1" postcss-nested "^4.1.1"
postcss-selector-parser "^6.0.0" postcss-selector-parser "^6.0.0"
pretty-hrtime "^1.0.3" pretty-hrtime "^1.0.3"
strip-comments "^1.0.2"
tapable@^0.2.7: tapable@^0.2.7:
version "0.2.9" version "0.2.9"