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

Update colour classes

Browse source
This commit is contained in:
Oliver Davies 2019-03-21 09:38:09 +00:00
parent 5729a6b6c0
commit 3cac471fef
28 changed files with 53 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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="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>
<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">
</button>
</form>
@ -127,7 +127,7 @@ export default {
<div id="footer" class="text-xs text-white">
<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">
<p><a href="#0">Contact</a></p>
</div>
@ -197,7 +197,7 @@ I also moved the links into `data` too - each link is it’s own object with it'
<div>
<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"
>
<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">
```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="block py-5 v-cloak-block">
{{ site.title }}

4
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 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">
<p><a href="#0">Contact</a></p>
</div>
@ -114,7 +114,7 @@ As well as being able to extract re-usable components within Tailwind, the same
// src/components/Sidebar.vue
<template>
<div class="bg-grey-lighter p-4 mb-4">
<div class="bg-gray-200 p-4 mb-4">
<slot></slot>
</div>
</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
<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>
</figure>
## The applications page
<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>
</figure>
## An environment page
<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>
</figure>