make a bit better

williamsjokvist · Jan 16, 2024 · 9bfc206 · 9bfc206
1 parent 8da3af2
commit 9bfc206
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 89 deletions.
diff --git a/public/noise.png b/public/noise.png
diff --git a/src/components/DownloadButton.astro b/src/components/DownloadButton.astro
@@ -27,7 +27,7 @@ import Icon from "astro-icon"
   class="link-card windows my-1 inline-flex gap-2 justify-between items-center rounded-full px-6 py-4 text-2xl"
 >
   <Icon name="mdi:microsoft-windows" class="w-8 h-8" />
-  <span>Download for Windows</span>
+  <span>Download</span>
 </a>
 <a
   id="mac-download-arm"
@@ -38,7 +38,7 @@ import Icon from "astro-icon"
     <Icon name="mdi:apple" class="relative bottom-2 w-8 h-8" />
     <Icon name="simple-icons:arm" class="relative bottom-4 w-14 h-8" />
   </div>
-  <span class="w-full">Download for Mac</span>
+  <span class="w-full">Download</span>
 </a>
 <a
   id="mac-download-intel"
@@ -49,7 +49,7 @@ import Icon from "astro-icon"
     <Icon name="mdi:apple" class="relative bottom-2 w-8 h-8" />
     <Icon name="simple-icons:intel" class="relative bottom-4 w-14 h-8" />
   </div>
-  <span class="w-full">Download for Mac</span>
+  <span class="w-full">Download</span>
 </a>
 
 <style lang="sass">

diff --git a/src/components/Features.astro b/src/components/Features.astro
@@ -1,4 +1,5 @@
 ---
