From cf176215f76477307e9496c6f0ccabdae5080cc9 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Mon, 19 Nov 2018 20:27:19 +0000
Subject: [PATCH] Responsive changes for main area

---
 src/components/WelcomeToDrupal.vue | 38 +++++++++++++++---------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/WelcomeToDrupal.vue b/src/components/WelcomeToDrupal.vue
index e115ea1..c1fc617 100644
--- a/src/components/WelcomeToDrupal.vue
+++ b/src/components/WelcomeToDrupal.vue
@@ -19,25 +19,10 @@
       </div>
     </div>
 
-    <div class="bg-white pt-3 pb-12">
+    <div class="bg-white pt-3 pb-4 lg:pb-12">
       <div class="container mx-auto px-4">
-        <div class="flex -mx-8 my-6">
-          <div class="w-1/4 flex-none px-6">
-            <div class="p-4" style="background-color: #f6f6f2">
-              <h2 class="font-serif font-normal text-base border-b border-solid border-grey-light mb-3">Search</h2>
-
-              <div>
-                <form action="#" class="flex">
-                  <input type="text" class="border border-solid border-grey p-2">
-                  <button type="submit" class="bg-grey-light px-3 rounded-full border-b border-solid border-grey-dark ml-2" style="background-color: #f0f0f0">
-                    <img src="img/loupe.svg" class="block">
-                  </button>
-                </form>
-              </div>
-            </div>
-          </div>
-
-          <div class="w-auto px-6">
+        <div class="flex flex-col md:flex-row-reverse md:-mx-8 my-6">
+          <div class="w-full md:w-auto md:flex-1 md:px-6 mb-8 md:mb-0">
             <div class="font-serif">
               <h1 class="font-normal">Welcome to Drupal {{ version }}</h1>
               <p>No front page content has been created yet.</p>
@@ -50,6 +35,22 @@
               </a>
             </div>
           </div>
+
+          <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 border-b border-solid border-grey-light 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">
+
+                  <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">
+                    <img src="img/loupe.svg" class="block">
+                  </button>
+                </form>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -72,7 +73,6 @@
 
 <script>
 export default {
-  name: 'HelloWorld',
   props: {
     version: {
       type: String,