howdy-jekyll-theme 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 3e5fe3f63665dc591e58b9ff6a57b5656b2a538ea7ff26eb2a575514d2a1db1b
+  data.tar.gz: 5a2a87e1f35d519013abe2e6c1dc722574c71bec65039a6c953f3db911629434
+SHA512:
+  metadata.gz: 96872e77ddd36759fa876672c4be696bc1763f84cf8ed8da91ddfae4286a2f2ea53c1c74af21fbbe07c17661a216600e8018e634a9765c762ffef4de148ec523
+  data.tar.gz: 202609b75773017be7e56f38117732d96cf80e9fd5a44f8e4fcdc70bb6bc23a210abbc48ab334cbe603ec2bb7922f1ee5cecf4cb7fd1b145bb6fe9f40bfe5202

data/AGENTS.md

@@ -0,0 +1,49 @@
+# AGENTS.md — Howdy Jekyll Theme
+
+## What this is
+
+A gem-based Jekyll theme (`howdy-jekyll-theme`, v1.0.0) for personal sites and portfolios. Ruby >= 3.0, runs on 3.4.0 locally. No tests, no CI, no linter.
+
+## Commands
+
+| Action | Command |
+|---|---|
+| Setup | `bundle config --local path .bundle && bundle install` |
+| Dev server | `bundle exec jekyll serve` → http://localhost:4000 |
+| Build gem | `gem build howdy-jekyll-theme.gemspec` |
+| Install local gem | `gem install ./howdy-jekyll-theme-1.0.0.gem` |
+
+## Architecture
+
+- **`lib/howdy-jekyll-theme.rb`** — Entry point. Registers a `Jekyll::Hooks.register :site, :after_init` hook that injects the theme's `_layouts`, `_includes`, and `_sass` paths into Jekyll's lookup.
+- **`howdy-jekyll-theme.gemspec`** — `spec.files` uses `Dir[]` glob patterns. Any new files must match an existing pattern to be included in the built gem.
+- **`_config.yml`** — Uses `theme: howdy-jekyll-theme` so the repo serves as both the gem source and its own demo site.
+
+## Key conventions
+
+- **Sass**: Uses modern `@use` syntax (not `@import`). All partials live directly under `_sass/`.
+- **Pagination**: Uses `jekyll-paginate-v2` (NOT `jekyll-paginate`). Config in `_config.yml` under `pagination:`.
+- **Excerpts**: `<!--more-->` is the separator, not the default.
+- **Projects collection**: Sorted by `year` front-matter field. Lives in `_projects/`.
+- **Blog**: Entry page is `blog/index.html` (layout: `blog`). Posts in `_posts/` follow `YYYY-MM-DD-slug.md` naming.
+- **Categories** have color accents: Tutorials=blue, Inspiration=orange, Freebies=green, Interviews=purple.
+- **Dark mode**: Toggled via `assets/js/theme-toggle.js`, persisted in `localStorage`, respects `prefers-color-scheme`.
+
+## File structure
+
+```
+_layouts/     — 7 layouts: default, home, page, post, project, blog, autopage_collection
+_includes/    — 12 partials (analytics, blog-pagination, comments, dark-mode-toggle, head, hero-carousel, logo, navigation, newsletter, share-buttons, social-links, toc)
+_sass/        — 6 partials: variables, base, typography, layout, components, dark-mode
+assets/       — css/main.scss (entry), js/theme-toggle.js, fonts/, images/
+_projects/    — Demo project content
+_posts/       — Demo blog posts
+blog/         — Blog index page (pagination entry)
+lib/          — Gem entry point (Jekyll hook)
+```
+
+## Gotchas
+
+- The `_config.yml` excludes `Gemfile`, `Gemfile.lock`, `*.gemspec`, `README.md`, `LICENSE` from the Jekyll build — do not put content there expecting it to render.
+- Font files (Inter, Chaumont Script, Fragment Mono) in `assets/fonts/` are licensed; verify licensing before redistributing.
+- The `.bundle/` directory contains vendored gems — do not edit files inside it.

data/Gemfile

