From c45b33b43a4f8927c739f7bceb2e9054e2b1111d Mon Sep 17 00:00:00 2001
From: Amos <czxvvv@foxmail.com>
Date: Wed, 1 May 2024 14:05:53 +0200
Subject: [PATCH] ui: css updates - colors.css

---
 app/blog/page.tsx     | 18 +++++++++++++++---
 app/layout.tsx        |  1 +
 components/Header.tsx |  6 +++---
 components/Image.tsx  |  5 +----
 components/Tag.tsx    |  2 +-
 css/colors.css        | 41 +++++++++++++++++++++++++++++++++++++++++
 css/tailwind.css      | 18 +++++++++++++++++-
 7 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 css/colors.css

diff --git a/app/blog/page.tsx b/app/blog/page.tsx
index 35186c5..12199b1 100644
--- a/app/blog/page.tsx
+++ b/app/blog/page.tsx
@@ -40,7 +40,7 @@ export default function BlogPage() {
       direction *= -1
 
       parallaxTexts.push(
-        <ParallaxText key={null} baseVelocity={velocity}>
+        <ParallaxText key={left} baseVelocity={velocity}>
           {sortedTags.slice(left, right).map((tag, j) => (
             <Tag key={j} text={tag} className="mx-6" />
           ))}
@@ -59,9 +59,21 @@ export default function BlogPage() {
 
   return (
     <div>
+      <div className="mt-10 flex justify-between space-x-5">
+        <div className="card bg-pink-blue-animated max-w-5xl overflow-hidden">
+          <ParallaxText baseVelocity={0} className="-translate-x-10 -rotate-[22deg] transform">
+            <span className="font-zzz text-3xl text-white">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
+          </ParallaxText>
+        </div>
+        <div className="flex-col space-y-5">
+          <div className="card bg-light-blue-pink h-[8rem] w-[4rem]" />
+          <div className="card bg-light-pink-blue h-[4rem] w-[4rem]" />
+        </div>
+      </div>
+
       <section
-        className="mt-20 space-y-2 overflow-hidden rounded-xl pb-1
-        font-orbitron text-primary-300 shadow-md dark:shadow-gray-800"
+        className="card bg-light-blue-pink mt-5 space-y-2 overflow-hidden pb-1
+        font-orbitron"
       >
         {createParallaxTexts()}
       </section>
diff --git a/app/layout.tsx b/app/layout.tsx
index 746264e..17856f1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import 'css/tailwind.css'
 import 'css/fonts.css'
+import 'css/colors.css'
 import 'pliny/search/algolia.css'
 
 import { Pangolin, ZCOOL_KuaiLe, Orbitron } from 'next/font/google'
diff --git a/components/Header.tsx b/components/Header.tsx
index 9539f59..7cad968 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -99,9 +99,9 @@ const Header = () => {
                 <Link
                   key={link.title}
                   href={link.href}
-                  className="hidden font-medium
-              text-gray-900 transition duration-300 hover:text-primary-500 dark:text-gray-100
-              dark:hover:text-primary-500 sm:block"
+                  className="hidden text-xl font-medium
+              text-gray-900 transition duration-300 hover:text-primary-400 dark:text-gray-100
+              dark:hover:text-primary-300 sm:block"
                 >
                   {link.title}
                 </Link>
diff --git a/components/Image.tsx b/components/Image.tsx
index 6fc685e..573b086 100644
--- a/components/Image.tsx
+++ b/components/Image.tsx
@@ -1,10 +1,7 @@
 import NextImage, { ImageProps } from 'next/image'
 
 const Image = ({ ...rest }: ImageProps) => (
-  <NextImage
-    className="rounded-md border-2 border-gray-300 shadow-xl dark:border-gray-800 dark:shadow-gray-800"
-    {...rest}
-  />
+  <NextImage className="card border-2 border-gray-300 dark:border-gray-800" {...rest} />
 )
 
 export default Image
diff --git a/components/Tag.tsx b/components/Tag.tsx
index 06d27fd..e6d11ae 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -9,7 +9,7 @@ const Tag = ({ text, className }: Props) => {
   return (
     <Link
       href={`/tags/${slug(text)}`}
-      className={`mr-3 text-primary-300 hover:text-primary-500 ${className ? className : 'font-medium uppercase'}`}
+      className={`text-primary mr-3 hover:text-primary-400 ${className ? className : 'font-extrabold uppercase'}`}
     >
       {text.split(' ').join('-')}
     </Link>
diff --git a/css/colors.css b/css/colors.css
new file mode 100644
index 0000000..bcd7973
--- /dev/null
+++ b/css/colors.css
@@ -0,0 +1,41 @@
+.bg-light-blue-pink {
+    background: rgb(238,174,202);
+    background: linear-gradient(280deg, rgba(238,174,202,0.1) 0%, rgba(199,180,215,0.3) 40%, rgba(148,187,233,0.1) 100%);
+}
+
+.bg-light-blue-pink:is(.dark *) {
+    background: rgb(238,174,202);
+    background: linear-gradient(280deg, rgba(238,174,202,1) 0%, rgba(185,185,225,1) 40%, rgba(148,187,233,1) 100%);
+}
+
+.bg-light-pink-blue {
+    background: rgb(238,174,202);
+    background: linear-gradient(100deg, rgba(238,174,202,0.1) 0%, rgba(199,180,215,0.3) 40%, rgba(148,192,233,0.1) 100%);
+}
+
+.bg-light-pink-blue:is(.dark *) {
+    background: rgb(238,174,202);
+    background: linear-gradient(100deg, rgba(238,174,202,1) 0%, rgba(185,185,225,1) 40%, rgba(148,192,233,1) 100%);
+}
+
+
+
+
+/* Animation */
+.bg-pink-blue-animated {
+    background: linear-gradient(90deg, rgba(238,174,202,.3), rgba(148, 192, 233, .3));
+    background-size: 400% 400%;
+    animation: bg-pink-blue-animated 6s ease infinite;
+}
+
+.bg-pink-blue-animated:is(.dark *){
+    background: linear-gradient(90deg, rgba(238,174,202,1), rgba(148, 192, 233, 1));
+    background-size: 400% 400%;
+    animation: bg-pink-blue-animated 6s ease infinite;
+}
+
+@keyframes bg-pink-blue-animated {
+    0%{background-position:0% 50%}
+    50%{background-position:100% 50%}
+    100%{background-position:0% 50%}
+}
\ No newline at end of file
diff --git a/css/tailwind.css b/css/tailwind.css
index be53d22..3838d5f 100644
--- a/css/tailwind.css
+++ b/css/tailwind.css
@@ -50,6 +50,22 @@ input:-webkit-autofill:focus {
   vertical-align: middle;
 }
 
-body {
+body, header {
   @apply transition-colors duration-1000;
 }
+
+.card {
+  @apply rounded-md shadow-lg;
+}
+
+.card:is(.dark *) {
+  @apply shadow-gray-800;
+}
+
+.text-primary {
+  @apply text-primary-300;
+}
+
+.text-primary:is(.dark *) {
+  @apply text-primary-100;
+}
\ No newline at end of file