Design improvements

This commit is contained in:
Samuel Štancl 2019-10-11 15:48:41 +02:00
parent a9d02e7758
commit 26b1c004f0
3 changed files with 20 additions and 11 deletions

20
dist/index.html vendored
View file

@ -38,14 +38,17 @@
<div class="mt-8"> <div class="mt-8">
<a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/"> <a href="https://tenancy.samuelstancl.me/docs/v2/getting-started/">
<button <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 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 focus:outline-none both-transition">View
Documentation</button> Documentation</button>
</a> </a>
<a <a
href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/"> href="https://samuelstancl.me/blog/make-your-laravel-app-multi-tenant-without-changing-a-line-of-code/">
<button <button
class="mt-2 xl:mt-0 xl:ml-6 text-indigo-100 font-semibold text-xl w-64 text-center py-2 class="mt-2 xl:mt-0 xl: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 rounded-10 border-indigo-500 border-2 hover:border-indigo-300 border-transition
focus:outline-none">Beginners
Tutorial</button> Tutorial</button>
</a> </a>
</div> </div>
@ -72,11 +75,11 @@ dispatch(new SendOrderCreatedMail);
<div class="flex flex-col xl:flex-row justify-between mx-auto mt-24"> <div class="flex flex-col xl:flex-row justify-between mx-auto mt-24">
<div class="xl:w-1/3 w-full"> <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 class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Easy Installation</h3> <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> <p class="mt-5">Two commands is all you need to get started.</p>
<pre class="text-xl mt-5 whitespace-pre-wrap"> <pre class="text-lg mt-5 whitespace-pre-wrap">
composer require stancl/tenancy composer require stancl/tenancy
php artisan tenancy:install php artisan tenancy:install
</pre> </pre>
@ -94,7 +97,7 @@ php artisan tenancy:install
</div> </div>
</div> </div>
<div class="ml-24 w-1/3 hidden xl:block"> <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 class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3> <h3 class="font-bold text-3xl text-center my-1">Automatic & Flexible</h3>
<p class="mt-5">Multi-tenancy is something that can be handled in the background.</p> <p class="mt-5">Multi-tenancy is something that can be handled in the background.</p>
@ -115,7 +118,8 @@ php artisan tenancy:install
</div> </div>
</div> </div>
<div class="mt-6 xl:mt-0 xl:ml-24 xl:w-1/3 w-full"> <div class="mt-6 xl:mt-0 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
class="bg-white py-6 px-12 h-full rounded-15 text-xl flex flex-col justify-between shadow-card">
<div> <div>
<h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3> <h3 class="font-bold text-3xl text-center my-1">Awesome Integration</h3>
<p class="mt-5">By switching things in the background, the package doesnt stand in your way. <p class="mt-5">By switching things in the background, the package doesnt stand in your way.
@ -276,7 +280,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
<div class="flex justify-center"> <div class="flex justify-center">
<a href="https://tenancy.samuelstancl.me/docs/v2/installation"> <a href="https://tenancy.samuelstancl.me/docs/v2/installation">
<button class="rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold <button class="rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold
focus:outline-none focus:border-indigo-600 border-transparent border hover:bg-indigo-600">INSTALLATION</button> focus:outline-none focus:border-indigo-600 border-transparent border hover:bg-indigo-600 bg-transition">INSTALLATION</button>
</a> </a>
</div> </div>
</div> </div>
@ -332,7 +336,7 @@ class PostgreSQLDatabaseManager implements TenantDatabaseManager
<button <button
class="mt-4 rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold class="mt-4 rounded-10 bg-indigo-700 px-8 py-2 tracking-wide text-indigo-100 font-semibold
rounded-10 focus:outline-none focus:border-blue-400 border-transparent border rounded-10 focus:outline-none focus:border-blue-400 border-transparent border
hover:bg-indigo-600 px-2 py-1" type="submit"> hover:bg-indigo-600 px-2 py-1 bg-transition" type="submit">
<span class="align-middle">SUBSCRIBE</span> <span class="align-middle">SUBSCRIBE</span>
</button> </button>
</div> </div>

View file

@ -193,7 +193,8 @@ module.exports = {
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
primary: '2px 3px 10px rgba(67, 65, 144, 0.1)', primary: '2px 2px 7px rgba(67, 65, 144, 0.2)',
card: '2px 4px 10px 3px rgba(0, 0, 0, 0.1)',
none: 'none', none: 'none',
}, },
container: {}, container: {},

View file

@ -2,10 +2,14 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.both-transition { .bg-transition {
transition: background 200ms ease, border 200ms ease; transition: background 200ms ease;
} }
.border-transition { .border-transition {
transition: border 200ms ease; transition: border 200ms ease;
}
.both-transition {
transition: background 200ms ease, border 200ms ease;
} }