@@ -0,0 +1,11 @@
+source "https://rubygems.org"
+
+# Gem specification
+gemspec
+
+# Development dependencies
+gem "jekyll", ">= 3.9"
+gem "jekyll-seo-tag", "~> 2.8"
+gem "jekyll-feed", "~> 0.17"
+gem "jekyll-sitemap", "~> 1.4"
+gem "jekyll-paginate-v2", "~> 3.0"

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kyle Greenan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,431 @@
+# Howdy Jekyll Theme
+
+> A clean, modern, and minimalist Jekyll theme for personal websites and portfolios.
+
+[![Gem Version](https://img.shields.io/badge/gem-v1.0.0-blue)](https://rubygems.org/gems/howdy-jekyll-theme)
+[![CI](https://github.com/howdyitskyle/howdy-jekyll-theme/actions/workflows/ci.yml/badge.svg)](https://github.com/howdyitskyle/howdy-jekyll-theme/actions/workflows/ci.yml)
+[![Jekyll](https://img.shields.io/badge/jekyll-%E2%89%A53.9-008a1e)](https://jekyllrb.com/)
+[![Ruby](https://img.shields.io/badge/ruby-%E2%89%A53.0-red)](https://www.ruby-lang.org/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-green)](LICENSE)
+[![Lighthouse](https://img.shields.io/badge/lighthouse-all%20categories%20%E2%89%A50.9-008a1e)](lighthouserc.json)
+
+[**Live Demo**](https://howdyitskyle.github.io/howdy-jekyll-theme/) · [**Installation**](#installation) · [**Configuration**](#configuration) · [**Contributing**](#contributing)
+
+---
+
+## Requirements
+
+| Dependency | Version | Required |
+|---|---|---|
+| [Ruby](https://www.ruby-lang.org/) | >= 3.0 | Yes |
+| [Jekyll](https://jekyllrb.com/) | >= 3.9 | Yes |
+| [Bundler](https://bundler.io/) | >= 2.4 | Yes |
+| [Node.js](https://nodejs.org/) | >= 18 | For Lighthouse CI only |
+
+## Screenshots
+
+| Light Mode | Dark Mode |
+|---|---|
+| ![Light mode](assets/images/howdy-theme-light.png) | ![Dark mode](assets/images/howdy-theme-dark.png) |
+
+## Features
+
+| Feature | Description |
+|---|---|
+| **Gem-based** | Easy installation via RubyGems |
+| **Light & Dark** | Toggle with persistent preference, respects system preference |
+| **Responsive** | Desktop, tablet, and mobile optimized |
+| **Hero Carousel** | Touch/swipe-enabled, Swiper.js powered, fade transitions, autoplay |
+| **Projects** | Portfolio collection sorted by year with dedicated layouts |
+| **Blog** | jekyll-paginate-v2 powered with category color accents |
+| **SEO** | jekyll-seo-tag integration |
+| **RSS** | Automatic feed via jekyll-feed |
+| **TOC** | Auto-generated table of contents with configurable heading levels |
+| **Share** | Twitter, LinkedIn, Facebook, Reddit, Hacker News, WhatsApp, Telegram, Email, and copy-link buttons |
+| **Newsletter** | Mailchimp, Buttondown, or custom form support |
+| **Comments** | Giscus, Disqus, or Utterances |
+| **Analytics** | Google Analytics or Plausible |
+| **Company Logos** | Configurable "Trusted by" marquee section |
+| **Fonts** | Local DM Sans variable font + Chaumont Script logo font. Configurable via `fonts.primary` and `fonts.mono` |
+
+## Browser Compatibility
+
+| Browser | Version | Supported |
+|---|---|---|
+| Chrome | 120+ | ✅ |
+| Firefox | 115+ | ✅ |
+| Safari | 16+ | ✅ |
+| Edge | 120+ | ✅ |
+
+### Known Quirks
+
+- **Firefox scrollbars**: Uses `scrollbar-color` and `scrollbar-width` (native thin scrollbars). `::-webkit-scrollbar` rules are ignored.
+- **Safari `scroll-margin-top`**: Fully supported in Safari 15+. Older versions may require `padding-top` workaround on headings.
+- **Safari SVG `loading="lazy"`**: SVG images do not support lazy loading in Safari; they load eagerly regardless of attribute.
+
+## Automated Testing
+
+This theme includes Playwright end-to-end tests covering:
+
+| Test Suite | Coverage |
+|---|---|
+| `nav.spec.js` | Hamburger toggle, ESC/overlay close, desktop hide |
+| `theme.spec.js` | Light/dark toggle, localStorage persistence, reload restore |
+| `carousel.spec.js` | Dot navigation, swipe gestures, slide dimensions |
+| `toc.spec.js` | Anchor scroll, scroll-margin offset, TOC presence |
+| `transitions.spec.js` | Page fade-out, external/hash link exclusion |
+
+```bash
+npm test          # Run all tests
+npm run test:ui   # Interactive UI mode
+```
+
+## Installation
+
+### New Jekyll Site
+
+```bash
+jekyll new my-site --skip-bundle
+cd my-site
+```
+
+### Add the Theme
+
+Add to your `Gemfile`:
+
+```ruby
+gem "howdy-jekyll-theme"
+```
+
+Add to your `_config.yml`:
+
+```yaml
+theme: howdy-jekyll-theme
+```
+
+Then install:
+
+```bash
+bundle config --local path .bundle
+bundle install
+```
+
+> **Troubleshooting:** If you run into permission issues or conflicts with system gems, run `bundle config --local path .bundle` before `bundle install`. This vendors all gems into the project's `.bundle/` directory, keeping your environment isolated.
+
+### Existing Site
+
+Remove any `theme:` and `remote_theme:` lines from `_config.yml`, delete `_layouts`, `_includes`, and `_sass` directories, then follow the steps above.
+
+## Configuration
+
+### Minimal Setup
+
+```yaml
+# _config.yml
+title: "Your Name"
+description: "Your site description"
+author: "Your Name"
+email: "hi@yoursite.com"
+
+url: "https://yoursite.com"
+baseurl: ""
+
+theme: howdy-jekyll-theme
+
+plugins:
+  - jekyll-seo-tag
+  - jekyll-feed
+  - jekyll-sitemap
+  - jekyll-paginate-v2
+
+collections:
+  projects:
+    output: true
+    permalink: /projects/:slug/
+    sort_by: year
+
+pagination:
+  enabled: true
+  per_page: 5
+  permalink: "/blog/page:num/"
+  sort_reverse: true
+```
+
+### Hero Carousel
+
+Single image or multi-image carousel:
+
+```yaml
+# Single image
+hero_image: /assets/images/hero.png
+
+# Carousel (2+ images enables touch/swipe)
+hero_images:
+  - /assets/images/hero-1.jpg
+  - /assets/images/hero-2.jpg
+  - /assets/images/hero-3.jpg
+```
+
+### Navigation
+
+```yaml
+navigation:
+  - title: "Home"
+    url: "/"
+  - title: "Projects"
+    url: "/projects/"
+  - title: "Blog"
+    url: "/blog/"
+  - title: "About"
+    url: "/about"
+```
+
+### Social Links
+
+```yaml
+social:
+  github: "https://github.com/yourusername"
+  twitter: "https://x.com/yourusername"
+  linkedin: "https://linkedin.com/in/yourusername"
+  instagram: "https://instagram.com/yourusername"
+  dribbble: "https://dribbble.com/yourusername"
+```
+
+### Homepage Hero
+
+```yaml
+hero:
+  headline: "I&nbsp;shape product&nbsp;strategy<br>&amp;&nbsp;design experiences<br><span class=\"text-muted\">at scale</span>"
+  subtitle: "Your tagline or short description."
+  cta_text: "View case studies"
+  cta_url: "/projects/"
+```
+
+### About Page
+
+```yaml
+about_bio: "Your intro paragraph. <strong>HTML</strong> supported."
+about_headline: "Building products that<br>sit at the intersection<br><span class=\"text-muted\">of design and intelligence</span>"
+about_paragraph_2: "Your second paragraph."
+about_paragraph_3: "Your third paragraph."
+about_hero_image: "/assets/illustrations/designer.svg"
+about_resume:
+  enabled: true
+  text: "Download Resume"
+  url: "/assets/resume.pdf"
+
+# Testimonials (shown on about page)
+testimonials:
+  - quote: "A great testimonial quote."
+    name: "Jane Doe"
+    role: "Title, Company"
+```
+
+### Pagination
+
+```yaml
+pagination:
+  enabled: true
+  per_page: 5
+  permalink: "page:num/"
+  sort_reverse: true
+  prev_text: "Prev"
+  next_text: "Next"
+```
+
+### 404 Page
+
+```yaml
+page_404:
+  title: "Page Not Found"
+  message: "The page you're looking for doesn't exist or has been moved."
+  button_text: "Go Home"
+  button_url: "/"
+```
+
+### Fonts
+
+```yaml
+fonts:
+  primary: "DM Sans"      # DM Sans, Inter, Plus Jakarta Sans, Instrument Sans, Space Grotesk, Work Sans, Outfit, Manrope, Sora
+  mono: "Fragment Mono"   # Fragment Mono, JetBrains Mono, Fira Code
+```
+
+### Company Logos Marquee
+
+```yaml
+company_logos:
+  enabled: true
+  items:
+    - name: "Company 1"
+      width: 120
+      url: "https://company1.com"
+    - name: "Company 2"
+      width: 100
+      url: "https://company2.com"
+```
+
+### Newsletter, Comments, Analytics
+
+```yaml
+# Newsletter
+newsletter:
+  enabled: true
+  provider: buttondown      # mailchimp, buttondown, custom
+  action_url: "https://..." # form action URL
+  title: "Stay updated"
+
+# Comments
+comments:
+  enabled: false
+  provider: giscus          # giscus, disqus, utterances
+  giscus:
+    repo: "user/repo"
+    repo_id: "R_XXXXXXXX"
+    category: "Announcements"
+    category_id: "DIC_XXXXXXXX"
+
+# Analytics
+analytics:
+  provider: plausible       # google, plausible
+  plausible_domain: "yoursite.com"
+```
+
+## Content Types
+
+### Projects
+
+Create files in `_projects/`:
+
+```yaml
+---
+layout: project
+title: "Project Name"
+subtitle: "Brief description"
+category: "Web Design"
+year: "2025"
+image: /assets/images/project.jpg
+---
+Project content with markdown...
+```
+
+### Blog Posts
+
+Create files in `_posts/` with naming format `YYYY-MM-DD-slug.md`:
+
+```yaml
+---
+layout: post
+title: "Post Title"
+category: "Tutorials"      # Tutorials, Inspiration, Freebies, Interviews
+image: /assets/images/post.jpg
+---
+Post content...
+```
+
+> **Tip:** Use `<!--more-->` to define the excerpt shown on the blog index.
+
+## Customization
+
+### Override Styles
+
+Create `assets/css/main.scss` in your site:
+
+```scss
+---
+---
+@use "variables";
+@use "base";
+@use "typography";
+@use "layout";
+@use "components";
+@use "dark-mode";
+
+// Your styles here
+```
+
+### Override Partials
+
+Copy any `_includes/` or `_layouts/` file into your site's directory with the same path. Jekyll will use your version instead of the theme's.
+
+### User Color Palette
+
+Override the green accent in your `_config.yml`:
+
+```yaml
+colors:
+  accent_green: "#008a1e"
+```
+
+## Development
+
+```bash
+git clone https://github.com/howdyitskyle/howdy-jekyll-theme.git
+cd howdy-jekyll-theme
+bundle config --local path .bundle
+bundle install
+bundle exec jekyll serve
+```
+
+Visit `http://localhost:4000`.
+
+### Testing
+
+```bash
+bundle exec rake test             # HTML validation (links, images, scripts)
+bundle exec rake validate_config  # Config field checks
+bundle exec rake lighthouse       # Performance & accessibility audits
+bundle exec rake all              # All of the above
+```
+
+Lighthouse CI asserts accessibility >= 0.9 across 5 pages.
+
+### Build the Gem
+
+```bash
+gem build howdy-jekyll-theme.gemspec
+gem install ./howdy-jekyll-theme-1.0.0.gem
+```
+
+## File Structure
+
+```
+├── _includes/          # 12 partials (nav, hero-carousel, toc, share, etc.)
+├── _layouts/           # 7 layouts (default, home, page, post, project, blog, collection)
+├── _sass/              # 7 stylesheets (variables, base, typography, layout, components, dark-mode, user-colors)
+├── assets/
+│   ├── css/            # main.scss, swiper-bundle.min.css
+│   ├── js/             # hero-carousel.js, mobile-nav.js, theme-toggle.js, swiper-bundle.min.js
+│   ├── fonts/          # ChaumontScript-Regular.otf, DMSans-Variable.ttf, DMSans-Italic-Variable.ttf
+│   ├── images/
+│   └── illustrations/
+├── _projects/          # Demo portfolio items
+├── _posts/             # Demo blog posts
+├── blog/               # Blog index with pagination
+├── lib/                # Gem entry point
+├── _config.yml         # Fully documented configuration
+├── Rakefile            # Test runner
+└── lighthouserc.json   # Lighthouse CI assertions
+```
+
+## Contributing
+
+1. Fork the repo
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+Bug reports and feature requests are welcome at [Issues](https://github.com/howdyitskyle/howdy-jekyll-theme/issues).
+
+## License
+
+This theme is available under the [MIT License](LICENSE).
+
+## Acknowledgments
+
+- **[axeltmpl](https://axeltmpl.framer.website/)** — Design inspired by and remixed from this Framer template
+- **[Illustration Kit](https://illustrationkit.com/illustrations/ven)** — Free SVG illustrations by Pencil
+- **[Swiper.js](https://swiperjs.com/)** — Touch-enabled carousel (MIT)
+- **[Chaumont Script](https://fontmeme.com/fonts/chaumont-script-font/)** — by Måns Grebäck
+- **[Jekyll](https://jekyllrb.com/)** — Static site generator

data/_includes/analytics.html

@@ -0,0 +1,19 @@
+{% if site.analytics %}
+  {% if site.analytics.google_analytics %}
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.analytics.google_analytics }}"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '{{ site.analytics.google_analytics }}');
+    </script>
+  {% endif %}
+
+  {% if site.analytics.plausible %}
+    <!-- Plausible Analytics -->
+    {% assign script_url = site.analytics.plausible.script_url | default: "https://plausible.io/js/script.js" %}
+    {% assign domain = site.analytics.plausible.domain %}
+    <script defer data-domain="{{ domain }}" src="{{ script_url }}"></script>
+  {% endif %}
+{% endif %}

data/_includes/blog-pagination.html

@@ -0,0 +1,31 @@
+{% if paginator.total_pages > 1 %}
+  <div class="pagination">
+    {% if paginator.previous_page %}
+      <a href="{{ paginator.previous_page_path }}" class="btn btn-secondary">
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+          <path d="M9 3L4 8L9 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        {{ site.pagination.prev_text | default: "Prev" }}
+      </a>
+    {% endif %}
+
+    {% for page_num in (1..paginator.total_pages) %}
+      {% if page_num == paginator.page %}
+        <span class="pagination-page active">{{ page_num }}</span>
+      {% elsif page_num == 1 %}
+        <a href="{{ paginator.first_page_path }}" class="pagination-page">{{ page_num }}</a>
+      {% else %}
+        <a href="{{ paginator.first_page_path | append: 'page' | append: page_num | append: '/' }}" class="pagination-page">{{ page_num }}</a>
+      {% endif %}
+    {% endfor %}
+
+    {% if paginator.next_page %}
+      <a href="{{ paginator.next_page_path }}" class="btn btn-secondary post-nav-next">
+        {{ site.pagination.next_text | default: "Next" }}
+        <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" class="btn-arrow">
+          <path d="M7 3L12 8L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </a>
+    {% endif %}
+  </div>
+{% endif %}

data/_includes/comments.html

@@ -0,0 +1,46 @@
+{% if site.comments and site.comments.provider %}
+<div class="comments">
+  {% if site.comments.provider == "giscus" and site.comments.giscus %}
+  <script src="https://giscus.app/client.js"
+    data-repo="{{ site.comments.giscus.repo }}"
+    data-repo-id="{{ site.comments.giscus.repo_id }}"
+    data-category="{{ site.comments.giscus.category }}"
+    data-category-id="{{ site.comments.giscus.category_id }}"
+    data-mapping="{{ site.comments.giscus.mapping | default: 'pathname' }}"
+    data-strict="{{ site.comments.giscus.strict | default: 0 }}"
+    data-reactions-enabled="{{ site.comments.giscus.reactions_enabled | default: 1 }}"
+    data-emit-metadata="{{ site.comments.giscus.emit_metadata | default: 0 }}"
+    data-theme="{{ site.comments.giscus.theme | default: 'light' }}"
+    data-lang="{{ site.comments.giscus.lang | default: 'en' }}"
+    crossorigin="anonymous"
+    async>
+  </script>
+
+  {% elsif site.comments.provider == "disqus" and site.comments.disqus %}
+  <div id="disqus_thread"></div>
+  <script>
+    var disqus_config = function () {
+      this.page.url = '{{ page.url | absolute_url }}';
+      this.page.identifier = '{{ page.url }}';
+    };
+    (function() {
+      var d = document, s = d.createElement('script');
+      s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    })();
+  </script>
+  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+
+  {% elsif site.comments.provider == "utterances" and site.comments.utterances %}
+  <script src="https://utteranc.es/client.js"
+    repo="{{ site.comments.utterances.repo }}"
+    issue-term="{{ site.comments.utterances.issue_term | default: 'pathname' }}"
+    theme="{{ site.comments.utterances.theme | default: 'github-light' }}"
+    label="{{ site.comments.utterances.label | default: 'comments' }}"
+    crossorigin="anonymous"
+    async>
+  </script>
+  {% endif %}
+</div>
+{% endif %}

data/_includes/dark-mode-toggle.html

@@ -0,0 +1,18 @@
+<button class="theme-toggle" id="theme-toggle" aria-label="Toggle dark mode">
+  <!-- Sun icon (shown in dark mode) -->
+  <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <circle cx="12" cy="12" r="5"/>
+    <line x1="12" y1="1" x2="12" y2="3"/>
+    <line x1="12" y1="21" x2="12" y2="23"/>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
+    <line x1="1" y1="12" x2="3" y2="12"/>
+    <line x1="21" y1="12" x2="23" y2="12"/>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
+  </svg>
+  <!-- Moon icon (shown in light mode) -->
+  <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+  </svg>
+</button>