Posit branding and site improvements

.claude.md

@@ -0,0 +1,330 @@
+# Posit Open Source Website - Claude Instructions
+
+## 🚨 READ THIS FIRST 🚨
+
+**STRICT BRAND REQUIREMENTS - NO EXCEPTIONS:**
+- ✅ ONLY use Posit brand colors: blue, gray, red, orange, yellow, green, teal, burgundy
+- ✅ ONLY use approved fonts: Open Sans, Source Code Pro
+- ✅ ONLY use Posit design patterns: flat, minimal, no card styling on main content
+- ✅ **WCAG AA COMPLIANT**: All color combinations must meet WCAG 2.0 Level AA standards
+- ❌ NEVER use: slate, emerald, indigo, purple, pink, or any other Tailwind default colors
+- ❌ NEVER use: other fonts or unapproved design patterns
+- 🤔 If uncertain about brand compliance, ASK before implementing
+
+## Project Overview
+This is a Hugo static site for Posit's open source projects, using Tailwind CSS v4 with a custom Posit brand color palette.
+
+## ⚠️ CRITICAL: Brand Compliance
+
+**THIS SITE MUST ONLY USE POSIT BRAND ASSETS. NO EXCEPTIONS.**
+
+### Mandatory Requirements:
+- ✅ **ONLY** Posit brand colors (blue, gray, red, orange, yellow, green, teal, burgundy)
+- ✅ **ONLY** approved fonts (Open Sans, Source Code Pro)
+- ✅ **ONLY** Posit design patterns (flat, minimal, no card styling on main content)
+- ✅ **WCAG AA COMPLIANT**: All text and UI elements must meet accessibility standards
+
+### Absolutely Forbidden:
+- ❌ Default Tailwind colors (slate, emerald, indigo, purple, pink, etc.)
+- ❌ Other font families
+- ❌ Design patterns not approved by Posit brand guidelines
+
+**Before implementing ANY design change, verify it complies with Posit brand guidelines.**
+
+## Architecture Principles
+
+### Hugo Template Hierarchy - CRITICAL
+**ALWAYS think about template hierarchy before making changes:**
+
+```
+baseof.html (base layout - site-wide structure)
+  ↓ inherit from
+layouts/_default/* (default templates)
+  ↓ inherit from
+layouts/[section]/* (section-specific overrides)
+  ↓ inherit from
+layouts/page-name.html (page-specific)
+```
+
+**Rules:**
+- Site-wide layout changes (containers, padding, global structure) → `baseof.html`
+- Section-wide changes (all blog posts, all people pages) → `layouts/[section]/`
+- Page-specific changes (homepage only) → individual page template
+- Reusable components → `partials/`
+
+**DO NOT:**
+- Repeat container/padding code in individual templates
+- Add global styling to individual pages
+- Create one-off solutions that should be global
+
+### Current Global Container Pattern
+Defined in `themes/hugo-theme-tailwind/layouts/_default/baseof.html`:
+```html
+<main class="flex flex-auto justify-center">
+  <div class="w-full max-w-4xl lg:max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+    {{ block "main" . }}{{ end }}
+  </div>
+</main>
+```
+
+**Responsive Padding Scale:**
+- Mobile: `px-4` (16px / 1rem)
+- Tablet: `sm:px-6` (24px / 1.5rem)
+- Desktop: `lg:px-8` (32px / 2rem)
+
+All page templates inherit this automatically - don't add container wrappers in individual templates.
+
+## Design System
+
+### Posit Brand Colors
+
+**⚠️ STRICT REQUIREMENT: These are the ONLY colors allowed on this site.**
+
+**Approved Posit Color Palettes:**
+
+- **Blue** (#447099) - Primary brand color - 50-950 shades
+- **Gray** (#404041) - Neutral/text color - 50-950 shades
+- **Red** (#d44000) - Error/warning - 50-950 shades
+- **Orange** (#ee6331) - Accent - 50-950 shades
+- **Yellow** (#e7b10a) - Accent - 50-950 shades
+- **Green** (#72994e) - Success/active - 50-950 shades
+- **Teal** (#419599) - Accent - 50-950 shades
+- **Burgundy** (#9a4665) - Accent - 50-950 shades
+
+**NEVER use these Tailwind defaults:**
+- ❌ slate, emerald, indigo, purple, pink, rose
+- ❌ zinc, neutral, stone, amber, cyan, sky, violet, fuchsia
+
+**Color definitions:** `assets/css/main.css` in the `@theme` block
+
+**If you find non-Posit colors in the codebase, replace them:**
+- slate → gray
+- emerald → green
+- indigo → blue
+- purple → burgundy
+- pink → red
+
+These mappings are for fixing existing code ONLY. Never introduce non-Posit colors.
+
+### Typography
+
+**Fonts:**
+- **Body/Headings:** Open Sans (weights: 400, 500, 600, 700, 800)
+- **Code:** Source Code Pro (weights: 400, 500, 600, 700, 900)
+- Loaded via Google Fonts in `themes/hugo-theme-tailwind/layouts/partials/head.html`
+
+**Default Styles:**
+```css
+body, h1, h2, h3, h4, h5, h6 {
+  color: var(--color-gray-500); /* #404041 */
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: -0.2px;
+}
+```
+
+### Design Preferences
+
+**Main Content Areas:**
+- ✅ White background (`bg-white`)
+- ✅ Flat, minimal design
+- ❌ NO card backgrounds on main content
+- ❌ NO shadows on main content
+- ❌ NO rounded corners on main content
+- ❌ NO borders/rings on main content
+
+**Navigation:**
+- Clean, no pill backgrounds
+- Links use `hover:text-green-600`
+- Active links use `text-green-600`
+
+**Exceptions (buttons, cards):**
+- Resource type buttons can have shadows/backgrounds
+- Modal/dropdown overlays can have shadows
+- Sidebar components can have subtle styling
+
+### Accessibility (WCAG AA)
+
+**⚠️ CRITICAL: This site MUST be WCAG 2.0 Level AA compliant.**
+
+**Contrast Requirements:**
+- **Normal text** (< 18pt or < 14pt bold): Minimum 4.5:1 contrast ratio
+- **Large text** (≥ 18pt or ≥ 14pt bold): Minimum 3:1 contrast ratio
+- **UI components & graphics**: Minimum 3:1 contrast ratio
+
+**Testing:**
+- Use WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
+- Test all text/background combinations in both light AND dark modes
+- Test interactive states (hover, focus, active)
+- Verify badge/pill text on colored backgrounds
+
+**Common Patterns:**
+- Body text on white: `text-gray-600` or darker (gray-700, gray-800)
+- Body text on dark backgrounds: `text-gray-300` or lighter (gray-200, gray-100)
+- Headings: Use gray-800 (light) / gray-100 (dark)
+- Links: Ensure sufficient contrast + underline or other non-color indicator
+
+**Before implementing any color combination:**
+1. Check contrast ratio meets minimum requirements
+2. Test in both light and dark modes
+3. If below threshold, use a darker/lighter shade from the color palette
+
+## Dark Mode Color System
+
+**This site uses an automatic dark mode that follows system preferences.**
+
+**Light Mode:**
+- Background: `bg-white`
+- Cards: `bg-white border-gray-200`
+- Text: `text-gray-800` (headings), `text-gray-600` (body)
+
+**Dark Mode:**
+- Background: `dark:bg-blue-1000` (#0E1013)
+- Cards: `dark:bg-blue-950 dark:border-blue-900`
+- Dividers: `dark:border-blue-700`
+- Text: `dark:text-gray-100` (headings), `dark:text-gray-300` (body)
+- Secondary text: `dark:text-gray-400`
+
+**Implementation:**
+- Dark mode follows system preferences automatically (no manual toggle)
+- JavaScript in `head.html` detects `prefers-color-scheme: dark`
+- All components must have both light and dark variants
+
+## File Structure
+
+### CSS
+- **Source:** `assets/css/main.css` (edit this)
+- **Compiled:** `assets/css/index.css` (generated by Hugo/Tailwind, don't edit)
+- **Config:** `tailwind.config.js`
+
+After CSS changes, always run `hugo` to rebuild.
+
+### Templates
+- **Theme templates:** `themes/hugo-theme-tailwind/layouts/`
+- **Site overrides:** `layouts/` (root level - higher priority)
+- **Partials:** `themes/hugo-theme-tailwind/layouts/partials/`
+
+### Key Files
+- Base layout: `themes/hugo-theme-tailwind/layouts/_default/baseof.html`
+- Homepage: `layouts/index.html`
+- Header: `themes/hugo-theme-tailwind/layouts/partials/header.html`
+- Menu: `themes/hugo-theme-tailwind/layouts/partials/menu.html`
+
+## Development Workflow
+
+### Hugo Server
+- Running: `hugo server -D` (runs on port 1313)
+- Check if running: `ps aux | grep "hugo server"`
+- Auto-reload should work automatically
+- Force reload: touch any template file
+
+### Browser Cache
+Safari can be aggressive with caching:
+- Hard refresh: `Cmd + Option + R` or `Cmd + Shift + R`
+- Clear cache: `Cmd + Option + E` then refresh
+
+### Build Commands
+```bash
+hugo                    # Build site
+hugo --cleanDestinationDir  # Clean build
+hugo server -D          # Dev server with drafts
+```
+
+## Common Patterns
+
+### Replacing Colors Site-Wide
+Use `find` with `sed` for bulk replacements:
+```bash
+find /path/to/layouts -name "*.html" -type f -exec sed -i '' 's/old-color/new-color/g' {} +
+```
+
+### Searching for Patterns
+Use Grep tool with regex for finding color classes:
+```bash
+# Example: find all slate/emerald/indigo colors
+grep -r "(slate|emerald|indigo)-(50|100|200|...)" layouts/
+```
+
+## Git Workflow
+
+### Branch
+- Current branch: `posity`
+- Main branch: `main`
+
+### Commits
+- Use conventional commit format
+- Include co-author tag:
+```
+commit message here
+
+Co-Authored-By: Claude <noreply@anthropic.com>
+```
+
+## Troubleshooting
+
+### Changes Not Showing
+1. Check if `hugo server` is running
+2. Hard refresh browser (Safari: Cmd+Option+R)
+3. Check if you edited the right file (theme vs site override)
+4. Rebuild: `hugo --cleanDestinationDir`
+5. Touch template to trigger reload
+
+### Colors Not Updating
+1. Verify changes in `assets/css/main.css` (source file)
+2. Run `hugo` to rebuild CSS
+3. Check compiled CSS in `assets/css/index.css`
+4. Clear browser cache
+
+### Layout Issues
+1. Check template hierarchy - are you editing the right level?
+2. Verify baseof.html for global structure
+3. Check for duplicate container wrappers
+4. Use browser dev tools to inspect actual classes
+
+## Decision-Making Framework
+
+Before making any change, ask:
+
+1. **Is this global?** → Edit `baseof.html` or `main.css`
+2. **Is this section-wide?** → Edit section template in `layouts/[section]/`
+3. **Is this page-specific?** → Edit individual page template
+4. **Is this a reusable component?** → Create/edit partial
+
+**When in doubt, bias toward higher-level solutions (more global, more reusable).**
+
+## Proposing New Design Elements
+
+**If you need to suggest colors, fonts, or design patterns not in this document:**
+
+1. ❌ **DO NOT** use default Tailwind colors as placeholders
+2. ❌ **DO NOT** use system fonts or Google Font defaults
+3. ✅ **DO** ask the user which Posit brand color to use
+4. ✅ **DO** stick to existing approved Posit assets
+5. ✅ **DO** explain why the change is needed and wait for approval
+
+**Example:**
+- Bad: "I'll use indigo-600 for the button"
+- Good: "Which Posit color should I use for this button? Options: blue-600 (primary brand), green-600 (success), or teal-600 (accent)"
+
+## Quality Checklist
+
+Before completing any styling task:
+- [ ] **BRAND COMPLIANCE: Only Posit colors used (blue, gray, red, orange, yellow, green, teal, burgundy)**
+- [ ] **BRAND COMPLIANCE: Only approved fonts used (Open Sans, Source Code Pro)**
+- [ ] **BRAND COMPLIANCE: Design follows Posit patterns (flat, minimal)**
+- [ ] No non-Posit colors (slate, emerald, indigo, purple, pink, etc.)
+- [ ] No redundant container/padding code
+- [ ] Changes applied at appropriate hierarchy level
+- [ ] Responsive padding works on all breakpoints
+- [ ] Site rebuilt with `hugo`
+- [ ] Tested in browser (hard refresh)
+- [ ] No card styling on main content areas
+
+**If you cannot verify brand compliance, ASK before implementing.**
+
+## Notes
+- Hugo version: v0.152.2+extended
+- Tailwind CSS: v4
+- The site uses a custom theme: `hugo-theme-tailwind`
+- Content managed through Hugo's content directory
+- Taxonomies: people, software, languages, events, resources

.github/workflows/deploy.yml

@@ -2,6 +2,7 @@ name: Build and Deploy to Netlify
 
 on:
   push:
+    branches: ["main"]
   pull_request:
     branches: ["main"]
   workflow_dispatch: