From 905f6ef1e4ee3c0d78464e601808afdf67f7f2f4 Mon Sep 17 00:00:00 2001
From: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
Date: Wed, 24 Apr 2024 16:33:50 +0200
Subject: [PATCH] :truck: move crewmates page into index

Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
---
 pages/crewmates.vue | 50 --------------------------------------------
 pages/index.vue     | 51 +++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 54 deletions(-)
 delete mode 100644 pages/crewmates.vue

diff --git a/pages/crewmates.vue b/pages/crewmates.vue
deleted file mode 100644
index 593c1e0..0000000
--- a/pages/crewmates.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <NuxtLayout name="default">
-    <div class="flex flex-col">
-      <div class="flex flex-col pt-4 gap-3">
-        <h1 class="pb-2 text-center md:text-6xl text-4xl font-bold text-white">the crewmates</h1>
-        <p class="text-l font-medium text-white px-4 md:px-10">
-          Here you can find all the crewmates of the Grand Line Webring. Want to go back to the frontpage? <a href="/" class="px-1 font-bold bg-red-500">Click here</a>
-        </p>
-        <div class="flex justify-center">
-          <ul class="grid-cols" id="crew-list">
-            <li data-lang="en" id="sid">
-              <a href="https://kjelsrud.dev">kjelsrud.dev</a>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  </NuxtLayout>
-</template>
-
-<style scoped>
-  .grid-cols {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 5rem;
-  }
-  @media only screen and (max-width: 600px) {
-    .grid-cols {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 1rem;
-    }
-  }
-  ul, li a{
-    color: white;
-    font-weight: 600
-  }
-  li :hover {
-    background-color: #ef4444;
-  }
-  #crew-list {
-    counter-reset: crew-index;
-  }
-  #crew-list > li {
-    counter-increment: crew-index;
-  }
-  #crew-list > li::before {
-    content: counter(crew-index) ". ";
-  }
-</style>
diff --git a/pages/index.vue b/pages/index.vue
index 52237a5..d472463 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,13 +1,15 @@
 <template>
     <NuxtLayout name="default">
-        <div class="flex flex-col md:gap-4 gap-2 pt-4">
-            <h1 class="pb-2 text-center md:text-6xl text-3xl font-bold text-white">the grand line webring</h1>
+        <div class="flex flex-col md:gap-4 gap-2 pt-4 pb-10">
+            <h1 class="pb-2 text-center md:text-6xl text-4xl font-bold text-white">the grand line webring</h1>
+            <!-- INTRO -->
             <div>
                 <h2 class="md:text-3xl text-xl font-semibold text-white">Ahoy there!</h2>
                 <p class="text-l font-medium text-white">
                     Welcome to the Grand Line Webring, where all passionate pirates and fans of One Piece gather to celebrate the epic adventures of Monkey D. Luffy and his crew! Whether you sail the seas or dream of setting sail, this webring is for you. Join our crew and become part of the greatest adventure on the Grand Line!
                 </p>
             </div>
+            <!-- HOW TO JOIN -->
             <div>
                 <h2 class="md:text-3xl text-xl font-semibold text-white">How to Join</h2>
                 <p class="text-l font-medium text-white">
@@ -15,6 +17,7 @@
                     We'll review your submission as fast as we can, and remember to include the widget on your site for all to see.
                 </p>
             </div>
+            <!-- WEBRING WIDGETS -->
             <div>
                 <h2 class="md:text-3xl text-xl font-semibold text-white">Webring Widgets</h2>
                 <p class="text-l font-medium text-white">
@@ -25,10 +28,50 @@
                 <a href="/goingmerry.white.svg" download><img src="/goingmerry.white.svg" alt="The Going Merry SVG in white" class="md:w-36 w-20" /></a>
                 <a href="/goingmerry.black.svg" download><img src="/goingmerry.black.svg" alt="The Going Merry SVG in black" class="md:w-36 w-20" /></a>
             </div>
+            <!-- WEBRING CREW -->
             <h2 class="md:text-3xl text-xl font-semibold text-white">Webring Crew</h2>
             <p class="text-l font-medium text-white">
-                Interested in checking out your fellow crewmates? <a href="/crewmates" class="px-1 font-bold bg-red-500">Click here</a> to see the full list!
+                Interested in checking out your fellow crewmates? Here you can find all the crewmates of the Grand Line Webring.
             </p>
+            <div class="flex justify-center">
+                <ul class="grid-cols" id="crew-list">
+                    <!-- LIST -->
+                    <li data-lang="en" id="sid">
+                        <a href="https://kjelsrud.dev">kjelsrud.dev</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </NuxtLayout>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+  .grid-cols {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 5rem;
+  }
+  @media only screen and (max-width: 600px) {
+    .grid-cols {
+        display: grid;
+        grid-template-columns: repeat(3, 2fr);
+        gap: 1rem;
+    }
+  }
+  ul, li a{
+    color: white;
+    font-weight: 600
+  }
+  li :hover {
+    background-color: #ef4444;
+  }
+  #crew-list {
+    counter-reset: crew-index;
+  }
+  #crew-list > li {
+    counter-increment: crew-index;
+  }
+  #crew-list > li::before {
+    content: counter(crew-index) ". ";
+  }
+</style>