From 23f60a7637744ee5ce3175ba20e62e883a2f0c2b Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sat, 23 Nov 2024 11:25:55 +0100
Subject: [PATCH] further visual improvements

---
 app/assets/css/global.css        | 25 +++++++-------
 app/components/SideBar.vue       |  2 +-
 app/components/filter/Item.vue   |  4 +--
 app/components/home/StatItem.vue | 43 ++++++++++++-----------
 app/pages/index.vue              | 59 ++++++--------------------------
 5 files changed, 48 insertions(+), 85 deletions(-)

diff --git a/app/assets/css/global.css b/app/assets/css/global.css
index fa2664f..4b66f06 100644
--- a/app/assets/css/global.css
+++ b/app/assets/css/global.css
@@ -1,32 +1,31 @@
 * {
-	@apply text-neutral-100;
-	font-family:
-		Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid, Helvetica Neue, sans-serif;
+    @apply text-zinc-200;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid, Helvetica Neue, sans-serif;
 }
 
 body {
-	@apply bg-neutral-900;
+    @apply bg-zinc-900;
 
-	box-sizing: border-box;
-	min-height: 100dvh;
-	margin: 0;
+    box-sizing: border-box;
+    min-height: 100dvh;
+    margin: 0;
 }
 
 /* improve scrollbar on chrome... */
 ::-webkit-scrollbar {
-	width: 4px;
-	height: 4px;
+    width: 4px;
+    height: 4px;
 }
 
 ::-webkit-scrollbar-track {
-	background: transparent;
+    background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #888;
-	border-radius: 6px;
+    background: #888;
+    border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-	background: #555;
+    background: #555;
 }
