Merge pull request #46 from Fabulously-Optimized/fixes

Fixes and dependency updates

Author: Madis0

app.scss

@@ -2,6 +2,7 @@
 
 /** Gradients **/
 .supercharge__gradient {
+  display: inline-block;
   background: linear-gradient(
     90deg,
     #f5a50f 0%,

components/Footer.vue

@@ -51,7 +51,6 @@ import { Avatar } from "omorphia";
   background-color: var(--color-raised-bg);
   color: var(--color-base);
   padding: 3rem;
-  margin-top: 5rem;
   margin-bottom: 0rem;
   border-top: 1px solid var(--color-border);
   border-bottom: 1px solid var(--color-border);

components/Navbar.vue

@@ -52,8 +52,8 @@ console.log(languageOptionFilter.value);
       <NuxtLink to="/wiki" :external="true" class="side__link">{{
         $t("navbar.links.wiki")
       }}</NuxtLink>
-      <NuxtLink to="/curseforge" class="side__link">CurseForge</NuxtLink>
-      <NuxtLink to="/modrinth" class="side__link">Modrinth</NuxtLink>
+      <NuxtLink to="/curseforge" :external="true" class="side__link">CurseForge</NuxtLink>
+      <NuxtLink to="/modrinth" :external="true" class="side__link">Modrinth</NuxtLink>
       <NuxtLink to="/contribute" class="side__link">{{
         $t("navbar.links.contribute")
       }}</NuxtLink>
@@ -101,11 +101,48 @@ console.log(languageOptionFilter.value);
       <NuxtLink to="/" class="side__link">{{
         $t("navbar.links.home")
       }}</NuxtLink>
-      <!-- <NuxtLink to="/changelog" class="side__link">Changelog</NuxtLink> -->
-      <NuxtLink to="/github" class="side__link">GitHub</NuxtLink>
-      <NuxtLink to="/wiki" class="side__link">{{
+      <NuxtLink to="/wiki" :external="true" class="side__link">{{
         $t("navbar.links.wiki")
       }}</NuxtLink>
+      <NuxtLink to="/curseforge" :external="true" class="side__link">CurseForge</NuxtLink>
+      <NuxtLink to="/modrinth" :external="true" class="side__link">Modrinth</NuxtLink>
+      <NuxtLink to="/contribute" class="side__link">{{
+        $t("navbar.links.contribute")
+      }}</NuxtLink>
+    </div>
+    <div class="side__buttons">
+      <Button iconOnly class="button__rounded_icon" @click="theme = !theme"
+        ><MoonIcon v-if="!theme" /><SunIcon v-else
+      /></Button>
+      <OverflowMenu
+        class="btn icon-only button__rounded_icon"
+        style="background: none; box-shadow: none !important"
+        :options="[
+          {
+            id: 'language',
+            color: 'primary',
+            action: () => {
+              navigateTo('/translate', {
+                external: true,
+                open: {
+                  target: '_blank',
+                },
+              });
+            },
+            hoverFilledOnly: false,
+          },
+          { divider: true },
+          ...languageOptionFilter,
+        ]"
+      >
+        <LanguagesIcon />
+        <template #language
+          ><LanguagesIcon />{{ $t("navbar.action.language") }}</template
+        >
+        <template v-for="_locale of availableLocales" v-slot:[_locale.code]>{{
+          _locale.name
+        }}</template>
+      </OverflowMenu>
     </div>
   </Card>
 </template>
@@ -200,6 +237,7 @@ console.log(languageOptionFilter.value);
   left: calc(var(--gap-xl) * -4);
   flex-direction: row;
   gap: var(--gap-xl);
+  flex-wrap: wrap;
 }
 
 .side__profile {

package.json

@@ -11,15 +11,15 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxt/image": "^1.0.0",
-    "@nuxtjs/color-mode": "^3.3.0",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
-    "nuxt": "^3.10.0",
-    "vue": "^3.3.6",
-    "vue-router": "^4.2.5"
+    "@nuxt/image": "^1.3.0",
+    "@nuxtjs/color-mode": "^3.3.2",
+    "@nuxtjs/i18n": "8.1.1",
+    "nuxt": "^3.10.3",
+    "vue": "^3.4.19",
+    "vue-router": "^4.3.0"
   },
   "dependencies": {
-    "omorphia": "^0.6.5",
-    "sass": "^1.69.4"
+    "omorphia": "^0.7.3",
+    "sass": "^1.71.1"
   }
 }

pages/index.vue

@@ -86,12 +86,9 @@ const features: any = ref([
 </script>
 
 <template>
-  <!-- <Modal class="download_modal" header="Download" ref="download_modal"
-    ><DownloadSection
-  /></Modal> -->
   <div class="columned-hero">
     <div class="column">
-      <h1 v-html="$t('content.home.columned-hero.title')"></h1>
+      <h1 id="title-with-gradient" v-html="$t('content.home.columned-hero.title')"></h1>
       <p class="subtitle">{{ $t("content.home.columned-hero.subtitle") }}</p>
       <br />
       <div class="buttons">
@@ -271,6 +268,7 @@ h3 {
 // On mobile, hide graph
 @media (max-width: 999px) {
   .columned-hero {
+    display: wrap;
     grid-template-columns: 1fr;
     grid-template-rows: 1fr;
     margin-bottom: 0 !important;
@@ -303,6 +301,7 @@ h3 {
   display: flex;
   flex-direction: row;
   gap: var(--gap-md);
+  flex-wrap: wrap;
 }
 
 #disclaimer-text, #disclaimer-text > a{