Updated TOS to add contact info

Nrosa01 · Jun 8, 2023 · 065424f · 065424f
1 parent 99eb16c
commit 065424f
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -37,18 +37,20 @@
       {:else}
         <HeaderBar />
       {/if}
-      <div class="w-[90%]">
 
+      <div class="w-[90%]">
         {#if currentHash === '#gallery'}
         <section in:fade>
           <Gallery images={_data.filter((item) => !item.src.endsWith("$secret.webp"))} />
         </section>
         {:else if currentHash === '#prices'}
         <section in:fade>
+          <hr class="mt-2 mb-4 h-0.5 border-t-0 bg-neutral-100/10" />
           <Prices />
         </section>
         {:else if currentHash === '#tos'}
-        <section>
+        <section in:fade>
+          <hr class="mt-2 mb-4 h-0.5 border-t-0 bg-neutral-100/10" />
           <Tos />
         </section>
         {/if}

diff --git a/src/app.postcss b/src/app.postcss
@@ -43,6 +43,11 @@
   {
     @apply text-white xl:text-base text-sm font-extralight font-[quicksand] xl:py-2 py-1
   }
+
+  .link
+  {
+    @apply text-beautylink underline decoration-1
+  }
 }
 
 @font-face {

diff --git a/src/lib/Tos.svelte b/src/lib/Tos.svelte
@@ -65,16 +65,39 @@
           I need a 2D ref, if possible unshaded.</span>
       </p>
     </div>
+    <div>
+      <h2 class="title pb-8 mt-8">How to order</h2>
+      <p>
+        <span class="paragraph">
+          Send me a DM (<a class="link" href="https://twitter.com/rionisguild">Twitter</a> or <a class="link" href="https://discordapp.com/users/490599226200424448">Discord</a>), or mail <a class="link" href="mailto:business@rioni.es ">Rioni</a> with the following information:<br />
+      </p>
+      <p class="pt-4 flex flex-cols justify-evenly">
+        <span class="paragraph">
+          Commission type<br />
+          Character ref<br />
+          Pose / Drawing description<br />
+          Background (if any)</span>
+      </p>
+
+      <p class="paragraph-light xl:text-base text-sm !py-0">
+        The more refs and info you provide, the better.<br />
+        But of course if you don't have a clear idea
+        of what you want, say you want a post tf art of your character<br>
+        but you don't know the pose, reaction or setting. I'll try to
+        come up with something that suits your character.
+      </p>
+
+    </div>
 </div>
     <p class="flex flex-col pt-8">
-      <span
-        ><span class="text-beauty font-bold">Additional information</span></span
-      ><span class="paragraph-lighter"
+      <span class="py-4"
+        ><span class="title">Additional information</span></span
+      ><span class="paragraph-light xl:pb-4 py-2"
         >Complex designs can incur into additional charges</span
-      ><span class="paragraph-lighter"
+      ><span class="paragraph-light !py-0"
         >*I can draw humans, but I&#39;m not really experienced with it, for
-        post tf art I can draw headshots, my struggles are complex body poses
-        and hands. I prefer to avoid drawings humans now except for headshots</span>
+        post tf art I can draw headshots.<br>My struggles are complex body poses
+        and hands. I prefer to avoid drawings humans now except for headshots.</span>
     </p>
   </div>
   <div class="w-full flex justify-center">

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -5,6 +5,7 @@ const config = {
     extend: {
       colors: {
         beauty: '#ff8ca8',
+        beautylink: '#fcb0c3',
       },
       fontSize: {
         'xxs': '0.425rem', // Tamaño de texto xxs