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,22 @@ export default function BlogPage() {
 
   return (
     <div>
+      <div className='flex justify-between mt-10 space-x-5'>
+        <div className='card bg-pink-blue-animated max-w-5xl overflow-hidden'> 
+          <ParallaxText baseVelocity={0} className="transform -rotate-[22deg] -translate-x-10">
+            <span className='font-zzz text-white text-3xl'>
+              ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
+          </ParallaxText>
+        </div>
+        <div className='flex-col space-y-5' >
+          <div className='card bg-light-blue-pink w-[4rem] h-[8rem]' />
+          <div className='card bg-light-pink-blue w-[4rem] h-[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 mt-5 space-y-2 overflow-hidden pb-1 bg-light-blue-pink
+        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 font-medium text-xl
+              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

@@ -2,7 +2,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"
+    className="card border-2 border-gray-300 dark:border-gray-800"
     {...rest}
   />
 )

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={`mr-3 text-primary hover:text-primary-400 ${className ? className : 'font-extrabold uppercase'}`}
     >
       {text.split(' ').join('-')}
     </Link>

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

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