From 4b0b8d4de2a9de0e963240356d674e5e2ec98c22 Mon Sep 17 00:00:00 2001
From: Jai A <jai.a@tuta.io>
Date: Mon, 2 Nov 2020 22:04:40 -0700
Subject: [PATCH] New error page, add legal pages, responsiveness for home page

---
 components/EthicalAd.vue      |   4 +
 components/ModPage.vue        |   2 +-
 layouts/default.vue           |  18 +++-
 layouts/error.vue             |  27 ++++++
 layouts/home.vue              | 144 ++++++++++++++++++++++++++++++
 layouts/none.vue              |   9 --
 pages/about.vue               |  34 +++++++
 pages/documentation/index.vue |  19 ++++
 pages/index.vue               | 136 ++++++----------------------
 pages/privacy.vue             | 152 ++++++++++++++++++++++++++++++++
 pages/tos.vue                 | 161 ++++++++++++++++++++++++++++++++++
 11 files changed, 587 insertions(+), 119 deletions(-)
 create mode 100644 layouts/error.vue
 create mode 100644 layouts/home.vue
 delete mode 100644 layouts/none.vue
 create mode 100644 pages/about.vue
 create mode 100644 pages/documentation/index.vue
 create mode 100644 pages/privacy.vue
 create mode 100644 pages/tos.vue

