From 9863ca2df47a0e4db6a07ebd1b982744ea9cce80 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 02:40:35 +0000 Subject: [PATCH 1/8] Update Tailwind --- package.json | 2 +- yarn.lock | 23 ++++------------------- 2 files changed, 5 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 5d6ff9a0..fe9a8917 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "laravel-mix": "^2.1.11", "laravel-mix-purgecss": "^2.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-visuallyhidden": "^1.0.1", "tailwindcss-vuejs": "^1.0.0", diff --git a/yarn.lock b/yarn.lock index 5257b8b3..6da83aea 100644 --- a/yarn.lock +++ b/yarn.lock @@ -361,13 +361,6 @@ babel-core@^6.24.1, babel-core@^6.26.0: slash "^1.0.0" 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: version "6.26.1" 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" 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: version "1.0.0" 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" integrity sha512-6P5EXM9XW6qprbEuh26pNLM2lj1nbgHT9oeSqsAcrrVx5u0uxywch86x5Bq/VRNqieNbdCZht5zC/3QNW4nE+w== -"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next": - version "0.7.3" - resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a" +tailwindcss@^1.0.0-beta.3: + version "1.0.0-beta.3" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.3.tgz#66ac8e15377f4038cea6877e834a54edbc5ca295" + integrity sha512-J3KZ0gtpz1XVQ/D2xTuBMII1KmEb9LrQibIWtFRAXpa81yIeDM3v1g88M3Qr/lnjrJymi7zC3T2f9AdGuZ4oMw== dependencies: autoprefixer "^9.4.5" bytes "^3.0.0" @@ -6644,7 +6630,6 @@ tailwindcss-vuejs@^1.0.0: postcss-nested "^4.1.1" postcss-selector-parser "^6.0.0" pretty-hrtime "^1.0.3" - strip-comments "^1.0.2" tapable@^0.2.7: version "0.2.9" From 42c3dac4986ff138488ddae82711814d1f7a7b82 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 07:44:20 +0000 Subject: [PATCH 2/8] Update pin-* classes --- assets/css/components/talks/video.css | 2 +- source/_layouts/default.html.twig | 2 +- source/_partials/layout/navbar.html.twig | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/assets/css/components/talks/video.css b/assets/css/components/talks/video.css index ed037900..90757995 100644 --- a/assets/css/components/talks/video.css +++ b/assets/css/components/talks/video.css @@ -1,6 +1,6 @@ .talk-video { iframe, embed { - @apply absolute h-full pin-l pin-t w-full + @apply absolute h-full left-0 top-0 w-full } } diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index f0f97bf2..3ad236cf 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -1,7 +1,7 @@ {% extends 'app' %} {% block body %} - diff --git a/source/_partials/layout/navbar.html.twig b/source/_partials/layout/navbar.html.twig index cf7e0e4c..3194a51b 100644 --- a/source/_partials/layout/navbar.html.twig +++ b/source/_partials/layout/navbar.html.twig @@ -1,4 +1,4 @@ -
+
{{ site.title }}
From 01f81369ac43b6e85273d37de26ec09a6300c264 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 07:45:01 +0000 Subject: [PATCH 3/8] defaultConfig and defaultTheme are no longer functions --- tailwind.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 01c7b0c1..5043c9a7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,5 @@ -let defaultConfig = require('tailwindcss/defaultConfig')() -let defaultTheme = require('tailwindcss/defaultTheme')() +let defaultConfig = require('tailwindcss/defaultConfig') +let defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { From 118c99fbaf6ffc421886b3cb1e05c9869360bc35 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 07:50:08 +0000 Subject: [PATCH 4/8] Fix incorrect key --- tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 5043c9a7..2cdb88f2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,7 +4,7 @@ let defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { - color: { + colors: { blue: { dark: '#2779bd', default: 'hsl(203, 94%, 38%)', From ef159e7b7dcf96c43aa664d55c997854f4c9663f Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 07:50:29 +0000 Subject: [PATCH 5/8] Change *-blue to *-blue-600 --- assets/css/app.css | 2 +- assets/css/components/blockquote.css | 2 +- assets/css/components/button.css | 4 ++-- assets/css/components/note.css | 2 +- assets/js/components/Navbar.vue | 2 +- source/_layouts/default.html.twig | 2 +- source/_partials/pages/book/signup-form.html.twig | 2 +- source/_partials/post-pager.html.twig | 2 +- source/_partials/post/old-post-message.html.twig | 2 +- ...20-rebuilding-bartik-with-vuejs-tailwind-css.md | 2 +- ...ilding-bartik-with-vuejs-tailwind-css-part-2.md | 4 ++-- source/testimonials.html.twig | 14 +++++++------- 12 files changed, 20 insertions(+), 20 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 645b5998..54381dcb 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -19,7 +19,7 @@ img { } a { - @apply text-blue no-underline; + @apply text-blue-600 no-underline; &:hover { @apply underline diff --git a/assets/css/components/blockquote.css b/assets/css/components/blockquote.css index ebd9152a..61c751e7 100644 --- a/assets/css/components/blockquote.css +++ b/assets/css/components/blockquote.css @@ -1,3 +1,3 @@ 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 } diff --git a/assets/css/components/button.css b/assets/css/components/button.css index 3ccbabca..33e1b668 100644 --- a/assets/css/components/button.css +++ b/assets/css/components/button.css @@ -1,5 +1,5 @@ .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 { @apply py-2 px-3 m-0 @@ -8,6 +8,6 @@ &:active, &:focus, &:hover { - @apply bg-white text-blue + @apply bg-white text-blue-600 } } diff --git a/assets/css/components/note.css b/assets/css/components/note.css index 0d8f1174..3d5c716a 100644 --- a/assets/css/components/note.css +++ b/assets/css/components/note.css @@ -1,5 +1,5 @@ .note { - @apply bg-blue-lighter border-blue border-l-4 mb-4 p-4 rounded; + @apply bg-blue-lighter border-blue-600 border-l-4 mb-4 p-4 rounded; > *:not(:first-child) { @apply mt-6 diff --git a/assets/js/components/Navbar.vue b/assets/js/components/Navbar.vue index b6462dcc..ff22268d 100644 --- a/assets/js/components/Navbar.vue +++ b/assets/js/components/Navbar.vue @@ -21,7 +21,7 @@ {{ item.title }} diff --git a/source/_layouts/default.html.twig b/source/_layouts/default.html.twig index 3ad236cf..f85264eb 100644 --- a/source/_layouts/default.html.twig +++ b/source/_layouts/default.html.twig @@ -1,7 +1,7 @@ {% extends 'app' %} {% block body %} - diff --git a/source/_partials/pages/book/signup-form.html.twig b/source/_partials/pages/book/signup-form.html.twig index a1d7cec8..3e01d451 100644 --- a/source/_partials/pages/book/signup-form.html.twig +++ b/source/_partials/pages/book/signup-form.html.twig @@ -7,7 +7,7 @@
- +
diff --git a/source/_partials/post-pager.html.twig b/source/_partials/post-pager.html.twig index c6a28654..44262630 100644 --- a/source/_partials/post-pager.html.twig +++ b/source/_partials/post-pager.html.twig @@ -15,7 +15,7 @@ {% for i in range(1, page.pagination.total_pages) %}
  • {% if i == page.pagination.page %} - + {{ i }} {% else %} diff --git a/source/_partials/post/old-post-message.html.twig b/source/_partials/post/old-post-message.html.twig index 4e0fa4ac..fc4ff660 100644 --- a/source/_partials/post/old-post-message.html.twig +++ b/source/_partials/post/old-post-message.html.twig @@ -1,5 +1,5 @@ {% if page.date|date('U') < 'now'|date_modify('-12 months')|date('U') %} -
    +

    Warning: 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. diff --git a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md index eab5e8be..59371509 100644 --- a/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md +++ b/source/_posts/2018-11-20-rebuilding-bartik-with-vuejs-tailwind-css.md @@ -93,7 +93,7 @@ export default {

    Welcome to {{ title }}

    No front page content has been created yet.

    -

    Follow the User Guide to start building your site.

    +

    Follow the User Guide to start building your site.

    diff --git a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md index b503c73a..1c9e1c61 100644 --- a/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md +++ b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md @@ -90,11 +90,11 @@ Within the `style` section, I’m able to use Tailwind’s custom `@apply` direc @apply underline #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, &:focus - @apply text-blue border-solid + @apply text-blue-600 border-solid #footer a @apply text-white no-underline border-b border-dotted border-white diff --git a/source/testimonials.html.twig b/source/testimonials.html.twig index 53ea573f..0181621e 100644 --- a/source/testimonials.html.twig +++ b/source/testimonials.html.twig @@ -5,13 +5,13 @@ use: [posts] testimonials: - name: Ed Welsby image: ed-welsby.png - role: Senior Developer at Proctor & Stevenson + role: Senior Developer at Proctor & Stevenson 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! - name: Brian Healy image: brian-healy.png - role: Director of Business Development at Tincan. + role: Director of Business Development at Tincan. 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. @@ -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. - name: James Chapman - role: Director at Development Done Right + role: Director at Development Done Right image: james-chapman.png 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. - name: Léonie Watson role: > - Director of Accessibility at Nomensa + Director of Accessibility at Nomensa image: leonie-watson.jpg 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. - name: Holly Ross role: > - Executive Director at the Drupal Association + Executive Director at the Drupal Association image: holly-ross.png 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. @@ -53,7 +53,7 @@ testimonials: Oliver is the embodiment of everything good about the Drupal community. - name: Josh Mitchell - role: CTO at the Drupal Association + role: CTO at the Drupal Association image: josh-mitchell.png 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. @@ -62,7 +62,7 @@ testimonials: - name: Chris Jarvis image: chris-jarvis.jpg - role: Developer at Microserve + role: Developer at Microserve text: | Oliver is an amazing colleague, he's professional, full of knowledge and I could not recommend him more. --- From 90159c432cbad7273ee2c788df23776efd0f1049 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 09:19:19 +0000 Subject: [PATCH 6/8] Re-add ul styling --- assets/css/components/markup.css | 4 ++++ source/_partials/about/availability.html.twig | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/assets/css/components/markup.css b/assets/css/components/markup.css index d55dce98..208d31cf 100644 --- a/assets/css/components/markup.css +++ b/assets/css/components/markup.css @@ -22,6 +22,10 @@ } } + ul { + @apply list-disc ml-5 + } + code { @apply bg-grey-lighter font-mono text-sm } diff --git a/source/_partials/about/availability.html.twig b/source/_partials/about/availability.html.twig index b65db64d..a8275815 100644 --- a/source/_partials/about/availability.html.twig +++ b/source/_partials/about/availability.html.twig @@ -1,7 +1,7 @@

    Availability

    -
      +
        {% for type, value in site.availability %}
      • {% include 'about/availability/' ~ value %} From 5729a6b6c069c6ec30518159562270b015a6295b Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 09:37:48 +0000 Subject: [PATCH 7/8] Use default Tailwind colours --- tailwind.config.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 2cdb88f2..9065cfc9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,21 +4,6 @@ let defaultTheme = require('tailwindcss/defaultTheme') module.exports = { theme: { extend: { - colors: { - 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: { mono: ['Roboto Mono', ...defaultTheme.fontFamily.mono], }, From 3cac471fefc89effd72c64422c973d3650121409 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Thu, 21 Mar 2019 09:38:09 +0000 Subject: [PATCH 8/8] Update colour classes --- assets/css/components/markup.css | 6 +++--- assets/css/components/note.css | 2 +- assets/js/components/Navbar.vue | 4 ++-- source/_layouts/app.html.twig | 2 +- source/_partials/about/badges.html.twig | 2 +- source/_partials/blog/post-summary.html.twig | 2 +- source/_partials/cv/experience.html.twig | 4 ++-- source/_partials/layout/footer.html.twig | 2 +- source/_partials/layout/navbar.html.twig | 2 +- source/_partials/opensource/projects.html.twig | 2 +- source/_partials/pages/book/signup-form.html.twig | 4 ++-- source/_partials/post-pager.html.twig | 12 ++++++------ source/_partials/post/about-author.html.twig | 2 +- source/_partials/post/feedback.html.twig | 2 +- source/_partials/post/header.html.twig | 2 +- source/_partials/post/tags.html.twig | 2 +- source/_partials/talk/events.html.twig | 4 ++-- source/_partials/talks/table.html.twig | 6 +++--- source/_partials/talks/talk.html.twig | 8 +++++--- ...1-20-rebuilding-bartik-with-vuejs-tailwind-css.md | 10 +++++----- .../2018-12-16-published-my-first-npm-package.md | 2 +- ...building-bartik-with-vuejs-tailwind-css-part-2.md | 4 ++-- ...lding-acquia-dashboard-with-vuejs-tailwind-css.md | 6 +++--- source/about.html.twig | 2 +- source/articles/archive.html.twig | 2 +- source/experience.html.twig | 2 +- source/podcasts.html.twig | 4 ++-- source/testimonials.html.twig | 2 +- 28 files changed, 53 insertions(+), 51 deletions(-) diff --git a/assets/css/components/markup.css b/assets/css/components/markup.css index 208d31cf..4f52baa2 100644 --- a/assets/css/components/markup.css +++ b/assets/css/components/markup.css @@ -27,13 +27,13 @@ } code { - @apply bg-grey-lighter font-mono text-sm + @apply bg-gray-200 font-mono text-sm } p, li { 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 } } @@ -48,6 +48,6 @@ } 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 } } diff --git a/assets/css/components/note.css b/assets/css/components/note.css index 3d5c716a..7f9909cd 100644 --- a/assets/css/components/note.css +++ b/assets/css/components/note.css @@ -1,5 +1,5 @@ .note { - @apply bg-blue-lighter border-blue-600 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) { @apply mt-6 diff --git a/assets/js/components/Navbar.vue b/assets/js/components/Navbar.vue index ff22268d..960bc4ff 100644 --- a/assets/js/components/Navbar.vue +++ b/assets/js/components/Navbar.vue @@ -8,7 +8,7 @@
    @@ -20,7 +20,7 @@ > diff --git a/source/_layouts/app.html.twig b/source/_layouts/app.html.twig index b5536db6..c5763bf1 100644 --- a/source/_layouts/app.html.twig +++ b/source/_layouts/app.html.twig @@ -20,7 +20,7 @@ {% endfor %} - +
    {% block body %}{% endblock %}
    diff --git a/source/_partials/about/badges.html.twig b/source/_partials/about/badges.html.twig index b9419fbe..14120fcd 100644 --- a/source/_partials/about/badges.html.twig +++ b/source/_partials/about/badges.html.twig @@ -10,7 +10,7 @@
    -
    +

    Certifications

    diff --git a/source/_partials/blog/post-summary.html.twig b/source/_partials/blog/post-summary.html.twig index d1dc9d8d..673031bc 100644 --- a/source/_partials/blog/post-summary.html.twig +++ b/source/_partials/blog/post-summary.html.twig @@ -14,7 +14,7 @@
  • {% if site.companies[item.company].url %} -

    {{ site.companies[item.company].name }}

    +

    {{ site.companies[item.company].name }}

    {% else %}

    {{ site.companies[item.company].name }}

    {% endif %} {% for role in item.roles %}
    -

    {{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})

    +

    {{ role.title }} from {{ role.from }} to {{ role.to ?: 'present' }} ({{ role.location }})

    {{ role.description|markdown }}
    diff --git a/source/_partials/layout/footer.html.twig b/source/_partials/layout/footer.html.twig index 0eefa9a7..f6660fec 100644 --- a/source/_partials/layout/footer.html.twig +++ b/source/_partials/layout/footer.html.twig @@ -1,4 +1,4 @@ -