website: update button styles and enhance background in global CSS

website/src/components/navigation/TopBar.astro

@@ -8,7 +8,7 @@ const pathname = Astro.url.pathname;
 ---
 
 <header
-  class="flex justify-between items-center p-4 top-0 fixed w-full z-10 backdrop-blur-md backdrop-saturate-150"
+  class="flex justify-between items-center p-4 top-0 fixed w-full z-10 backdrop-blur-md"
 >
   <div class="flex items-center justify-between w-full">
     <div class="flex items-center gap-2">
@@ -42,7 +42,7 @@ const pathname = Astro.url.pathname;
     </a>
   </div>
 
-  <nav class="hidden md:flex gap-3 items-center">
+  <nav class="hidden md:flex gap-3 items-center pr-2">
     {
       Object.entries(routes).map((route) => {
         const Icon = route[1][1];
@@ -53,7 +53,7 @@ const pathname = Astro.url.pathname;
           <a href={route[0]}>
             <button
               type="button"
-              class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-tonal-secondary" : "preset-tonal-surface"} ${isActive ? "underline" : ""}`}
+              class={`btn flex gap-2 ${route[0] === "/downloads" ? "preset-filled-primary-300-700" : "preset-filled-secondary-100-900"} ${isActive ? "underline" : ""}`}
             >
               {Icon && <Icon />}
               {route[1][0]}

website/src/modules/downloads/download-item.astro

@@ -14,7 +14,7 @@ const { links } = Astro.props;
       return (
         <a
           href={link[1][0]}
-          class="flex flex-col btn preset-tonal-secondary rounded-xl p-0 overflow-hidden"
+          class="flex flex-col btn preset-filled-primary-100-900 rounded-xl p-0 overflow-hidden border border-primary-500"
         >
           <div class="relative bg-primary-500 p-4 flex gap-4 justify-center rounded-t-xl w-full">
             {link[1][1].map((icon) => {

website/src/pages/downloads/index.astro

@@ -38,7 +38,7 @@ const otherDownloads: [string, string, IconType][] = [
 
           return (
             <a href={download[0]}>
-              <div class="btn preset-tonal-secondary flex flex-col items-center p-4 gap-4">
+              <div class="btn preset-filled-primary-100-900 flex flex-col items-center p-4 gap-4">
                 <Icon />
                 <h5 class="h5">{download[1]}</h5>
               </div>

website/src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import { FaAndroid, FaApple, FaLinux, FaWindows } from "react-icons/fa6";
 import RootLayout from "../layouts/RootLayout.astro";
-import { LuHeart } from "react-icons/lu";
+import { LuDownload, LuHeart } from "react-icons/lu";
 import { Supporters } from "~/modules/root/supporters";
 ---
 
@@ -37,15 +37,24 @@ import { Supporters } from "~/modules/root/supporters";
               alt="HackerNews"
             />
           </a>
-          <!-- <a href="https://flathub.org/apps/com.github.KRTirtho.Spotube" target="_blank">
+          <a
-					<img
+            href="https://flathub.org/apps/com.github.KRTirtho.Spotube"
-						width="160"
+            target="_blank"
-						alt="Download on Flathub"
+          >
-						src="https://flathub.org/api/badge?locale=en"
+            <img
-					/>
+              width="160"
-				</a> -->
+              alt="Download on Flathub"
+              src="https://flathub.org/api/badge?locale=en"
+            />
+          </a>
         </div>
       </div>
+      <div class="flex justify-center">
+        <a href="/downloads" class="flex gap-2 btn btn-lg preset-filled">
+          <LuDownload />
+          Download
+        </a>
+      </div>
     </div>
 
     <br />

website/src/styles/global.css

@@ -7,6 +7,23 @@
 @import "@skeletonlabs/skeleton/optional/presets";
 @import "@skeletonlabs/skeleton/themes/wintry";
 
+body {
+  background-image: radial-gradient(
+      at 50% 0%,
+      var(--color-secondary-100-900) 0px,
+      transparent 75%
+    ),
+    radial-gradient(
+      at 100% 0%,
+      var(--color-tertiary-300-700) 0px,
+      transparent 50%
+    );
+  background-attachment: fixed;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
 h1,
 h2,
 h3,
@@ -22,11 +39,11 @@ h6 {
 }
 
 .prose code:not(pre code) {
-  @apply bg-surface-100-900 px-1 py-0.5 rounded-sm;
+  @apply bg-primary-100-900 px-1 py-0.5 rounded-sm text-primary-900-100;
 }
 
 .prose a code {
-  @apply text-primary-500 underline decoration-primary-500;
+  @apply text-primary-500! underline decoration-primary-500;
 }
 
 /* Astro PageFind */
@@ -54,7 +71,7 @@ h6 {
   border-bottom-right-radius: var(--pagefind-ui-border-radius);
   border-bottom-left-radius: var(--pagefind-ui-border-radius);
 
-  @apply bg-gray-50 dark:bg-surface-900;
+  @apply bg-white dark:bg-surface-900;
 }
 
 .pagefind-ui .pagefind-ui__result-link {
@@ -66,19 +83,9 @@ h6 {
 }
 
 .pagefind-ui .pagefind-ui__search-input {
-  background-color: var(--color-white) !important;
+  @apply bg-white/50! dark:bg-surface-900/50!;
 }
 
 .pagefind-ui .pagefind-ui__search-clear {
-  background: var(--color-white) !important;
+  @apply bg-inherit!;
-}
-
-@media (prefers-color-scheme: dark) {
-  .pagefind-ui .pagefind-ui__search-input {
-    background-color: var(--color-surface-900) !important;
-  }
-
-  .pagefind-ui .pagefind-ui__search-clear {
-    background: var(--color-surface-900) !important;
-  }
 }