diff --git a/components/EthicalAd.vue b/components/EthicalAd.vue
index fb4a245f..73d0b26b 100644
--- a/components/EthicalAd.vue
+++ b/components/EthicalAd.vue
@@ -32,7 +32,11 @@ export default {
 </script>
 
 <style scoped>
+[data-ea-type='text'] {
+  min-height: 70px;
+}
 [data-ea-type='image'] {
   margin: auto 10px;
+  min-height: 260px;
 }
 </style>
diff --git a/components/ModPage.vue b/components/ModPage.vue
index f444a9c1..6c412eff 100644
--- a/components/ModPage.vue
+++ b/components/ModPage.vue
@@ -243,7 +243,7 @@ export default {
 
 .mod-info {
   top: 1rem;
-  height: calc(100vh - 3rem);
+  max-height: calc(100vh - 3rem);
   position: sticky;
   min-width: 270px;
   max-width: 270px;
diff --git a/layouts/default.vue b/layouts/default.vue
index 8471a2d3..ffa8884f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -55,7 +55,7 @@
 
           <h3>Community</h3>
           <section>
-            <nuxt-link to="/support">
+            <nuxt-link to="/documentation">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
@@ -71,7 +71,7 @@
                 <line x1="14.83" y1="9.17" x2="18.36" y2="5.64" />
                 <line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
               </svg>
-              <span>Support</span>
+              <span>Documentation</span>
             </nuxt-link>
             <nuxt-link to="/guides">
               <svg
@@ -222,6 +222,10 @@
       </nav>
     </aside>
     <main>
+      <div class="alpha-alert">
+        Modrinth is in early alpha. You can join our
+        <a href="https://discord.gg/gFRbNQ2">discord</a> for updates!
+      </div>
       <nuxt />
     </main>
   </div>
@@ -600,6 +604,16 @@ export default {
   }
 }
 
+.alpha-alert {
+  text-align: center;
+  padding: 1em;
+  background-color: var(--color-grey-1);
+
+  a {
+    color: var(--color-grey-3);
+  }
+}
+
 .disclosure {
   margin-top: auto;
   max-width: 250px;
diff --git a/layouts/error.vue b/layouts/error.vue
new file mode 100644
index 00000000..a29f27ee
--- /dev/null
+++ b/layouts/error.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="main">
+    <h1>{{ error.message }}</h1>
+    <NuxtLink to="/">
+      An error occurred! Click this text to go back home, and find your way
+      back!
+    </NuxtLink>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['error'],
+  layout: 'home',
+  created() {
+    console.log(this.error)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 auto;
+  max-width: 800px;
+  text-align: center;
+}
+</style>
diff --git a/layouts/home.vue b/layouts/home.vue
new file mode 100644
index 00000000..284ea716
--- /dev/null
+++ b/layouts/home.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <header class="columns">
+      <nuxt-link to="/">
+        <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
+      </nuxt-link>
+      <div class="links">
+        <nuxt-link to="/">Home</nuxt-link>
+        <nuxt-link to="/mods">Mods</nuxt-link>
+        <nuxt-link to="/modpacks">Packs</nuxt-link>
+        <nuxt-link to="/about">About</nuxt-link>
+        <a href="https://discord.gg/gFRbNQ2">Discord</a>
+      </div>
+    </header>
+    <nuxt />
+    <footer>
+      <div class="logo-wrapper columns">
+        <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
+        <p class="name">modrinth</p>
+      </div>
+      <p class="copyright">© Guavy LLC</p>
+      <div class="column">
+        <h4 class="pages">Pages</h4>
+        <nuxt-link to="/">Home</nuxt-link>
+        <nuxt-link to="/mods">Mods</nuxt-link>
+        <nuxt-link to="/packs">Packs</nuxt-link>
+        <nuxt-link to="/about">About</nuxt-link>
+        <nuxt-link to="/guides">Guides</nuxt-link>
+      </div>
+      <div class="column">
+        <h4 class="developers">Developers</h4>
+        <nuxt-link to="/developers">Documentation</nuxt-link>
+        <a href="https://github.com/modrinth">Open Source</a>
+        <a href="https://github.com/modrinth/knossos/issues">Issues</a>
+      </div>
+      <div class="column legal-wrapper">
+        <h4 class="legal">Legal</h4>
+        <nuxt-link to="/tos">TOS</nuxt-link>
+        <nuxt-link to="/privacy">Privacy Policy</nuxt-link>
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+header {
+  width: 100%;
+
+  .logo {
+    margin: 25px 50px;
+    height: 100px;
+  }
+
+  .links {
+    margin: auto 0;
+
+    a {
+      text-transform: uppercase;
+      font-weight: bold;
+      margin: 0 25px;
+
+      &:hover,
+      &:focus {
+        background-color: var(--color-grey-1);
+        color: var(--color-text);
+      }
+
+      &.nuxt-link-exact-active {
+        border-bottom: 3px var(--color-brand) solid;
+      }
+    }
+  }
+}
+
+footer {
+  justify-content: center;
+  margin-top: 250px;
+  margin-bottom: 100px;
+  display: grid;
+  column-gap: 50px;
+  grid-template-columns: 175px 120px 120px 175px;
+  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
+
+  .logo-wrapper {
+    grid-column-start: 1;
+    grid-row-start: 1;
+
+    .logo {
+      width: 30px;
+    }
+    .name {
+      place-self: center;
+      margin: 0;
+      font-size: 20px;
+      font-family: 'Montserrat Alternates', serif;
+    }
+  }
+  .copyright {
+    grid-column-start: 1;
+    grid-row-start: 10;
+    color: var(--color-grey-6);
+  }
+  h4 {
+    font-weight: 600;
+    margin: 0 0 20px;
+    grid-row-start: 1;
+  }
+  .column {
+    display: grid;
+    row-gap: 5px;
+    grid-template-rows: 40px 20px 20px 20px 20px 20px 20px 20px;
+    a {
+      &:hover,
+      &:focus {
+        color: var(--color-grey-5);
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 550px) {
+  footer {
+    column-gap: 10px;
+    margin-left: 300px !important;
+  }
+  .legal-wrapper {
+    display: none !important;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  footer {
+    margin-left: 200px;
+  }
+  .copyright,
+  .logo-wrapper {
+    display: none;
+  }
+}
+</style>
diff --git a/layouts/none.vue b/layouts/none.vue
deleted file mode 100644
index bc6b6a89..00000000
--- a/layouts/none.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <nuxt />
-</template>
-
-<script>
-export default {}
-</script>
-
-<style></style>
diff --git a/pages/about.vue b/pages/about.vue
new file mode 100644
index 00000000..9bcf0673
--- /dev/null
+++ b/pages/about.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="main">
+    <h1>About</h1>
+    <p>
+      Founded in 2020, Modrinth was created to provide modders with an open and
+      intuitive platform to publish their mods on.
+    </p>
+
+    <p>
+      Our primary goal is to be as open as possible, with all our code being
+      Open Source, while giving back to the modding community as much as
+      possible.
+    </p>
+
+    <p>
+      While we still are in early alpha, we hope we can soon be a major modding
+      platform for all modders :)
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  layout: 'home',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 auto;
+  max-width: 800px;
+}
+</style>
diff --git a/pages/documentation/index.vue b/pages/documentation/index.vue
new file mode 100644
index 00000000..dca44768
--- /dev/null
+++ b/pages/documentation/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="content">
+    <h2>Documentation</h2>
+    <p>Coming Soon!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 auto;
+  max-width: 800px;
+}
+</style>
diff --git a/pages/index.vue b/pages/index.vue
index 96cf23c9..1d06b29b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,5 @@
 <template>
   <div>
-    <header class="columns">
-      <nuxt-link to="/">
-        <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
-      </nuxt-link>
-      <div class="links">
-        <nuxt-link to="/">Home</nuxt-link>
-        <nuxt-link to="/mods">Mods</nuxt-link>
-        <nuxt-link to="/modpacks">Packs</nuxt-link>
-        <nuxt-link to="/about">About</nuxt-link>
-      </div>
-    </header>
     <div class="main-hero columns">
       <div class="left">
         <h1 class="typewriter">{{ currentText }}</h1>
@@ -161,41 +150,13 @@
         <img src="~/assets/images/api.gif" alt="api" loading="lazy" />
       </div>
     </div>
-    <footer>
-      <div class="logo-wrapper columns">
-        <img class="logo" src="~/assets/images/logo.svg" alt="logo" />
-        <p class="name">modrinth</p>
-      </div>
-      <p class="copyright">© Guavy LLC</p>
-      <div class="column">
-        <h4 class="pages">Pages</h4>
-        <nuxt-link to="/">Home</nuxt-link>
-        <nuxt-link to="/mods">Mods</nuxt-link>
-        <nuxt-link to="/packs">Packs</nuxt-link>
-        <nuxt-link to="/about">About</nuxt-link>
-        <nuxt-link to="/support">Support</nuxt-link>
-        <nuxt-link to="/guides">Guides</nuxt-link>
-      </div>
-      <div class="column">
-        <h4 class="developers">Developers</h4>
-        <nuxt-link to="/developers">Documentation</nuxt-link>
-        <a href="https://github.com/modrinth">Open Source</a>
-        <a href="https://github.com/modrinth/knossos/issues">Issues</a>
-      </div>
-      <div class="column">
-        <h4 class="legal">Legal</h4>
-        <nuxt-link to="/tos">Terms of Service</nuxt-link>
-        <nuxt-link to="/privacy">Privacy Policy</nuxt-link>
-        <nuxt-link to="/content">Content Policy</nuxt-link>
-      </div>
-    </footer>
   </div>
 </template>
 
 <script>
 export default {
   auth: false,
-  layout: 'none',
+  layout: 'home',
   data() {
     return {
       currentText: 'Open source',
@@ -237,35 +198,6 @@ export default {
   width: 50%;
 }
 
-header {
-  width: 100%;
-
-  .logo {
-    margin: 25px 50px;
-    height: 100px;
-  }
-
-  .links {
-    margin: auto 0;
-
-    a {
-      text-transform: uppercase;
-      font-weight: bold;
-      margin: 0 25px;
-
-      &:hover,
-      &:focus {
-        background-color: var(--color-grey-1);
-        color: var(--color-text);
-      }
-
-      &.nuxt-link-active {
-        border-bottom: 3px var(--color-brand) solid;
-      }
-    }
-  }
-}
-
 .main-hero {
   height: 600px;
 
@@ -389,53 +321,43 @@ header {
     }
   }
   img {
+    color: var(--color-text);
     align-self: flex-start;
   }
 }
 
-footer {
-  justify-content: center;
-  margin-top: 250px;
-  margin-bottom: 100px;
-  display: grid;
-  column-gap: 50px;
-  grid-template-columns: 175px 120px 120px 175px;
-  grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
+@media screen and (max-width: 500px) {
+  .hero {
+    margin-top: 0 !important;
+  }
+}
 
-  .logo-wrapper {
-    grid-column-start: 1;
-    grid-row-start: 1;
+@media screen and (max-width: 1300px) {
+  .workflow {
+    display: none;
+  }
 
-    .logo {
-      width: 30px;
-    }
-    .name {
-      place-self: center;
-      margin: 0;
-      font-size: 20px;
-      font-family: 'Montserrat Alternates', serif;
-    }
+  .right {
+    display: none;
   }
-  .copyright {
-    grid-column-start: 1;
-    grid-row-start: 10;
-    color: var(--color-grey-6);
+
+  .left {
+    padding-left: 0 !important;
+    text-align: center;
+    width: 100%;
   }
-  h4 {
-    font-weight: 600;
-    margin: 0 0 20px;
-    grid-row-start: 1;
+
+  .hero {
+    margin-top: 100px;
+    text-align: center;
+    margin-left: 0;
+    width: 100%;
   }
-  .column {
-    display: grid;
-    row-gap: 5px;
-    grid-template-rows: 40px 20px 20px 20px 20px 20px 20px 20px;
-    a {
-      &:hover,
-      &:focus {
-        color: var(--color-grey-5);
-      }
-    }
+}
+
+@media screen and (min-width: 1300px) and (max-width: 1500px) {
+  .hero {
+    margin-left: 10%;
   }
 }
 </style>
diff --git a/pages/privacy.vue b/pages/privacy.vue
new file mode 100644
index 00000000..b1aeddee
--- /dev/null
+++ b/pages/privacy.vue
@@ -0,0 +1,152 @@
+<template>
+  <div class="main">
+    <h1>Privacy Policy</h1>
+
+    <p>
+      At Modrinth, accessible from https://modrinth.com, one of our main
+      priorities is the privacy of our visitors. This Privacy Policy document
+      contains types of information that is collected and recorded by Modrinth
+      and how we use it.
+    </p>
+
+    <p>
+      If you have additional questions or require more information about our
+      Privacy Policy, do not hesitate to contact us.
+    </p>
+
+    <h2>Log Files</h2>
+
+    <p>
+      Modrinth follows a standard procedure of using log files. These files log
+      visitors when they visit websites. All hosting companies do this and a
+      part of hosting services' analytics. The information collected by log
+      files include internet protocol (IP) addresses, browser type, Internet
+      Service Provider (ISP), date and time stamp, referring/exit pages, and
+      possibly the number of clicks. These are not linked to any information
+      that is personally identifiable. The purpose of the information is for
+      analyzing trends, administering the site, tracking users' movement on the
+      website, and gathering demographic information.
+    </p>
+
+    <h2>Cookies and Web Beacons</h2>
+
+    <p>
+      Like any other website, Modrinth uses 'cookies'. These cookies are used to
+      store information including visitors' preferences, and the pages on the
+      website that the visitor accessed or visited. The information is used to
+      optimize the users' experience by customizing our web page content based
+      on visitors' browser type and/or other information.
+    </p>
+
+    <p>
+      For more general information on cookies, please read
+      <a href="https://www.privacypolicies.com/blog/cookies/"
+        >"What Are Cookies"</a
+      >.
+    </p>
+
+    <h2>Our Advertising Partners</h2>
+
+    <p>
+      Some of advertisers on our site may use cookies and web beacons. Our
+      advertising partners are listed below. Each of our advertising partners
+      has their own Privacy Policy for their policies on user data. For easier
+      access, we hyperlinked to their Privacy Policies below.
+    </p>
+
+    <ul>
+      <li>
+        <p>EthicalAds</p>
+        <p>
+          <a href="https://www.ethicalads.io/privacy-policy/"
+            >https://www.ethicalads.io/privacy-policy/</a
+          >
+        </p>
+      </li>
+    </ul>
+
+    <h2>Privacy Policies</h2>
+
+    <P
+      >You may consult this list to find the Privacy Policy for each of the
+      advertising partners of Modrinth.</P
+    >
+
+    <p>
+      Third-party ad servers or ad networks uses technologies like cookies,
+      JavaScript, or Web Beacons that are used in their respective
+      advertisements and links that appear on Modrinth, which are sent directly
+      to users' browser. They automatically receive your IP address when this
+      occurs. These technologies are used to measure the effectiveness of their
+      advertising campaigns and/or to personalize the advertising content that
+      you see on websites that you visit.
+    </p>
+
+    <p>
+      Note that Modrinth has no access to or control over these cookies that are
+      used by third-party advertisers.
+    </p>
+
+    <h2>Third Party Privacy Policies</h2>
+
+    <p>
+      Modrinth's Privacy Policy does not apply to other advertisers or websites.
+      Thus, we are advising you to consult the respective Privacy Policies of
+      these third-party ad servers for more detailed information. It may include
+      their practices and instructions about how to opt-out of certain options.
+    </p>
+
+    <p>
+      You can choose to disable cookies through your individual browser options.
+      To know more detailed information about cookie management with specific
+      web browsers, it can be found at the browsers' respective websites. What
+      Are Cookies?
+    </p>
+
+    <h2>Children's Information</h2>
+
+    <p>
+      Another part of our priority is adding protection for children while using
+      the internet. We encourage parents and guardians to observe, participate
+      in, and/or monitor and guide their online activity.
+    </p>
+
+    <p>
+      Modrinth does not knowingly collect any Personal Identifiable Information
+      from children under the age of 13. If you think that your child provided
+      this kind of information on our website, we strongly encourage you to
+      contact us immediately and we will do our best efforts to promptly remove
+      such information from our records.
+    </p>
+
+    <h2>Online Privacy Policy Only</h2>
+
+    <p>
+      This Privacy Policy applies only to our online activities and is valid for
+      visitors to our website with regards to the information that they shared
+      and/or collect in Modrinth. This policy is not applicable to any
+      information collected offline or via channels other than this website.
+    </p>
+
+    <h2>Consent</h2>
+
+    <p>
+      By using our website, you hereby consent to our Privacy Policy and agree
+      to its Terms and Conditions.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  layout: 'home',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 auto;
+  max-width: 800px;
+}
+</style>
diff --git a/pages/tos.vue b/pages/tos.vue
new file mode 100644
index 00000000..ab8d8900
--- /dev/null
+++ b/pages/tos.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="main">
+    <h1>Terms and Conditions</h1>
+
+    <h2>1. Terms</h2>
+
+    <p>
+      By accessing this Website, accessible from https://modrinth.com, you are
+      agreeing to be bound by these Website Terms and Conditions of Use and
+      agree that you are responsible for the agreement with any applicable local
+      laws. If you disagree with any of these terms, you are prohibited from
+      accessing this site. The materials contained in this Website are protected
+      by copyright and trade mark law.
+    </p>
+
+    <h2>2. Use License</h2>
+
+    <p>
+      Permission is granted to temporarily download one copy of the materials on
+      Guavy LLC's Website for personal, non-commercial transitory viewing only.
+      This is the grant of a license, not a transfer of title, and under this
+      license you may not:
+    </p>
+
+    <ul>
+      <li>modify or copy the materials;</li>
+      <li>
+        use the materials for any commercial purpose or for any public display;
+      </li>
+      <li>
+        attempt to reverse engineer any software contained on Guavy LLC's
+        Website;
+      </li>
+      <li>
+        remove any copyright or other proprietary notations from the materials;
+        or
+      </li>
+      <li>
+        transferring the materials to another person or "mirror" the materials
+        on any other server.
+      </li>
+    </ul>
+
+    <p>
+      This will let Guavy LLC to terminate upon violations of any of these
+      restrictions. Upon termination, your viewing right will also be terminated
+      and you should destroy any downloaded materials in your possession whether
+      it is printed or electronic format.
+    </p>
+
+    <h2>3. Disclaimer</h2>
+
+    <p>
+      All the materials on Guavy LLC’s Website are provided "as is". Guavy LLC
+      makes no warranties, may it be expressed or implied, therefore negates all
+      other warranties. Furthermore, Guavy LLC does not make any representations
+      concerning the accuracy or reliability of the use of the materials on its
+      Website or otherwise relating to such materials or any sites linked to
+      this Website.
+    </p>
+
+    <h2>4. Limitations</h2>
+
+    <p>
+      Guavy LLC or its suppliers will not be hold accountable for any damages
+      that will arise with the use or inability to use the materials on Guavy
+      LLC’s Website, even if Guavy LLC or an authorize representative of this
+      Website has been notified, orally or written, of the possibility of such
+      damage. Some jurisdiction does not allow limitations on implied warranties
+      or limitations of liability for incidental damages, these limitations may
+      not apply to you.
+    </p>
+
+    <h2>5. Revisions and Errata</h2>
+
+    <p>
+      The materials appearing on Guavy LLC’s Website may include technical,
+      typographical, or photographic errors. Guavy LLC will not promise that any
+      of the materials in this Website are accurate, complete, or current. Guavy
+      LLC may change the materials contained on its Website at any time without
+      notice. Guavy LLC does not make any commitment to update the materials.
+    </p>
+
+    <h2>6. Links</h2>
+
+    <p>
+      Guavy LLC has not reviewed all of the sites linked to its Website and is
+      not responsible for the contents of any such linked site. The presence of
+      any link does not imply endorsement by Guavy LLC of the site. The use of
+      any linked website is at the user’s own risk.
+    </p>
+
+    <h2>7. Site Terms of Use Modifications</h2>
+
+    <p>
+      Guavy LLC may revise these Terms of Use for its Website at any time
+      without prior notice. By using this Website, you are agreeing to be bound
+      by the current version of these Terms and Conditions of Use.
+    </p>
+
+    <h2>8. Your Privacy</h2>
+
+    <p>Please read our <nuxt-link to="/privacy"> Privacy Policy</nuxt-link>.</p>
+
+    <h2>9. Governing Law</h2>
+
+    <p>
+      Any claim related to Guavy LLC's Website shall be governed by the laws of
+      us without regards to its conflict of law provisions.
+    </p>
+
+    <h2>10. Content</h2>
+
+    <p>
+      When you upload text, software, mods, scripts, graphics, photos, audio,
+      videos, links, interactive features and other materials that may be viewed
+      on, or accessed through Modrinth, we refer to it as “Content”.
+    </p>
+
+    <ul>
+      <li>
+        You must own or have the necessary licenses, rights, consents, and
+        permissions to store, share or distribute the Content that is uploaded
+        under your Modrinth account.
+      </li>
+      <li>
+        You are responsible for all activity and Content that is uploaded under
+        your Modrinth account.
+      </li>
+      <li>
+        You must not transmit any viruses, worms, malware, or any other code of
+        a destructive nature through Modrinth.
+      </li>
+      <li>
+        You retain all of your ownership rights to your Content. We do not claim
+        any ownership in or to any of your Content.
+      </li>
+      <li>
+        To enable us to provide the services of Modrinth, you hereby grant us a
+        worldwide, non-exclusive, royalty-free, and unrestricted license to use,
+        reproduce, distribute copies, prepare derivative works of, or display
+        Content in connection with Modrinth in any medium and for any purpose
+        (including commercial purposes), which is irrevocable.
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  auth: false,
+  layout: 'home',
+}
+</script>
+
+<style lang="scss" scoped>
+.main {
+  margin: 0 auto;
+  max-width: 800px;
+}
+</style>