From 2b36fe367ed739869db34298d48d19bbfb257dd4 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Tue, 18 Jun 2024 17:32:40 +0000
Subject: [PATCH] add homepage text

---
 layouts/default.vue | 4 +++-
 pages/index.vue | 140 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------
 2 file(s) changed, 91 insertion(s)(+), 53 deletion(s)(-)

diff --git a/layouts/default.vue b/layouts/default.vue
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -122,7 +122,9 @@
       }
 
       &.router-link-active {
-        color: var(--primary-100);
+        color: transparent;
+        background: linear-gradient(10deg, var(--primary-100) 30%, var(--primary-600) 100%);
+        background-clip: text;
       }
     }
   }
diff --git a/pages/index.vue b/pages/index.vue
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,47 +11,54 @@
 
 <template>
   <div id="page">
-    <div class="container">
-      <IconCSS name="akar-icons:game-controller" size="200"/>
-      <div class="text">
-        <div class="value">
-          {{ data?.projects.toLocaleString() }}
-        </div>
-        <div>
-          Projects
+    <div id="header">
+      The place for Stats all about
+      <NuxtLink to="https://modrinth.com" id="modrinth">Modrinth</NuxtLink>
+      <div id="unofficial">(unofficial)</div>
+    </div>
+    <div id="values">
+      <div class="container">
+        <IconCSS name="akar-icons:game-controller" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.projects.toLocaleString() }}
+          </div>
+          <div>
+            Projects
+          </div>
         </div>
       </div>
-    </div>
-    <div class="container">
-      <IconCSS name="akar-icons:attach" size="200"/>
-      <div class="text">
-        <div class="value">
-          {{ data?.versions.toLocaleString() }}
-        </div>
-        <div>
-          Versions
-        </div>
-      </div>
-    </div>
-    <div class="container">
-      <IconCSS name="akar-icons:file" size="200"/>
-      <div class="text">
-        <div class="value">
-          {{ data?.files.toLocaleString() }}
-        </div>
-        <div>
-          Files
+      <div class="container">
+        <IconCSS name="akar-icons:attach" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.versions.toLocaleString() }}
+          </div>
+          <div>
+            Versions
+          </div>
         </div>
       </div>
-    </div>
-    <div class="container">
-      <IconCSS name="akar-icons:person" size="200"/>
-      <div class="text">
-        <div class="value">
-          {{ data?.authors.toLocaleString() }}
+      <div class="container">
+        <IconCSS name="akar-icons:file" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.files.toLocaleString() }}
+          </div>
+          <div>
+            Files
+          </div>
         </div>
-        <div>
-          Authors
+      </div>
+      <div class="container">
+        <IconCSS name="akar-icons:person" size="200"/>
+        <div class="text">
+          <div class="value">
+            {{ data?.authors.toLocaleString() }}
+          </div>
+          <div>
+            Authors
+          </div>
         </div>
       </div>
     </div>
@@ -60,36 +67,65 @@
 
 <style scoped>
 #page {
-  height: 100%;
-
   flex: 1;
+  background: linear-gradient(180deg, var(--surface-100) 0%, black 100%);
 
   display: flex;
+  flex-direction: column;
   justify-content: space-evenly;
-  align-items: center;
 
-  flex-wrap: wrap;
+  #header {
+    text-align: center;
+    font-size: 4rem;
+    font-weight: bold;
 
-  .container {
-    display: flex;
+    #modrinth {
+      display: block;
+      font-size: 5rem;
 
-    gap: 10px;
+      color: transparent;
+      background: linear-gradient(70deg, var(--primary-100) 30%, var(--primary-600) 70%);
+      background-clip: text;
 
-    .text {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
+      transition: 0.2s scale ease-in-out;
 
-      .value {
-        font-size: xxx-large;
+      &:hover {
+        scale: 1.05;
       }
     }
 
-    span {
-      background: linear-gradient(70deg, var(--primary-100) 30%, var(--primary-600) 70%);
+    #unofficial {
+      font-size: large;
+      color: var(--surface-400);
     }
   }
 
-  background: linear-gradient(180deg, var(--surface-100) 0%, black 100%);
+  #values {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+
+    flex-wrap: wrap;
+
+    .container {
+      display: flex;
+
+      gap: 10px;
+
+      .text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .value {
+          font-size: xxx-large;
+        }
+      }
+
+      span {
+        background: linear-gradient(70deg, var(--primary-100) 30%, var(--primary-600) 70%);
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file

--
tangled.sh