Minimal design ajustment

src/assets/styles/base.css

@@ -19,6 +19,7 @@
     @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;
   }

src/components/widgets/Content.astro

@@ -31,7 +31,7 @@ const {
 } = Astro.props;
 ---
 
-<section class={`bg-blue-50 dark:bg-slate-800 py-16 md:py-20 ${isAfterContent ? 'pt-0 md:pt-0' : ''}`}>
+<section class:list={[{ 'pt-0 md:pt-0': isAfterContent }, 'bg-blue-50 dark:bg-slate-800 py-16 md:py-20']}>
   <div class="max-w-xl sm:mx-auto lg:max-w-2xl">
     {
       (title || subtitle || highlight) && (

src/components/widgets/Header.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import Logo from '~/components/common/Logo.astro';
+import Logo from '~/components/Logo.astro';
 import ToggleTheme from '~/components/common/ToggleTheme.astro';
 import ToggleMenu from '~/components/common/ToggleMenu.astro';
 
@@ -24,14 +24,19 @@ interface MenuLink extends Link {
 export interface Props {
   links?: Array<MenuLink>;
   actions?: Array<ActionLink>;
-  isFixed?: boolean;
+  isSticky?: boolean;
+  showToggleTheme?: boolean;
+  showRssFeed?: boolean;
 }
 
-const { links = [], actions = [], isFixed = false } = Astro.props;
+const { links = [], actions = [], isSticky = false, showToggleTheme = false, showRssFeed = false } = Astro.props;
 ---
 
 <header
-  class:list={[{ sticky: isFixed }, 'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100']}
+  class:list={[
+    { sticky: isSticky, relative: !isSticky },
+    'top-0 z-40 flex-none mx-auto w-full transition-all ease-in duration-100',
+  ]}
   id="header"
 >
   <div class="py-3 px-3 md:py-3.5 md:px-4 mx-auto w-full md:flex md:justify-between max-w-screen-xl">
@@ -85,15 +90,19 @@ const { links = [], actions = [], isFixed = false } = Astro.props;
     </nav>
     <div class="md:self-center flex items-center md:mb-0">
       <div class="hidden items-center md:flex">
-        <ToggleTheme iconClass="w-5 h-5" />
+        {showToggleTheme && <ToggleTheme iconClass="w-5 h-5" />}
 
-        <a
+        {
-          class="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"
+          showRssFeed && (
-          aria-label="RSS Feed"
+            <a
-          href={getAsset('/rss.xml')}
+              class="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"
-        >
+              aria-label="RSS Feed"
-          <Icon name="tabler:rss" class="w-5 h-5" />
+              href={getAsset('/rss.xml')}
-        </a>
+            >
+              <Icon name="tabler:rss" class="w-5 h-5" />
+            </a>
+          )
+        }
         {
           actions?.length ? (
             <span class="ml-4">

src/components/widgets/Hero.astro

@@ -29,7 +29,7 @@ const {
 <section class="relative md:-mt-[76px]">
   <div class="absolute inset-0 pointer-events-none" aria-hidden="true"></div>
   <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6">
-    <div class="pt-0 md:pt-[76px]"></div>
+    <div class="pt-0 md:pt-[76px] pointer-events-none"></div>
     <div class="py-12 md:py-20">
       <div class="text-center pb-10 md:pb-16 max-w-screen-lg mx-auto">
         {

src/components/widgets/Steps2.astro

@@ -64,7 +64,7 @@ const {
 ---
 
 <section>
-  <div class="max-w-6xl mx-auto px-4 sm:px-6 overflow-hidden">
+  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 overflow-hidden">
     <div class="py-12 md:py-20">
       <div class="py-4 sm:py-6 lg:py-8">
         <div class="flex flex-wrap md:-mx-8">