Migrate to Nuxt 3 (#933)

* Migrate to Nuxt 3 * Update vercel config * remove tsconfig comment * Changelog experiment + working proj pages * Fix package json * Prevent vercel complaining * fix deploy (hopefully) * Tag generator * Switch to yarn * Vercel pls 🙏 * Fix tag generation bug * Make (most) non-logged in pages work * fix base build * Linting + state * Eradicate axios, make most user pages work * Fix checkbox state being set incorrectly * Make most things work * Final stretch * Finish (most) things * Move to update model value * Fix modal text getting blurred from transforms (#964) * Adjust nav-link border radius when focused (#961) * Transition between animation states on TextLogo (#955) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Disable tabbing to pagination arrows when disabled (#972) * Make position of the "no results" text on grid/gallery views consistent (fixes #963) (#965) * Fix position of the "no results" text on grid view * fix padding * Remove extra margin on main page, fixes #957 (#959) * Fix layout shift and placeholder line height (#973) * Fix a lot of issues * Fix more nuxt 3 issues * fix not all versions showing up (temp) * inline inter css file * More nuxt 3 fixes * [skip ci] broken- backup changes * Change modpack warnings to blue instead of red (#991) * Fix some hydration issues * Update nuxt * Fix some images not showing * Add pagination to versions page + fix lag * Make changelog page consistent with versions page * sync before merge * Delete old file * Fix actions failing * update branch * Fixes navbar transition animation. (#1012) * Fixes navbar transition animation. * Fixes Y-axis animation. Fixes mobile menu. Removes highlightjs prop. * Changes xss call to renderString. * Fixes renderString call. * Removes unnecessary styling. * Reverts mobile nav change. * Nuxt 3 Lazy Loading Search (#1022) * Uses lazyFetch for results. onSearchChange refreshes. Adds loading circle. * Removes console.log * Preserves old page when paging. * Diagnosing filtering bugs. * Fix single facet filtering * Implements useAuth in settings/account. * tiny ssr fix * Updating nuxt.config checklist. * Implements useAuth in revenue, moneitzation, and dashboard index pages. * Fixes setups. * Eliminates results when path changes. Adds animated logo. * Ensures loading animation renders on search page. --------- Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix navigation issues * Square button fix (#1023) * Removes checklist from nuxt.config. * Modifies Nuxt CI to build after linting. * Fixes prettierignore file. * bug fixes * Update whitelist domains * Page improvements, fix CLS * Fix a lot of things * Fix project type redirect * Fix 404 errors * Fix user settings + hydration error * Final fixes * fix(creator-section): border radius on icons not aligning with bg (#1027) Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk> * Improvements to the mobile navbar (#984) * Transition between animation states on TextLogo * Remove unused refs * Fixes from review * Improvements to the mobile nav menu * fix avatar alt text * Nevermind, got confused for a moment * Tab bar, menu layout improvements * Highlight search icon when menu is open * Update layouts/default.vue Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> * Fix some issues * Use caret instead * Run prettier * Add create a project --------- Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix mobile menu issues * More issues * Fix lint --------- Co-authored-by: Kaeden Murphy <kmurphy@kaedenmurphy.dev> Co-authored-by: triphora <emmaffle@modrinth.com> Co-authored-by: Zach Baird <30800863+ZachBaird@users.noreply.github.com> Co-authored-by: stairman06 <36215135+stairman06@users.noreply.github.com> Co-authored-by: Zachary Baird <zdb1994@yahoo.com> Co-authored-by: Magnus Jensen <magnushjensen.mail@gmail.com> Co-authored-by: MagnusHJensen <magnus.holm.jensen@lego.dk>
2023-03-09 10:05:32 -07:00
parent 5638f0f24b
commit 740357d120
145 changed files with 12371 additions and 37478 deletions
--- a/assets/images/external/prism.svg
+++ b/assets/images/external/prism.svg
@@ -1,91 +1,11 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
-   width="48"
-   height="48"
   viewBox="0 0 12.7 12.7"
   version="1.1"
-   id="svg3606"
-   sodipodi:docname="org.prismlauncher.PrismLauncher.Source.svg"
-   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:dc="http://purl.org/dc/elements/1.1/">
-  <title
-     id="title261">Prism Launcher Logo</title>
-  <sodipodi:namedview
-     id="namedview3608"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="px"
-     showgrid="false"
-     showguides="true"
-     inkscape:zoom="16"
-     inkscape:cx="14.9375"
-     inkscape:cy="13.9375"
-     inkscape:window-width="2560"
-     inkscape:window-height="1377"
-     inkscape:window-x="2552"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1">
-    <sodipodi:guide
-       position="0.52916688,12.170833"
-       orientation="1,0"
-       id="guide4870"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="12.170833,12.170833"
-       orientation="0,-1"
-       id="guide4872"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="12.170833,0.5291669"
-       orientation="1,0"
-       id="guide4874"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="0.52916688,0.5291666"
-       orientation="0,-1"
-       id="guide4876"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="13.692187,21.332031"
-       orientation="0,-1"
-       id="guide6489"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="6.3500002,12.170833"
-       orientation="1,0"
-       id="guide6491"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="6.3500002,6.3499993"
-       orientation="-0.49999657,-0.86602738"
-       id="guide9375"
-       inkscape:locked="false" />
-    <sodipodi:guide
-       position="6.3500002,6.3499993"
-       orientation="-0.49999666,0.86602733"
-       id="guide9377"
-       inkscape:locked="false" />
-  </sodipodi:namedview>
-  <defs
-     id="defs3603" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
+>
+  <title id="title261">Prism Launcher Logo</title>
+  <defs id="defs3603" />
+  <g id="layer1">
    <g
       id="g531"
       transform="matrix(0.1353646,0,0,0.1353646,15.301582,0.52916663)" />
@@ -157,47 +77,4 @@
      </g>
    </g>
  </g>
-  <metadata
-     id="metadata259">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:title>Prism Launcher Logo</dc:title>
-        <dc:date>19/10/2022</dc:date>
-        <dc:creator>
-          <cc:Agent>
-            <dc:title>Prism Launcher</dc:title>
-          </cc:Agent>
-        </dc:creator>
-        <dc:contributor>
-          <cc:Agent>
-            <dc:title>AutiOne, Boba, ely, Fulmine, gon sawa, Pankakes, tobimori, Zeke</dc:title>
-          </cc:Agent>
-        </dc:contributor>
-        <dc:source>https://github.com/PrismLauncher/PrismLauncher</dc:source>
-        <dc:publisher>
-          <cc:Agent>
-            <dc:title>Prism Launcher</dc:title>
-          </cc:Agent>
-        </dc:publisher>
-        <cc:license
-           rdf:resource="http://creativecommons.org/licenses/by-sa/4.0/" />
-      </cc:Work>
-      <cc:License
-         rdf:about="http://creativecommons.org/licenses/by-sa/4.0/">
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Reproduction" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#Distribution" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Notice" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#Attribution" />
-        <cc:permits
-           rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-        <cc:requires
-           rdf:resource="http://creativecommons.org/ns#ShareAlike" />
-      </cc:License>
-    </rdf:RDF>
-  </metadata>
 </svg>
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -71,9 +71,10 @@
    .multiselect__placeholder {
      color: var(--color-button-text);
      margin-left: 8px;
+      margin-bottom: 8px;
      opacity: 0.6;
      font-size: 16px;
-      line-height: 20px;
+      line-height: 16px;
    }
  }

@@ -186,14 +187,10 @@
    z-index: 2;
  }

