mobile fixes and social link on homepage

main
Midnight 3 years ago
parent 86e02968c9
commit da9ad49f36

@ -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>

@ -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>

Loading…
Cancel
Save