diff --git a/app/components/SideBar.vue b/app/components/SideBar.vue
index 151d95b..07b5c00 100644
--- a/app/components/SideBar.vue
+++ b/app/components/SideBar.vue
@@ -14,7 +14,7 @@ onMounted(() => {
   <button class="absolute z-20 px-2 w-48 flex justify-end transition-all" @click="sidebarVisible = !sidebarVisible" :class="{'!w-10': !sidebarVisible}">
     <icon name="ic:round-menu" size="24"/>
   </button>
-  <div class="w-48 flex h-full bg-neutral-900 z-10 absolute overflow-scroll transition-all" :class="{'-translate-x-48': !sidebarVisible}">
+  <div class="w-48 flex h-full bg-zinc-900 z-10 absolute overflow-scroll transition-all" :class="{'-translate-x-48': !sidebarVisible}">
     <slot/>
     <div class="border border-neutral-800 w-0.5 mb-2"></div>
   </div>
diff --git a/app/components/filter/Item.vue b/app/components/filter/Item.vue
index a434f5c..af99686 100644
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/Item.vue
@@ -31,8 +31,8 @@ function onSelect(option: string) {
           {{ model }}
         </button>
       </div>
-      <div class="bg-neutral-900 z-10 relative flex flex-col max-h-48 overflow-scroll transition-all" :class="{'!max-h-0': !open}">
-        <button class="text-left hover:bg-neutral-800 p-0.5 rounded" :class="{'font-bold': option == model}" v-for="option in options" @click="onSelect(option)">
+      <div class="bg-zinc-900 z-10 relative flex flex-col max-h-48 overflow-scroll transition-all" :class="{'!max-h-0': !open}">
+        <button class="text-left hover:bg-zinc-800 p-0.5 rounded" :class="{'font-bold': option == model}" v-for="option in options" @click="onSelect(option)">
           {{ option }}
         </button>
       </div>
diff --git a/app/components/home/StatItem.vue b/app/components/home/StatItem.vue
index 93b2f54..212355a 100644
--- a/app/components/home/StatItem.vue
+++ b/app/components/home/StatItem.vue
@@ -1,35 +1,35 @@
 <script setup lang="ts">
 const props = defineProps<{
-	icon: string;
-	name: string;
-	data: number | undefined;
+  icon: string;
+  name: string;
+  data: number | undefined;
 }>();
 
 const displayValue = ref(0);
 
 const startCountUp = () => {
-	const duration = 1000 + Math.random() * 1000;
-	const startTime = performance.now();
+  const duration = 1000 + Math.random() * 1000;
+  const startTime = performance.now();
 
-	function easeOutCubic(x: number): number {
-		return 1 - (1 - x) ** 7;
-	}
+  function easeOutCubic(x: number): number {
+    return 1 - (1 - x) ** 7;
+  }
 
-	function animate(currentTime: number) {
-		const elapsedTime = currentTime - startTime;
-		const progress = Math.min(elapsedTime / duration, 1);
-		displayValue.value = Math.floor(easeOutCubic(progress) * (props.data ?? 0));
+  function animate(currentTime: number) {
+    const elapsedTime = currentTime - startTime;
+    const progress = Math.min(elapsedTime / duration, 1);
+    displayValue.value = Math.floor(easeOutCubic(progress) * (props.data ?? 0));
 
-		if (progress < 1) {
-			requestAnimationFrame(animate);
-		}
-	}
+    if (progress < 1) {
+      requestAnimationFrame(animate);
+    }
+  }
 
-	requestAnimationFrame(animate);
+  requestAnimationFrame(animate);
 };
 
 onMounted(() => {
-	startCountUp();
+  startCountUp();
 });
 </script>
 
@@ -37,9 +37,12 @@ onMounted(() => {
   <div class="flex justify-center gap-2.5">
     <div class="relative">
       <div class="blur-2xl absolute left-2/4 top-2/4 -translate-x-2/4 -translate-y-2/4">
-        <Icon :name="icon" size="120" class="from-cyan-600 to-cyan-900 bg-gradient-to-tl"/>
+        <Icon :name="icon" size="120" class="from-cyan-400 to-cyan-600 bg-gradient-to-tl"/>
       </div>
-      <Icon :name="icon" size="150" class="from-cyan-200 to-cyan-600 bg-gradient-to-br"/>
+      <NuxtLink class="z-10" :to="'/charts?projectType=' + name.toLowerCase()">
+        <Icon :name="icon" size="150"
+              class="hover:scale-105 transition ease-in-out from-cyan-200 to-cyan-600 bg-gradient-to-br"/>
+      </NuxtLink>
     </div>
     <div class="flex flex-col justify-center">
       <div class="text-5xl">
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 53bf7d3..85efb5b 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 useHead({
-	title: "Modrinth Statistics",
+  title: "Modrinth Statistics",
 });
 
-const { data } = useFetch("/api/stats/global");
+const {data} = useFetch("/api/stats/global");
 </script>
 
 <template>
-  <div id="page" class="from-neutral-900 to-neutral-950 bg-gradient-to-b">
-    <div id="header">
+  <div class="dotted-background flex-1 flex flex-col justify-evenly gap-11">
+    <div class="text-center text-6xl font-semibold flex flex-col justify-center items-center">
       The place for stats all about
       <div class="transition hover:scale-110">
-        <div class="blur-2xl absolute">
+        <div class="blur-3xl absolute">
           <NuxtLink to="https://modrinth.com" id="modrinth" target="_blank"
-                    class="text-8xl opacity-70 text-transparent bg-clip-text from-cyan-400 to-cyan-700 bg-gradient-to-br">
+                    class="text-8xl opacity-80 text-transparent bg-clip-text from-cyan-400 to-cyan-600 bg-gradient-to-br">
             Modrinth
           </NuxtLink>
         </div>
@@ -24,7 +24,7 @@ const { data } = useFetch("/api/stats/global");
       </div>
       <div class="text-xl text-neutral-500">(unofficial)</div>
     </div>
-    <div id="values">
+    <div class="grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-y-16">
       <HomeStatItem name="Projects" :data="data?.projects" icon="akar-icons:game-controller"/>
       <HomeStatItem name="Versions" :data="data?.versions" icon="akar-icons:attach"/>
       <HomeStatItem name="Files" :data="data?.files" icon="akar-icons:file"/>
@@ -34,47 +34,8 @@ const { data } = useFetch("/api/stats/global");
 </template>
 
 <style scoped>
-#page {
-  flex: 1;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-
-  gap: 50px;
-
-  #header {
-    text-align: center;
-    font-size: 4rem;
-    font-weight: bold;
-
-    display: flex;
-    flex-direction: column;
-
-    justify-content: center;
-    align-items: center;
-  }
-
-  #values {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-
-
-    flex-wrap: wrap;
-
-    gap: 50px;
-  }
-}
-
-@media only screen and (max-width: 1500px) {
-  #values {
-    grid-template-columns: 1fr 1fr !important;
-  }
-}
-
-@media only screen and (max-width: 800px) {
-  #values {
-    grid-template-columns: 1fr !important;
-  }
+.dotted-background {
+  background-image: radial-gradient(#18181b 1px, transparent 1px), radial-gradient(#18181b 2px, transparent 2px), linear-gradient(to bottom, #18181b, #030712);
+  background-size: 10px 10px, 30px 30px, cover;
 }
 </style>
\ No newline at end of file
-- 
2.54.0