mobile fixes and social link on homepage

main
Midnight 3 years ago
parent 86e02968c9
commit da9ad49f36

@ -1,17 +1,21 @@
<script> <script>
export let href; export let href;
export let picture; export let picture = null;
export let alt; export let alt;
</script> </script>
<a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden"> <a href={href} class="group relative shadow w-full bg-cover text-white rounded-lg hover:-translate-y-1 duration-300 overflow-hidden">
{#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} /> <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 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"> <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 /> <slot />
</h4> </h4>
</div> </div>

@ -47,7 +47,7 @@ import Social from "$lib/elements/Social.svelte";
</section> </section>
<section class="container"> <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"> <Card href="/commissions#icon" picture="/commissions/iconbasic.jpg" alt="commission info">
Icon <br/> Commissions Icon <br/> Commissions
</Card> </Card>
@ -83,6 +83,10 @@ import Social from "$lib/elements/Social.svelte";
<Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info"> <Card href="/commissions#fullbody" picture="/commissions/fullbodyultralineart.jpg" alt="commission info">
Fullbody <br/> Commissions Fullbody <br/> Commissions
</Card> </Card>
<Card href="/contact" alt="commission info">
Contact <br/> + <br/> Socials
</Card>
</div> </div>
</section> </section>
</main> </main>

Loading…
Cancel
Save