58e586f09b
- Update all main markdown files (INDEX.md, LEARNING-ROADMAP.md, QUICK_REFERENCE.md, CONTRIBUTING.md, claude_concepts_guide.md, resources.md) with new responsive picture element - Add logo to all subdirectory README files in feature folders (01-10) and plugins - Replace old markdown image syntax with HTML picture element for dark/light mode adaptation - Logo automatically displays dark mode version when system prefers dark mode - Maintain correct relative paths for all nesting levels (../, ../../, etc.) - Update README.md with new logo syntax All markdown files now use the new V2.0 starburst logo design with professional dark/light mode support.
2.4 KiB
2.4 KiB
Quick Start - Brand Assets
Copy Assets to Your Project
# Copy all resources to your web project
cp -r resources/ /path/to/your/website/
# Or just the favicons for web
cp resources/favicons/* /path/to/your/website/public/
Add to HTML (Copy & Paste)
<!-- Favicons -->
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg" sizes="32x32">
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
<meta name="theme-color" content="#0d1f0d">
Use in Markdown/Documentation
# Claude How To
Recommended Sizes
| Purpose | Size | File |
|---|---|---|
| Website header | 800×200 | logos/claude-howto-logo.svg |
| App icon | 256×256 | icons/claude-howto-icon.svg |
| Browser tab | 32×32 | favicons/favicon-32.svg |
| Mobile home screen | 128×128 | favicons/favicon-128.svg |
| Desktop app | 256×256 | favicons/favicon-256.svg |
| Small avatar | 64×64 | favicons/favicon-64.svg |
Color Values
/* Use these in your CSS */
--color-bg-dark: #0d1f0d;
--color-emerald: #10b981;
--color-emerald-dark: #059669;
--color-emerald-forest: #047857;
--color-mint: #6ee7b7;
--color-mint-light: #34d399;
Icon Design Meaning
Ascending Hexagons Represent:
- 🟢 Bottom (Dark Emerald) = Beginner (Levels 1-3)
- 🟢 Middle (Bright Emerald) = Intermediate (Levels 4-6)
- 🟢 Top (Mint) = Advanced (Levels 7-10)
This symbolizes the learning progression from basics to mastery.
What to Use Where
Website
- Header: Logo (
logos/claude-howto-logo.svg) - Favicon: 32-bit (
favicons/favicon-32.svg) - Social preview: Icon (
icons/claude-howto-icon.svg)
GitHub
- README badge: Icon (
icons/claude-howto-icon.svg) at 64-128px - Repository avatar: Icon (
icons/claude-howto-icon.svg)
Social Media
- Profile picture: Icon (
icons/claude-howto-icon.svg) - Banner: Logo (
logos/claude-howto-logo.svg) - Thumbnail: Icon at 256×256px
Documentation
- Chapter headers: Logo or icon (scaled to fit)
- Navigation icons: Favicon (32-64px)
See README.md for complete documentation.