[c] finish initial modcards

src/app.scss

@@ -60,3 +60,11 @@ button.transparent,
     color: white;
   }
 }
+
+.overflowing::after {
+  background: linear-gradient(to top, $zinc-100, #00000000);
+}
+
+[data-theme="dark"] .overflowing::after {
+  background: linear-gradient(to top, $slate-800, #00000000);
+}

src/lib/modules/ModCards.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
   import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
   import IconClose from 'svelte-material-icons/Close.svelte';
 
@@ -17,18 +17,19 @@
   function checkOverflow() {
     const modCards = document.querySelectorAll('.mod-card');
     modCards.forEach((modCard) => {
-      modCard.addEventListener('mouseover', () => {
+      if (modCard.scrollHeight > modCard.offsetHeight) {
-        if (modCard.scrollHeight > modCard.offsetHeight) {
+        modCard.classList.add('overflowing');
-          modCard.style.backgroundColor = 'red';
+      }
-        }
-      });
-
-      modCard.addEventListener('mouseout', () => {
-        modCard.style.backgroundColor = '';
-      });
     });
   }
 
+  function removeOverflow() {
+    const modCards = document.querySelectorAll('.mod-card');
+    modCards.forEach(
+      (modCard) => modCard.classList.remove('overflowing')
+    );
+  }
+
   async function fetchData(file) {
     const response = await fetch(`/assets/json/${file}`);
     const data = await response.json();
@@ -40,7 +41,7 @@
     const data = await response.json();
     fileList = data;
     await fetchData(selectedFile);
-    checkOverflow(); // Run checkOverflow once the component has mounted
+    checkOverflow();
   });
 
   function fuzzySearch(query, mods) {
@@ -60,6 +61,11 @@
     selectedFile = event.target.value;
     fetchData(selectedFile);
   }
+
+  afterUpdate(() => {
+    removeOverflow();
+    checkOverflow();
+  })
 </script>
 
 <div class="search-container" role="group">
@@ -162,7 +168,7 @@
     justify-content: center;
     // align-items: center;
     padding: 0.5em 1em 0.5em 1em;
-    height: 6em;
+    max-height: 6em;
     overflow: hidden;
 
     img.mod-card-logo {
@@ -172,6 +178,7 @@
       border-radius: 8px;
       cursor: pointer;
       align-self: center;
+      z-index: 2;
     }
 
     .mod-card-text-ct {
@@ -188,5 +195,29 @@
       }
     }
   }
-</style>
 
+  :global(.overflowing) {
+    transition: max-height 0.5s ease-in-out;
+    max-height: 6em;
+    position: relative;
+    
+    &::after {
+      content: '';
+      opacity: 1;
+      position: absolute;
+      width: 100%;
+      height: 3em;
+      bottom: 0em;
+      right: 0em;
+      z-index: 1;
+      transition: opacity 0.25s ease-in-out;
+    }
+
+    &:hover {
+      max-height: 100em !important;
+      &::after {
+        opacity: 0;
+      }
+    }
+  }
+</style>

svelte.config.js

@@ -12,7 +12,10 @@ const config = {
 			fallback: undefined,
 			precompress: false,
 			strict: true
-		})
+		}),
+    prerender: {
+      handleMissingId: 'warn'
+    },
   },
 
   preprocess: [