mirror of
https://github.com/dathere/qsvpro.dathere.com.git
synced 2025-12-18 21:59:24 +00:00
build: update to tailwindcss v4
This commit is contained in:
rzmk
parent
bc3770ece5
commit
6a4723760d
9 changed files with 126 additions and 122 deletions
|
|
@ -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()],
|
||||
integrations: [react(), tailwindcss()],
|
||||
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
},
|
||||
});
|
||||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -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",
|
||||
|
|
|
|||
5
postcss.config.mjs
Normal file
5
postcss.config.mjs
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
export default {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
|
@ -142,8 +142,7 @@ export const Hero = () => {
|
|||
(platform) => (
|
||||
<div
|
||||
key={platform}
|
||||
className={`mx-4 ${
|
||||
platform === OS
|
||||
className={`mx-4 ${platform === OS
|
||||
? "text-white text-xl font-bold"
|
||||
: "text-white"
|
||||
}`}
|
||||
|
|
@ -168,8 +167,7 @@ export const Hero = () => {
|
|||
href={`https://github.com/dathere/qsv-pro-releases/releases/download/${name}/${download[1]}`} // Replace with actual download path
|
||||
data-rybbit-event="qsv_pro_download"
|
||||
data-rybbit-prop-platform={download[0]}
|
||||
className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${
|
||||
platform ===
|
||||
className={`block lg:min-w-96 text-white font-bold py-2 px-4 rounded mt-4 ${platform ===
|
||||
OS
|
||||
? " bg-teal-600 hover:bg-teal-700"
|
||||
: " bg-blue-500 hover:bg-blue-700"
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
---
|
||||
import "../styles/global.css";
|
||||
import "@fontsource/inter";
|
||||
import "@fontsource/inter/500.css";
|
||||
import "@fontsource/inter/600.css";
|
||||
|
|
@ -14,7 +15,7 @@ const { title } = Astro.props;
|
|||
const rybbitSiteId = "3";
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
|
@ -48,15 +49,15 @@ const rybbitSiteId = "3";
|
|||
content="Transform and upload spreadsheet data to CKAN with our streamlined desktop app, featuring 'recipes' for common data wrangling tasks. Based on the qsv CLI tool."
|
||||
/>
|
||||
<meta property="twitter:image" content="/sm-preview.jpg" />
|
||||
<script is:inline
|
||||
<script
|
||||
is:inline
|
||||
src="https://mk-analytics.dathere.com/api/script.js"
|
||||
data-site-id={rybbitSiteId}
|
||||
data-session-replay="true"
|
||||
data-track-errors="true"
|
||||
data-web-vitals="true"
|
||||
async
|
||||
defer
|
||||
></script>
|
||||
defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -24,12 +31,15 @@
|
|||
.custom-bg-dark1 {
|
||||
@apply bg-customDarkBg1 fill-customDarkBg1;
|
||||
}
|
||||
|
||||
.custom-bg-dark2 {
|
||||
@apply bg-customDarkBg2 fill-customDarkBg2;
|
||||
}
|
||||
|
||||
.custom-bg-dark3 {
|
||||
@apply bg-customDarkBg3 fill-customDarkBg3;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
@apply bg-customDarkBg2;
|
||||
|
|
@ -38,16 +48,17 @@ 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 */
|
||||
|
|
|
|||
19
src/styles/global.css
Normal file
19
src/styles/global.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue