From 83a7d8f95d559cb3568eaff3e01e71fa7a2594eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20=C5=A0tancl?= <samuel.stancl@gmail.com>
Date: Thu, 10 Oct 2019 20:54:06 +0200
Subject: [PATCH] improve responsivity

---
 dist/index.html | 66 ++++++++++++++++++++++++-------------------------
 1 file changed, 33 insertions(+), 33 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index 27dac79..117d67f 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -6,7 +6,7 @@
     <link href="https://fonts.googleapis.com/css?family=Nunito:200,400,500,600,700,800&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet">
     <script async defer src="https://buttons.github.io/buttons.js"></script>
-    <link rel="stylesheet" href="/tailwind.css">
+    <link rel="stylesheet" href="/build/tailwind.css">
     <title>stancl/tenancy &mdash; Automatic multi-tenancy for your Laravel app. No code changes needed.</title>
     <meta name="description"
         content="A Laravel multi-database tenancy package that respects your code. You won't have to change a thing in your application's code.">
@@ -29,8 +29,8 @@
                 </svg>
             </div>
         </div>
-        <div class="py-20 px-40 flex flex-wrap absolute top-0 left-0">
-            <div class="w-1/2 leading-relaxed">
+        <div class="p-8 xl:py-20 xl:px-40 flex flex-wrap absolute top-0 left-0">
+            <div class="w-full xl:w-1/2 leading-relaxed">
                 <h1 class="text-indigo-100 text-6xl font-bold">Automatic tenancy for your Laravel app</h1>
                 <h2 class="mt-4 text-5xl font-thin text-indigo-200">No code changes required.</h2>
                 <p class="mt-5 text-2xl text-indigo-300"><strong class="text-indigo-200">stancl/tenancy</strong> is a tenancy package that uses a completely new approach to multi-tenancy.</p>
@@ -38,18 +38,18 @@
                 <div class="mt-8">
                     <a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/">
                         <button
-                            class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2 bg-indigo-dark border-indigo-dark border-2 rounded-10 focus:outline-none hover:bg-indigo-900 hover:border-indigo-900 both-transition">View
+                            class="text-indigo-100 shadow-primary font-semibold text-xl w-64 text-center py-2 bg-indigo-dark border-indigo-dark border-2 rounded-10 hover:bg-indigo-900 hover:border-indigo-900 both-transition">View
                             Documentation</button>
                     </a>
                     <a
                         href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/">
                         <button
-                            class="ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2 rounded-10 border-indigo-500 border-2 focus:outline-none hover:border-indigo-300 border-transition">Beginners
+                            class="ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2 rounded-10 border-indigo-500 border-2 hover:border-indigo-300 border-transition">Beginners
                             Tutorial</button>
                     </a>
                 </div>
             </div>
-            <div class="w-1/2 flex justify-center items-center">
+            <div class="w-1/2 justify-center items-center hidden xl:flex">
                 <div class="bg-indigo-900 text-lg leading-loose text-blue-300 rounded-15 p-6 inline-block shadow-primary">
 <pre>
 // Create a tenant
@@ -69,19 +69,19 @@ dispatch(new SendOrderCreatedMail);
                 </div>
             </div>
 
-            <div class="flex justify-between mt-24">
-                <div class="w-1/3">
+            <div class="flex flex-col xl:flex-row justify-between mt-24">
+                <div class="xl:w-1/3 w-full">
                     <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Easy Installation</h3>
                             <p class="mt-5">Two commands is all you need to get started.</p>
-<pre class="text-lg mt-5">
+<pre class="text-xl mt-5 whitespace-pre-wrap">
 composer require stancl/tenancy
 php artisan tenancy:install
 </pre>
                             <p class="mt-5">After installation, just focus on what's important to you &mdash; writing your app.</p>
                         </div>
-                        <div class="flex justify-center mt-8">
+                        <div class="flex justify-center xl:mt-8">
                             <a href="https://tenancy.samuelstancl.me/docs/v2/installation">
                                 <button
                                     class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@@ -92,7 +92,7 @@ php artisan tenancy:install
                         </div>
                     </div>
                 </div>
-                <div class="ml-24 w-1/3">
+                <div class="ml-24 w-1/3 hidden xl:block">
                     <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3>
@@ -103,7 +103,7 @@ php artisan tenancy:install
                                 background gives you the flexibility to change how tenancy works for your project without pain.
                             </p>
                         </div>
-                        <div class="flex justify-center mt-8">
+                        <div class="flex justify-center xl:mt-8">
                             <a href="https://tenancy.samuelstancl.me/docs/v2/configuration">
                                 <button
                                     class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@@ -113,7 +113,7 @@ php artisan tenancy:install
                         </div>
                     </div>
                 </div>
-                <div class="ml-24 w-1/3">
+                <div class="mt-6 xl:ml-24 xl:w-1/3 w-full">
                     <div class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between">
                         <div>
                             <h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3>
@@ -147,7 +147,7 @@ php artisan tenancy:install
                                 <img class="block h-8" src="spatie.png" alt="Spatie">
                                 </div>
                         </div>
