working on front-page

assets/css/app.css

@@ -1,3 +1,4 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "header.css";
 
@@ -116,57 +117,6 @@ body {
   transform: translateY(0);
 }
 
-/* Breadcrumb Styles */
-.breadcrumb-nav {
-  width: 100%;
-  margin: 1rem 0;
-}
-
-.breadcrumb-container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-}
-
-.breadcrumb-list {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0.75rem 1rem;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  color: var(--gray-600);
-}
-
-.breadcrumb-item a {
-  color: var(--gray-600);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-.breadcrumb-item a:hover {
-  color: var(--primary-blue);
-}
-
-.breadcrumb-item:not(:last-child)::after {
-  content: "/";
-  margin: 0 0.5rem;
-  color: var(--gray-300);
-}
-
-.breadcrumb-item.active {
-  color: var(--primary-blue);
-  font-weight: 500;
-}
 
 /* Responsive Utilities */
 @media (max-width: 768px) {
@@ -175,3 +125,37 @@ body {
     padding-right: 1rem;
   }
 }
+
+/* Prose Styles from docs/homepage.html and docs/post.html */
+.prose {
+    max-width: none;
+}
+
+.prose h2 {
+    font-weight: 600;
+    margin-top: 2.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+}
+
+.prose p {
+    margin-bottom: 1.5rem;
+    line-height: 1.75;
+}
+
+.prose blockquote {
+    border-left-width: 4px;
+    border-color: #3b82f6;
+    padding-left: 1.5rem;
+    margin: 2rem 0;
+    font-style: italic;
+}
+
+.article-image {
+    transition: transform 0.3s ease;
+}
+
+.article-image:hover {
+    transform: scale(1.02);
+}

assets/js/app.js

@@ -7,4 +7,63 @@ window.Alpine = Alpine
 // Initialize Alpine
 Alpine.start()
 
+// Header JavaScript - Hamburger menu functionality
+document.addEventListener('DOMContentLoaded', function() {
+  // Mobile menu toggle
+  const offcanvasToggle = document.querySelector('.cs-header__offcanvas-toggle');
+  const offcanvasClose = document.querySelector('.cs-header__offcanvas-close');
+  const offcanvas = document.querySelector('.cs-header__offcanvas');
+  const overlay = document.querySelector('.cs-search-overlay');
+  
+  if (offcanvasToggle) {
+    offcanvasToggle.addEventListener('click', function() {
+      offcanvas.classList.add('active');
+      overlay.style.display = 'block';
+      document.body.style.overflow = 'hidden';
+    });
+  }
+  
+  if (offcanvasClose) {
+    offcanvasClose.addEventListener('click', function() {
+      offcanvas.classList.remove('active');
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+    });
+  }
+  
+  
+  // Search functionality
+  const searchToggle = document.querySelectorAll('.cs-header__search-toggle');
+  const searchClose = document.querySelector('.cs-search__close');
+  const search = document.querySelector('.cs-search');
+  
+  searchToggle.forEach(toggle => {
+    toggle.addEventListener('click', function() {
+      search.style.display = 'block';
+      overlay.style.display = 'block';
+      document.body.style.overflow = 'hidden';
+    });
+  });
+  
+  if (searchClose) {
+    searchClose.addEventListener('click', function() {
+      search.style.display = 'none';
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+    });
+  }
+  
+  if (overlay) {
+    overlay.addEventListener('click', function() {
+      if (offcanvas) {
+        offcanvas.classList.remove('active');
+      }
+      search.style.display = 'none';
+      overlay.style.display = 'none';
+      document.body.style.overflow = '';
+      
+    });
+  }
+});
+
 console.log("Hello world");

assets/js/header.js

@@ -1,54 +0,0 @@
-// Header JavaScript
-document.addEventListener('DOMContentLoaded', function() {
-  // Mobile menu toggle
-  const offcanvasToggle = document.querySelector('.cs-header__offcanvas-toggle');
-  const offcanvasClose = document.querySelector('.cs-header__offcanvas-close');
-  const offcanvas = document.querySelector('.cs-header__offcanvas');
-  const overlay = document.querySelector('.cs-search-overlay');
-  
-  if (offcanvasToggle) {
-    offcanvasToggle.addEventListener('click', function() {
-      offcanvas.classList.add('active');
-      overlay.style.display = 'block';
-      document.body.style.overflow = 'hidden';
-    });
-  }
-  
-  if (offcanvasClose) {
-    offcanvasClose.addEventListener('click', function() {
-      offcanvas.classList.remove('active');
-      overlay.style.display = 'none';
-      document.body.style.overflow = '';
-    });
-  }
-  
-  // Search functionality
-  const searchToggle = document.querySelectorAll('.cs-header__search-toggle');
-  const searchClose = document.querySelector('.cs-search__close');
-  const search = document.querySelector('.cs-search');
-  
-  searchToggle.forEach(toggle => {
-    toggle.addEventListener('click', function() {
-      search.style.display = 'block';
-      overlay.style.display = 'block';
-      document.body.style.overflow = 'hidden';
-    });
-  });
-  
-  if (searchClose) {
-    searchClose.addEventListener('click', function() {
-      search.style.display = 'none';
-      overlay.style.display = 'none';
-      document.body.style.overflow = '';
-    });
-  }
-  
-  if (overlay) {
-    overlay.addEventListener('click', function() {
-      offcanvas.classList.remove('active');
-      search.style.display = 'none';
-      overlay.style.display = 'none';
-      document.body.style.overflow = '';
-    });
-  }
-});