Add docs, formatting fix, fix error in id attribute for BaseLayout

Author: webstackdev

src/components/Layout/Container/index.astro

@@ -1,4 +1,7 @@
 ---
+/**
+ * Wrapper for the site header and main content in BaseLayout
+ */
 export interface Props {
   id?: string
 }
@@ -10,7 +13,7 @@ const { id } = Astro.props
   class="flex flex-col min-h-screen relative transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]"
   role="document"
   style="padding-top: env(titlebar-area-height, 0);"
-  {id}
+  id={id}
 >
   <slot />
 </div>

src/components/Layout/Content/index.astro

@@ -1,6 +1,12 @@
+---
+/**
+ * Wrapper for main content in BaseLayout
+ */
+---
+
 <main
   id="main"
-  class="flex flex-col flex-[0_1_auto] mx-auto max-w-[75rem] w-[90%]"
+  class="flex flex-col flex-[0_1_auto] mx-auto max-w-300 w-[90%]"
   role="main"
   tabindex="-1"
 >

src/components/Layout/Markdown/Footer/index.astro

@@ -6,9 +6,9 @@ export interface Props {
 const { section } = Astro.props
 ---
 
-<footer class="mt-16 pt-8 border-t border-[var(--color-border)] text-sm text-[var(--color-text-muted)]">
+<footer class="mt-16 pt-8 border-t border-border text-sm text-text-muted">
   <p class="markdown-content__section">
     {/* Article section/category */}
-    Filed under: <a href={`/sections/${section}`} class="text-[var(--color-primary)] no-underline hover:underline focus:underline">{section}</a>
+    Filed under: <a href={`/sections/${section}`} class="text-primary no-underline hover:underline focus:underline">{section}</a>
   </p>
 </footer>

src/components/Layout/Markdown/Lead/index.astro

@@ -16,7 +16,7 @@ export interface Props {
 const { modifiedDate, publishDate, author, readingTime, tags } = Astro.props
 ---
 
-<div class="flex flex-wrap gap-2 items-center text-sm text-[var(--color-text-muted)] mt-4 pt-4 border-t border-[var(--color-border)]">
+<div class="flex flex-wrap gap-2 items-center text-sm text-text-muted mt-4 pt-4 border-border">
   {publishDate && <PublishDate publishDate={publishDate} />}
   {modifiedDate && modifiedDate !== publishDate && <ModifiedDate modifiedDate={modifiedDate} />}
   {author && <Author author={author} />}

src/components/Layout/Markdown/Subtitle/index.astro

@@ -6,6 +6,6 @@ export interface Props {
 const { subtitle } = Astro.props
 ---
 
-<p class="text-lg text-[var(--color-text-muted)] leading-relaxed" itemprop="description">
+<p class="text-lg text-text-muted)] leading-relaxed" itemprop="description">
   {subtitle}
 </p>

src/components/Layout/Skip/index.astro

@@ -1,3 +1,9 @@
+---
+/**
+ * Wrapper for "skip to main content" anchor for accessibility in BaseLayout
+ */
+---
+
 <a
 href="#main"
 class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-1/2 focus:-translate-x-1/2 focus:px-6 focus:py-4 focus:outline-none focus:z-50 focus:bg-blue-600 focus:text-white focus:rounded"

src/components/PwaTitleBar/index.astro

@@ -6,7 +6,7 @@
 ---
 
 <div
-  class="fixed top-0 left-0 right-0 overflow-hidden z-[9999] bg-[var(--color-bg-offset)]"
+  class="fixed top-0 left-0 right-0 overflow-hidden z-9999 bg-bg-offset"
   style="height: env(titlebar-area-height, 0);"
 >
   <div

src/layouts/BaseLayout.astro

@@ -85,7 +85,7 @@ const {
       <PwaTitleBar />
       {/* Site header and main content */}
       <Container id="main-content">
-  <ThemePicker />
+        <ThemePicker />
         <Header path={path} />
         <Breadcrumbs path={path} pageTitle={pageTitle} />
         {/* Main page content */}