From da9ad49f3610b58e56e8e93c5c6c3b4339cbdfbe Mon Sep 17 00:00:00 2001
From: midblep <mrrmiddynight@gmail.com>
Date: Fri, 4 Feb 2022 20:21:22 +0100
Subject: [PATCH] mobile fixes and social link on homepage

---
 src/lib/elements/Card.svelte | 10 +++++++---
 src/routes/index.svelte      |  6 +++++-
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/elements/Card.svelte b/src/lib/elements/Card.svelte
index 8707cde..1413270 100644
--- a/src/lib/elements/Card.svelte
+++ b/src/lib/elements/Card.svelte
@@ -1,17 +1,21 @@
 
 <script>
     export let href;
-    export let picture;
+    export let picture = null;
     export let alt;
 </script>
 
 
 <a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden">
-    <img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
+    {#if picture}
+        <img src={picture} class="bg-black rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full" alt={alt} />
+    {:else}
+        <div class="bg-red-400 rounded-lg group-hover:bg-gradient-to-b group-hover:from-rose-400 group-hover:to-red-900 duration-300 w-full h-full min-h-[200px]" alt={alt} />
+    {/if}
     <div class="absolute inset-0 bg-black bg-opacity-50 group-hover:bg-opacity-20 duration-300 rounded-lg"></div>
 
     <div class="absolute inset-0 flex justify-center items-center">
-        <h4 class="font-bold italic text-sm lg:text-3xl text-center drop-shadow-xl">
+        <h4 class="font-bold italic text-base lg:text-3xl text-center drop-shadow-xl">
             <slot />
         </h4>
     </div>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index fb7666f..926a04b 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -47,7 +47,7 @@ import Social from "$lib/elements/Social.svelte";
     </section>
 
     <section class="container">
-        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             <Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
                 Icon <br/> Commissions
             </Card>
@@ -83,6 +83,10 @@ import Social from "$lib/elements/Social.svelte";
             <Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
                 Fullbody <br/> Commissions
             </Card>
+
+            <Card href="/contact" alt="commission info">
+                Contact <br/> + <br/> Socials
+            </Card>
         </div>
     </section>
 </main>