package.json

@@ -16,7 +16,6 @@
     "@sveltejs/kit": "^1.20.5",
     "sass": "^1.62.0",
     "svelte": "^3.54.0",
-    "svelte-material-icons": "^3.0.5",
     "svelte-preprocess": "^5.0.3",
     "vite": "^4.3.0"
   },

src/app.scss

@@ -13,11 +13,45 @@ h1, h2, h3, h4, h5, h6, body {
     // color: #000000;
 }
 
+/* Green Light scheme (Default) */
+/* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
+  --primary: #43a047;
+  --primary-hover: #388e3c;
+  --primary-focus: rgba(67, 160, 71, 0.125);
+  --primary-inverse: #FFF;
   background-color: #FAF9F6;
 }
 
+/* Green Dark scheme (Auto) */
+/* Automatically enabled if user has Dark mode enabled */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --primary: #43a047;
+    --primary-hover: #4caf50;
+    --primary-focus: rgba(67, 160, 71, 0.25);
+    --primary-inverse: #FFF;
+  }
+}
+ 
+/* Green Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+  --primary: #43a047;
+  --primary-hover: #4caf50;
+  --primary-focus: rgba(67, 160, 71, 0.25);
+  --primary-inverse: #FFF;
+}
+
+/* Green (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}
+
 p, li {
   cursor: text;
 }
@@ -26,37 +60,3 @@ article {
   border-radius: 10px;
   box-shadow: 0px 0px 15px rgba(32, 32, 32, 0.2);
 }
-
-[role="button"].card {
-  background-color: $zinc-100;
-  border-color: $zinc-50;
-  p {
-    color: black;
-  }
-}
-
-button.transparent,
-[role="button"].transparent {
-  --pico-background-color: var(--pico-form-element-background-color);
-  --pico-border-color: var(--pico-form-element-border-color);
-  border-left: none;
-  border-right: none;
-  color: black;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-[data-theme="dark"] button.transparent,
-[data-theme="dark"] [role="button"].transparent {
-  color: white;
-}
-
-[data-theme="dark"] [role="button"].card {
-  background-color: $slate-800;
-  border-color: $slate-750;
-  p {
-    color: white;
-  }
-}

src/lib/common.ts

@@ -1,15 +0,0 @@
-export function smoothScrollTo(elementId: string) {
-    const element = document.getElementById(elementId);
-    if (element) {
-        element.scrollIntoView({
-            behavior: 'smooth'
-        });
-    }
-}
-
-export function handleKeydown(elementId: string, event: KeyboardEvent) {
-    // Trigger redirection on Enter key or Space bar
-    if (event.key === 'Enter' || event.key === ' ') {
-        smoothScrollTo(elementId);
-    }
-}

src/lib/modules/ModCards.svelte

@@ -1,34 +1,10 @@
 <script>
   import { onMount } from "svelte";
-  import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
-  import IconClose from 'svelte-material-icons/Close.svelte';
-
   let mods = { mods: [], optional_mods: [] };
-  let timeout;
   let searchQuery = "";
   let selectedFile = "modlist-rekindled.json";
   let fileList = [];
 
-  let searchQueryInput = (event) => {
-    clearTimeout(timeout);
-    timeout = setTimeout(checkOverflow, 0);
-  };
-
-  function checkOverflow() {
-    const modCards = document.querySelectorAll('.mod-card');
-    modCards.forEach((modCard) => {
-      modCard.addEventListener('mouseover', () => {
-        if (modCard.scrollHeight > modCard.offsetHeight) {
-          modCard.style.backgroundColor = 'red';
-        }
-      });
-
-      modCard.addEventListener('mouseout', () => {
-        modCard.style.backgroundColor = '';
-      });
-    });
-  }
-
   async function fetchData(file) {
     const response = await fetch(`/assets/json/${file}`);
     const data = await response.json();
@@ -40,7 +16,6 @@
     const data = await response.json();
     fileList = data;
     await fetchData(selectedFile);
-    checkOverflow(); // Run checkOverflow once the component has mounted
   });
 
   function fuzzySearch(query, mods) {
@@ -50,12 +25,6 @@
     );
   }
 
-  function clearInput() {
-    clearTimeout(timeout);
-    timeout = setTimeout(checkOverflow, 0);
-    searchQuery = "";
-  }
-
   function handleFileChange(event) {
     selectedFile = event.target.value;
     fetchData(selectedFile);
@@ -63,17 +32,13 @@
 </script>
 
 <div class="search-container" role="group">
-  <input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} on:input={searchQueryInput} />
-  <button class="close transparent" on:click={() => clearInput()}><IconClose size="1em" /></button>
+  <input type="search" placeholder="Search the mod-verse..." bind:value={searchQuery} />
   <select bind:value={selectedFile} on:change={handleFileChange}>
     {#each fileList as file}
       <option value={file.file}>{file.name}</option>
     {/each}
   </select>
 </div>
-<div class="scroll-to-optional">
-  <a href="#optional-mods"><IconChevronDown size="1.2em" /> View Optional Mods</a>
-</div>
 
 <hr />
 
@@ -85,7 +50,7 @@
       {#each fuzzySearch(searchQuery, mods.mods).slice(index * 3, (index + 1) * 3) as mod}
         <a
           role="button"
-          class="mod-card card contrast"
+          class="mod-card contrast invert"
           href={mod.link}
           target="_blank"
           rel="noopener noreferrer"
@@ -108,7 +73,7 @@
         {#each fuzzySearch(searchQuery, mods.optional_mods).slice(index * 3, (index + 1) * 3) as mod}
           <a
             role="button"
-            class="mod-card card contrast"
+            class="mod-card contrast"
             href={mod.link}
             target="_blank"
             rel="noopener noreferrer"
@@ -133,6 +98,13 @@
     gap: 1em;
   }
 
+  .grid-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 1em;
+  }
+
   .search-container {
     display: flex;
 
@@ -140,30 +112,13 @@
       width: 40%;
       border-radius: 0px 1000px 1000px 0px;
     }
-
-    button.close {
-      padding: 0 1em 0 1em;
-    }
-  }
-
-  .scroll-to-optional {
-    width: 100%;
-    text-align: right;
-    a {
-      text-decoration: none;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
   }
 
   .mod-card {
     display: flex;
     justify-content: center;
-    // align-items: center;
+    align-items: center;
     padding: 0.5em 1em 0.5em 1em;
-    height: 6em;
-    overflow: hidden;
 
     img.mod-card-logo {
       height: 4em;
@@ -171,7 +126,6 @@
       margin-right: 1em;
       border-radius: 8px;
       cursor: pointer;
-      align-self: center;
     }
 
     .mod-card-text-ct {
@@ -189,4 +143,3 @@
     }
   }
 </style>
-

src/routes/+layout.svelte

@@ -1,36 +1,9 @@
 <script>
   import "../app.scss";
   import Header from "./Header.svelte";
-  import { smoothScrollTo, handleKeydown } from "$lib/common";
 
-  import { fly } from "svelte/transition";
-  import { onMount } from "svelte";
-  export let data;
-
-  onMount(() => {
-    function smoothScrollTo(elementId) {
-      document.getElementById(elementId).scrollIntoView({
-        behavior: 'smooth'
-      });
-    }
-
-    function handleKeydown(elementId, event) {
-      if (event.key === 'Enter') {
-        smoothScrollTo(elementId);
-      }
-    }
-
-    function toggleTopButton() {
-      const topButton = document.querySelector('.top-button');
-      if (window.scrollY >= window.innerHeight) {
-        topButton.classList.add('show');
-      } else {
-        topButton.classList.remove('show');
-      }
-    }
-
-    window.addEventListener('scroll', toggleTopButton);
-  })
+  import { fly } from 'svelte/transition'
+  export let data
 </script>
 
 <div class="app">
@@ -45,29 +18,14 @@
     </main>
   {/key}
 
-  <!-- svelte-ignore a11y-missing-attribute -->
-  <a
-    role="button"
-    tabindex="0"
-    class="top-button"
-    on:click={() => smoothScrollTo("header")}
-    on:keydown={(event) => handleKeydown("header", event)}
-  >
-    Top
-  </a>
-
   <footer>
     <p>
-      &copy; Sangelo & LogolicusZ, 2023-2024 | <a
-        href="https://gitpot.org/ExploreCraft/website"
-      >
-        Source Code</a
-      >
+      &copy; Sangelo & LogolicusZ, 2023-2024 | <a href="https://gitpot.org/ExploreCraft/website"> Source Code</a>
     </p>
   </footer>
 </div>
 
-<style lang="scss">
+<style>
   .app {
     display: flex;
     flex-direction: column;
@@ -97,17 +55,6 @@
     font-weight: normal;
   }
 
-  .top-button {
-    display: none;
-    position: fixed;
-    bottom: 1em;
-    right: 1em;
-
-    &.show {
-      display: inline-block;
-    }
-  }
-
   @media (min-width: 480px) {
     footer {
       padding: 0.1em 0;

src/routes/Header.svelte

@@ -3,7 +3,7 @@
 	import Switcher from './Switcher.svelte';
 </script>
 
-<div class="header-container" id="header">
+<div class="header-container">
     <a class="link contrast" href="/">
         <div class="header">
           <img class="logo" src="/assets/logo/explorecraft.svg" alt="ExploreCraft Logo" />

src/routes/modlist/+page.svelte

@@ -19,3 +19,14 @@
 <p>Please report any missing mods on our <a href="https://discord.gg/Z2YehhEUVr" target="_blank" rel="noopener noreferrer">Discord</a>.</p>
 
 <ModCards />
+
+<style lang="scss">
+  .grid {
+    width: 100%;
+  }
+
+  .column {
+    width: 50%;
+    float: left;
+  }
+</style>

src/variables.scss

@@ -1,9 +1,2 @@
 /* Variables and mixins declared here will be available in all other SCSS files */ /* https://github.com/picocss/pico/issues/201 */
 $semantic-root-element: "body div:first-child";
-
-// colors
-$zinc-50: #F0F1F3;
-$zinc-100: #E0E3E7;
-
-$slate-800: #2A3140;
-$slate-750: #333C4E;

yarn.lock

@@ -773,11 +773,6 @@ svelte-hmr@^0.15.3:
   resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.15.3.tgz#df54ccde9be3f091bf5f18fc4ef7b8eb6405fbe6"
   integrity sha512-41snaPswvSf8TJUhlkoJBekRrABDXDMdpNpT2tfHIv4JuhgvHqLMhEPGtaQn0BmbNSTkuz2Ed20DF2eHw0SmBQ==
 
-svelte-material-icons@^3.0.5:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/svelte-material-icons/-/svelte-material-icons-3.0.5.tgz#37bed05ceadd981b0da8630bd43b6d7cd6345376"
-  integrity sha512-UbhAa+Btd5y6e6DMljVccP+cbJ8lvesltMippiCOvfIUtYe2TsQqM+P6osfrVsZHV47b1tY6AmqCuSpMKnwMOQ==
-
 svelte-preprocess@^5.0.3:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-5.1.4.tgz#14ada075c94bbd2b71c5ec70ff72f8ebe1c95b91"