Switch to Nuxt

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
+  extends: [
+    '@nuxtjs',
+    'prettier',
+    'prettier/vue',
+    'plugin:prettier/recommended',
+    'plugin:nuxt/recommended',
+  ],
+  plugins: ['prettier'],
+  // add your custom rules here
+  rules: {},
+}

.gitignore

@@ -1,8 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
 *.log
-.cache
+npm-debug.log*
-.DS_Store
+yarn-debug.log*
-src/.temp
+yarn-error.log*
-node_modules
+
-dist
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
 .env
-.env.*
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

README.md

@@ -1,15 +0,0 @@
-### DISCLAIMER
-- I use Gridsome for sketching
-- It won't be Gridsome after I finish the sketch
-- It will be Nuxt
-- No, it likely won't be not Nuxt
-- Vue has 2 major concepts you need to grasp: components and reactivity.
-Catch up on that, and you'll be understanding the code easily
-- Node is performant enough, we will apply aggressive Nginx caching to it
-to ensure that even more
-- SSR is rendering as much HTML on the server as possible and sending
-ready to display HTML to the client instead of JS creating it client-side
-- Hydration is constructing vDOM from ready-to-display server-
-or statically rendered HTML
-- vDOM is a representation of DOM created by Vue to batch DOM changes for
-performance reason

assets/styles/components.scss

@@ -0,0 +1,46 @@
+// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
+// which allows to have just one wrapper div
+.iconified-input {
+  align-items: center;
+  display: inline-flex;
+  flex-direction: row-reverse;
+
+  input {
+    padding-left: 2.5rem;
+
+    &:hover {
+      &+svg {
+        color: var(--color-grey-6);
+      }
+    }
+
+    &:focus {
+      &+svg {
+        color: var(--color-text);
+      }
+    }
+  }
+
+  svg {
+    color: var(--color-grey-5);
+    margin-right: -2rem;
+  }
+}
+
+.badge {
+  border-radius: 1rem;
+  font-size: 0.8rem;
+  font-weight: bold;
+  letter-spacing: 0.02rem;
+  padding: 0.25rem 0.5rem;
+
+  &.red {
+    background-color: #fed7d7;
+    color: #9b2c2c;
+  }
+
+  &.green {
+    background-color: #c6f6d5;
+    color: #276749;
+  }
+}

assets/styles/global.scss

