From b8b942cdae6ccd3e3ae8347dec2abe92a1ffc993 Mon Sep 17 00:00:00 2001
From: Geometrically <18202329+Geometrically@users.noreply.github.com>
Date: Mon, 21 Feb 2022 16:29:13 -0700
Subject: [PATCH] Update embed, homepage and project creation fixes (#356)

---
 layouts/default.vue      |  4 ++--
 nuxt.config.js           | 14 ++++++++------
 pages/create/project.vue | 26 +++++++++++++-------------
 pages/index.vue          | 28 ++++++++--------------------
 4 files changed, 31 insertions(+), 41 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 974b081f4..ee84cc0bd 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -13,9 +13,9 @@
               <NuxtLink to="/mods" class="tab">
                 <span>Mods</span>
               </NuxtLink>
-              <NuxtLink to="/modpacks" class="tab">
+              <!--              <NuxtLink to="/modpacks" class="tab">
                 <span>Modpacks</span>
-              </NuxtLink>
+              </NuxtLink>-->
             </div>
           </section>
           <section class="column-grow user-outer" aria-label="Account links">
diff --git a/nuxt.config.js b/nuxt.config.js
index ff3ae1d38..8a06f9937 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -14,7 +14,7 @@ export default {
     htmlAttrs: {
       lang: 'en',
     },
-    title: 'Modrinth',
+    title: 'Modrinth: Download and publish Minecraft Mods',
     meta: [
       {
         charset: 'utf-8',
@@ -27,7 +27,7 @@ export default {
         hid: 'description',
         name: 'description',
         content:
-          'Modrinth is a mod distribution platform. Modrinth is modern, easy to use, and built for modders. Modrinth currently supports Minecraft, including Forge and Fabric mod loaders.',
+          'Download Minecraft Fabric and Forge mods on Modrinth. Discover and publish projects on Modrinth with a modern, easy to use interface and API.',
       },
 
       {
@@ -79,7 +79,7 @@ export default {
       {
         hid: 'og:image',
         name: 'og:image',
-        content: 'https://cdn.modrinth.com/modrinth.png',
+        content: 'https://cdn.modrinth.com/modrinth-new.png',
       },
       {
         hid: 'twitter:card',
@@ -218,11 +218,13 @@ export default {
     exclude: [
       '/settings/**',
       '/settings',
-      'notifications',
-      'moderation',
-      'search',
+      '/notifications',
+      '/moderation',
+      '/search',
+      '/search/**',
       '/create/**',
     ],
+    routes: ['mods', 'modpacks'],
   },
   /*
    ** Axios module configuration
diff --git a/pages/create/project.vue b/pages/create/project.vue
index 7d93e98a8..e8e7500c0 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -22,6 +22,19 @@
         </button>
       </header>
       <section class="card essentials">
+        <h3>Project type</h3>
+        <label>
+          <span class="no-padding">The project type of your project.</span>
+          <Multiselect
+            v-model="projectType"
+            placeholder="Select one"
+            :options="projectTypes"
+            :searchable="false"
+            :close-on-select="true"
+            :show-labels="false"
+            :allow-empty="false"
+          />
+        </label>
         <h3>Name</h3>
         <label>
           <span>
@@ -80,19 +93,6 @@
             placeholder="Enter the vanity URL slug"
           />
         </label>
-        <h3>Project type</h3>
-        <label>
-          <span class="no-padding">The project type of your project.</span>
-          <Multiselect
-            v-model="projectType"
-            placeholder="Select one"
-            :options="projectTypes"
-            :searchable="false"
-            :close-on-select="true"
-            :show-labels="false"
-            :allow-empty="false"
-          />
-        </label>
       </section>
       <section class="card project-icon">
         <h3>Icon</h3>
diff --git a/pages/index.vue b/pages/index.vue
index 41c479162..b147e9d91 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -75,8 +75,9 @@
             <p>
               We are always adding new features and working towards making
               Modrinth have the friendliest user experience possible. Right now,
-              we're working on finally paying out creators on our site. If you
-              have any more feature ideas, feel free to join our
+              we're working on finishing modpacks and finally paying out
+              creators on our site. If you have any more feature ideas, feel
+              free to join our
               <a href="https://discord.gg/EUHuJHt" target="_blank">Discord</a>!
             </p>
             <div class="features">
@@ -92,10 +93,6 @@
                 <CheckIcon />
                 <p>Real-time search</p>
               </div>
-              <div class="feature completed">
-                <CheckIcon />
-                <p>Mods and modpacks</p>
-              </div>
               <div class="feature completed">
                 <CheckIcon />
                 <p>Customizable project pages</p>
@@ -116,6 +113,10 @@
                 <CheckIcon />
                 <p>Dependency management</p>
               </div>
+              <div class="feature in-progress">
+                <InProgressIcon />
+                <p>Modpacks</p>
+              </div>
               <div class="feature in-progress">
                 <InProgressIcon />
                 <p>Creator payouts</p>
@@ -236,15 +237,11 @@ export default {
       width: 100%;
       height: 40rem;
       object-fit: cover;
-      object-position: 10% 12.5%;
+      object-position: 15% 12.5%;
 
       @media screen and (max-width: 1280px) {
         border-radius: 0;
       }
-
-      @media screen and (max-width: 750px) {
-        height: calc(75vh);
-      }
     }
 
     .text {
@@ -304,18 +301,9 @@ export default {
 
       &.left {
         flex-direction: column;
-
-        .text-container {
-          padding-left: 3rem;
-          //padding-right: 0;
-        }
       }
 
       .text-container {
-        //mobile:
-        padding-left: 3rem;
-        padding-right: 3rem;
-
         .subheader {
           margin: 0;
           color: var(--color-brand);