-  &.warning {
-    border-left: 0.5rem solid var(--color-banner-side);
+  &:where(&.warning, &.information) {
    padding: 1.5rem;
    line-height: 1.5;
-    background-color: var(--color-banner-bg);
-    color: var(--color-banner-text);
    min-height: 0;
-
    a {
      /* Uses active color to increase contrast */
      color: var(--color-link-active);
@@ -201,8 +198,20 @@
    }
  }

+  &.warning {
+    border-left: 0.5rem solid var(--color-warning-banner-side);
+    background-color: var(--color-warning-banner-bg);
+    color: var(--color-warning-banner-text);
+  }
+
+  &.information {
+    border-left: 0.5rem solid var(--color-info-banner-side);
+    background-color: var(--color-info-banner-bg);
+    color: var(--color-info-banner-text);
+  }
+
  &.moderation-card {
-    background-color: var(--color-banner-bg);
+    background-color: var(--color-warning-banner-bg);
  }
 }

@@ -427,11 +436,11 @@
    }
  }

-  > .label:first-child :where(> :first-child, .label__title),
-  > label:first-child :where(> :first-child, .label__title),
-  > .adjacent-input:first-child :where(> :first-child, .label__title) {
-    margin-block-start: 0;
-  }
+  //> .label:first-child :where(> :first-child, .label__title),
+  //> label:first-child :where(> :first-child, .label__title),
+  //> .adjacent-input:first-child :where(> :first-child, .label__title) {
+  //  margin-block-start: 0;
+  //}
 }

 .universal-card {
@@ -734,104 +743,25 @@
  }
 }

