Improve structure and add custom css variables

.vscode/css-custom-data.json

@@ -0,0 +1,17 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "@tailwind tailwindcss"
+    },
+    {
+      "name": "@layer",
+      "description": "@layer tailwindcss"
+    },
+    {
+      "name": "@apply",
+      "description": "@apply tailwindcss"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "css.customData": ["./vscode/css-custom-data.json"],
   "eslint.validate": [
     "javascript",
     "javascriptreact",

src/assets/styles/base.css

@@ -3,21 +3,33 @@
 @tailwind utilities;
 
 @layer components {
-  .btn {
-    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-gray-700 leading-snug transition py-3.5 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;
+  .text-page {
+    color: var(--aw-color-text-page);
   }
 
-  .btn-ghost {
-    @apply border-none shadow-none text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  .text-muted {
+    color: var(--aw-color-text-muted);
   }
 
-  .btn-primary {
-    @apply font-semibold bg-primary-800 text-white border-primary-800 hover:bg-primary-900 hover:border-primary-900 hover:text-white dark:text-white dark:bg-primary-800 dark:border-primary-800 dark:hover:border-primary-900 dark:hover:bg-primary-900;
+  .bg-light {
+    background-color: var(--aw-color-bg-page);
   }
 
   .bg-dark {
     @apply bg-slate-900;
   }
+
+  .btn {
+    @apply inline-flex items-center justify-center rounded-full shadow-md border-gray-400 border bg-transparent font-medium text-center text-base text-page leading-snug transition py-3.5 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;
+  }
+
+  .btn-ghost {
+    @apply border-none shadow-none text-muted hover:text-gray-900 dark:text-gray-400 dark:hover:text-white;
+  }
+
+  .btn-primary {
+    @apply font-semibold bg-primary text-white border-primary hover:bg-blue-900 hover:border-blue-900 hover:text-white dark:text-white dark:bg-primary dark:border-primary dark:hover:border-blue-900 dark:hover:bg-blue-900;
+  }
 }
 
 #header.scroll {

src/components/blog/GridItem.astro

@@ -39,12 +39,12 @@ const image = await findImage(post.image);
       ) : (
         <a
           href={getPermalink(post.slug, 'post')}
-          class="hover:text-primary-800 dark:hover:text-primary-700  transition ease-in duration-200"
+          class="hover:text-primary dark:hover:text-blue-700  transition ease-in duration-200"
         >
           {post.title}
         </a>
       )
     }
   </h3>
-  <p class="text-gray-500 dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
+  <p class="text-muted dark:text-slate-400 text-lg">{post.excerpt || post.description}</p>
 </article>

src/components/blog/HighlightedPosts.astro

@@ -37,7 +37,7 @@ const posts = await findPostsByIds(postIds);
       {
         allPostsText && allPostsLink && (
           <a
-            class="text-gray-500 dark:text-slate-400 hover:text-primary-800 transition ease-in duration-200 block mb-6 md:mb-0"
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 md:mb-0"
             href={allPostsLink}
           >
             {allPostsText} »
@@ -46,7 +46,7 @@ const posts = await findPostsByIds(postIds);
       }
     </div>
 
-    {information && <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
   </div>
 
   <Grid posts={posts} />

src/components/blog/LatestPosts.astro

@@ -4,27 +4,50 @@ import Grid from '~/components/blog/Grid.astro';
 import { getBlogPermalink } from '~/utils/permalinks';
 import { findLatestPosts } from '~/utils/blog';
 
-const count = 4;
+export interface Props {
+  title?: string;
+  allPostsText?: string;
+  allPostsLink?: string | URL;
+  information?: string;
+  postIds: string[];
+}
+
+const {
+  title = await Astro.slots.render('title'),
+  allPostsText = 'View all posts',
+  allPostsLink = getBlogPermalink(),
+  information = await Astro.slots.render('information'),
+  count = 4,
+} = Astro.props;
+
 const posts = await findLatestPosts({ count });
 ---
 
-<section class="px-4 py-16 mx-auto max-w-6xl lg:py-20">
-  <div class="flex flex-col mb-6 lg:justify-between lg:flex-row md:mb-8">
-    <h2 class="max-w-lg mb-2 text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none lg:mb-5 group font-heading">
-      <span class="inline-block mb-1 sm:mb-4"
-        >Latest articles<br class="hidden md:block" /> in our <a
-          class="hover:text-primary-800 underline underline-offset-4 decoration-1 decoration-dotted transition ease-in duration-200"
-          href={getBlogPermalink()}>Blog</a
-        >
-      </span>
-    </h2>
+<section class="px-4 py-16 mx-auto max-w-screen-xl lg:py-20">
+  <div class="flex flex-col lg:justify-between lg:flex-row mb-8">
+    <div class="md:max-w-sm">
+      {
+        title && (
+          <h2
+            class="text-3xl font-bold tracking-tight sm:text-4xl sm:leading-none group font-heading mb-2"
+            set:html={title}
+          />
+        )
+      }
+      {
+        allPostsText && allPostsLink && (
+          <a
+            class="text-muted dark:text-slate-400 hover:text-primary transition ease-in duration-200 block mb-6 lg:mb-0"
+            href={allPostsLink}
+          >
+            {allPostsText} »
+          </a>
+        )
+      }
+    </div>
 
-    <p class="text-gray-700 dark:text-slate-400 lg:text-sm lg:max-w-md">
-      The blog will be used to display AstroWind documentation. Each new article will be an important step that you will
-      need to know to be an expert in creating a website using Astro + Tailwind CSS The blog does not exist yet, but
-      very soon. Astro is a very interesting technology. Thanks.
-    </p>
+    {information && <p class="text-muted dark:text-slate-400 lg:text-sm lg:max-w-md" set:html={information} />}
   </div>
 
   <Grid posts={posts} />
-</section>
+</section>

src/components/blog/ListItem.astro

@@ -1,7 +1,7 @@
 ---
 import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
-import PostTags from '~/components/common/Tags.astro';
+import PostTags from '~/components/blog/Tags.astro';
 
 import { BLOG } from '~/config.mjs';
 import type { Post } from '~/types';
@@ -43,15 +43,15 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
     <header>
       <div class="mb-1">
         <span class="text-sm">
-          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 text-gray-500 dark:text-gray-400" />
+          <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~
           {Math.ceil(post.readingTime)} min read
         </span>
       </div>
-      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading text-gray-700 dark:text-slate-300">
+      <h2 class="text-xl sm:text-2xl font-bold leading-tight mb-2 font-heading dark:text-slate-300">
         {
           link ? (
-            <a class="hover:text-primary-800 dark:hover:text-primary-700 transition ease-in duration-200" href={link}>
+            <a class="hover:text-primary dark:hover:text-blue-700 transition ease-in duration-200" href={link}>
               {post.title}
             </a>
           ) : (
@@ -61,7 +61,7 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.slug, 'post') : '';
       </h2>
     </header>
 
-    {post.excerpt && <p class="flex-grow text-gray-500 dark:text-slate-400 text-lg">{post.excerpt}</p>}
+    {post.excerpt && <p class="flex-grow text-muted dark:text-slate-400 text-lg">{post.excerpt}</p>}
     <footer class="mt-5">
       <PostTags tags={post.tags} />
     </footer>

src/components/blog/SinglePost.astro

@@ -2,7 +2,7 @@
 import Icon from 'astro-icon';
 import { Picture } from '@astrojs/image/components';
 
-import PostTags from '~/components/common/Tags.astro';
+import PostTags from '~/components/blog/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
 
 import { getFormattedDate } from '~/utils/utils';
@@ -22,10 +22,10 @@ const { post, url } = Astro.props;
     <header class={post.image ? '' : ''}>
       <div class="flex justify-between flex-col sm:flex-row max-w-3xl mx-auto mt-0 mb-2 px-4 sm:px-6 sm:items-center">
         <p>
-          <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 text-gray-500 dark:text-gray-400" />
-          <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
-            Math.ceil(post.readingTime)
-          } min read
+        <Icon name="tabler:clock" class="w-4 h-4 inline-block -mt-1 dark:text-gray-400" />
+        <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time> ~ {
+          Math.ceil(post.readingTime)
+        } min read
         </p>
       </div>
       <h1
@@ -34,7 +34,7 @@ const { post, url } = Astro.props;
         {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-gray-500 dark:text-slate-400 font-medium 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-slate-400 text-justify"
       >
         {post.excerpt}
       </p>
@@ -60,7 +60,7 @@ const { post, url } = Astro.props;
       }
     </header>
     <div
-      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl 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-800 dark:prose-a:text-primary-400 prose-img:rounded-md prose-img:shadow-lg mt-8"
+      class="mx-auto px-6 sm:px-6 max-w-3xl prose prose-lg lg:prose-xl 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"
     >
       {
         post.Content ? (

src/components/common/Tags.astro → src/components/blog/Tags.astro

@@ -22,7 +22,7 @@ const { tags, class: className = 'text-sm' } = Astro.props;
           ) : (
             <a
               href={getPermalink(tag, 'tag')}
-              class="text-gray-600 dark:text-slate-300 hover:text-primary-800 dark:hover:text-gray-200"
+              class="text-muted dark:text-slate-300 hover:text-primary dark:hover:text-gray-200"
             >
               {tag}
             </a>

src/components/common/CustomStyles.astro

@@ -0,0 +1,23 @@
+---
+import '@fontsource/inter/variable.css';
+
+// Nunito
+// Dosis
+---
+
+<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap" rel="stylesheet" />
+
+<style is:inline is:global>
+  :root {
+    --aw-font-sans: 'InterVariable';
+    --aw-font-serif: var(--aw-font-sans);
+    --aw-font-heading: 'Nunito'; /* var(--aw-font-sans); */
+
+    --aw-color-primary: rgb(30 64 175);
+    --aw-color-secondary: rgb(30 58 138);
+    --aw-color-accent: rgb(109 40 217);
+    --aw-color-text-page: rgb(17 24 39);
+    --aw-color-text-muted: rgb(75 85 99);
+    --aw-color-bg-page: rgb(255 255 255);
+  }
+</style>

src/components/common/MetaTags.astro

@@ -5,10 +5,10 @@ import { getImage } from '@astrojs/image';
 
 import { SITE } from '~/config.mjs';
 import { MetaSEO } from '~/types';
-import { getCanonical, getAsset  } from '~/utils/permalinks';
+import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 
-import Fonts from '~/components/common/Fonts.astro';
+import CustomStyles from '~/components/common/CustomStyles.astro';
 import SplitbeeAnalytics from './SplitbeeAnalytics.astro';
 
 export interface Props extends MetaSEO {
@@ -82,7 +82,7 @@ const image =
   }}
 />
 
-<Fonts />
+<CustomStyles />
 
 <!-- Google Site Verification -->
 {SITE.googleSiteVerificationId && <meta name="google-site-verification" content={SITE.googleSiteVerificationId} />}

src/components/common/SocialShare.astro

@@ -11,20 +11,35 @@ const { text, url, class: className = 'inline-block' } = Astro.props;
 ---
 
 <div class={className}>
-  <span class="align-super font-bold dark:text-slate-400">Share:</span>
+  <span class="align-super font-bold text-gray-400 dark:text-slate-400">Share:</span>
   <button class="ml-2" title="Twitter Share" data-aw-social-share="twitter" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:twitter" class="w-6 h-6" />
+    ><Icon
+      name="ri:twitter-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Facebook Share" data-aw-social-share="facebook" data-aw-url={url}
-    ><Icon name="logos:facebook" class="w-6 h-6" />
+    ><Icon
+      name="ri:facebook-box-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Linkedin Share" data-aw-social-share="linkedin" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:linkedin-icon" class="w-6 h-6" />
+    ><Icon
+      name="ri:linkedin-box-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Whatsapp Share" data-aw-social-share="whatsapp" data-aw-url={url} data-aw-text={text}
-    ><Icon name="logos:whatsapp" class="w-6 h-6" />
+    ><Icon
+      name="ri:whatsapp-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
   <button class="ml-2" title="Email Share" data-aw-social-share="mail" data-aw-url={url} data-aw-text={text}
-    ><Icon name="tabler:mail" class="w-6 h-6" />
+    ><Icon
+      name="ri:mail-fill"
+      class="w-6 h-6 text-gray-400 dark:text-slate-500 hover:text-black dark:hover:text-slate-300"
+    />
   </button>
 </div>

src/components/common/ToggleTheme.astro

@@ -13,7 +13,7 @@ export interface Props {
 const {
   label = 'Toggle between Dark and Light mode',
   class:
-    className = 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
+    className = 'text-muted dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 inline-flex items-center',
   iconClass = 'w-6 h-6',
   iconName = 'tabler:sun',
 } = Astro.props;

src/components/widgets/Announcement.astro

@@ -3,9 +3,9 @@ import { getPermalink } from '~/utils/permalinks';
 ---
 
 <div
-  class="hidden md:block bg-primary-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
+  class="hidden md:block bg-blue-900 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-blue-900 text-sm px-3 py-2 text-gray-200 overflow-hidden whitespace-nowrap text-ellipsis"
 >
-  <span class="text-xs py-0.5 px-1 bg-primary-800 dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
+  <span class="text-xs py-0.5 px-1 bg-primary dark:bg-slate-700 dark:text-slate-300 font-semibold">NEW</span>
   <a
     href={getPermalink('useful-resources-to-create-websites', 'post')}
     class="hover:underline text-gray-200 dark:text-slate-400"

src/components/widgets/CallToAction.astro

@@ -34,7 +34,7 @@ const {
             />
           )
         }
-        {subtitle && <p class="text-xl text-gray-600 dark:text-slate-400" set:html={subtitle} />}
+        {subtitle && <p class="text-xl text-muted dark:text-slate-400" set:html={subtitle} />}
         {
           typeof callToAction === 'string' ? (
             <Fragment set:html={callToAction} />