From 9a7fa0d691ad90cdde69890d79be71ff022e6abd Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Wed, 26 Dec 2018 15:12:09 +0000 Subject: [PATCH] Update date --- ...-bartik-with-vuejs-tailwind-css-part-2.md} | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) rename source/_posts/{2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md => 2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md} (84%) diff --git a/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md similarity index 84% rename from source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md rename to source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md index 8e82de1b..dba3c243 100644 --- a/source/_posts/2018-12-06-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md +++ b/source/_posts/2018-12-27-rebuilding-bartik-with-vuejs-tailwind-css-part-2.md @@ -15,6 +15,8 @@ In the [original post](/blog/rebuilding-bartik-with-vuejs-tailwind-css) I detail {% block content %} ## Customising Tailwind +### Colours + ```js let colors = { 'transparent': 'transparent', @@ -28,12 +30,26 @@ let colors = { 'grey-lightest': '#F6F6F2', 'white': '#ffffff', + 'black-60': 'rgba(0, 0, 0, .6)', + 'blue-dark': '#2779bd', 'blue': '#3490dc', 'blue-light': '#bcdefa', } ``` +### Plugins + +```js +plugins: [ + require('tailwindcss/plugins/container')({ + // center: true, + // padding: '1rem', + }), + require('tailwindcss-skip-link')(), +], +``` + ## Extracting Tailwind components for link styling `src/components/Welcome.vue`: @@ -127,6 +143,25 @@ let colors = { ``` + +## Adding the Skip to Main Content Link + +```html + +``` + +```vuejs + +``` {% endblock %} [0]: https://www.drupal.org