-.tooltip {
-  display: block !important;
-  z-index: 10000;
-  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
-
-  .tooltip-inner {
-    background: var(--color-tooltip-bg);
-    color: var(--color-tooltip-text);
-    padding: 5px 10px 4px;
-    border-radius: var(--size-rounded-tooltip);
-    box-shadow: var(--shadow-floating);
-    font-size: 0.9rem;
+.v-popper--theme-tooltip {
+  .v-popper__inner {
+    background: var(--color-tooltip-bg) !important;
+    color: var(--color-tooltip-text) !important;
+    padding: 5px 10px 4px !important;
+    border-radius: var(--size-rounded-tooltip) !important;
+    box-shadow: var(--shadow-floating) !important;
+    font-size: 0.9rem !important;
  }

-  .tooltip-arrow {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    position: absolute;
-    margin: 5px;
-    border-color: var(--color-tooltip-bg);
-    z-index: 1;
-  }
-
-  &[x-placement^='top'] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^='bottom'] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^='right'] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^='left'] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
+  .v-popper__arrow-outer,
+  .v-popper__arrow-inner {
+    border-color: var(--color-tooltip-bg) !important;
  }
 }

 .button-animation {
-  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out, outline 0.2s ease-in-out;
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;

  &:active:not(&:disabled) {
    transform: scale(0.95);
@@ -901,8 +831,8 @@ tr.button-transparent {
 }

 .button-within {
-  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out,
-    transform 0.05s ease-in-out, outline 0.2s ease-in-out;
+  transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
+    outline 0.2s ease-in-out;

  &:focus-visible:not(&.disabled),
  &:hover:not(&.disabled) {
@@ -990,6 +920,7 @@ tr.button-transparent {

  display: flex;
  align-items: center;
+  justify-content: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: var(--size-rounded-sm);
@@ -1135,9 +1066,10 @@ tr.button-transparent {
    .multiselect__placeholder {
      color: var(--color-button-text);
      margin-left: 8px;
+      margin-bottom: 8px;
      opacity: 0.6;
      font-size: 16px;
-      line-height: 20px;
+      line-height: 16px;
    }
  }

@@ -1313,76 +1245,27 @@ tr.button-transparent {
    z-index: 2;
  }

-  &.warning {
-    border-left: 0.5rem solid var(--color-banner-side);
+  &:where(&.warning, &.information) {
    padding: 1.5rem;
    line-height: 1.5;
-    background-color: var(--color-banner-bg);
-    color: var(--color-banner-text);
    min-height: 0;
-
    a {
      /* Uses active color to increase contrast */
      color: var(--color-link-active);
      text-decoration: underline;
    }
  }
-}

-.vue-notification {
-  background: var(--color-special-blue) !important;
-  border-left: 5px solid var(--color-special-blue) !important;
-  color: var(--color-brand-inverted) !important;
-
-  &.success {
-    background: var(--color-special-green) !important;
-    border-left-color: var(--color-special-green) !important;
+  &.warning {
+    border-left: 0.5rem solid var(--color-warning-banner-side);
+    background-color: var(--color-warning-banner-bg);
+    color: var(--color-warning-banner-text);
  }

-  &.warn {
-    background: var(--color-special-orange) !important;
-    border-left-color: var(--color-special-orange) !important;
-  }
-
-  &.error {
-    background: var(--color-special-red) !important;
-    border-left-color: var(--color-special-red) !important;
-  }
-}
-
-.vue-notification-group {
-  right: 25px !important;
-  bottom: 25px !important;
-
-  .vue-notification-wrapper {
-    margin-bottom: 10px;
-
-    .vue-notification-template {
-      border-radius: var(--size-rounded-card);
-      margin: 0;
-
-      .notification-title {
-        font-size: var(--font-size-lg);
-        margin-right: auto;
-      }
-
-      .notification-content {
-        font-size: var(--font-size-md);
-      }
-    }
-
-    &:last-child {
-      margin: 0;
-    }
-  }
-
-  @media screen and (max-width: 750px) {
-    transition: bottom 0.25s ease-in-out;
-    bottom: calc(var(--size-mobile-navbar-height) + 10px) !important;
-
-    &.browse-menu-open {
-      bottom: calc(var(--size-mobile-navbar-height-expanded) + 10px) !important;
-    }
+  &.information {
+    border-left: 0.5rem solid var(--color-info-banner-side);
+    background-color: var(--color-info-banner-bg);
+    color: var(--color-info-banner-text);
  }
 }

@@ -1449,7 +1332,7 @@ h1 {
  font-weight: bold;
 }

-.nuxt-link-exact-active,
+.router-link-exact-active,
 h1,
 h2,
 h3 {
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -67,9 +67,13 @@ html {
  --color-warning-bg: hsl(355, 70%, 88%);
  --color-warning-text: hsl(342, 70%, 35%);

-  --color-banner-text: hsl(0, 11%, 16%);
-  --color-banner-bg: hsl(0, 100%, 95%);
-  --color-banner-side: hsl(357, 78%, 40%);
+  --color-warning-banner-text: hsl(0, 11%, 16%);
+  --color-warning-banner-bg: hsl(0, 100%, 95%);
+  --color-warning-banner-side: hsl(357, 78%, 40%);
+
+  --color-info-banner-text: var(--color-text);
+  --color-info-banner-bg: var(--color-ad);
+  --color-info-banner-side: var(--color-special-blue);

  --color-block-quote: var(--color-tooltip-bg);
  --color-header-underline: var(--color-divider-dark);
@@ -86,9 +90,8 @@ html {
  --shadow-raised: 0.3px 0.5px 0.6px hsl(var(--shadow-color) / 0.15),
    1px 2px 2.2px -1.7px hsl(var(--shadow-color) / 0.12),
    4.4px 8.8px 9.7px -3.4px hsl(var(--shadow-color) / 0.09);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px,
-    hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, hsla(0, 0%, 0%, 0.1) 0px 2px 4px -1px;

  --shadow-card: rgba(50, 50, 100, 0.1) 0px 2px 4px 0px;

@@ -112,11 +115,7 @@ html {
    rgba(66, 71, 97, 0.34) 100%
  );
  --landing-border-color: rgba(129, 137, 175, 0.55);
-  --landing-creator-gradient: linear-gradient(
-    180deg,
-    #f8f8f8 0%,
-    #f8f8f8 63.19%
-  );
+  --landing-creator-gradient: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 63.19%);

  --landing-blob-gradient: radial-gradient(
    50% 50% at 50% 50%,
@@ -196,9 +195,13 @@ html {
  --color-warning-bg: hsl(355, 70%, 20%);
  --color-warning-text: hsl(342, 70%, 75%);

-  --color-banner-text: hsl(0, 100%, 96%);
-  --color-banner-bg: hsl(356, 18%, 18%);
-  --color-banner-side: hsl(357, 78%, 40%);
+  --color-warning-banner-text: hsl(0, 100%, 96%);
+  --color-warning-banner-bg: hsl(356, 18%, 18%);
+  --color-warning-banner-side: hsl(357, 78%, 40%);
+
+  --color-info-banner-text: var(--color-text);
+  --color-info-banner-bg: var(--color-ad);
+  --color-info-banner-side: var(--color-special-blue);

  --color-block-quote: var(--color-code-bg);
  --color-header-underline: var(--color-divider-dark);
@@ -213,18 +216,13 @@ html {

  --shadow-raised-lg: 0px 2px 4px hsla(221, 39%, 11%, 0.2);
  --shadow-raised: 0px -2px 4px hsla(221, 39%, 11%, 0.1);
-  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
-    hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px,
-    rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
+  --shadow-floating: hsla(0, 0%, 0%, 0) 0px 0px 0px 0px, hsla(0, 0%, 0%, 0) 0px 0px 0px 0px,
+    hsla(0, 0%, 0%, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;

  --shadow-card: rgba(0, 0, 0, 0.25) 0px 2px 4px 0px;

  --landing-maze-bg: url('https://cdn.modrinth.com/landing/landing.png');
-  --landing-maze-gradient-bg: linear-gradient(
-      0deg,
-      #31375f 0%,
-      rgba(8, 14, 55, 0) 100%
-    ),
+  --landing-maze-gradient-bg: linear-gradient(0deg, #31375f 0%, rgba(8, 14, 55, 0) 100%),
    url('https://cdn.modrinth.com/landing/landing-lower.png');
  --landing-maze-outer-bg: linear-gradient(180deg, #06060d 0%, #000000 100%);

@@ -251,8 +249,7 @@ html {
    rgba(44, 48, 79, 0.35) 0%,
    rgba(32, 35, 50, 0.2695) 100%
  );
-  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16),
-    inset 2px 2px 64px rgba(57, 61, 94, 0.45);
+  --landing-blob-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16), inset 2px 2px 64px rgba(57, 61, 94, 0.45);

  --landing-card-bg: rgba(59, 63, 85, 0.15);
  --landing-card-shadow: 2px 2px 12px rgba(0, 0, 0, 0.16);
@@ -280,10 +277,9 @@ body {
  // Defaults
  background-color: var(--color-bg);
  color: var(--color-text);
-  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
-    Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-    Liberation Mono, monospace;
+  --font-standard: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto,
+    Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  --mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  font-family: var(--font-standard);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
@@ -436,11 +432,12 @@ kbd {
  font-size: 0.85em !important;
 }

-@import '~assets/styles/highlightjs.scss';
-@import '~assets/styles/layout.scss';
-@import '~assets/styles/utils.scss';
-@import '~assets/styles/components.scss';
-@import '~assets/styles/normalize.scss';
+@import '~/assets/styles/highlightjs.scss';
+@import '~/assets/styles/layout.scss';
+@import '~/assets/styles/utils.scss';
+@import '~/assets/styles/components.scss';
+@import '~/assets/styles/normalize.scss';
+@import '~/assets/styles/inter.scss';

 button:focus-visible,
 a:focus-visible,
--- a/assets/styles/inter.scss
+++ b/assets/styles/inter.scss
@@ -0,0 +1,40 @@
+@font-face {
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff2?v=3.19') format('woff2'),
+    url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Regular.woff?v=3.19') format('woff');
+}
+@font-face {
+  font-family: inter;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff2?v=3.19') format('woff2'),
+    url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Medium.woff?v=3.19') format('woff');
+}
+@font-face {
+  font-family: inter;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff2?v=3.19') format('woff2'),
+    url('https://cdn-raw.modrinth.com/fonts/inter/Inter-SemiBold.woff?v=3.19') format('woff');
+}
+@font-face {
+  font-family: inter;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff2?v=3.19') format('woff2'),
+    url('https://cdn-raw.modrinth.com/fonts/inter/Inter-Bold.woff?v=3.19') format('woff');
+}
+@font-face {
+  font-family: inter;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url('https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff2?v=3.19') format('woff2'),
+    url('https://cdn-raw.modrinth.com/fonts/inter/Inter-ExtraBold.woff?v=3.19') format('woff');
+}
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -47,6 +47,10 @@
    'info'
    / 100%;

+  @media screen and (max-width: 1024px) {
+    margin-top: var(--spacing-card-md);
+  }
+
  .normal-page__sidebar {
    grid-area: sidebar;
  }