feat: update title in explainer config and enhance navbar title display with icon for improved branding

Author: LeadcodeDev

.astro/data-store.json

@@ -2,7 +2,7 @@ import { defineExplainerConfig } from '@/utils'
 
 export default defineExplainerConfig({
   meta: {
-    title: '💧 Explainer',
+    title: 'Explainer',
     description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     thumbnail: 'https://placehold.co/1200x630',
   },

explainer.config.ts

@@ -42,7 +42,7 @@
   --callout-success-bg: #133524;
   --callout-success-border: #10b981;
   --callout-important: #a78bfa;
-  --callout-important-bg: #2d224a;
+  --callout-important-bg: #2d224ab6;
   --callout-important-border: #8b5cf6;
   --callout-warning: #facc15;
   --callout-warning-bg: #3a320a;
@@ -194,7 +194,6 @@ h6 {
     margin-top: 1.7142857em;
     margin-bottom: 1.7142857em;
     border-radius: 0.375rem;
-    padding: 0.8571429em 1.1428571em;
   }
 
   pre code {
@@ -288,13 +287,15 @@ html.dark .prose>.astro-code {
 
 .astro-code {
   margin: 2rem 0;
-  padding: 1rem 0.5rem;
+  padding: 1rem 0;
   border-radius: 0.5rem;
   font-size: 0.875rem;
   position: relative;
   border: 1px solid var(--color-border-tab) !important;
 
   .line {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
     font-size: 0.9rem;
     color: var(--color-foreground) !important;
   }
@@ -327,9 +328,8 @@ html.dark .prose>.astro-code {
 .prose li code {
   border: 1px solid var(--color-border-tab);
   border-radius: 0.25rem;
-  padding: 0.15rem 0.25rem;
-  margin-right: 0 0.25em;
-  background: var(--background);
+  padding: 0.3rem 0.3rem;
+  background: color-mix(in srgb, var(--background) 30%, transparent);
 
   &::before,
   &::after {
@@ -438,7 +438,7 @@ html.dark .prose>.astro-code {
 
 .callout {
   margin: 1rem 0;
-  padding: 0.5rem 0;
+  padding: 0.5rem 1rem;
   border-radius: 0.5rem;
 
   .callout-title {
@@ -449,7 +449,6 @@ html.dark .prose>.astro-code {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    padding-left: 1.5rem;
     opacity: 0.8;
     font-size: var(--text-sm);
 

src/assets/css/markdown.css

@@ -11,6 +11,7 @@ import config from '../../../../explainer.config';
 
 The documentation section allows you to create and manage your documentation.
 
+> [!important]
 > A collection is a grouping of pages; it can represent a section or a complete documentation.
 
 ## Create new collection

src/content/docs/framework/docs.mdx

@@ -44,12 +44,12 @@ export default function Navbar() {
     <div className="sticky top-0 z-50 w-full p-2 py-3 border-b bg-background/70 backdrop-blur-sm">
       <div className="max-w-screen-xl mx-auto flex items-center justify-between">
         <a href="/" className="flex sm:hidden items-center space-x-2">
-          <span className="font-bold text-primary text-lg">{config.meta.title}</span>
+          <span className="font-bold text-primary text-lg">💧 {config.meta.title}</span>
         </a>
 
         <div className="hidden lg:flex items-center justify-between w-full">
           <a href="/" className="flex items-center space-x-2">
-            <span className="font-bold text-primary text-lg">{config.meta.title}</span>
+            <span className="font-bold text-primary text-lg">💧 {config.meta.title}</span>
           </a>
           <NavigationMenu>
             <NavigationMenuList>