updates

src/app.css

@@ -21,3 +21,8 @@
 .fira-bold {
 	font-family: 'FiraCode_Bold';
 }
+
+hr {
+	border-color: rgb(255, 255, 255, 0.3);
+	border-width: 1px;
+}

src/lib/commissions/Accordion.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { onMount } from "svelte";
+
+    export let title;
+    export let open = "";
+    export let id;
+
+    onMount(() => {
+        if(open == "true") {
+            openAccordion();
+        }
+    });
+
+    function openAccordion() {
+        let content = document.querySelector("#content");
+        content.classList.toggle("block");
+        content.classList.toggle("hidden");
+
+        let trigger = document.querySelector("#trigger");
+        if(content.classList.contains("block")) {
+            trigger.innerHTML = "⬇️";
+        } else {
+            trigger.innerHTML = "➡️";
+        }
+    }
+</script>
+
+<section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col gap-5" id="icon">
+    <div class="flex justify-between items-center">
+        <h2 class="text-2xl font-bold">{title}</h2>
+        <button type="none" id="trigger" on:click={openAccordion} class="text-2xl">➡️</button>
+    </div>
+
+    <div class="hidden" id="content">
+        <hr class="mb-5" />
+
+        <slot />
+    </div>
+</section>

src/lib/commissions/Item.svelte

@@ -0,0 +1,13 @@
+<script>
+    export let name;
+    export let price;
+    export let picture;
+</script>
+
+<div class="flex flex-col justify-between items-center gap-2">
+    <span class="w-full flex justify-between">
+        <h3 class="text-xl font-bold">{name}</h3>
+        <span class="bg-green-500 py-1 text-sm px-5 rounded-lg">{price}</span>
+    </span>
+    <img src={picture} alt={name} class="w-full rounded-xl shadow" />
+</div>

src/lib/elements/Card.svelte

@@ -11,7 +11,7 @@
     <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 text-xl text-center drop-shadow-xl">
+        <h4 class="font-bold text-sm lg:text-xl text-center drop-shadow-xl">
             <slot />
         </h4>
     </div>

src/lib/header/Header.svelte

@@ -1,6 +1,6 @@
 <header>
     <a href="/">
-        <img src="/title.png" class="w-2/3 mx-auto grow drop-shadow-2xl" alt="header siv kyne" />
+        <img src="/title.png" class="w-11/12 lg:w-2/3 mb-10 lg:mb-0 mx-auto grow drop-shadow-2xl" alt="header siv kyne" />
     </a>
 </header>
 

src/lib/header/Navbar.svelte

@@ -4,7 +4,7 @@
     export let page;
 </script>
 
-<section class="container bg-gray-800 rounded-lg shadow-lg p-3 flex gap-3 justify-between justify-items-stretch items-center -mt-10 z-20">
+<section class="container bg-gray-800 rounded-lg shadow-lg p-3 flex flex-col lg:flex-row gap-3 justify-between justify-items-stretch items-center -mt-10 z-20">
     {#if page == "/"}
         <Button href="/" active="true">
             🏠 Home

src/routes/__layout.svelte

@@ -14,7 +14,7 @@ import Header from "$lib/header/Header.svelte";
 		<div class="h-full bg-gradient-to-b from-rose-500 via-pink-800 to-gray-900 -mt-1"></div>
 	</div>
 
-	<article class="absolute inset-0 my-20 flex flex-col gap-10 h-full">
+	<article class="absolute inset-0 mx-3 lg:mx-0 my-10 lg:my-20 flex flex-col gap-10 h-full">
 		<div class="flex flex-col gap-10 min-h-screen">
 			<Header />
 			<slot />

src/routes/commissions/index.svelte

@@ -1,4 +1,6 @@
 <script>
+import Accordion from "$lib/commissions/Accordion.svelte";
+import Item from "$lib/commissions/Item.svelte";
 import Social from "$lib/elements/Social.svelte";
 
     import Navbar from "$lib/header/Navbar.svelte";
@@ -11,9 +13,16 @@ import Social from "$lib/elements/Social.svelte";
 <main class="flex flex-col gap-5">
     <Navbar page="/commissions" />
 
-    <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="icons">
-        <h2 class="text-xl font-bold">Icon Commissions</h2>
-    </section>
+    <Accordion title="Icon Commissions" open="true" id="icon">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
+            <Item picture="/commissions/iconsketchy.jpg" name="Sketchy" price="$13" />
+            <Item picture="/commissions/iconbasic.jpg" name="Basic" price="$18" />
+            <Item picture="/commissions/iconbasiclineless.jpg" name="Basic Lineless" price="$18" />
+            <Item picture="/commissions/iconcellshaded.jpg" name="Cell Shaded" price="$23" />
+            <Item picture="/commissions/iconultralineart.jpg" name="Ultra Lineart" price="$30" />
+            <Item picture="/commissions/iconcomplexlineless.jpg" name="Complex Lineless" price="$33" />
+        </div>
+    </Accordion>
 
     <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col" id="emote">
         <h2 class="text-xl font-bold">Emote Commissions</h2>

src/routes/index.svelte

@@ -19,12 +19,12 @@ import Social from "$lib/elements/Social.svelte";
 
 <main class="flex flex-col gap-5">
     <section class="container bg-gray-800 rounded-lg shadow-lg p-5 flex flex-col -mt-5">
-        <div class="flex flex-col justify-center items-center gap-3 -mt-28">
-            <div class="bg-gradient-to-t from-gray-800 via-gray-800 to-red-500 p-3 rounded-full">
-                <img src="/pic.png" id="clickMeow" class="pop w-60 h-60 rounded-full bg-gray-800" />
+        <div class="flex flex-col justify-center items-center gap-3 -mt-20 lg:-mt-28">
+            <div class="bg-gradient-to-t from-gray-800 via-gray-800 to-red-500 p-2 lg:p-3 rounded-full">
+                <img src="/pic.png" id="clickMeow" class="pop w-40 h-40 lg:w-60 lg:h-60 rounded-full bg-gray-800" />
             </div>
 
-            <h2 class="text-2xl font-bold fira-bold">Hi, I'm Siv Kyne!</h2>
+            <h2 class="text-2xl font-bold fira-bold text-center">Hi, I'm Siv Kyne!</h2>
             <p class="text-center">
                 I'm a young Asian artist who specializes in cartoony 2D animals.
                 <br/>
@@ -47,7 +47,7 @@ import Social from "$lib/elements/Social.svelte";
     </section>
 
     <section class="container">
-        <div class="grid grid-cols-3 gap-3">
+        <div class="grid grid-cols-2 lg:grid-cols-3 gap-3">
             <Card href="/commissions#icon" picture="/comm.png" alt="commission info">
                 Icon <br/> Commissions
             </Card>