https://storyteller-astro-theme.netlify.app/blog/

1<!DOCTYPE html><html lang="en" class="h-full" data-astro-cid-4dqtj3le> <head><meta charset="UTF-8">
2<!-- This site is hosted on Netlify. Anyone can build and deploy a site
3     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=738c6938-7e30-4be8-80d2-72f1d0d44e2d
4     Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta name="description" content="Minimal musings on code, design, and life"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta property="og:title" content="The Storyteller"><meta property="og:description" content="Minimal musings on code, design, and life"><meta property="og:type" content="website"><meta property="og:url" content="http://localhost:4321/blog/"><meta property="og:site_name" content="The Storyteller"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="The Storyteller"><meta name="twitter:description" content="Minimal musings on code, design, and life"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><title>The Storyteller</title>

4<script>
5      // Theme initialization - prevents FOUC
6      ;(() => {
7        const theme = localStorage.getItem("theme") ?? (matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
8
9        document.documentElement.classList.toggle("dark", theme === "dark")
10      })()
11    </script>

11<script data-category="analytics" type="text/partytown" src="https://www.googletagmanager.com/gtag/js?id=

11G-V5QHDKBFP

11"></script>
12
13      

13<script data-category="analytics" type="text/partytown">(function(){const gTag = "G-V5QHDKBFP";
14
15        window.dataLayer = window.dataLayer || [];
16        function gtag() {
17          dataLayer.push(arguments);
18        }
19        gtag("js", new Date());
20
21        gtag("config", gTag);
22      })();</script>

22<link rel="stylesheet" href="/_astro/_slug_.B5BdXTVz.css"></head> <body class="bg-white text-gray-900 dark:bg-slate-900 dark:text-slate-200 transition-colors duration-300 min-h-full" data-astro-cid-4dqtj3le> <!-- <div class="w-full bg-black h-3"></div> --> <main class="max-w-[1100px] mx-auto px-4" data-astro-cid-4dqtj3le>  <header class="flex flex-col items-center mt-10 mb-8 relative"> <!-- Theme Toggle Button --> <button onclick="toggleTheme()" id="theme-toggle-button" aria-label="Toggle theme" class="absolute top-0 right-0 mt-2 mr-2 p-2 rounded-md text-gray-600 dark:text-gray-300 bg-gray-100 dark:bg-slate-700 hover:bg-gray-200 dark:hover:bg-slate-600 transition-colors"> <svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 hidden"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"></path> </svg> <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 hidden"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"></path> </svg> </button> <a href="/" class="flex flex-col items-center"> <img src="/images/storyteller.png" alt="Profile" class="w-28 h-28 rounded-full object-cover border-2 border-gray-200 dark:border-gray-700 shadow mb-6 hover:opacity-80 transition-opacity">  <h1 class="text-4xl font-bold tracking-tight mb-2 text-center hover:opacity-80 transition-opacity">The Storyteller</h1> <p class="text-lg text-gray-500 dark:text-gray-400 font-light text-center">Minimal musings on code, design, and life</p>  </a> </header>  <hr class="border-t border-gray-200 dark:border-gray-700 my-8">  <section> <!-- <h2 class={`text-2xl font-semibold mb-8  text-center`}>All Posts</h2> --> <ul class="space-y-4"> <li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/demo-of-plugins" class="text-xl font-medium hover:underline"> Rich Media Embeds: YouTube, Vimeo, Maps, PDFs &amp; More  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Web Dev</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">November 6, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/start-your-blog-with-storyteller-theme" class="text-xl font-medium hover:underline"> Start Your Blog with Storyteller Theme  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Tutorial</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">June 7, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/how-to-build-minimal-blog-astro" class="text-xl font-medium hover:underline"> How to Build a Minimal Blog with Astro  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Web Dev</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">June 1, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/monochrome-ui-less-is-more" class="text-xl font-medium hover:underline"> Monochrome UI: Less is More  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Design</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">May 28, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/mastering-css-grid-complete-guide" class="text-xl font-medium hover:underline">

22 Mastering CSS Grid: A Complete Guide  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Web Dev</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">May 20, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/why-i-love-tailwind-css" class="text-xl font-medium hover:underline"> Why I Love Tailwind CSS  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">CSS</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">May 20, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/dark-mode-ux-perspective" class="text-xl font-medium hover:underline"> Dark Mode: A UX Perspective  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">Coding</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">May 18, 2025</span> </li><li class="flex flex-col sm:flex-row justify-between sm:items-center py-4 border-b border-gray-100 dark:border-gray-800"> <div class="mb-2 sm:mb-0"> <a href="/article/art-of-api-design-developer-friendly" class="text-xl font-medium hover:underline"> The Art of API Design: Building Developer-Friendly Interfaces  </a> <span class="ml-0 sm:ml-3 mt-1 sm:mt-0 inline-block text-xs bg-gray-100 text-gray-600 dark:bg-slate-700 dark:text-slate-300 px-2 py-1 rounded">API Design</span>  </div> <span class="text-sm text-gray-400 dark:text-gray-500">May 18, 2025</span> </li> </ul> </section>  <nav class="flex justify-center items-center space-x-4 mt-12" aria-label="Pagination Navigation"> <!-- Previous Button --> <span class="px-4 py-2 text-sm font-medium text-gray-400 dark:text-gray-600 border border-gray-200 dark:border-gray-700 rounded-md cursor-not-allowed">← Previous</span> <!-- Page Numbers --> <div class="flex items-center space-x-2"> <span class="px-3 py-2 text-sm font-medium bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 rounded-md" aria-current="page"> 1 </span><a href="/blog/2/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors" aria-label="Go to page 2"> 2 </a><a href="/blog/3/" class="px-3 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors" aria-label="Go to page 3"> 3 </a> </div> <!-- Next Button --> <a href="/blog/2" class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md hover:border-gray-400 dark:hover:border-gray-500 transition-colors" aria-label="Go to next page"> Next →
23</a> </nav> <!-- Pagination Info --> <div class="text-center mt-4 text-sm text-gray-500 dark:text-gray-400">
24Showing 1 to 8 of 18 posts </div>  <footer class="mt-16 py-8 text-center text-gray-400 dark:text-gray-500 text-sm border-t border-gray-100 dark:border-gray-700"> <div class="flex flex-col-reverse md:flex-row md:justify-between items-center space-y-reverse space-y-4 md:space-y-0"> <p>© 2025 The Storyteller. All Rights Reserved.</p> <nav class=""> <div class="flex items-center justify-center space-x-8 text-sm"> <a href="/categories" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-slate-100 transition-colors font-medium">
25Categories
26</a> <a href="/tags" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-slate-100 transition-colors font-medium">
27Tags
28</a> <a href="/authors" class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-slate-100 transition-colors font-medium">
29Authors
30</a> </div> </nav> </div> </footer>  </main> 

30<script src="/scripts/theme-toggle.js"></script>

30 </body> </html>