kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-12 23:45:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

website: update button styles and enhance background in global CSS

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2025-08-15 11:19:43 +06:00
parent 0a153fe770
commit edcd784335
5 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
website/src/components/navigation/TopBar.astro
View File

@ -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]}

2
website/src/modules/downloads/download-item.astro
View File

@ -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) => {

2
website/src/pages/downloads/index.astro
View File

@ -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>

15
website/src/pages/index.astro
View File

@ -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
href="https://flathub.org/apps/com.github.KRTirtho.Spotube"
target="_blank"
>
<img
width="160"
alt="Download on Flathub"
src="https://flathub.org/api/badge?locale=en"
/>
</a> -->
</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 />

37
website/src/styles/global.css
View File

@ -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;
}
@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;
}
@apply bg-inherit!;
}