diff --git a/astro.config.mjs b/astro.config.mjs index ba46190..5800d68 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,8 +1,12 @@ import { defineConfig } from "astro/config"; import react from "@astrojs/react"; -import tailwind from "@astrojs/tailwind"; +import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ - site: "https://qsvpro.dathere.com", - integrations: [react(), tailwind()], -}); + site: "https://qsvpro.dathere.com", + integrations: [react(), tailwindcss()], + + vite: { + plugins: [tailwindcss()], + }, +}); \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index a7a0352..602e6db 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index d10ddbb..8a57a8d 100644 --- a/package.json +++ b/package.json @@ -11,9 +11,9 @@ "astro": "astro" }, "dependencies": { - "@astrojs/tailwind": "^6.0.2", "@fontsource/inter": "^5.2.8", "@tailwindcss/postcss": "^4.1.17", + "@tailwindcss/vite": "^4.1.17", "astro": "^5.16.0", "embla-carousel-autoplay": "^8.6.0", "embla-carousel-react": "^8.6.0", diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..c2ddf74 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 39e48dc..8e1d060 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -70,7 +70,7 @@ export const Hero = () => { } catch (e) { console.error( "Unable to fetch API data from releases repository: " + - String(e) + String(e) ); console.log("Showing default download button to user."); } @@ -142,38 +142,36 @@ export const Hero = () => { (platform) => (
{downloadData[platform].map( (download, index) => ( <> {platform === "windows" && ( -
- {/* Might not be an actual download, but store page clicked */} - - - -
- )} +
+ {/* Might not be an actual download, but store page clicked */} + + + +
+ )} {download[0]} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index bfdf71a..28fc755 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,5 @@ --- +import "../styles/global.css"; import "@fontsource/inter"; import "@fontsource/inter/500.css"; import "@fontsource/inter/600.css"; @@ -7,66 +8,66 @@ import "@fontsource/inter/800.css"; import "@fontsource/inter/900.css"; export interface Props { - title: string; + title: string; } const { title } = Astro.props; const rybbitSiteId = "3"; --- - + - - - - - - - {title} - - + + + + + + + {title} + + - - - - - - + + + + + + - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/src/styles/Theme.css b/src/styles/Theme.css index 9fe80b2..96d78c9 100644 --- a/src/styles/Theme.css +++ b/src/styles/Theme.css @@ -1,20 +1,27 @@ +@reference "./global.css"; + /* Typography */ .custom-block-title { @apply text-white text-3xl font-bold tracking-normal; } + .custom-block-big-title { @apply text-white text-4xl xl:text-5xl font-bold tracking-normal; } + .custom-block-subtitle { - @apply text-xs text-customSecondary tracking-wider font-bold uppercase; + @apply text-xs text-customSecondary tracking-wider font-bold uppercase; } + .custom-content-title { @apply text-white text-lg font-bold tracking-normal; } + .custom-content-text-white { @apply text-white text-base leading-relaxed; } + .custom-content-text-gray { @apply text-gray-400 text-base; } @@ -22,14 +29,17 @@ /* Backgrounds */ .custom-bg-dark1 { - @apply bg-customDarkBg1 fill-customDarkBg1; + @apply bg-customDarkBg1 fill-customDarkBg1; } + .custom-bg-dark2 { - @apply bg-customDarkBg2 fill-customDarkBg2; + @apply bg-customDarkBg2 fill-customDarkBg2; } + .custom-bg-dark3 { - @apply bg-customDarkBg3 fill-customDarkBg3; + @apply bg-customDarkBg3 fill-customDarkBg3; } + body, html { @apply bg-customDarkBg2; @@ -38,25 +48,26 @@ html { /* Borders */ .custom-border-gray { - @apply border border-solid border-[rgb(255,255,255,0.15)]; + @apply border border-solid border-customBorderGray; } + .custom-border-gray-darker { - @apply border border-solid border-[rgb(255,255,255,0.07)]; + @apply border border-solid border-customBorderGrayDarker; } /* Buttons */ .custom-button-colored { - @apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-[rgb(0,142,200)] cursor-pointer transition; + @apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-customButtonColored cursor-pointer transition; } /* Navbar */ .navbar-link { - @apply text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition duration-300 h-full pt-2; + @apply text-white lg:text-base text-2xl leading-6 mr-4 ml-4 2xl:mr-6 2xl:ml-6 cursor-pointer font-normal lg:font-medium hover:scale-110 transition duration-300 h-full pt-2; } /* Preventing FOUC */ @font-face { font-display: var(--fontsource-Inter-font-display, optional); -} +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css new file mode 100644 index 0000000..473ceb2 --- /dev/null +++ b/src/styles/global.css @@ -0,0 +1,19 @@ +@import "tailwindcss"; + +@theme { + --color-customPrimary: rgb(0, 122, 255); + --color-customSecondary: rgb(0, 142, 200); + --color-customDarkBg1: rgb(31, 32, 35); + --color-customDarkBg2: rgb(38, 39, 43); + --color-customDarkBg3: rgb(48, 49, 54); + --color-customDarkBg3Hover: rgb(55, 56, 62); + --color-customContentSubtitle: rgb(178, 184, 205); + --color-customGrayBorder: rgb(255, 255, 255, 0.1); + --color-customGrayText: rgb(174, 178, 183); + --color-customDarkBgTransparent: rgb(31, 32, 35, 0.7); + --color-customDarkBgTransparentDarker: rgb(0, 0, 0, 0.5); + --color-customDarkBgTransparentLighter: rgb(48, 49, 54, 0.7); + --color-customBorderGray: rgb(255, 255, 255, 0.15); + --color-customBorderGrayDarker: rgb(255, 255, 255, 0.07); + --color-customButtonColored: rgb(0, 142, 200); +} \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs deleted file mode 100644 index 3e35051..0000000 --- a/tailwind.config.cjs +++ /dev/null @@ -1,34 +0,0 @@ -/** @type {import('tailwindcss').Config} */ -module.exports = { - content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"], - theme: { - extend: { - colors: { - customPrimary: "rgb(0,122,255)", - customSecondary: "rgb(0,142,200)", - customDarkBg1: "rgb(31, 32, 35)", - customDarkBg2: "rgb(38, 39, 43)", - customDarkBg3: "rgb(48, 49, 54)", - customDarkBg3Hover: "rgb(55, 56, 62)", - customContentSubtitle: "rgb(178, 184, 205)", - customGrayBorder: "rgb(255,255,255,0.1)", - customGrayText: "rgb(174, 178, 183)", - customDarkBgTransparent: "rgb(31, 32, 35, 0.7)", - customDarkBgTransparentDarker: "rgb(0,0,0,0.5)", - customDarkBgTransparentLighter: "rgb(48, 49, 54, 0.7)", - }, - fontFamily: { - Inter: "Inter", - }, - screens: { - xs: "530px", - sm: "640px", - md: "768px", - lg: "1024px", - xl: "1280px", - xll: "1400px", - "2xl": "1536px", - }, - }, - }, -};