ui: css updates - colors.css

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>

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'

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>

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

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>

css/colors.css

@@ -0,0 +1,64 @@
+.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.1) 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.1) 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, 0.3), rgba(148, 192, 233, 0.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%;
+  }
+}

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;
+}