Website: Retheme to violet/teal palette and modernize UI

astro.config.mjs

@@ -13,7 +13,6 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export default defineConfig({
   site: SITE.origin,
   base: SITE.basePathname,
-  trailingSlash: SITE.trailingSlash ? 'always' : 'never',
   output: 'static',
   integrations: [sitemap(), icon(), react()],
   vite: {

src/assets/styles/base.css

@@ -5,50 +5,129 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
-  --color-primary: var(--cachyos-color-primary);
-  --color-secondary: var(--cachyos-color-secondary);
-  --color-accent: var(--cachyos-color-accent);
+  /* --- Primary: Bright Cyan (#00CCFF) --- */
+  --color-primary-50: #e6faff;
+  --color-primary-100: #ccf5ff;
+  --color-primary-200: #99ebff;
+  --color-primary-300: #66e0ff;
+  --color-primary-400: #33d6ff;
+  --color-primary-500: #00ccff; /* Base — #0cf from logo */
+  --color-primary-600: #00a3cc;
+  --color-primary-700: #007a99;
+  --color-primary-800: #005266;
+  --color-primary-900: #002933;
+  --color-primary-950: #001419;
+
+  /* --- Secondary: Muted Teal Green (#00AA88) --- */
+  --color-secondary-50: #e6fff9;
+  --color-secondary-100: #ccfff3;
+  --color-secondary-200: #99ffe7;
+  --color-secondary-300: #66ffdb;
+  --color-secondary-400: #33ffcf;
+  --color-secondary-500: #00aa88; /* Base — #0a8 from logo */
+  --color-secondary-600: #008870;
+  --color-secondary-700: #006654;
+  --color-secondary-800: #004438;
+  --color-secondary-900: #00221c;
+  --color-secondary-950: #00110e;
+
+  /* --- Accent: Neon Mint (#00FFCC) --- */
+  --color-accent-50: #e6fffb;
+  --color-accent-100: #ccfff7;
+  --color-accent-200: #99ffef;
+  --color-accent-300: #66ffe7;
+  --color-accent-400: #33ffdf;
+  --color-accent-500: #00ffcc; /* Base — #0fc from logo */
+  --color-accent-600: #00cca3;
+  --color-accent-700: #00997a;
+  --color-accent-800: #00664f;
+  --color-accent-900: #003329;
+  --color-accent-950: #001a14;
+
+  /* --- Surface Neutrals --- */
+  --color-surface-50: #f0fafa;
+  --color-surface-100: #d9f2f2;
+  --color-surface-200: #b3e5e5;
+  --color-surface-300: #8dd8d8;
+  --color-surface-400: #66cccc;
+  --color-surface-500: #40bfbf;
+  --color-surface-600: #2d8c8c;
+  --color-surface-700: #1a5959;
+  --color-surface-800: #0d2e2e;
+  --color-surface-900: #061717;
+  --color-surface-950: #020202; /* Base — #020202 from logo */
 
   --font-sans:
-    var(--cachyos-font-sans), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-serif:
-    var(--cachyos-font-serif), ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+    'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif: 'Inter Variable', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
   --font-heading:
-    var(--cachyos-font-heading), ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Inter Variable', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
 @utility bg-dark {
-  @apply bg-slate-900;
+  @apply bg-gray-950;
 }
 
 @utility text-muted {
   @apply text-gray-900/70 dark:text-gray-800/70;
 }
 
 @utility btn {
-  @apply inline-flex items-center justify-center rounded-md shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3 px-6 md:px-8 ease-in duration-200 focus:ring-blue-500 focus:ring-offset-blue-200 focus:ring-2 focus:ring-offset-2 hover:bg-gray-100 hover:border-gray-600 dark:text-slate-300 dark:border-slate-500 dark:hover:bg-slate-800 dark:hover:border-slate-800;
+  @apply inline-flex items-center justify-center rounded-md shadow-md
+         border border-surface-400 bg-surface-300/10
+         font-medium text-center text-base text-surface-600 leading-snug
+         transition py-3 px-6 md:px-8 duration-100
+         focus:ring-surface-500 focus:ring-offset-surface-200 focus:ring-2 focus:ring-offset-2
+         hover:bg-surface-100 hover:border-surface-600
+         dark:text-surface-300 dark:border-surface-500
+         dark:hover:bg-surface-500/20 dark:hover:border-surface-600;
 }
 
 @utility btn-ghost {
-  @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  @apply border-none shadow-none
+         text-surface-500 hover:text-surface-900
+         dark:text-surface-300 dark:hover:text-surface-100;
 }
 
 @utility btn-primary {
-  @apply font-semibold bg-blue-600 text-white border-blue-600 hover:bg-blue-800 hover:border-blue-800 hover:text-white dark:text-white dark:bg-blue-700 dark:border-blue-700 dark:hover:border-blue-900 dark:hover:bg-blue-900;
+  @apply font-semibold
+         bg-surface-600 text-white border-surface-600
+         hover:bg-surface-600/80 hover:border-surface-600/80
+         dark:bg-surface-500 dark:text-surface-950 dark:border-surface-500
+         dark:hover:bg-surface-400 dark:hover:border-surface-400
+         focus:ring-surface-400 focus:ring-offset-surface-200;
+}
+
+@utility btn-secondary {
+  @apply font-semibold
+         bg-primary-600 text-white border-primary-600
+         hover:bg-primary-500 hover:border-primary-500
+         dark:bg-primary-500 dark:text-primary-950 dark:border-primary-500
+         dark:hover:bg-primary-400 dark:hover:border-primary-400
+         focus:ring-primary-400 focus:ring-offset-primary-200;
+}
+
+@utility btn-accent {
+  @apply font-semibold
+         bg-accent-500 text-surface-950 border-accent-500
+         hover:bg-accent-400 hover:border-accent-400
+         dark:bg-accent-400 dark:text-surface-950 dark:border-accent-400
+         dark:hover:bg-accent-300 dark:hover:border-accent-300
+         focus:ring-accent-400 focus:ring-offset-accent-200;
 }
 
 @utility btn-under-constuction {
   @apply inline-flex items-center justify-center rounded-md shadow-md text-gray-900 border-red-800 bg-yellow-300 border font-medium text-center text-base;
 }
 
 @utility btn-dropdown-item {
-  @apply text-sm text-gray-700 hover:bg-gray-100 px-10 py-2 transition hover:ease-in hover:duration-75 ease-out duration-100 dark:text-slate-400 dark:hover:bg-slate-700;
+  @apply text-sm text-gray-800 hover:bg-surface-100 px-10 py-2 transition hover:ease-in hover:duration-75 ease-out duration-100 dark:text-gray-100 dark:hover:bg-surface-700 data-focus:bg-surface-100 dark:data-focus:bg-surface-700;
 }
 
 #header.scroll {
-  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-xs dark:bg-slate-900 dark:md:bg-slate-900/90;
+  @apply shadow-md md:shadow-lg bg-white md:bg-white/90 md:backdrop-blur-xs dark:bg-gray-950 dark:md:bg-gray-950/90;
 }
 
 .dropdown:hover .dropdown-menu {

src/components/HeroImg.astro

@@ -0,0 +1,19 @@
+---
+import Image from '~/components/common/Image.astro';
+
+const { src = await Astro.slots.render('src') } = Astro.props;
+---
+
+<div class="relative m-auto max-w-5xl">
+  <Image
+    src={src}
+    class="mx-auto rounded-xl w-full shadow"
+    widths={[532, 1130, 1920]}
+    sizes="(max-width: 767px) 532px, (max-width: 1920px) 1130px, (max-width: 2039px) 1920px"
+    alt="Hero"
+    loading="eager"
+    fetchpriority="high"
+    width={1920}
+    height={1080}
+  />
+</div>

src/components/Logo.astro

@@ -12,7 +12,7 @@ import logoSrc from '~/assets/images/logo.svg';
   height="32"
 />
 <span
-  class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-900 whitespace-nowrap dark:text-white"
+  class="self-center ml-2 text-2xl md:text-xl font-bold text-gray-700 whitespace-nowrap dark:text-white"
 >
   CachyOS</span
 >

src/components/blog/Button.astro

@@ -4,7 +4,7 @@ import { twMerge } from 'tailwind-merge';
 import type { CallToAction } from '~/types';
 
 const {
-  variant = 'secondary',
+  variant = 'primary',
   target,
   text = Astro.slots.render('default'),
   icon = '',
@@ -13,9 +13,10 @@ const {
 } = Astro.props as CallToAction;
 
 const variants = {
-  primary: 'btn-primary',
-  secondary: 'btn-secondary',
-  tertiary: 'btn btn-tertiary',
+  primary: 'btn btn-primary',
+  secondary: 'btn btn-secondary',
+  accent: 'btn btn-accent',
+  ghost: 'btn btn-ghost',
   link: 'cursor-pointer hover:text-primary',
 };
 ---

src/components/blog/Headline.astro

@@ -13,7 +13,7 @@ const {
   {
     subtitle && (
       <div
-        class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-slate-400 font-medium"
+        class="mt-2 md:mt-3 mx-auto text-xl text-gray-500 dark:text-gray-400 font-medium"
         set:html={subtitle}
       />
     )

src/components/blog/ListItem.astro

@@ -28,11 +28,11 @@ const link = getPermalink(post.permalink, 'post');
   {
     image && (
       <a class="relative block group" href={link ?? 'javascript:void(0)'}>
-        <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-slate-700 rounded-sm shadow-lg">
+        <div class="relative h-0 pb-[56.25%] md:pb-[75%] md:h-72 lg:pb-[56.25%] overflow-hidden bg-gray-400 dark:bg-gray-700 rounded-sm shadow-lg">
           {image && (
             <Image
               src={image}
-              class="absolute inset-0 object-cover w-full h-full mb-6 rounded-sm shadow-lg bg-gray-400 dark:bg-slate-700"
+              class="absolute inset-0 object-cover w-full h-full mb-6 rounded-sm shadow-lg bg-gray-400 dark:bg-gray-700"
               widths={[400, 900]}
               width={900}
               sizes="(max-width: 900px) 400px, 900px"
@@ -70,11 +70,11 @@ const link = getPermalink(post.permalink, 'post');
           }
         </span>
       </div>
-      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
+      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-gray-300">
         {
           link ? (
             <a
-              class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200"
+              class="hover:text-primary dark:hover:text-primary-600 transition ease-in duration-200"
               href={link}
             >
               {post.title}
@@ -86,7 +86,7 @@ const link = getPermalink(post.permalink, 'post');
       </h2>
     </header>
 
-    {post.excerpt && <p class="grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
+    {post.excerpt && <p class="grow text-muted dark:text-gray-400 text-lg">{post.excerpt}</p>}
     <footer class="mt-5">
       <PostTags tags={post.tags} />
     </footer>

src/components/blog/Pagination.astro

@@ -18,7 +18,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
     <div class="container flex">
       <div class="flex flex-row mx-auto container justify-between">
         <Button
-          variant="tertiary"
+          variant="ghost"
           class={`md:px-3 px-3 mr-2 ${!prevUrl ? 'invisible' : ''}`}
           href={getPermalink(prevUrl)}
         >
@@ -27,7 +27,7 @@ const { prevUrl, nextUrl, prevText = 'Newer posts', nextText = 'Older posts' } =
         </Button>
 
         <Button
-          variant="tertiary"
+          variant="ghost"
           class={`md:px-3 px-3 ${!nextUrl ? 'invisible' : ''}`}
           href={getPermalink(nextUrl)}
         >

src/components/blog/SinglePost.astro

@@ -52,7 +52,7 @@ const { Content } = post;
         {post.title}
       </h1>
       <p
-        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-slate-400 text-justify"
+        class="max-w-3xl mx-auto mt-4 mb-8 px-4 sm:px-6 text-xl md:text-2xl text-muted dark:text-gray-400 text-justify"
       >
         {post.excerpt}
       </p>
@@ -61,7 +61,7 @@ const { Content } = post;
         post.image ? (
           <Image
             src={post.image}
-            class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-slate-700"
+            class="max-w-full lg:max-w-[900px] mx-auto mb-6 sm:rounded-md bg-gray-400 dark:bg-gray-700"
             widths={[400, 900]}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post?.excerpt || ''}
@@ -72,13 +72,13 @@ const { Content } = post;
           />
         ) : (
           <div class="max-w-3xl mx-auto px-4 sm:px-6">
-            <div class="border-t dark:border-slate-700" />
+            <div class="border-t dark:border-gray-700" />
           </div>
         )
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose lg:prose-lg dark:prose-invert dark:prose-headings:text-slate-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-blue-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
+      class="mx-auto px-6 sm:px-6 max-w-3xl prose lg:prose-lg dark:prose-invert dark:prose-headings:text-gray-300 prose-md prose-headings:font-heading prose-headings:leading-tighter prose-headings:tracking-tighter prose-headings:font-bold prose-a:text-primary dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8 prose-headings:scroll-mt-[80px]"
     >
       {Content ? <Content /> : <Fragment set:html={post.content || ''} />}
     </div>

src/components/blog/Tags.astro

@@ -18,17 +18,17 @@ const { tags, class: className = 'text-sm', title = undefined, isCategory = fals
     <>
       <>
         {title !== undefined && (
-          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-slate-400">
+          <span class="align-super font-normal underline underline-offset-4 decoration-2 dark:text-gray-400">
             {title}
           </span>
         )}
       </>
       <ul class={className}>
         {tags.map((tag) => (
-          <li class="bg-gray-100 dark:bg-slate-700 inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
+          <li class="bg-surface-100 dark:bg-surface-700 rounded-xs inline-block mr-2 rtl:mr-0 rtl:ml-2 mb-2 py-0.5 px-2 lowercase font-medium">
             <a
               href={getPermalink(tag, isCategory ? 'category' : 'tag')}
-              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
+              class="text-muted text-gray-800 dark:text-gray-200 hover:text-primary dark:hover:text-gray-200"
             >
               {tag}
             </a>

src/components/blog/ToBlogLink.astro

@@ -5,7 +5,7 @@ import Button from '~/components/blog/Button.astro';
 ---
 
 <div class="mx-auto px-6 sm:px-6 max-w-3xl pt-8 md:pt-4 pb-12 md:pb-20">
-  <Button variant="tertiary" class="px-3 md:px-3" href={getBlogPermalink()}>
+  <Button variant="ghost" class="px-3 md:px-3" href={getBlogPermalink()}>
     <Icon name="tabler:chevron-left" class="w-5 h-5 mr-1 -ml-1.5 rtl:-mr-1.5 rtl:ml-1" />
     Back to Blog
   </Button>

src/components/common/Image.astro

@@ -1,16 +1,16 @@
 ---
+import type { HTMLAttributes } from 'astro/types';
 import { findImage } from '~/utils/images';
 import {
   getImagesOptimized,
-  astroAsseetsOptimizer,
+  astroAssetsOptimizer,
   type ImageProps,
-  type AttributesProps,
 } from '~/utils/images-optimization';
 
 type Props = ImageProps;
 type ImageType = {
   src: string;
-  attributes: AttributesProps;
+  attributes: HTMLAttributes<'img'>;
 };
 
 const props = Astro.props;
@@ -39,11 +39,20 @@ const _image = await findImage(props.src);
 
 let image: ImageType | undefined = undefined;
 
-if (_image !== null && typeof _image === 'object') {
-  image = await getImagesOptimized(_image, props, astroAsseetsOptimizer);
-} else if (_image) {
-  image = await getImagesOptimized(_image, props);
+if (_image) {
+  image = await getImagesOptimized(_image, props, astroAssetsOptimizer);
 }
 ---
 
-{!image ? <Fragment /> : <img src={image.src} {...image.attributes} />}
+{
+  !image ? (
+    <Fragment />
+  ) : (
+    <img
+      src={image.src}
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+      {...image.attributes}
+    />
+  )
+}