From 0e6f149ef8d61f4cf4d51f362ab0c3e7c893ccc9 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 28 Dec 2018 01:11:39 +0000
Subject: [PATCH] Add DrupalMessage component

---
 src/components/DrupalMessage.vue | 13 +++++++++++++
 src/components/Welcome.vue       |  6 +++++-
 tailwind.js                      |  7 ++++++-
 3 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 src/components/DrupalMessage.vue

diff --git a/src/components/DrupalMessage.vue b/src/components/DrupalMessage.vue
new file mode 100644
index 0000000..56f5978
--- /dev/null
+++ b/src/components/DrupalMessage.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="bg-green pl-2 rounded-sm">
+    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center border-green-light text-green-dark bg-green-lighter rounded-sm">
+      <svg class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+
+      <p>
+        A Bartik clone, built with
+        <a href="https://vuejs.org" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Vue.js</a>
+        and <a href="https://tailwindcss.com" class="text-blue-dark hover:text-blue no-underline border-b border-dotted hover:border-solid border-blue-dark">Tailwind CSS</a>.
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Welcome.vue b/src/components/Welcome.vue
index 76ab0a1..ed837d2 100644
--- a/src/components/Welcome.vue
+++ b/src/components/Welcome.vue
@@ -21,8 +21,10 @@
       <main-menu></main-menu>
     </div>
 
-    <div id="main-content" class="bg-white pt-3 pb-4 lg:pb-12">
+    <div id="main-content" class="bg-white pt-6 pb-4 lg:pb-12">
       <div class="container mx-auto px-4">
+        <drupal-message />
+
         <div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
           <div id="main" class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
             <div class="font-serif">
@@ -79,11 +81,13 @@
 </template>
 
 <script>
+import DrupalMessage from './DrupalMessage.vue';
 import MainMenu from './MainMenu.vue';
 import SidebarBlock from './SidebarBlock.vue'
 
 export default {
   components: {
+    DrupalMessage,
     MainMenu,
     SidebarBlock,
   },
diff --git a/tailwind.js b/tailwind.js
index 825c5a1..100cbbb 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -60,6 +60,11 @@ let colors = {
   'blue-dark': '#2779bd',
   'blue': '#3490dc',
   'blue-light': '#bcdefa',
+
+  'green-dark': '#325E1C',
+  'green': '#77B159',
+  'green-light': '#CDE2C2',
+  'green-lighter': '#F3FAEE',
 }
 
 module.exports = {
@@ -803,7 +808,7 @@ module.exports = {
     borderCollapse: [],
     borderColors: ['responsive', 'hover', 'focus'],
     borderRadius: ['responsive'],
-    borderStyle: ['responsive'],
+    borderStyle: ['responsive', 'hover', 'focus'],
     borderWidths: ['responsive'],
     cursor: ['responsive'],
     display: ['responsive'],