@@ -0,0 +1,92 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
+
+:root {
+  /**
+    * Colors
+   */
+  --color-text: #1a202c;
+  --color-bg: #ffffff;
+
+  --color-text-inverted: var(--color-bg);
+  --color-bg-inverted: var(--color-text);
+
+  --color-brand: #4d9227;
+
+  --color-grey-0: #f7fafc;
+  --color-grey-1: #edf2f7;
+  --color-grey-2: #e2e8f0;
+  --color-grey-3: #cbd5e0;
+  --color-grey-4: #a0aec0;
+  --color-grey-5: #718096;
+  --color-grey-6: #4a5568;
+  --color-grey-7: #2d3748;
+
+  /**
+    * Sizes
+   */
+  --size-rounded-sm: 0.25rem;
+  --size-rounded-md: 0.5rem;
+  --size-rounded-lg: 1rem;
+
+  /**
+    * Defaults
+   */
+  font-size: 18px;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen,
+    Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+svg {
+  height: 24px;
+  width: 24px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h2 {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+}
+
+h3 {
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+input {
+  background: var(--color-bg);
+  border: 2px solid var(--color-grey-3);
+  border-radius: var(--size-rounded-sm);
+  color: var(--color-grey-9);
+  font-size: 1rem;
+  padding: 0.5rem 1rem;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    border-color: var(--color-grey-4);
+    color: var(--color-text);
+
+    &::placeholder {
+      color: var(--color-grey-7);
+    }
+  }
+
+  &::placeholder {
+    color: var(--color-grey-6);
+  }
+}
+
+@import "~assets/styles/layout.scss";
+@import "~assets/styles/utils.scss";
+@import "~assets/styles/components.scss";

assets/styles/layout.scss

@@ -0,0 +1,9 @@
+.columns {
+  display: flex;
+
+  @for $i from 1 through 4 {
+    .column-grow-#{$i} {
+      flex-grow: $i;
+    }
+  }
+}

assets/styles/utils.scss

@@ -0,0 +1,3 @@
+.rounded-md {
+  border-radius: 0.5rem;
+}

gridsome.config.js

@@ -1,4 +0,0 @@
-module.exports = {
-  siteName: 'Staging',
-  plugins: []
-}

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

layouts/default.vue

@@ -2,135 +2,120 @@
   <div class="layout">
     <aside>
       <div class="logo-wrapper">
-        <g-image class="logo" src="~/assets/images/logo.png"/>
+        <img class="logo" src="~/assets/images/logo.png" />
       </div>
       <nav>
         <section class="links">
           <h3>Projects</h3>
           <section>
-            <g-link to="/mods">
+            <nuxt-link to="/modpacks">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
-                <polyline points="16 18 22 12 16 6"/>
+              >
-                <polyline points="8 6 2 12 8 18"/>
+                <line x1="16.5" y1="9.4" x2="7.5" y2="4.21" />
-              </svg>
+                <path
-              <span>Mods</span>
+                  d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
-            </g-link>
+                />
-            <g-link to="/modpacks">
+                <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
-              <svg
+                <line x1="12" y1="22.08" x2="12" y2="12" />
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <line x1="16.5" y1="9.4" x2="7.5" y2="4.21"/>
-                <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
-                <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
-                <line x1="12" y1="22.08" x2="12" y2="12"/>
               </svg>
               <span>
                 Modpacks
               </span>
-            </g-link>
+            </nuxt-link>
+            <nuxt-link to="/mods">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="16 18 22 12 16 6" />
+                <polyline points="8 6 2 12 8 18" />
+              </svg>
+              <span>Mods</span>
+            </nuxt-link>
           </section>
 
           <h3>Community</h3>
           <section>
-            <g-link to="/forums">
+            <nuxt-link to="/support">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
-                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
+              >
-              </svg>
+                <circle cx="12" cy="12" r="10" />
-              <span>Forums</span>
+                <circle cx="12" cy="12" r="4" />
-            </g-link>
+                <line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
-            <g-link to="/support">
+                <line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
-              <svg
+                <line x1="14.83" y1="9.17" x2="18.36" y2="5.64" />
-                viewBox="0 0 24 24"
+                <line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <circle cx="12" cy="12" r="10"/>
-                <circle cx="12" cy="12" r="4"/>
-                <line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/>
-                <line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/>
-                <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>
-            </g-link>
+            </nuxt-link>
-            <g-link to="/guides">
+            <nuxt-link to="/guides">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/>
+              >
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
+                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
+                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
               </svg>
               <span>Guides</span>
-            </g-link>
+            </nuxt-link>
           </section>
 
           <h3>Dashboard</h3>
           <section>
-            <g-link to="/dashboard/projects">
+            <nuxt-link to="/dashboard/projects">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
-                <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
+              >
+                <path
+                  d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                />
               </svg>
               <span>My projects</span>
-            </g-link>
+            </nuxt-link>
-            <g-link to="/dashboard/analytics">
+            <nuxt-link to="/dashboard/analytics">
               <svg
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
-                stroke-linejoin="round">
+                stroke-linejoin="round"
-                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+              >
+                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
               </svg>
               <span>Analytics</span>
-            </g-link>
+            </nuxt-link>
-            <g-link to="/dashboard/rewards">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round">
-                <circle cx="12" cy="8" r="7"/>
-                <polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.88"/>
-              </svg>
-              <span>Rewards</span>
-            </g-link>
           </section>
         </section>
 
         <section class="user-actions">
           <div class="avatar">
-            <g-image src="~/assets/images/avatar.jpg"/>
+            <img src="~/assets/images/avatar.jpg" />
             <span>
               falseresync
             </span>
@@ -142,9 +127,10 @@
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
-              stroke-linejoin="round">
+              stroke-linejoin="round"
-              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
+            >
-              <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
+              <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
+              <path d="M13.73 21a2 2 0 0 1-3.46 0" />
             </svg>
           </div>
         </section>
@@ -168,61 +154,12 @@
         </div>
       </header> -->
 
-      <div class="content">
+      <nuxt />
-        <slot/>
-      </div>
     </main>
   </div>
 </template>
 
 <style lang="scss">
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
-
-:root {
-  /**
-    * Colors
-   */
-  --color-text: #1A202C;
-  --color-bg: #FFFFFF;
-
-  --color-text-inverted: var(--color-bg);
-  --color-bg-inverted: var(--color-text);
-
-  --color-brand: #4D9227;
-
-  --color-grey-0: #F7FAFC;
-  --color-grey-1: #EDF2F7;
-  --color-grey-2: #E2E8F0;
-  --color-grey-3: #CBD5E0;
-  --color-grey-4: #A0AEC0;
-  --color-grey-5: #718096;
-  --color-grey-6: #4A5568;
-  --color-grey-7: #2D3748;
-
-  /**
-    * Defaults
-   */
-  font-size: 18px;
-}
-
-body {
-  background-color: var(--color-bg);
-  color: var(--color-text);
-  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-svg {
-  height: 24px;
-  width: 24px;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
 .layout {
   display: flex;
   min-height: 100vh;
@@ -232,7 +169,7 @@ a {
     border-right: 1px solid var(--color-grey-2);
     display: flex; // Flex here to safely expand navigation height
     flex-direction: column;
-    width: 15%;
+    min-width: 15%;
 
     .logo-wrapper {
       align-items: center;
@@ -282,12 +219,12 @@ a {
 
             &:hover,
             &:focus,
-            &.active {
+            &.nuxt-link-active {
               background-color: var(--color-grey-1);
               color: var(--color-text);
             }
 
-            &.active {
+            &.nuxt-link-active {
               box-shadow: -4px 0 0 0 var(--color-brand);
             }
 
@@ -302,7 +239,6 @@ a {
           }
         }
       }
-
       .user-actions {
         align-items: center;
         border-top: 2px solid var(--color-grey-2);
@@ -337,7 +273,6 @@ a {
       }
     }
   }
-
   main {
     background-color: var(--color-grey-0);
     flex-grow: 1;

nuxt.config.js

@@ -0,0 +1,67 @@
+export default {
+  /*
+   ** Nuxt rendering mode
+   ** See https://nuxtjs.org/api/configuration-mode
+   */
+  mode: 'universal',
+  /*
+   ** Nuxt target
+   ** See https://nuxtjs.org/api/configuration-target
+   */
+  target: 'server',
+  /*
+   ** Headers of the page
+   ** See https://nuxtjs.org/api/configuration-head
+   */
+  head: {
+    title: 'Modrinth',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      {
+        hid: 'description',
+        name: 'description',
+        content: process.env.npm_package_description || '',
+      },
+    ],
+    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+  },
+  /*
+   ** Global CSS
+   */
+  css: ['~assets/styles/global.scss'],
+  /*
+   ** Plugins to load before mounting the App
+   ** https://nuxtjs.org/guide/plugins
+   */
+  plugins: [],
+  /*
+   ** Auto import components
+   ** See https://nuxtjs.org/api/configuration-components
+   */
+  components: true,
+  /*
+   ** Nuxt.js dev-modules
+   */
+  buildModules: [
+    // Doc: https://github.com/nuxt-community/eslint-module
+    '@nuxtjs/eslint-module',
+  ],
+  /*
+   ** Nuxt.js modules
+   */
+  modules: [
+    // Doc: https://axios.nuxtjs.org/usage
+    '@nuxtjs/axios',
+  ],
+  /*
+   ** Axios module configuration
+   ** See https://axios.nuxtjs.org/options
+   */
+  axios: {},
+  /*
+   ** Build configuration
+   ** See https://nuxtjs.org/api/configuration-build/
+   */
+  build: {},
+}

package.json

@@ -1,16 +1,30 @@
 {
-  "name": "mineunity",
+  "name": "knossos",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "gridsome build",
+    "dev": "nuxt",
-    "develop": "gridsome develop",
+    "build": "nuxt build",
-    "explore": "gridsome explore"
+    "start": "nuxt start",
+    "export": "nuxt export",
+    "serve": "nuxt serve",
+    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "lint": "npm run lint:js"
   },
   "dependencies": {
-    "gridsome": "^0.7.0"
+    "@nuxtjs/axios": "^5.11.0",
+    "nuxt": "^2.13.0"
   },
   "devDependencies": {
+    "@nuxtjs/eslint-config": "^3.0.0",
+    "@nuxtjs/eslint-module": "^2.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-nuxt": "^1.0.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "node-sass": "^4.14.1",
-    "sass-loader": "^8.0.2"
+    "prettier": "^2.0.5",
+    "sass-loader": "^9.0.2"
   }
 }

pages/dashboard/projects.vue

@@ -1,14 +1,15 @@
 <template>
-  <layout>
+  <div class="content">
     <h2>My projects</h2>
 
-    <h3>Mods</h3>
+    <div class="section-header">
+      <h3>Mods</h3>
+      <button>Create a new mod</button>
+    </div>
     <table>
-      <colgroup>
-        <col span="2">
-      </colgroup>
       <thead>
         <tr>
+          <th></th>
           <th>Name</th>
           <th>Role</th>
           <th>Status</th>
@@ -19,15 +20,8 @@
       <tbody>
         <tr>
           <td>
-            <g-image src="~/assets/images/aof-mini.png" />
+            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
-            All of Fabric Mini
           </td>
-          <td>Contributor</td>
-          <td><span class="badge red">Abandoned</span></td>
-          <td>357</td>
-          <td>Apr 1, 2020</td>
-        </tr>
-        <tr>
           <td>Finite Water</td>
           <td>Owner</td>
           <td><span class="badge green">Active</span></td>
@@ -35,6 +29,9 @@
           <td>Nov 4, 2019</td>
         </tr>
         <tr>
+          <td>
+            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
+          </td>
           <td>Vivatech</td>
           <td>Contributor</td>
           <td><span class="badge green">Active</span></td>
@@ -43,35 +40,45 @@
         </tr>
       </tbody>
     </table>
-  </layout>
+
+    <div class="section-header">
+      <h3>Modpacks</h3>
+      <button>Create a new modpack</button>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Name</th>
+          <th>Role</th>
+          <th>Status</th>
+          <th>Downloads</th>
+          <th>Last updated</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            <img class="rounded-md" src="~/assets/images/aof-mini.png" />
+          </td>
+          <td>All of Fabric Mini</td>
+          <td>Contributor</td>
+          <td><span class="badge red">Abandoned</span></td>
+          <td>357</td>
+          <td>Apr 1, 2020</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <style lang="scss">
-h2 {
+.section-header {
-  margin-top: 0;
+  display: flex;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
-}
 
-h3 {
+  & > * {
-  margin-top: 1rem;
+    margin-right: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.badge {
-  border-radius: 1rem;
-  font-size: 0.8rem;
-  font-weight: bold;
-  letter-spacing: 0.02rem;
-  padding: 0.25rem 0.5rem;
-
-  &.red {
-    background-color: #FED7D7;
-    color: #9B2C2C;
-  }
-
-  &.green {
-    background-color: #C6F6D5;
-    color: #276749;
   }
 }
 
@@ -80,10 +87,11 @@ table {
   border-collapse: collapse;
   border-radius: 0.5rem;
   box-shadow: 0 2px 3px 1px var(--color-grey-2);
+  table-layout: fixed;
   width: 100%;
 
   * {
-    text-align: start;
+    text-align: left;
   }
 
   tr:not(:last-child),
@@ -96,7 +104,15 @@ table {
 
   th,
   td {
-    padding: 1rem 1.25rem;
+    &:first-child {
+      text-align: center;
+      width: 5%;
+    }
+
+    &:nth-child(2) {
+      padding-left: 0;
+      width: 30%;
+    }
   }
 
   th {
@@ -105,16 +121,16 @@ table {
     letter-spacing: 0.02rem;
     margin-bottom: 0.5rem;
     margin-top: 1.5rem;
+    padding: 1rem 1rem;
     text-transform: uppercase;
   }
 
   td {
-    &:nth-child(5n - 4) {
+    padding: 0.25rem 1rem;
-      max-width: 50%;
-    }
 
-    &:not(:nth-child(5n - 4)) {
+    img {
-      min-width: 15%;
+      height: 3rem;
+      width: 3rem;
     }
   }
 }

pages/modpacks.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="content">
+    <h2>Modpacks</h2>
+    <div class="columns">
+      <div class="column-grow-4">
+        <section id="search-pagination">
+          <div class="iconified-input column-grow-2">
+            <input
+              id="search"
+              type="search"
+              name="search"
+              placeholder="Search modpacks"
+            />
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8" />
+              <line x1="21" y1="21" x2="16.65" y2="16.65" />
+            </svg>
+          </div>
+          <div class="pagination column-grow-1">
+            pagination
+          </div>
+        </section>
+      </div>
+      <section class="column-grow-1">
+        <h3>Filters</h3>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+#search-pagination {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

src/main.js

@@ -1,6 +0,0 @@
-import DefaultLayout from '~/layouts/Default.vue'
-import '~/assets/styles/global.scss'
-
-export default function (Vue, { router, head, isClient }) {
-  Vue.component('Layout', DefaultLayout)
-}

src/pages/Index.vue

@@ -1,5 +0,0 @@
-<template>
-  <Layout>
-    The actual dashbo
-  </Layout>
-</template>

src/pages/dashboard/Analytics.vue

@@ -1,5 +0,0 @@
-<template>
-  <Layout>
-    The actual dashboaard, mod list, mod README will go here
-  </Layout>
-</template>