sup

Author: Sup2point0

src/parts/loves/block.game.svelte

@@ -6,18 +6,36 @@ import { anim } from "#scripts/anim.svelte.ts";
 import { display_date } from "#scripts/utils";
 import { type GameData } from "#sup/loves/games/games";
 
+import { onMount } from "svelte";
+import { slide } from "svelte/transition";
+import { expoInOut } from "svelte/easing";
+
 
 interface Props {
   game: GameData;
+  invert?: boolean
 }
 
-let { game }: Props = $props();
+let { game, invert = false }: Props = $props();
+
+
+let open = $state(false);
+
+onMount(() => {
+  requestAnimationFrame(() => {
+    if (invert) {
+      open = !open;
+    }
+  });
+});
 
 </script>
 
 
 <button class="block-game {game.state} {game._style}"
+  class:open
   id={game.shard}
+  onclick={() => { open = !open; }}
   {@attach anim}
 >
   <div class="content">
@@ -42,27 +60,39 @@ let { game }: Props = $props();
     {/if}
   </div>
 
-  <div class="inner">
-    {#if game.date}
-      <p class="date">
-        {display_date(game.date)}
-      </p>
-
-      <span class="separator"> × </span>
-    {/if}
-
-    <p class="state {game.state}">
-      {game.state.toUpperCase()}
-    </p>
-  </div>
+  <div class="sep"></div>
 
-  <div class="lower">
-    <ul class="genres">
-      {#each game.genres ?? [] as genre}
-        <li> {genre} </li>
+  {#if open}
+    <div class="lower desc" transition:slide={{ duration: 800, easing: expoInOut }}>
+      {#each game.desc as block}
+        <p> {@html block} </p>
       {/each}
-    </ul>
-  </div>
+    </div>
+
+  {:else}
+    <div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
+      <div class="inner">
+        {#if game.date}
+          <p class="date">
+            {display_date(game.date)}
+          </p>
+
+          <span class="separator"> × </span>
+        {/if}
+
+        <p class="state {game.state}">
+          {game.state.toUpperCase()}
+        </p>
+      </div>
+
+      <ul class="genres">
+        {#each game.genres ?? [] as genre}
+          <li> {genre} </li>
+        {/each}
+      </ul>
+    </div>
+
+  {/if}
 </div>
 
   </div>
@@ -78,21 +108,27 @@ let { game }: Props = $props();
   flex-grow: 1;
   max-width: 32rem;
   padding: 1rem 1.5rem;
+  font-size: unset;
   background: none;
   border: none;
+  outline: none;
   transition: #{trans()};
   @include shear-card($interactive: true);
   @include anim-block;
 
-  &:hover {
-    cursor: auto;
+  &:hover, &:focus-visible {
+    cursor: pointer;
     opacity: 1 !important;
 
     .inner p {
       color: $col-text;
     }
   }
 
+  &.open {
+    max-width: 40rem;
+  }
+
   &.wishlist::before {
     border: 1px solid rgb(white, 42%);
   }
@@ -117,6 +153,10 @@ let { game }: Props = $props();
     transform: none;
     opacity: 1;
   }
+
+  .block-game.open & {
+    padding: 0 1rem;
+  }
 }
 
 
@@ -142,7 +182,6 @@ let { game }: Props = $props();
   flex-flow: column nowrap;
   justify-content: space-between;
   align-items: start;
-  gap: 0.5rem;
 }
 
 
@@ -155,7 +194,7 @@ let { game }: Props = $props();
 
   h3 {
     @include font-ui;
-    font-size: 200%;
+    font-size: 150%;
     font-weight: normal;
     color: $col-text;
     text-align: start;
@@ -167,32 +206,61 @@ let { game }: Props = $props();
 
   p.love {
     min-width: max-content;
-    font-size: 150%;
+    font-size: 125%;
   }
 }
 
-.inner {
-  flex-grow: 1;
-  width: 100%;
-  display: flex;
-  flex-flow: row wrap;
-  gap: 0.5rem;
-  @include separator;
 
+.sep {
+  width: 69%;
+  height: 1px;
+  margin: 0.25rem 0 0.75rem;
+  background: rgb(white, 10%);
+}
+
+
+.lower.desc {
   p {
-    @include font-tech;
-    font-size: 100%;
+    padding-left: 0.2em;
+    margin-bottom: 0.5em;
+    @include font-ui;
+    font-size: 75%;
+    font-weight: 300;
     color: $col-text-deut;
+    text-align: left;
     transition: #{trans()};
 
-    &.wishlist      { color: #f190f1 !important; }
-    &.active        { color: #40f190 !important; }
-    &.opportunistic { color: #c7c7ff !important; }
+    .block-game:where(:hover, :focus-visible) & {
+      color: $col-text;
+    }
   }
 }
 
 .lower {
+  .inner {
+    flex-grow: 1;
+    width: 100%;
+    margin-bottom: 0.5em;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 0.5rem;
+    font-size: 75%;
+    @include separator;
+
+    p {
+      margin: 0;
+      @include font-tech;
+      color: $col-text-deut;
+      transition: #{trans()};
+
+      &.wishlist      { color: #f190f1 !important; }
+      &.active        { color: #40f190 !important; }
+      &.opportunistic { color: #c7c7ff !important; }
+    }
+  }
+
   ul.genres {
+    padding: 0 0.2rem;
     display: flex;
     flex-flow: row wrap;
     justify-content: start;
@@ -202,7 +270,7 @@ let { game }: Props = $props();
     li {
       padding: 0 0.5em;
       @include font-fun;
-      font-size: 150%;
+      font-size: 120%;
       color: $col-text;
       @include shear-card();
       transition: #{trans()};

src/parts/music/block.track.listen.svelte

@@ -25,8 +25,6 @@ let { track, invert = false }: Props = $props();
 
 let open = $state(false);
 
-let self: HTMLElement;
-
 onMount(() => {
   requestAnimationFrame(() => {
     if (invert) {
@@ -42,7 +40,6 @@ onMount(() => {
   class:shrink={track.name.length > 20}
   class:open
   id={track.shard}
-  bind:this={self}
   onclick={() => { open = !open; }}
   {@attach anim}
 >
@@ -81,15 +78,11 @@ onMount(() => {
 
   <div class="sep"></div>
 
-  {#if open && track.desc}
+  {#if open}
     <div class="lower" transition:slide={{ duration: 800, easing: expoInOut }}>
-      {#if Array.isArray(track.desc)}
-        {#each track.desc as block}
-          <p> {@html block} </p>
-        {/each}
-      {:else}
-        <p> {@html track.desc} </p>
-      {/if}
+      {#each track.desc as block}
+        <p> {@html block} </p>
+      {/each}
     </div>
 
   {:else}
@@ -127,9 +120,9 @@ onMount(() => {
   max-width: 60rem;
   padding: 1rem 1.5rem 1rem 3rem;
   font-size: unset;
-  background: unset;
-  border: unset;
-  outline: unset;
+  background: none;
+  border: none;
+  outline: none;
   transition: #{trans()};
   @include shear-card($interactive: true, $glow: true);
   @include anim-block;
@@ -144,10 +137,6 @@ onMount(() => {
       100% { filter: brightness(100%); }
     }
   }
-
-  &:hover .lower p {
-    color: $col-text;
-  }
 }
 
 .content {
@@ -182,6 +171,7 @@ img {
   align-items: start;
 }
 
+
 .upper {
   width: 100%;
   
@@ -228,13 +218,15 @@ img {
   }
 }
 
+
 .sep {
   width: 69%;
   height: 1px;
   margin: 0.5rem 0 1rem;
   background: rgb(white, 10%);
 }
 
+
 .lower {
   p {
     margin-bottom: 0.5em;
@@ -244,6 +236,10 @@ img {
     color: $col-text-deut;
     text-align: left;
     transition: #{trans()};
+
+    .block-track-listen:where(:hover, :focus-visible) & {
+      color: $col-text;
+    }
   }
 
   p.discovered {

src/routes/(sup)/sup/loves/+page.svelte

@@ -58,6 +58,7 @@ import Adventure   from "#parts/special/adventure.svelte";
         "icons/games/manifold-garden.png",
         "icons/games/master-duel.webp",
         "icons/games/phigros.webp",
+        "icons/games/outer-wilds.jpg",
       ]}
       aspect="square"
     />
@@ -129,10 +130,13 @@ import Adventure   from "#parts/special/adventure.svelte";
       capt="best of the internet"
       picts={[
         "icons/youtube/3b1b.jpg",
+        "icons/youtube/grian.jpg",
         "icons/youtube/in-the-mix.jpg",
         "icons/youtube/kevin-fang.jpg",
         "icons/youtube/kevinu.jpg",
+        "icons/youtube/no-boilerplate.jpg",
       ]}
+      aspect="square"
     />
 
     <LinkCard