diff --git a/astro.config.mjs b/astro.config.mjs index 5800d68..ba46190 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,12 +1,8 @@ import { defineConfig } from "astro/config"; import react from "@astrojs/react"; -import tailwindcss from "@tailwindcss/vite"; +import tailwind from "@astrojs/tailwind"; export default defineConfig({ - site: "https://qsvpro.dathere.com", - integrations: [react(), tailwindcss()], - - vite: { - plugins: [tailwindcss()], - }, -}); \ No newline at end of file + site: "https://qsvpro.dathere.com", + integrations: [react(), tailwind()], +}); diff --git a/bun.lockb b/bun.lockb index 602e6db..6336308 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 8a57a8d..24cc8e2 100644 --- a/package.json +++ b/package.json @@ -11,20 +11,19 @@ "astro": "astro" }, "dependencies": { + "@astrojs/tailwind": "^5.1.5", "@fontsource/inter": "^5.2.8", - "@tailwindcss/postcss": "^4.1.17", - "@tailwindcss/vite": "^4.1.17", - "astro": "^5.16.0", + "astro": "^4.16.19", "embla-carousel-autoplay": "^8.6.0", "embla-carousel-react": "^8.6.0", - "framer-motion": "^12.23.24", - "npm-check-updates": "^19.1.2", - "tailwindcss": "^4.1.17" + "framer-motion": "^11.18.2", + "npm-check-updates": "^16.14.20", + "tailwindcss": "^3.4.17" }, "devDependencies": { - "@astrojs/react": "^4.4.2", - "prettier": "3.6.2", - "react": "^19.2.0", - "react-dom": "^19.2.0" + "@astrojs/react": "^3.6.3", + "prettier": "3.3.3", + "react": "^18.3.1", + "react-dom": "^18.3.1" } } diff --git a/postcss.config.mjs b/postcss.config.mjs deleted file mode 100644 index c2ddf74..0000000 --- a/postcss.config.mjs +++ /dev/null @@ -1,5 +0,0 @@ -export default { - plugins: { - "@tailwindcss/postcss": {}, - }, -}; diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 8e1d060..39e48dc 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,36 +142,38 @@ 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 28fc755..bfdf71a 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,4 @@ --- -import "../styles/global.css"; import "@fontsource/inter"; import "@fontsource/inter/500.css"; import "@fontsource/inter/600.css"; @@ -8,66 +7,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 96d78c9..9fe80b2 100644 --- a/src/styles/Theme.css +++ b/src/styles/Theme.css @@ -1,27 +1,20 @@ -@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; } @@ -29,17 +22,14 @@ /* 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; @@ -48,26 +38,25 @@ html { /* Borders */ .custom-border-gray { - @apply border border-solid border-customBorderGray; + @apply border border-solid border-[rgb(255,255,255,0.15)]; } - .custom-border-gray-darker { - @apply border border-solid border-customBorderGrayDarker; + @apply border border-solid border-[rgb(255,255,255,0.07)]; } /* Buttons */ .custom-button-colored { - @apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-customButtonColored cursor-pointer transition; + @apply rounded-lg font-bold bg-customPrimary text-white flex justify-center items-center hover:bg-[rgb(0,142,200)] 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 deleted file mode 100644 index 473ceb2..0000000 --- a/src/styles/global.css +++ /dev/null @@ -1,19 +0,0 @@ -@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 new file mode 100644 index 0000000..3e35051 --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,34 @@ +/** @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", + }, + }, + }, +};