From 059c46f2fefe0016f56ba41cbf3c0fdf8f9f6857 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 12 Nov 2025 22:45:48 +0000
Subject: [PATCH] Add CLAUDE.md with project documentation and architecture
 guidance

---
 CLAUDE.md | 58 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..6780d9d
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+HabermasCSS is an educational static website project designed to teach HTML/CSS fundamentals through an exercise about Habermas and the Public Sphere. Students edit the files directly to learn web development concepts.
+
+## Development Workflow
+
+This is a static HTML/CSS/JavaScript project with no build system. To develop:
+
+```sh
+# Simply open index.html in a browser
+open index.html   # macOS
+xdg-open index.html   # Linux
+start index.html   # Windows
+```
+
+Or use a local development server:
+```sh
+python -m http.server 8000   # Python 3
+# Then visit http://localhost:8000
+```
+
+No compilation, bundling, or transpilation is required.
+
+## Architecture
+
+### File Structure
+- `index.html` - Main HTML page with semantic structure (header, main/sections, footer)
+- `style.css` - Styling with modern CSS (flexbox, grid, transitions)
+- `script.js` - DOM manipulation and interactive behavior
+- `index.md` - Markdown version demonstrating GFM limitations
+
+### Key Design Patterns
+
+**Layout**: The page uses a combination of flexbox (body) and CSS Grid (main content area) for responsive two-column layout:
+- Body uses `flex-direction: column` for vertical stacking
+- Main uses `grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))` for responsive columns
+
+**JavaScript Timing**: The setup function runs with a 3-second delay via `window.onload = setTimeout(setup, 3000)` (index.html:20). This creates a dramatic reveal effect for the #hello element.
+
+**CSS Transitions**: The project demonstrates CSS transitions in two ways:
+- Hover effect on #badnews that rotates and expands the text
+- Button click toggles the .do-transition class for animated transformation
+
+**DOM Manipulation Flow**:
+1. Page loads with #hello element hidden (opacity: 0%)
+2. After 3 seconds, setup() adds .bugout class to reveal the element
+3. Button click toggles between "Click Me" and "Make it Stop!" with .do-transition animation
+
+### Educational Context
+
+This is a teaching repository. The code intentionally uses various HTML tags and CSS techniques as examples for students. When making changes:
+- Maintain the educational value and variety of HTML/CSS techniques
+- Keep the focus on CSS fundamentals (transitions, layouts, selectors)
+- Preserve the quirky interactive elements (they're teaching examples)