feat: Show more less button and transistions

src/lib/components/preferences/themes.svelte

@@ -11,8 +11,6 @@
   const themes = {
     '🌛 Night': { name: '🌛 Night' },
     '☀️ Daylight': { name: '☀️ Daylight' },
-    '🐺 Howl': { name: '🐺 Howl' },
-    '🧠 Mind': { name: '🧠 Mind' }
   };
 
   let selectedTheme = getTheme() ?? themes['🌛 Night'];
@@ -103,7 +101,7 @@
 
 <style>
   .listbox {
-    /* --width: 184px; */
+    --width: 184px;
     margin: 0.5rem;
   }
   .listbox :global(.button) {

src/routes/game/[id].svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+  import { fade } from 'svelte/transition';
   import type { GameType } from '$lib/types';
+  import Transition from '$lib/components/transition/index.svelte';
   import { Checkbox, NumberInput } from 'carbon-components-svelte';
   import type { boolean } from 'zod';
   // import { enhance } from "$lib/form";
 
   export let game: GameType;
   let seeMore: boolean = false;
+  let 
 </script>
 
 <svelte:head>
@@ -31,14 +34,12 @@
     </div>
   </div>
 </section>
-<section>
-  {#if seeMore}
-    {@html game?.description}
-    <button on:click={() => (seeMore = !seeMore)}>See Less -</button>
-  {:else}
-    {@html game?.description_preview}
-    <button on:click={() => (seeMore = !seeMore)}>See More +</button>
-  {/if}
+<section class="description">
+    {@html game?.description?.substring(0, game?.description?.indexOf('<br /><br />'))}
+    {#if seeMore}
+      <div transition:fade>{@html game?.description?.substring(game?.description?.indexOf('<br /><br />') + 12)}</div>
+    {/if}
+    <button on:click={() => (seeMore = !seeMore)}>See {!seeMore ? 'More +' : 'Less -'}</button>
 </section>
 
 <style lang="scss">
@@ -52,7 +53,8 @@
   button {
     border-radius: 4px;
     margin: 0;
-    padding: 0.2rem;
+    padding: 0.5rem;
+    max-width: 200px;
     background-color: var(--color-btn-primary-active);
   }
 
@@ -63,6 +65,12 @@
     margin: 1rem;
   }
 
+  .details {
+    display: grid;
+    gap: 1.5rem;
+    margin: 1rem;
+  }
+
   .description {
     display: grid;
     gap: 1.5rem;

src/routes/index.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   // import { Checkbox, NumberInput } from 'carbon-components-svelte';
-  import Game from '$lib/components/game.svelte';
+  import Game from '$lib/components/game/index.svelte';
   import type { GameType } from '$lib/types';
   import Transition from '$lib/components/transition/index.svelte';
   import Listbox from '$lib/components/listbox.svelte';
@@ -197,6 +197,15 @@
     margin: 1rem;
   }
 
+  .game-form {
+    margin: 1rem;
+    border-radius: 4px;
+    box-shadow: var(--level-2);
+    background: rgba(0, 0, 0, 0.02);
+    border: 2px solid var(--clr-primary);
+    padding: 20px;
+  }
+
   .game-form fieldset {
     display: grid;
     grid-template-columns: repeat(3, 1fr);

src/styles/global.scss

@@ -184,11 +184,21 @@ a {
   color: var(--color-text-primary);
 }
 
+fieldset {
+  border: 0;
+  border-radius: 4px;
+  padding: 0;
+
+  &[disabled] {
+    opacity: 0.5;
+  }
+}
+
 label {
   display: block;
   margin: var(--spacing-8) 0;
   font-size: var(--font-24);
-  color: var(--color-text-muted);
+  color: var(--clr-txt);
 }
 
 input {
@@ -196,7 +206,11 @@ input {
   font-size: var(--font-16);
   border-radius: var(--radius-base);
   background-color: var(--clr-input-bg);
-  border: none;
+  border: solid 2px var(--clr-theme-active);
+  &:focus {
+    outline: 0;
+    border-color: var(--clr-primary);
+  }
 }
 
 .btn {

src/styles/theme.scss

@@ -124,127 +124,3 @@ html[data-theme='☀️ Daylight'] {
   --clr-token-4: hsl(0 0% 20%);
   --clr-token-5: hsl(0 0% 60%);
 }
-
-html[data-theme='🐺 Night Howl'] {
-  /* Global */
-  --clr-primary: hsl(207 100% 94%);
-  --clr-txt: hsl(210 40% 80%);
-  --clr-bg: hsl(210 47% 12%);
-
-  --bg: radial-gradient(hsl(206 50% 11%), var(--clr-bg));
-  --bg-opacity: 0.7;
-
-  /* Menu */
-  --clr-menu-text: hsl(210 40% 80%);
-  --clr-menu-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
-  --clr-menu-arrow-bg: hsl(210 47% 14%);
-  --clr-menu-border: hsl(210 40% 20%);
-
-  --clr-theme-txt: hsl(210 40% 20%);
-  --clr-theme-active: hsl(210 40% 80%);
-  --clr-switch-on-bg: hsl(210 40% 60%);
-  --clr-switch-off-bg: hsl(210 40% 20%);
-
-  /* Hero */
-  --clr-hero-txt: hsl(210 40% 60%);
-  --clr-hero-bg: linear-gradient(270deg, hsl(210 47% 12%) 43%, hsl(210 47% 14%) 66%);
-  --clr-hero-divider-bg: hsl(210 40% 20%);
-  --clr-input-txt: hsl(210 40% 20%);
-  --clr-input-bg: hsl(210 40% 16%);
-  --clr-input-placeholder-txt: hsl(210 40% 60%);
-  --clr-input-border: hsl(210 40% 20%);
-
-  /* Card */
-  --clr-card-bg: linear-gradient(180deg, hsl(210 47% 14%) 0%, hsl(210 47% 12%) 100%);
-  --clr-card-txt: hsl(210 40% 60%);
-
-  /* Link */
-  --clr-link-txt: hsl(210 40% 80%);
-  --clr-link-background: hsl(210 40% 4%);
-
-  /* Footer */
-  --clr-footer-txt: hsl(210 40% 80%);
-  --clr-footer-bg: hsl(210 47% 12%);
-
-  /* Post */
-  --post-overlay-bg: radial-gradient(hsl(206 50% 11% / 60%), var(--clr-bg));
-  --post-blockquote-txt: hsl(210 47% 80%);
-  --post-blockquote-bg: hsl(210 47% 14%);
-  --post-blockquote-border: hsl(210 40% 20%);
-
-  --clr-code-bg: hsl(210 47% 14%);
-  --clr-code-title: hsl(210 40% 60%);
-  --clr-code-border: hsl(210 40% 20%);
-  --clr-code-line-number: hsl(210 40% 40%);
-  --clr-code-line-highlight: hsl(210 40% 16%);
-  --clr-code-inline-txt: hsl(210 47% 98%);
-  --clr-code-inline-bg: hsl(210 47% 10%);
-
-  --clr-token-1: hsl(180 100% 43%);
-  --clr-token-2: hsl(197 100% 49%);
-  --clr-token-3: hsl(180 100% 43%);
-  --clr-token-4: hsl(206 50% 98%);
-  --clr-token-5: hsl(217 10% 64%);
-}
-
-html[data-theme='🧠 Night Mind'] {
-  /* Global */
-  --clr-primary: hsl(9 100% 84%);
-  --clr-txt: hsl(265 28% 98%);
-  --clr-bg: hsl(265 28% 10%);
-
-  --bg: radial-gradient(hsl(265 28% 20%), var(--clr-bg));
-  --bg-opacity: 0.7;
-
-  /* Menu */
-  --clr-menu-text: hsl(265 28% 98%);
-  --clr-menu-bg: linear-gradient(180deg, hsl(265 28% 20%) 0%, hsl(265 28% 18%) 100%);
-  --clr-menu-arrow-bg: hsl(265 28% 20%);
-  --clr-menu-border: hsl(265 28% 24%);
-
-  --clr-theme-txt: hsl(265 28% 20%);
-  --clr-theme-active: hsl(9 100% 90%);
-  --clr-switch-on-bg: hsl(265 28% 30%);
-  --clr-switch-off-bg: hsl(265 28% 24%);
-
-  /* Hero */
-  --clr-hero-txt: hsl(265 28% 80%);
-  --clr-hero-bg: linear-gradient(270deg, hsl(265 28% 20%) 43%, hsl(265 28% 24%) 66%);
-  --clr-hero-divider-bg: hsl(265 28% 24%);
-  --clr-input-txt: hsl(265 28% 20%);
-  --clr-input-bg: hsl(265 28% 24%);
-  --clr-input-placeholder-txt: hsl(265 28% 80%);
-  --clr-input-border: hsl(265 28% 26%);
-
-  /* Card */
-  --clr-card-bg: linear-gradient(180deg, hsl(265 28% 22%) 0%, hsl(265 28% 20%) 100%);
-  --clr-card-txt: hsl(265 28% 80%);
-
-  /* Link */
-  --clr-link-txt: hsl(265 28% 98%);
-  --clr-link-background: hsl(210 40% 4%);
-
-  /* Footer */
-  --clr-footer-txt: hsl(265 28% 98%);
-  --clr-footer-bg: hsl(265 28% 10%);
-
-  /* Post */
-  --post-overlay-bg: radial-gradient(hsl(265 28% 20% / 60%), var(--clr-bg));
-  --post-blockquote-txt: hsl(265 28% 90%);
-  --post-blockquote-bg: hsl(265 28% 10%);
-  --post-blockquote-border: hsl(265 28% 18%);
-
-  --clr-code-bg: hsl(265 28% 10%);
-  --clr-code-title: hsl(265 28% 80%);
-  --clr-code-border: hsl(265 28% 18%);
-  --clr-code-line-number: hsl(265 20% 34%);
-  --clr-code-line-highlight: hsl(265 28% 14%);
-  --clr-code-inline-txt: hsl(265 28% 98%);
-  --clr-code-inline-bg: hsl(265 28% 10%);
-
-  --clr-token-1: hsl(238 80% 80%);
-  --clr-token-2: hsl(205 80% 80%);
-  --clr-token-3: hsl(358 80% 80%);
-  --clr-token-4: hsl(256 80% 98%);
-  --clr-token-5: hsl(265 10% 60%);
-}