+import Icon from "astro-icon";
 import MockTracker from "./MockTracker.astro";
 const matches = [
   {
@@ -70,10 +71,13 @@ const matches = [
     }
   }
 </script>
-<section id="features" class="[&>*:nth-child(even)]:flex-row-reverse flex flex-col gap-24 px-4">
+<section id="features" class="[&>*:nth-child(even)]:flex-row-reverse flex flex-col gap-60 px-4">
   <section class="flex flex-wrap items-center justify-around">
     <header class="mb-8 max-w-[700px] w-full">
-      <h2 class="font-bold text-4xl">Live match updates</h2>
+      <h2 class="font-bold text-3xl md:text-5xl">
+        <Icon name="ri:search-fill" class="inline text-[#f85961] w-12 h-12 mr-1"/>
+        Live match updates
+      </h2>
       <p class="text-lg mt-8">
         New matches are tracked instantly as soon as you press start!
       </p>
@@ -147,7 +151,10 @@ const matches = [
 
   <section class="flex flex-wrap items-center justify-around">
     <header class="mb-8 max-w-[700px] w-full">
-      <h2 class="font-bold text-4xl">Statistics</h2>
+      <h2 class="font-bold text-3xl md:text-5xl">
+        <Icon name="ion:document-text" class="inline text-[#f85961] w-12 h-12 mr-1"/>
+        Statistics
+      </h2>
       <p class="text-lg mt-8">
         Matches are stored so you can keep track of your progress from session
         to session. <br /> You own your match logs, not Capcom.
@@ -202,7 +209,10 @@ const matches = [
 
   <section class="flex flex-wrap items-center justify-around">
     <header class="mb-8 max-w-[700px] w-full">
-      <h2 class="font-bold text-4xl">Made for streamers</h2>
+      <h2 class="font-bold text-3xl md:text-5xl">
+        <Icon name="clarity:sign-out-solid" class="inline text-[#f85961] w-12 h-12 mr-1"/>  
+        Made for streamers
+      </h2>
       <p class="text-lg mt-8">
         Display your stats in OBS, choose from multiple themes or create your
         own with CSS!

diff --git a/src/components/MockTracker.astro b/src/components/MockTracker.astro
@@ -22,7 +22,7 @@ const { title, page, spin } = Astro.props
     <div class="mt-5 w-full flex flex-col gap-4">
       <Icon name={`ri:search-${page == "track" ? "fill" : "line"}`} class="text-[#f85961] w-10 h-7 mr-1"/>
       <Icon name={`ion:document-text${page == "log" ? "" : "-outline"}`} class="text-[#f85961] w-10 h-7 mr-1"/>
-      <Icon name={`clarity:sign-out-${page == "out" ? "fill" : "line"}`} class="text-[#f85961] w-10 h-7 mr-1"/>
+      <Icon name={`clarity:sign-out-${page == "out" ? "solid" : "line"}`} class="text-[#f85961] w-10 h-7 mr-1"/>
     </div>
   </div>
   <div class="w-full">

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
@@ -2,81 +2,98 @@
 import WithTooltip from "./WithTooltip.astro";
 import Icon from "astro-icon";
 
-const NavItems = [{
-  href: '/guide',
-  name: 'Guide',
-  icon: Astro.url.pathname.includes('guide') ? "akar-icons:info-fill" : "akar-icons:info"
-}, {
-  href: '/faq',
-  name: 'FAQ',
-  icon: Astro.url.pathname.includes('faq') ? "mdi:chat-bubble" : "mdi:chat-bubble-outline"
-}, 
-{
-  href: '/changelog',
-  name: 'Changelog',
-  icon: Astro.url.pathname.includes('changelog') ? "mdi:scroll" : "mdi:scroll-outline"
-}]
+const NavItems = [
+  {
+    href: "/guide",
+    name: "Guide",
+    icon: Astro.url.pathname.includes("guide")
+      ? "akar-icons:info-fill"
+      : "akar-icons:info",
+  },
+  {
+    href: "/faq",
+    name: "FAQ",
+    icon: Astro.url.pathname.includes("faq")
+      ? "mdi:chat-bubble"
+      : "mdi:chat-bubble-outline",
+  },
+  {
+    href: "/changelog",
+    name: "Changelog",
+    icon: Astro.url.pathname.includes("changelog")
+      ? "mdi:scroll"
+      : "mdi:scroll-outline",
+  },
+];
 ---
 
 <header
-  class="sticky top-0 sm:top-4 flex justify-between sm:max-w-[600px] mx-auto w-full z-50 bg-[#2e1332] shadow-[0px_0px_12px_#2e1332] sm:rounded-full p-1 pr-6"
+  class="bg-[#310a65] sm:bg-transparent sticky top-0 sm:top-4 flex justify-between mx-auto w-full z-50 p-1 pr-6"
 >
-  <nav class="flex items-center lowercase gap-6">
+  <nav class="flex items-center lowercase gap-6 md:gap-12 font-bold">
     <a href="/">
       <img
         src="https://raw.githubusercontent.com/williamsjokvist/cfn-tracker/master/build/appicon.png"
-        class="w-12 sm:w-14"
+        class="w-12 sm:w-14 md:ml-8"
         alt="CFN Tracker logo"
       />
     </a>
-    {NavItems.map(item => (
-      <a href={item.href} class="flex flex-col items-center text-lg font-bold">
-        <Icon name={item.icon} width="24" />
-        <span class="hidden sm:block">{item.name}</span>
-      </a>
-    ))}
+    {
+      NavItems.map((item) => (
+        <a
+          href={item.href}
+          class="flex flex-col items-center text-lg"
+        >
+          <Icon name={item.icon} width="24" class="sm:hidden" />
+          <span class="hidden sm:block bg-[#310a65] rounded-3xl px-3">{item.name}</span>
+        </a>
+      ))
+    }
   </nav>
 
-  <div class="flex items-center gap-3 sm:gap-6">
-    <a
-      class="flex gap-4 hover:underline"
-      href="https://twitter.com/greensoap_"
-      target="_blank"
-      aria-label="Twitter / X"
-    >
-      <!-- not working: <Icon name="simple-icons:x" class="w-8 h-8 ml-4" /> -->
-      <WithTooltip label="Twitter">
+  <div class="flex items-center gap-3 md:gap-6 md:mr-8">
+    <WithTooltip label="Twitter">
+      <a
+        class="flex gap-4 bg-[rgba(115,115,115,.125)] p-3 rounded-full"
+        href="https://twitter.com/greensoap_"
+        target="_blank"
+        aria-label="Twitter / X"
+      >
+        <!-- not working: <Icon name="simple-icons:x" class="w-8 h-8 ml-4" /> -->
         <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          class="md:w-6 md:h-6"
           ><path
             fill="currentColor"
             d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
           ></path></svg
         >
-      </WithTooltip>
-    </a>
-    <a
-      class="text-lg flex gap-4 hover:underline"
-      href="https://github.com/williamsjokvist/cfn-tracker/"
-      aria-label="Source"
-      target="_blank"
-    >
+      </a>
+    </WithTooltip>
+
     <WithTooltip label="Source">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 256 256"
+      <a
+        class="flex gap-4 bg-[rgba(115,115,115,.125)] p-3 rounded-full"
+        href="https://github.com/williamsjokvist/cfn-tracker/"
+        aria-label="Source"
+        target="_blank"
       >
-        <path
-          fill="currentColor"
-          d="M216 104v8a56.06 56.06 0 0 1-48.44 55.47A39.8 39.8 0 0 1 176 192v40a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8v-16H72a40 40 0 0 1-40-40a24 24 0 0 0-24-24a8 8 0 0 1 0-16a40 40 0 0 1 40 40a24 24 0 0 0 24 24h24v-8a39.8 39.8 0 0 1 8.44-24.53A56.06 56.06 0 0 1 56 112v-8a58.14 58.14 0 0 1 7.69-28.32A59.78 59.78 0 0 1 69.07 28A8 8 0 0 1 76 24a59.75 59.75 0 0 1 48 24h24a59.75 59.75 0 0 1 48-24a8 8 0 0 1 6.93 4a59.74 59.74 0 0 1 5.37 47.68A58 58 0 0 1 216 104Z"
-        ></path>
-      </svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 256 256"
+          class="md:w-6 md:h-6"
+        >
+          <path
+            fill="currentColor"
+            d="M216 104v8a56.06 56.06 0 0 1-48.44 55.47A39.8 39.8 0 0 1 176 192v40a8 8 0 0 1-8 8h-64a8 8 0 0 1-8-8v-16H72a40 40 0 0 1-40-40a24 24 0 0 0-24-24a8 8 0 0 1 0-16a40 40 0 0 1 40 40a24 24 0 0 0 24 24h24v-8a39.8 39.8 0 0 1 8.44-24.53A56.06 56.06 0 0 1 56 112v-8a58.14 58.14 0 0 1 7.69-28.32A59.78 59.78 0 0 1 69.07 28A8 8 0 0 1 76 24a59.75 59.75 0 0 1 48 24h24a59.75 59.75 0 0 1 48-24a8 8 0 0 1 6.93 4a59.74 59.74 0 0 1 5.37 47.68A58 58 0 0 1 216 104Z"
+          ></path>
+        </svg>
+      </a>
     </WithTooltip>
-    </a>
   </div>
 </header>
diff --git a/src/components/SiteFooter.astro b/src/components/SiteFooter.astro
@@ -34,7 +34,7 @@
   document.addEventListener("astro:page-load", assignDownloadCount);
 </script>
 
-<footer class="py-36 text-xl lowercase text-center">
-  CFN Tracker - by <a href="https://www.williamsjokvist.se/" target="_blank" class="text-gradient font-bold">William</a><br/> downloads <b id="cfn-tracker-download-count" class="font-extrabold text-[#ff53d9]"></b>
-
+<footer class="pb-80 pt-48 text-2xl lowercase text-center">
+  <p class="text-2xl">CFN Tracker // <a href="https://www.williamsjokvist.se/" target="_blank" class="text-gradient font-bold">William</a></p>
+  <p class="text-xl mt-2"><b id="cfn-tracker-download-count" class="font-extrabold text-[#ff53d9]"></b> downloads</p>
 </footer>
diff --git a/src/components/Streamers.astro b/src/components/Streamers.astro
@@ -55,17 +55,32 @@ const streamers = [{
   })
 </script>
 
-<section id="used-by" class="my-28">
-  <h2 class="text-3xl text-center font-bold">Used by</h2>
-  <div id="used-by-list" class="flex gap-6 justify-center mt-8">
+<section id="used-by" class="relative my-48">
+  <h2 class="text-3xl md:text-5xl text-center font-bold">Used by</h2>
+  <div id="used-by-list" class="flex gap-6 justify-center mt-14">
     {
       streamers.map(s => (
         <WithTooltip label={s.name}>
           <a href={s.url}>
-            <img src={s.img} width="50px" height="50px" />
+            <img src={s.img} width="60px" height="60px" class="rounded-full" />
           </a>  
         </WithTooltip>
       ))
     }
   </div>
-</section>
+</section>
+
+<style lang="sass">
+/*  #used-by::after
+    content: ''
+    top: -350px
+    position: absolute
+    left: 0
+    width: 100%
+    height: 1200px
+    display: block
+    z-index: -20
+    background: url(https://www.streetfighter.com/6/buckler/assets/images/material/character/profile_ryu.png) no-repeat
+    background-size: contain
+    */
+</style>
diff --git a/src/components/World.astro b/src/components/World.astro
@@ -3,12 +3,12 @@
 
 <svg
   class='world'
-  fill="transparent"
+  fill="#7209B7"
   height="857"
-  stroke="#181328"
+  stroke="#7209B7"
   stroke-linecap="round"
   stroke-linejoin="round"
-  stroke-width=".2"
+  stroke-width="2"
   version="1.2"
   viewBox="0 0 2000 857"
   width="2000"
@@ -2520,9 +2520,8 @@
     position: absolute;
     top: 0;
     left: 0;
-    stroke-width: 2px;
     width: 100%;
     height: 100%;
-    z-index: 0;
+    z-index: -1;
   }
 </style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -36,7 +36,7 @@ const { title } = Astro.props;
     font-family: "Raleway", system-ui, sans-serif;
     min-height: 100%;
     color: #fff;
-    background: #000;
+    background: #3a0ca3;
     width: 100%;
     overflow-x: hidden;
   }

diff --git a/src/pages/changelog.astro b/src/pages/changelog.astro
@@ -6,7 +6,7 @@ import Layout from '../layouts/Layout.astro';
   import { gsap, Power2 } from "../lib/gsap";
 
   document.addEventListener("astro:page-load", () => {
-    gsap.from("#changelog > *", {
+    gsap.from("#changelog-container > *", {
       autoAlpha: 0,
       translateY: 20,
       duration: .75,
@@ -17,7 +17,7 @@ import Layout from '../layouts/Layout.astro';
 </script>
 
 <Layout title="CFN Tracker - Changelog">
-  <div id="changelog" class="prose lg:prose-lg prose-invert mx-auto px-4 mt-20">
+  <div id="changelog-container" class="prose lg:prose-lg prose-invert mx-auto px-4 mt-20">
     <Content />
   </div>
 </Layout>