From 0b89a5595a3e4c7b75ddbd27182efba79c94740e Mon Sep 17 00:00:00 2001 From: Dwayne Charrington Date: Mon, 16 Dec 2024 11:16:57 +1000 Subject: [PATCH] fix(site): updating and fixing up tailwind v4 issues --- package-lock.json | 79 ++++++------------- package.json | 2 +- postcss.config.js | 5 ++ themes/aurelia-theme/assets/css/main.css | 56 ++++++++++--- themes/aurelia-theme/layouts/index.html | 6 +- .../layouts/partials/head/css.html | 4 +- 6 files changed, 80 insertions(+), 72 deletions(-) create mode 100644 postcss.config.js diff --git a/package-lock.json b/package-lock.json index f90c52c..41414c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "devDependencies": { "@tailwindcss/cli": "^4.0.0-beta.7", - "@tailwindcss/postcss": "^0.0.0-development.1", + "@tailwindcss/postcss": "^4.0.0-beta.7", "@tailwindcss/typography": "^0.5.15", "autoprefixer": "^10.4.20", "concurrently": "^9.1.0", @@ -18,6 +18,19 @@ "tailwindcss": "^4.0.0-beta.7" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -621,64 +634,18 @@ } }, "node_modules/@tailwindcss/postcss": { - "version": "0.0.0-development.1", - "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-0.0.0-development.1.tgz", - "integrity": "sha512-PuojQKMCyGEzZLWjtu525jQoMoqOWXYGptkxlBIwOYK6NQbBKQca4AdlMYe8ZmiIpHObHBbOkIEbIrIH/wb68w==", - "dev": true, - "dependencies": { - "@tailwindcss/oxide": "0.0.0-development.1", - "tailwindcss": "0.0.0-development.1" - } - }, - "node_modules/@tailwindcss/postcss/node_modules/@tailwindcss/oxide": { - "version": "0.0.0-development.1", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-0.0.0-development.1.tgz", - "integrity": "sha512-dHF8RdHDyQwDGlddjhjeFoAfM58qBb7epxxA9pi2tq+iy3by52lbOevz/m+5r4HoallnFq0hJyrjEcSEcWIFQA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 10" - }, - "optionalDependencies": { - "@tailwindcss/oxide-darwin-arm64": "0.0.0-development.1", - "@tailwindcss/oxide-darwin-x64": "0.0.0", - "@tailwindcss/oxide-freebsd-x64": "0.0.0", - "@tailwindcss/oxide-linux-arm-gnueabihf": "0.0.0", - "@tailwindcss/oxide-linux-arm64-gnu": "0.0.0", - "@tailwindcss/oxide-linux-arm64-musl": "0.0.0", - "@tailwindcss/oxide-linux-x64-gnu": "0.0.0", - "@tailwindcss/oxide-linux-x64-musl": "0.0.0", - "@tailwindcss/oxide-win32-x64-msvc": "0.0.0" - } - }, - "node_modules/@tailwindcss/postcss/node_modules/@tailwindcss/oxide-darwin-arm64": { - "version": "0.0.0-development.1", - "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-0.0.0-development.1.tgz", - "integrity": "sha512-NJAmnxZDJBClJuQhej1hFQ/sQ2LvtyvEucCs25eSN+GQbb06JdfjCDbI3HjORkHYJpu5z2eHerU1dUHx31V3FQ==", - "cpu": [ - "arm64" - ], + "version": "4.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.0-beta.7.tgz", + "integrity": "sha512-w7FyhQwymcWMyzyCj8nsNq3ImIurGbwujcEOtQhnX5gf3g8N2bH3EAq5+pk6Y0j4+HK37m1pIJ4lnULRkE66YQ==", "dev": true, "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": ">= 10" - } - }, - "node_modules/@tailwindcss/postcss/node_modules/tailwindcss": { - "version": "0.0.0-development.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-0.0.0-development.1.tgz", - "integrity": "sha512-6mOfJb2JWT5z5J8DnLqAaWsAqZrMnUSm5sCqDm7TfAQwRF/OL/Xp0rKUryGRluFFoGNNG7CiNzkgn71Hnl0e7g==", - "dev": true, "dependencies": { - "@tailwindcss/oxide": "0.0.0-development.1", - "lightningcss": "^1.23.0" - }, - "bin": { - "tailwindcss": "dist/cli.js" + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.0.0-beta.7", + "@tailwindcss/oxide": "4.0.0-beta.7", + "lightningcss": "^1.26.0", + "postcss": "^8.4.41", + "tailwindcss": "4.0.0-beta.7" } }, "node_modules/@tailwindcss/typography": { diff --git a/package.json b/package.json index 8a44ad6..f50cace 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ }, "devDependencies": { "@tailwindcss/cli": "^4.0.0-beta.7", - "@tailwindcss/postcss": "^0.0.0-development.1", + "@tailwindcss/postcss": "^4.0.0-beta.7", "@tailwindcss/typography": "^0.5.15", "autoprefixer": "^10.4.20", "concurrently": "^9.1.0", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..483f378 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: { + "@tailwindcss/postcss": {}, + }, +}; diff --git a/themes/aurelia-theme/assets/css/main.css b/themes/aurelia-theme/assets/css/main.css index f622594..aed373a 100644 --- a/themes/aurelia-theme/assets/css/main.css +++ b/themes/aurelia-theme/assets/css/main.css @@ -1,40 +1,76 @@ -@import "tailwindcss/preflight"; -@import "tailwindcss/utilities"; +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@theme { + --color-aurelia: #ed2b88; + --color-aurelia-light: #ff4da1; + --color-aurelia-blue: #003f8c; + --color-aurelia-blue-light: #0066cc; + + --animation-float-slow: float 8s ease-in-out infinite; + --animation-float-delayed: float 6s ease-in-out infinite 2s; + --animation-grid: grid 20s linear infinite; + --animation-pulse: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animation-pulse-slow: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animation-pulse-slower: pulse 12s cubic-bezier(0.4, 0, 0.6, 1) infinite; + --animation-pulse-delayed: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite 2s; +} + +@layer keyframes { + @keyframes float { + 0%, + 100% { + transform: translateY(0) rotate(0); + } + 50% { + transform: translateY(-20px) rotate(5deg); + } + } + @keyframes grid { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-100%); + } + } +} @layer utilities { .animate-float { animation: float 8s ease-in-out infinite; } - .animate-float-delayed { animation: float 8s ease-in-out infinite; animation-delay: -4s; } - + .animate-gradient-x { background-size: 200% 100%; animation: gradient-x 15s ease infinite; } - + .animate-gradient-x-fast { animation-duration: 8s; } - + @keyframes float { - 0%, 100% { + 0%, + 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } } - + @keyframes gradient-x { - 0%, 100% { + 0%, + 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } -} \ No newline at end of file +} diff --git a/themes/aurelia-theme/layouts/index.html b/themes/aurelia-theme/layouts/index.html index c1f44a4..fc1c3db 100644 --- a/themes/aurelia-theme/layouts/index.html +++ b/themes/aurelia-theme/layouts/index.html @@ -27,9 +27,9 @@ -
+
-
+
🚀 v2.0 Now Available @@ -88,7 +88,7 @@

-
+
diff --git a/themes/aurelia-theme/layouts/partials/head/css.html b/themes/aurelia-theme/layouts/partials/head/css.html index 4ae0db3..e7949a3 100644 --- a/themes/aurelia-theme/layouts/partials/head/css.html +++ b/themes/aurelia-theme/layouts/partials/head/css.html @@ -1,8 +1,8 @@ {{ $css := resources.Get "css/main.css" }} -{{ $styles := $css | css.TailwindCSS }} +{{ $styles := $css | css.PostCSS }} {{ if hugo.IsProduction }} - {{ $styles = $styles | minify | fingerprint }} + {{ $styles = $styles | fingerprint }} {{ else }}