-                        <div class="flex justify-center mt-8">
+                        <div class="flex justify-center xl:mt-8">
                             <a href="https://tenancy.samuelstancl.me/docs/v2/integrations">
                                 <button
                                     class="text-indigo-800 font-bold text-xl w-64 text-center py-2 rounded-10
@@ -162,14 +162,14 @@ php artisan tenancy:install
         </div>
     </header>
 
-    <div class="w-full flex items-center justify-center px-64 py-6 bg-white">
-        <div class="w-1/2 text-right">
+    <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white">
+        <div class="w-full xl:w-1/2 text-right">
             <h3 class="text-3xl font-semibold">Automatic Data Separation</h3>
             <p class="text-lg">Tenants' databases, caches, filesystems, queues and Redis stores are automatically separated. You can
                 write your app like you're used to and let the package worry about tenant data separation.</p>
         </div>
-        <div class="w-1/2 flex justify-start ml-16">
-<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full">
+        <div class="w-full xl:w-1/2 flex justify-start ml-16">
+<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
 cache()->remember('total_revenue', function () {
     return Order::with('products')
         ->get()
@@ -180,9 +180,9 @@ cache()->remember('total_revenue', function () {
         </div>
     </div>
 
-    <div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10">
-        <div class="w-1/2 flex justify-end mr-16">
-<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full">
+    <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
+        <div class="w-full xl:w-1/2 flex justify-end mr-16">
+<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
 'redis' => [
     'prefix_base' => 'tenant',
     'prefixed_connections' => [
@@ -191,7 +191,7 @@ cache()->remember('total_revenue', function () {
 ],
 </pre>
         </div>
-        <div class="w-1/2 text-left">
+        <div class="w-full xl:w-1/2 text-left">
             <h3 class="text-3xl font-semibold">Configurable</h3>
             <p class="text-lg">Even though everything happens automatically, you're still in control. You can configure
                 how database names, Redis keys and filesystem paths are prefixed, as well as how cache is tagged and
@@ -199,15 +199,15 @@ cache()->remember('total_revenue', function () {
         </div>
     </div>
 
-    <div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10">
-        <div class="w-1/2 text-right">
+    <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
+        <div class="w-full xl:w-1/2 text-right">
             <h3 class="text-3xl font-semibold">CLI-friendly</h3>
             <p class="text-lg"><strong>stancl/tenancy</strong> comes with artisan commands for migrating, rolling
                 back, as well as
                 seeding tenant databases.</p>
         </div>
-        <div class="w-1/2 flex justify-start ml-16">
-<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full">
+        <div class="w-full xl:w-1/2 flex justify-start ml-16">
+<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
 $ artisan tenants:seed --tenants=8075a580-1cb8-11e9-8822-49c5d8f8ff23
 Tenant: 8075a580-1cb8-11e9-8822-49c5d8f8ff23 (tenant1.localhost)
 Database seeding completed successfully.
@@ -215,9 +215,9 @@ Database seeding completed successfully.
         </div>
     </div>
 
-    <div class="w-full flex items-center justify-center px-64 py-6 bg-white mt-10">
-        <div class="w-1/2 flex justify-end mr-16">
-<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full">
+    <div class="w-full flex flex-col xl:flex-row items-center justify-center px-6 xl:px-64 py-6 bg-white mt-10">
+        <div class="w-full xl:w-1/2 flex justify-end mr-16">
+<pre class="bg-indigo-900 leading-relaxed text-blue-300 rounded-15 py-6 px-8 inline-block w-full whitespace-pre-wrap">
 class PostgreSQLDatabaseManager implements TenantDatabaseManager
 {
     public function createDatabase($name)
@@ -227,13 +227,13 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
 }
 </pre>
         </div>
-        <div class="w-1/2 text-left">
+        <div class="w-full xl:w-1/2 text-left">
             <h3 class="text-3xl font-semibold">SOLID extensibility</h3>
             <p class="text-lg">The package follows the SOLID principles and is open to extension. You're free to write
                 (and contribute ❤️) your own Storage Drivers, Tenancy Bootstrappers, and Feature classes.</p>
         </div>
     </div>
-    <div class="p-16 flex justify-center">
+    <div class="py-6 xl:p-16 flex justify-center">
         <div>
             <h2 class="text-4xl font-bold text-center">How it works</h2>
             <ul class="text-xl leading-loose mt-4">
@@ -265,7 +265,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
             </ul>
         </div>
     </div>
-    <div class="p-20 flex justify-center bg-indigo-900">
+    <div class="py-10 xl:p-20 flex justify-center bg-indigo-900">
         <div class="text-xl">
             <h2 class="text-4xl font-bold text-center text-indigo-100">Ready to try it?</h2>
             <p class="text-indigo-200 my-6 text-center leading-loose">
@@ -280,7 +280,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
             </div>
         </div>
     </div>
-    <div class="p-24">
+    <div class="-m-3 xl:m-0 xl:p-24">
         <div class="border-2 border-indigo-200 bg-blue-100 rounded-15 p-10 flex justify-center">
             <div class="text-xl">
                 <h2 class="text-3xl font-bold text-center">Stay Updated</h2>