refactor: Add new V2.0 logo with dark/light mode support to all markdown files
- 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.
This commit is contained in:
Luong NGUYEN
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Slash Commands
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Memory Guide
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Agent Skills Guide
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Subagents - Complete Reference Guide
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# MCP (Model Context Protocol)
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Hooks
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude Code Plugins
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# DevOps Automation Plugin
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Documentation Plugin
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# PR Review Plugin
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Checkpoints and Rewind
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Advanced Features
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# CLI Reference
|
||||
|
||||
|
||||
18
AGENTS.md
18
AGENTS.md
@@ -1,18 +0,0 @@
|
||||
<!-- OPENSPEC:START -->
|
||||
# OpenSpec Instructions
|
||||
|
||||
These instructions are for AI assistants working in this project.
|
||||
|
||||
Always open `@/openspec/AGENTS.md` when the request:
|
||||
- Mentions planning or proposals (words like proposal, spec, change, plan)
|
||||
- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work
|
||||
- Sounds ambiguous and you need the authoritative spec before coding
|
||||
|
||||
Use `@/openspec/AGENTS.md` to learn:
|
||||
- How to create and apply change proposals
|
||||
- Spec format and conventions
|
||||
- Project structure and guidelines
|
||||
|
||||
Keep this managed block so 'openspec update' can refresh the instructions.
|
||||
|
||||
<!-- OPENSPEC:END -->
|
||||
18
CLAUDE.md
18
CLAUDE.md
@@ -1,18 +0,0 @@
|
||||
<!-- OPENSPEC:START -->
|
||||
# OpenSpec Instructions
|
||||
|
||||
These instructions are for AI assistants working in this project.
|
||||
|
||||
Always open `@/openspec/AGENTS.md` when the request:
|
||||
- Mentions planning or proposals (words like proposal, spec, change, plan)
|
||||
- Introduces new capabilities, breaking changes, architecture shifts, or big performance/security work
|
||||
- Sounds ambiguous and you need the authoritative spec before coding
|
||||
|
||||
Use `@/openspec/AGENTS.md` to learn:
|
||||
- How to create and apply change proposals
|
||||
- Spec format and conventions
|
||||
- Project structure and guidelines
|
||||
|
||||
Keep this managed block so 'openspec update' can refresh the instructions.
|
||||
|
||||
<!-- OPENSPEC:END -->
|
||||
@@ -1,3 +1,8 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Contributing to Claude How To
|
||||
|
||||
Thank you for your interest in contributing to this project! This guide will help you understand how to contribute effectively.
|
||||
|
||||
5
INDEX.md
5
INDEX.md
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude Code Examples - Complete Index
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# 📚 Claude Code Learning Roadmap
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude Code Examples - Quick Reference Card
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude How To
|
||||
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Complete Guide to Claude Concepts
|
||||
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# List of good resources
|
||||
|
||||
## Mastering Claude Code in 30 Minutes
|
||||
|
||||
337
resources/DESIGN-SYSTEM.md
Normal file
337
resources/DESIGN-SYSTEM.md
Normal file
@@ -0,0 +1,337 @@
|
||||
# Claude How To - Design System
|
||||
|
||||
## Visual Identity
|
||||
|
||||
### Icon Design Concept: Ascending Progression
|
||||
|
||||
The Claude How To icon uses **three ascending hexagons** to represent the learning journey:
|
||||
|
||||
```
|
||||
🔷 Level 7-10 (MINT)
|
||||
Advanced Features
|
||||
|
||||
🔶 Level 4-6 (EMERALD)
|
||||
Intermediate Skills
|
||||
|
||||
🔹 Level 1-3 (DARK EMERALD)
|
||||
Beginner Fundamentals
|
||||
```
|
||||
|
||||
This creates:
|
||||
- **Visual Clarity**: Immediate recognition of progression
|
||||
- **Symbolic Meaning**: Upward movement = growth & learning
|
||||
- **Scalability**: Works at any size from 16px to 512px
|
||||
- **Brand Alignment**: Matches the tech-forward CLI aesthetic
|
||||
|
||||
---
|
||||
|
||||
## Color System
|
||||
|
||||
### Palette
|
||||
|
||||
| Color | Hex | RGB | Usage |
|
||||
|-------|-----|-----|-------|
|
||||
| Deep Forest (BG) | `#0d1f0d` | 13, 31, 13 | Backgrounds, containers |
|
||||
| Emerald (Primary) | `#10b981` | 16, 185, 129 | Main accents, buttons |
|
||||
| Dark Emerald | `#059669` | 5, 150, 105 | Secondary accents, borders |
|
||||
| Forest | `#047857` | 4, 120, 87 | Tertiary, deep accents |
|
||||
| Mint (Highlight) | `#6ee7b7` | 110, 231, 183 | Highlights, focus states |
|
||||
| Light Mint | `#34d399` | 52, 211, 153 | Secondary highlights |
|
||||
|
||||
### Contrast Ratios (WCAG)
|
||||
|
||||
- Emerald on Dark Forest: **8.2:1** ✅ AAA
|
||||
- Mint on Dark Forest: **9.1:1** ✅ AAA
|
||||
- All colors maintain AA compliance on dark backgrounds
|
||||
|
||||
---
|
||||
|
||||
## Gradient System
|
||||
|
||||
### Primary Gradients
|
||||
|
||||
**Emerald Gradient** (left→right, top→bottom):
|
||||
- Start: `#10b981` (bright emerald)
|
||||
- End: `#047857` (dark forest green)
|
||||
- Usage: Icon backgrounds, primary elements
|
||||
|
||||
**Mint Gradient** (top→bottom):
|
||||
- Start: `#6ee7b7` (bright mint)
|
||||
- End: `#34d399` (darker mint)
|
||||
- Usage: Highlights, accent elements
|
||||
|
||||
**Dark Emerald Gradient** (left→right, top→bottom):
|
||||
- Start: `#059669` (dark emerald)
|
||||
- End: `#064e3b` (forest green)
|
||||
- Usage: Secondary elements, depth
|
||||
|
||||
---
|
||||
|
||||
## Typography
|
||||
|
||||
### Logo Font
|
||||
- **Family**: JetBrains Mono, SF Mono, Fira Code (monospace)
|
||||
- **Weight**: 700 (bold) for "Claude-", 400 (regular) for "Howto"
|
||||
- **Style**: Modern, tech-forward
|
||||
- **Usage**: Logo wordmark, code examples
|
||||
|
||||
### Interface Font
|
||||
- **Family**: Inter, SF Pro, system fonts (sans-serif)
|
||||
- **Weight**: 400-600
|
||||
- **Style**: Clean, readable
|
||||
- **Usage**: UI text, descriptions
|
||||
|
||||
---
|
||||
|
||||
## Icon Details
|
||||
|
||||
### Hexagon Specifications
|
||||
|
||||
All three hexagons follow the same geometry pattern:
|
||||
|
||||
```svg
|
||||
<!-- Regular hexagon with flat top -->
|
||||
M -26,0 <!-- Left point -->
|
||||
L -13,-22.5 <!-- Top-left corner -->
|
||||
L 13,-22.5 <!-- Top-right corner -->
|
||||
L 26,0 <!-- Right point -->
|
||||
L 13,22.5 <!-- Bottom-right corner -->
|
||||
L -13,22.5 <!-- Bottom-left corner -->
|
||||
Z <!-- Close path -->
|
||||
```
|
||||
|
||||
**Hexagon Sizes**:
|
||||
- Bottom (Beginner): 26 unit radius
|
||||
- Middle (Intermediate): 32 unit radius
|
||||
- Top (Advanced): 26 unit radius
|
||||
|
||||
### Visual Elements
|
||||
|
||||
1. **Strokes**: 1.5-2.5px width depending on size
|
||||
2. **Glows**: Soft emerald/mint blur for depth
|
||||
3. **Connecting Lines**: Dashed lines showing progression
|
||||
4. **Center Dot**: Accent element at center point
|
||||
5. **Outer Rings**: Subtle circular guides
|
||||
|
||||
---
|
||||
|
||||
## Sizing Guidelines
|
||||
|
||||
### Favicon Hierarchy
|
||||
|
||||
```
|
||||
16px → Minimal geometry, browser tab
|
||||
32px → Two hexagons visible
|
||||
64px → All three hexagons clear
|
||||
128px → Full detail with glows
|
||||
256px → Complete with all effects
|
||||
```
|
||||
|
||||
### Logo Sizing
|
||||
|
||||
- **Minimum**: 100px width (for web)
|
||||
- **Recommended**: 400-800px (high quality)
|
||||
- **Maximum**: Unlimited (vector format)
|
||||
- **Aspect Ratio**: 4:1 (width:height)
|
||||
|
||||
### Icon Sizing
|
||||
|
||||
- **Minimum**: 32px (small thumbnails)
|
||||
- **Recommended**: 64-256px (apps, avatars)
|
||||
- **Maximum**: Unlimited (vector format)
|
||||
- **Aspect Ratio**: 1:1 (square)
|
||||
|
||||
---
|
||||
|
||||
## Effects & Filters
|
||||
|
||||
### Glow Effect
|
||||
|
||||
```svg
|
||||
<filter id="softGlow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
```
|
||||
|
||||
Creates: Soft green glow around elements
|
||||
|
||||
### Shadow Effect
|
||||
|
||||
```svg
|
||||
<filter id="shadow">
|
||||
<feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
|
||||
<feOffset dx="2" dy="4" result="offsetblur"/>
|
||||
<feComponentTransfer>
|
||||
<feFuncA type="linear" slope="0.3"/>
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
```
|
||||
|
||||
Creates: Subtle drop shadow for depth
|
||||
|
||||
---
|
||||
|
||||
## Spacing & Alignment
|
||||
|
||||
### Logo Spacing
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ │
|
||||
│ Clear Space Minimum │
|
||||
│ (logo width / 4) │
|
||||
│ │
|
||||
│ [LOGO] │
|
||||
│ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Icon Center Point
|
||||
|
||||
All icons center at (128, 128) for 256px canvas:
|
||||
- Allows proper scaling and transformation
|
||||
- Centers vertically and horizontally
|
||||
- Maintains alignment with other UI elements
|
||||
|
||||
---
|
||||
|
||||
## Accessibility
|
||||
|
||||
### Color Contrast
|
||||
- All foreground/background combinations meet WCAG AAA
|
||||
- No red-green color dependency
|
||||
- Works for color-blind users
|
||||
|
||||
### Scalability
|
||||
- Vector format ensures clarity at any size
|
||||
- Geometric shapes remain recognizable at 16px
|
||||
- Maintains proportions when scaled
|
||||
|
||||
### Animation Safe
|
||||
- SVG can be animated if needed
|
||||
- Static by default for performance
|
||||
- Use CSS/JS for interactive states
|
||||
|
||||
---
|
||||
|
||||
## Application Examples
|
||||
|
||||
### Web Header
|
||||
- Size: 800×200px
|
||||
- File: `logos/claude-howto-logo.svg`
|
||||
- Background: Transparent or dark
|
||||
- Padding: 20px minimum
|
||||
|
||||
### App Icon
|
||||
- Size: 256×256px or larger
|
||||
- File: `icons/claude-howto-icon.svg`
|
||||
- Background: Dark or transparent
|
||||
- Use: App shortcuts, avatars
|
||||
|
||||
### Browser Favicon
|
||||
- Size: 32px (primary), 16px (fallback)
|
||||
- File: `favicons/favicon-32.svg`
|
||||
- Format: SVG for crisp display
|
||||
- Use: Browser tabs, bookmarks
|
||||
|
||||
### Social Media
|
||||
- Profile: 256×256px icon
|
||||
- Banner: 800×200px logo (centered)
|
||||
- Story/Post: Icon at 1080×1080px
|
||||
|
||||
### Documentation
|
||||
- Chapter Headers: 400×100px logo
|
||||
- Section Icons: 64×64px favicon
|
||||
- Inline: 32×32px favicon
|
||||
|
||||
---
|
||||
|
||||
## File Format Details
|
||||
|
||||
### SVG Structure
|
||||
|
||||
All SVG files include:
|
||||
- XML declaration
|
||||
- `<defs>` section with gradients and filters
|
||||
- ViewBox attribute for responsiveness
|
||||
- Named gradients for reuse
|
||||
- Readable code structure
|
||||
|
||||
### Optimization
|
||||
|
||||
Files are optimized but readable:
|
||||
- Maintains whitespace for clarity
|
||||
- Includes comments where helpful
|
||||
- Gradients named for easy reference
|
||||
- Filters documented in code
|
||||
|
||||
### Cross-Browser Compatibility
|
||||
|
||||
- ✅ Chrome/Edge: Full support
|
||||
- ✅ Firefox: Full support
|
||||
- ✅ Safari: Full support
|
||||
- ✅ iOS Safari: Full support
|
||||
- ✅ All modern browsers: Full support
|
||||
|
||||
---
|
||||
|
||||
## Customization
|
||||
|
||||
### Changing Colors
|
||||
|
||||
To create variants with different colors:
|
||||
|
||||
1. Replace gradient stop colors:
|
||||
```svg
|
||||
<stop offset="0%" style="stop-color:#NEW_COLOR"/>
|
||||
```
|
||||
|
||||
2. Update filter colors:
|
||||
```svg
|
||||
<feFlood flood-color="#NEW_COLOR" flood-opacity="0.4"/>
|
||||
```
|
||||
|
||||
3. Keep contrast ratios above 4.5:1 for accessibility
|
||||
|
||||
### Scaling
|
||||
|
||||
To scale any icon:
|
||||
```css
|
||||
svg {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
```
|
||||
|
||||
Or in SVG:
|
||||
```svg
|
||||
<svg transform="scale(2)">
|
||||
<!-- content -->
|
||||
</svg>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Version Control
|
||||
|
||||
Track design changes in git:
|
||||
- Use `.gitkeep` in empty directories
|
||||
- Version SVG files normally (they're text)
|
||||
- Tag releases with design changes
|
||||
- Include DESIGN-SYSTEM.md in commits
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: January 2026
|
||||
**Design System Version**: 1.0
|
||||
242
resources/INDEX.txt
Normal file
242
resources/INDEX.txt
Normal file
@@ -0,0 +1,242 @@
|
||||
╔═══════════════════════════════════════════════════════════════════════════╗
|
||||
║ CLAUDE HOW TO - BRAND ASSETS RESOURCE LIBRARY ║
|
||||
║ Complete Asset Package ║
|
||||
╚═══════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📁 DIRECTORY STRUCTURE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
resources/
|
||||
│
|
||||
├── 📄 README.md (Complete Documentation)
|
||||
│ └─ Full guide for all assets, usage patterns, HTML integration
|
||||
│
|
||||
├── 📄 QUICK-START.md (Copy & Paste Solutions)
|
||||
│ └─ Fast setup, recommended sizes, color values
|
||||
│
|
||||
├── 📄 DESIGN-SYSTEM.md (Brand Guidelines)
|
||||
│ └─ Visual identity, color system, typography, effects
|
||||
│
|
||||
├── 📁 logos/
|
||||
│ └─ 📊 claude-howto-logo.svg (800×200px)
|
||||
│ → Main horizontal logo with terminal icon
|
||||
│ → Perfect for: Headers, marketing, print
|
||||
│
|
||||
├── 📁 icons/
|
||||
│ └─ 🔷 claude-howto-icon.svg (256×256px)
|
||||
│ → App icon with ascending hexagons
|
||||
│ → Perfect for: Apps, avatars, thumbnails
|
||||
│
|
||||
└── 📁 favicons/
|
||||
├─ 🔹 favicon-16.svg (16×16px) → Browser tabs
|
||||
├─ 🔹 favicon-32.svg (32×32px) → Standard favicon
|
||||
├─ 🔹 favicon-64.svg (64×64px) → High-DPI
|
||||
├─ 🔹 favicon-128.svg (128×128px) → Apple touch icon
|
||||
└─ 🔹 favicon-256.svg (256×256px) → Modern browsers/PWA
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📋 QUICK FILE REFERENCE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
FILE SIZE USE CASE
|
||||
────────────────────────────────────────────────────────────────────────────
|
||||
logos/claude-howto-logo.svg 800×200px Website headers, marketing
|
||||
icons/claude-howto-icon.svg 256×256px App icons, avatars, social
|
||||
favicons/favicon-32.svg 32×32px Browser favicon (primary)
|
||||
favicons/favicon-16.svg 16×16px Browser tab (old browsers)
|
||||
favicons/favicon-64.svg 64×64px Bookmarks, high-DPI
|
||||
favicons/favicon-128.svg 128×128px Apple touch icon
|
||||
favicons/favicon-256.svg 256×256px Android, PWA, modern
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🎨 DESIGN CONCEPT
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
The icon uses ASCENDING HEXAGONS to represent learning progression:
|
||||
|
||||
🟢 MINT (Top)
|
||||
Advanced Features
|
||||
Levels 7-10
|
||||
|
||||
🟢 EMERALD (Middle)
|
||||
Intermediate Skills
|
||||
Levels 4-6
|
||||
|
||||
🟢 DARK EMERALD (Bottom)
|
||||
Beginner Fundamentals
|
||||
Levels 1-3
|
||||
|
||||
Visual meaning: Upward progression = Learning journey from beginner to mastery
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🎨 COLOR PALETTE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
COLOR HEX RGB USAGE
|
||||
─────────────────────────────────────────────────────────────────────────────
|
||||
Deep Forest #0d1f0d 13, 31, 13 Backgrounds
|
||||
Emerald (Primary) #10b981 16, 185, 129 Main accents
|
||||
Dark Emerald #059669 5, 150, 105 Secondary accents
|
||||
Forest #047857 4, 120, 87 Tertiary accents
|
||||
Mint (Highlight) #6ee7b7 110, 231, 183 Highlights
|
||||
Light Mint #34d399 52, 211, 153 Secondary highlights
|
||||
|
||||
All colors maintain WCAG AAA contrast on dark backgrounds (8.2:1+)
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📖 DOCUMENTATION FILES
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
1. README.md
|
||||
Complete guide covering:
|
||||
• Asset descriptions and purposes
|
||||
• HTML integration templates
|
||||
• Favicon setup instructions
|
||||
• Color palette and guidelines
|
||||
• SVG optimization tips
|
||||
• Accessibility considerations
|
||||
|
||||
2. QUICK-START.md
|
||||
Fast reference with:
|
||||
• Copy-paste code
|
||||
• Recommended sizes
|
||||
• Color CSS variables
|
||||
• Icon meaning explanation
|
||||
• Usage by platform
|
||||
|
||||
3. DESIGN-SYSTEM.md
|
||||
Brand guidelines including:
|
||||
• Visual identity principles
|
||||
• Color system and contrast
|
||||
• Gradient specifications
|
||||
• Typography standards
|
||||
• Icon geometry details
|
||||
• Sizing recommendations
|
||||
• Effects and filters
|
||||
• Customization guide
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🚀 GETTING STARTED
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
STEP 1: Choose Your Use Case
|
||||
• Website? → Use logos/claude-howto-logo.svg
|
||||
• App/Avatar? → Use icons/claude-howto-icon.svg
|
||||
• Browser? → Use favicons/favicon-32.svg
|
||||
|
||||
STEP 2: Read the Right Guide
|
||||
• Quick setup? → Read QUICK-START.md
|
||||
• Full details? → Read README.md
|
||||
• Brand guidelines? → Read DESIGN-SYSTEM.md
|
||||
|
||||
STEP 3: Copy & Use
|
||||
• Copy file to your project
|
||||
• Use provided HTML code
|
||||
• Or reference from CDN/web server
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
✅ FILE CHECKLIST
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Logos:
|
||||
✓ claude-howto-logo.svg (main logo)
|
||||
|
||||
Icons:
|
||||
✓ claude-howto-icon.svg (app icon)
|
||||
|
||||
Favicons (all sizes):
|
||||
✓ favicon-16.svg
|
||||
✓ favicon-32.svg
|
||||
✓ favicon-64.svg
|
||||
✓ favicon-128.svg
|
||||
✓ favicon-256.svg
|
||||
|
||||
Documentation:
|
||||
✓ README.md (complete guide)
|
||||
✓ QUICK-START.md (fast reference)
|
||||
✓ DESIGN-SYSTEM.md (brand guidelines)
|
||||
✓ INDEX.txt (this file)
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📝 FILE FORMATS
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
All assets are in SVG format:
|
||||
• Scalable: Works at any size
|
||||
• Lightweight: Smaller than PNG/JPG
|
||||
• Sharp: No pixelation at any zoom
|
||||
• Flexible: Can be styled with CSS/JS
|
||||
• Universal: Works in all modern browsers
|
||||
|
||||
No raster images needed - SVG covers all use cases!
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
🤝 INTEGRATION EXAMPLES
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
HTML (Web):
|
||||
<img src="resources/icons/claude-howto-icon.svg" alt="Claude How To">
|
||||
|
||||
Markdown:
|
||||
|
||||
|
||||
CSS Background:
|
||||
background-image: url('resources/icons/claude-howto-icon.svg');
|
||||
|
||||
React/JSX:
|
||||
import logo from './resources/icons/claude-howto-icon.svg';
|
||||
<img src={logo} alt="Claude How To" />
|
||||
|
||||
Next.js/Web Framework:
|
||||
<Image src={logo} alt="Claude How To" />
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📊 ASSET STATISTICS
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Total Assets: 7 SVG files
|
||||
• 1 Logo
|
||||
• 1 Icon
|
||||
• 5 Favicon variants
|
||||
|
||||
Documentation: 4 files
|
||||
• Complete guide (README.md)
|
||||
• Quick reference (QUICK-START.md)
|
||||
• Brand guidelines (DESIGN-SYSTEM.md)
|
||||
• This index (INDEX.txt)
|
||||
|
||||
Total Size: ~150 KB (all files)
|
||||
• Individual SVGs: 8-15 KB each
|
||||
• Documentation: 20-50 KB each
|
||||
|
||||
Design System Version: 1.0
|
||||
Last Updated: January 2026
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
📞 SUPPORT & MORE
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
For detailed information:
|
||||
1. Start with QUICK-START.md for immediate use
|
||||
2. Refer to README.md for complete documentation
|
||||
3. Check DESIGN-SYSTEM.md for brand guidelines
|
||||
|
||||
Questions or customization needed?
|
||||
• Review DESIGN-SYSTEM.md for customization guide
|
||||
• All files are fully editable SVG
|
||||
• Maintain color palette for brand consistency
|
||||
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
|
||||
Happy building! 🚀
|
||||
|
||||
234
resources/MANIFEST.txt
Normal file
234
resources/MANIFEST.txt
Normal file
@@ -0,0 +1,234 @@
|
||||
╔════════════════════════════════════════════════════════════════════════════╗
|
||||
║ CLAUDE HOW TO - COMPLETE ASSET MANIFEST ║
|
||||
║ All Files Ready for Use ║
|
||||
╚════════════════════════════════════════════════════════════════════════════╝
|
||||
|
||||
📦 FULL DIRECTORY MANIFEST
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
resources/
|
||||
│
|
||||
├─ 📄 README.md (6.0K) Complete documentation
|
||||
├─ 📄 QUICK-START.md (2.5K) Copy & paste setup
|
||||
├─ 📄 DESIGN-SYSTEM.md (7.7K) Brand guidelines
|
||||
├─ 📄 INDEX.txt (12K) Visual reference
|
||||
├─ 📄 MANIFEST.txt (this) File listing
|
||||
│
|
||||
├─ 📁 logos/ (8.0K total)
|
||||
│ └─ 📊 claude-howto-logo.svg (8.0K) 800×200px main logo
|
||||
│
|
||||
├─ 📁 icons/ (8.0K total)
|
||||
│ └─ 🔷 claude-howto-icon.svg (8.0K) 256×256px app icon
|
||||
│
|
||||
└─ 📁 favicons/ (20K total)
|
||||
├─ 🔹 favicon-16.svg (3.2K) 16×16px browser tab
|
||||
├─ 🔹 favicon-32.svg (3.8K) 32×32px standard
|
||||
├─ 🔹 favicon-64.svg (4.1K) 64×64px high-DPI
|
||||
├─ 🔹 favicon-128.svg (4.5K) 128×128px apple touch
|
||||
└─ 🔹 favicon-256.svg (4.9K) 256×256px modern
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
📊 ASSET SUMMARY
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
CATEGORY COUNT PURPOSE
|
||||
────────────────────────────────────────────────────────────────────────────
|
||||
Logos 1 Main horizontal logo for headers/marketing
|
||||
Icons 1 App icon for avatars/thumbnails
|
||||
Favicons 5 Browser tabs, bookmarks, mobile icons
|
||||
Documentation 5 Setup guides, design system, reference
|
||||
────────────────────────────────────────────────────────────────────────────
|
||||
TOTAL 12 Complete brand asset package
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
📄 DOCUMENTATION FILES - WHAT TO READ
|
||||
|
||||
1️⃣ START HERE: QUICK-START.md
|
||||
• Copy & paste HTML code
|
||||
• Recommended sizes by use case
|
||||
• CSS color variables
|
||||
• Quick integration examples
|
||||
⏱️ 5 minute read
|
||||
|
||||
2️⃣ FULL DETAILS: README.md
|
||||
• Complete asset descriptions
|
||||
• HTML/CSS integration guide
|
||||
• Favicon setup instructions
|
||||
• Accessibility & optimization
|
||||
⏱️ 15 minute read
|
||||
|
||||
3️⃣ BRAND GUIDELINES: DESIGN-SYSTEM.md
|
||||
• Visual identity principles
|
||||
• Complete color system specs
|
||||
• Icon geometry details
|
||||
• Effects and filters
|
||||
• Customization instructions
|
||||
⏱️ 20 minute read
|
||||
|
||||
4️⃣ VISUAL REFERENCE: INDEX.txt
|
||||
• Directory structure diagram
|
||||
• File quick reference table
|
||||
• Design concept visualization
|
||||
• Integration examples
|
||||
⏱️ 10 minute read
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
🎯 QUICK USAGE GUIDE
|
||||
|
||||
FOR WEBSITES (HTML):
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
|
||||
FOR MARKDOWN:
|
||||
|
||||
|
||||
FOR REACT/NEXT.JS:
|
||||
import icon from './resources/icons/claude-howto-icon.svg';
|
||||
|
||||
FOR CSS BACKGROUND:
|
||||
background-image: url('resources/icons/claude-howto-icon.svg');
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
🎨 FILE SELECTION BY USE CASE
|
||||
|
||||
USE CASE FILE SIZE
|
||||
─────────────────────────────────────────────────────────────────────────────
|
||||
Website header logos/claude-howto-logo.svg 800×200px
|
||||
Browser tab favicons/favicon-32.svg 32×32px
|
||||
Mobile home screen favicons/favicon-128.svg 128×128px
|
||||
App icon icons/claude-howto-icon.svg 256×256px
|
||||
Social media thumbnail icons/claude-howto-icon.svg 256×256px
|
||||
Bookmark/favorite icon favicons/favicon-64.svg 64×64px
|
||||
Apple touch icon favicons/favicon-128.svg 128×128px
|
||||
PWA/Android app favicons/favicon-256.svg 256×256px
|
||||
Old browsers (fallback) favicons/favicon-16.svg 16×16px
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
✅ VERIFICATION CHECKLIST
|
||||
|
||||
SVG Assets:
|
||||
✓ logos/claude-howto-logo.svg Main logo
|
||||
✓ icons/claude-howto-icon.svg App icon
|
||||
✓ favicons/favicon-16.svg 16px favicon
|
||||
✓ favicons/favicon-32.svg 32px favicon
|
||||
✓ favicons/favicon-64.svg 64px favicon
|
||||
✓ favicons/favicon-128.svg 128px favicon
|
||||
✓ favicons/favicon-256.svg 256px favicon
|
||||
|
||||
Documentation:
|
||||
✓ README.md Complete guide
|
||||
✓ QUICK-START.md Setup guide
|
||||
✓ DESIGN-SYSTEM.md Brand guidelines
|
||||
✓ INDEX.txt Visual reference
|
||||
✓ MANIFEST.txt This file
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
🎨 DESIGN CONCEPT
|
||||
|
||||
The icon represents the Claude How To learning journey with ascending hexagons:
|
||||
|
||||
🔶 MINT
|
||||
Advanced Features
|
||||
Levels 7-10
|
||||
|
||||
🔶 EMERALD
|
||||
Intermediate Skills
|
||||
Levels 4-6
|
||||
|
||||
🔶 DARK EMERALD
|
||||
Beginner Fundamentals
|
||||
Levels 1-3
|
||||
|
||||
COLOR PALETTE:
|
||||
• Deep Forest #0d1f0d Background
|
||||
• Emerald #10b981 Primary accent
|
||||
• Dark Emerald #059669 Secondary accent
|
||||
• Forest #047857 Tertiary accent
|
||||
• Mint #6ee7b7 Highlight
|
||||
• Light Mint #34d399 Secondary highlight
|
||||
|
||||
All colors: WCAG AAA accessible (8.2:1+ contrast)
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
📥 HOW TO INTEGRATE
|
||||
|
||||
STEP 1: Copy files
|
||||
cp -r resources/ /path/to/your/project/
|
||||
|
||||
STEP 2: Read documentation
|
||||
Start with resources/QUICK-START.md
|
||||
|
||||
STEP 3: Add to HTML
|
||||
Copy provided code snippets (see QUICK-START.md)
|
||||
|
||||
STEP 4: Customize (optional)
|
||||
Reference DESIGN-SYSTEM.md for color changes
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
📋 FILE SPECIFICATIONS
|
||||
|
||||
Format: SVG (Scalable Vector Graphics)
|
||||
Scalability: Any size, no pixelation
|
||||
Browser Support: All modern browsers
|
||||
Accessibility: WCAG AAA compliant
|
||||
Color Mode: RGB/RGBA with gradients
|
||||
Effects: Gradients, shadows, glows
|
||||
Customizable: Yes, see DESIGN-SYSTEM.md
|
||||
Animated: Static (can be animated with CSS/JS)
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
🚀 NEXT STEPS
|
||||
|
||||
IMMEDIATE:
|
||||
1. Read resources/QUICK-START.md
|
||||
2. Copy favicons to your project
|
||||
3. Add favicon link to your HTML
|
||||
|
||||
SHORT TERM:
|
||||
1. Integrate logo into website
|
||||
2. Use icon for social media
|
||||
3. Review DESIGN-SYSTEM.md
|
||||
|
||||
LONG TERM:
|
||||
1. Maintain color palette consistency
|
||||
2. Use brand assets across all materials
|
||||
3. Reference guidelines for any customizations
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
💡 PRO TIPS
|
||||
|
||||
• Use favicon-32.svg as primary favicon (works on all modern browsers)
|
||||
• Use icons/claude-howto-icon.svg for avatars at 64-256px
|
||||
• Use logos/claude-howto-logo.svg for website headers (scale to fit)
|
||||
• Keep the ascending hexagon concept for any custom variants
|
||||
• Always maintain the established color palette
|
||||
• SVG files are editable - see DESIGN-SYSTEM.md for color customization
|
||||
• No PNG conversion needed - SVG works everywhere
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
📞 NEED HELP?
|
||||
|
||||
1. Quick setup? → Read QUICK-START.md
|
||||
2. Full reference? → Read README.md
|
||||
3. Brand guidelines? → Read DESIGN-SYSTEM.md
|
||||
4. Visual overview? → Read INDEX.txt
|
||||
5. Find a specific file? → Read this MANIFEST.txt
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
|
||||
Generated: January 2026
|
||||
Design System: v1.0
|
||||
All files production-ready ✅
|
||||
|
||||
═════════════════════════════════════════════════════════════════════════════
|
||||
88
resources/QUICK-START.md
Normal file
88
resources/QUICK-START.md
Normal file
@@ -0,0 +1,88 @@
|
||||
# Quick Start - Brand Assets
|
||||
|
||||
## Copy Assets to Your Project
|
||||
|
||||
```bash
|
||||
# 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)
|
||||
|
||||
```html
|
||||
<!-- 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
|
||||
|
||||
```markdown
|
||||
# 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
|
||||
|
||||
```css
|
||||
/* 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](README.md) for complete documentation.
|
||||
242
resources/README.md
Normal file
242
resources/README.md
Normal file
@@ -0,0 +1,242 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# Claude How To - Brand Assets
|
||||
|
||||
Complete collection of logos, icons, and favicons for the Claude How To project. All assets use the new V2.0 design: a 12-ray organic starburst inspired by Claude's official logo, with emerald green color and educational symbolism.
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
resources/
|
||||
├── logos/
|
||||
│ ├── claude-howto-logo.svg # Main logo - Light mode (800×200px)
|
||||
│ └── claude-howto-logo-dark.svg # Main logo - Dark mode (800×200px)
|
||||
├── icons/
|
||||
│ ├── claude-howto-icon.svg # App icon - Light mode (256×256px)
|
||||
│ └── claude-howto-icon-dark.svg # App icon - Dark mode (256×256px)
|
||||
└── favicons/
|
||||
├── favicon-16.svg # Favicon - 16×16px
|
||||
├── favicon-32.svg # Favicon - 32×32px (primary)
|
||||
├── favicon-64.svg # Favicon - 64×64px
|
||||
├── favicon-128.svg # Favicon - 128×128px
|
||||
└── favicon-256.svg # Favicon - 256×256px
|
||||
```
|
||||
|
||||
## Assets Overview
|
||||
|
||||
### Design Concept (V2.0)
|
||||
|
||||
**12-Ray Organic Starburst** inspired by Claude's official logo:
|
||||
- **12 Rays** = Knowledge radiating outward
|
||||
- **Emerald Gradient** = Primary green color (#10b981 → #059669)
|
||||
- **Mint Core** = Learning value provided
|
||||
- **Three Inner Lines** = Guides, examples, documentation
|
||||
- **Claude-Aligned** = Matches official Claude logo pattern
|
||||
|
||||
### Logos
|
||||
|
||||
**Files**:
|
||||
- `logos/claude-howto-logo.svg` (Light mode)
|
||||
- `logos/claude-howto-logo-dark.svg` (Dark mode)
|
||||
|
||||
**Specifications**:
|
||||
- **Size**: 800×200 px
|
||||
- **Purpose**: Main header/branding logo with wordmark
|
||||
- **Usage**:
|
||||
- Website headers
|
||||
- Marketing materials
|
||||
- README badges
|
||||
- Print materials
|
||||
- **Format**: SVG (fully scalable)
|
||||
- **Modes**: Light (white background) & Dark (forest background)
|
||||
|
||||
### Icons
|
||||
|
||||
**Files**:
|
||||
- `icons/claude-howto-icon.svg` (Light mode)
|
||||
- `icons/claude-howto-icon-dark.svg` (Dark mode)
|
||||
|
||||
**Specifications**:
|
||||
- **Size**: 256×256 px
|
||||
- **Purpose**: Application icon, avatars, thumbnails
|
||||
- **Usage**:
|
||||
- App icons
|
||||
- Profile avatars
|
||||
- Social media thumbnails
|
||||
- Documentation headers
|
||||
- **Format**: SVG (fully scalable)
|
||||
- **Modes**: Light (white background) & Dark (with glow effect)
|
||||
|
||||
**Design Elements**:
|
||||
- 12-ray organic starburst (Claude-inspired)
|
||||
- Emerald green gradient rays
|
||||
- Mint gradient core (represents guide hub)
|
||||
- Three inner lines (symbolize guides/examples/docs)
|
||||
- Glow effects in dark mode
|
||||
|
||||
### Favicons
|
||||
|
||||
Optimized versions at multiple sizes for web use:
|
||||
|
||||
| File | Size | DPI | Usage |
|
||||
|------|------|-----|-------|
|
||||
| `favicon-16.svg` | 16×16 px | 1x | Browser tabs (older browsers) |
|
||||
| `favicon-32.svg` | 32×32 px | 1x | Standard browser favicon |
|
||||
| `favicon-64.svg` | 64×64 px | 1x-2x | High-DPI displays |
|
||||
| `favicon-128.svg` | 128×128 px | 2x | Apple touch icon, bookmarks |
|
||||
| `favicon-256.svg` | 256×256 px | 4x | Modern browsers, PWA icons |
|
||||
|
||||
**Optimization Notes**:
|
||||
- Smaller sizes (16-32px) use simplified geometry
|
||||
- Larger sizes (64-256px) include additional details
|
||||
- All maintain visual consistency with main icon
|
||||
- SVG format ensures crisp display at any size
|
||||
|
||||
## HTML Integration
|
||||
|
||||
### Basic Favicon Setup
|
||||
|
||||
```html
|
||||
<!-- Browser favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-32.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-16.svg" sizes="16x16">
|
||||
|
||||
<!-- Apple touch icon (mobile home screen) -->
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
|
||||
<!-- PWA & modern browsers -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
```
|
||||
|
||||
### Complete Setup
|
||||
|
||||
```html
|
||||
<head>
|
||||
<!-- Primary favicon -->
|
||||
<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">
|
||||
|
||||
<!-- Apple touch icon -->
|
||||
<link rel="apple-touch-icon" href="/resources/favicons/favicon-128.svg">
|
||||
|
||||
<!-- PWA icons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/resources/favicons/favicon-256.svg" sizes="256x256">
|
||||
|
||||
<!-- Android -->
|
||||
<link rel="shortcut icon" href="/resources/favicons/favicon-256.svg">
|
||||
|
||||
<!-- PWA manifest reference (if using manifest.json) -->
|
||||
<meta name="theme-color" content="#0d1f0d">
|
||||
</head>
|
||||
```
|
||||
|
||||
## Color Palette
|
||||
|
||||
### Primary Colors
|
||||
- **Deep Forest**: `#0d1f0d` (Background)
|
||||
- **Emerald**: `#10b981` (Primary accent)
|
||||
- **Dark Emerald**: `#059669` (Secondary)
|
||||
- **Forest**: `#047857` (Tertiary)
|
||||
|
||||
### Accent Colors
|
||||
- **Mint**: `#6ee7b7` (Highlight)
|
||||
- **Light Mint**: `#34d399` (Secondary highlight)
|
||||
|
||||
### Usage Guidelines
|
||||
- Use emerald for primary interactions and accents
|
||||
- Use mint for highlights and emphasis
|
||||
- Deep forest for backgrounds
|
||||
- Maintain sufficient contrast for accessibility
|
||||
|
||||
## Design Guidelines
|
||||
|
||||
### Logo Usage
|
||||
✅ **Do**:
|
||||
- Use on dark backgrounds
|
||||
- Scale proportionally (maintain 4:1 aspect ratio)
|
||||
- Include clear space around logo
|
||||
- Use in color as shown
|
||||
|
||||
❌ **Don't**:
|
||||
- Change colors or gradients
|
||||
- Stretch or distort proportions
|
||||
- Use on light backgrounds without modification
|
||||
- Apply effects that obscure the design
|
||||
|
||||
### Icon Usage
|
||||
✅ **Do**:
|
||||
- Use at standard sizes: 16, 32, 64, 128, 256px
|
||||
- Maintain the ascending progression concept
|
||||
- Scale proportionally
|
||||
|
||||
❌ **Don't**:
|
||||
- Rotate or flip the icon
|
||||
- Change the color scheme
|
||||
- Use small sizes where details are lost
|
||||
|
||||
### Favicon Usage
|
||||
- Use appropriate size for context
|
||||
- 16-32px: Browser tabs, bookmarks
|
||||
- 64px: Favicon site icons
|
||||
- 128px+: Apple/Android home screens
|
||||
|
||||
## SVG Optimization
|
||||
|
||||
All SVG files include:
|
||||
- Gradient definitions for smooth color transitions
|
||||
- Filter effects for depth and glow
|
||||
- Optimized stroke widths
|
||||
- Responsive design patterns
|
||||
|
||||
For web optimization:
|
||||
```bash
|
||||
# Compress SVG while maintaining quality
|
||||
svgo --config='{
|
||||
"js2svg": {
|
||||
"indent": 2
|
||||
},
|
||||
"plugins": [
|
||||
"convertStyleToAttrs",
|
||||
"removeRasterImages"
|
||||
]
|
||||
}' input.svg -o output.svg
|
||||
```
|
||||
|
||||
## PNG Conversion
|
||||
|
||||
To convert SVG to PNG for older browser support:
|
||||
|
||||
```bash
|
||||
# Using ImageMagick
|
||||
convert -density 300 -background none favicon-256.svg favicon-256.png
|
||||
|
||||
# Using Inkscape
|
||||
inkscape -D -z --file=favicon-256.svg --export-png=favicon-256.png
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
- All icons include clear geometric shapes
|
||||
- High contrast color ratios (WCAG AA compliant)
|
||||
- Scalable vector format works at any size
|
||||
- No text in icons (text added separately if needed)
|
||||
|
||||
## Attribution
|
||||
|
||||
These assets are part of the Claude How To project and use Anthropic's Claude color palette and design language.
|
||||
|
||||
**License**: MIT (see project LICENSE file)
|
||||
|
||||
## Version History
|
||||
|
||||
- **v2.0** (January 2026): Claude-inspired 12-ray starburst design with dark/light mode variants
|
||||
- **v1.0** (January 2026): Original hexagon-based progression icon design
|
||||
|
||||
---
|
||||
|
||||
**Last Updated**: January 2026
|
||||
**Current Version**: 2.0 (Claude-Inspired Starburst)
|
||||
**All Assets**: Production-ready SVG, fully scalable, WCAG AAA accessible
|
||||
63
resources/favicons/favicon-128.svg
Normal file
63
resources/favicons/favicon-128.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="1.5" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="64" cy="64" r="64" fill="#ffffff"/>
|
||||
|
||||
<!-- Starburst (8 rays for 128px) -->
|
||||
<g transform="translate(64, 64)">
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-48 Q -8,-72 0,-96 Q 8,-72 0,-48" fill="url(#emerald)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 2 (top-right) -->
|
||||
<path d="M 34,-34 Q 40,-60 64,-80 Q 48,-48 34,-34" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 3 (right) -->
|
||||
<path d="M 48,0 Q 72,-16 96,0 Q 72,16 48,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 4 (bottom-right) -->
|
||||
<path d="M 34,34 Q 48,48 64,80 Q 40,60 34,34" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 5 (bottom) -->
|
||||
<path d="M 0,48 Q -8,72 0,96 Q 8,72 0,48" fill="url(#emerald)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 6 (bottom-left) -->
|
||||
<path d="M -34,34 Q -48,48 -64,80 Q -40,60 -34,34" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 7 (left) -->
|
||||
<path d="M -48,0 Q -72,-16 -96,0 Q -72,16 -48,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 8 (top-left) -->
|
||||
<path d="M -34,-34 Q -40,-60 -64,-80 Q -48,-48 -34,-34" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Center core -->
|
||||
<circle cx="0" cy="0" r="20" fill="#10b981" filter="url(#glow)"/>
|
||||
<circle cx="0" cy="0" r="12" fill="url(#mint)"/>
|
||||
|
||||
<!-- Three inner lines representing guides -->
|
||||
<g opacity="0.7">
|
||||
<rect x="-8" y="-4" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
||||
<rect x="-8" y="1" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
||||
<rect x="-8" y="6" width="16" height="2" fill="#0d1f0d" rx="1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
40
resources/favicons/favicon-16.svg
Normal file
40
resources/favicons/favicon-16.svg
Normal file
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="8" cy="8" r="8" fill="#ffffff"/>
|
||||
|
||||
<!-- Simplified starburst (8 rays for 16px) -->
|
||||
<g transform="translate(8, 8)">
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-6 L 1,-3 L 0,-1.5 L -1,-3 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 2 (top-right) -->
|
||||
<path d="M 4,-4 L 4.5,-2 L 3,-0.5 L 2,-2 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 3 (right) -->
|
||||
<path d="M 6,0 L 3,1 L 1.5,0 L 3,-1 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 4 (bottom-right) -->
|
||||
<path d="M 4,4 L 2,2 L 3,0.5 L 4.5,2 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 5 (bottom) -->
|
||||
<path d="M 0,6 L -1,3 L 0,1.5 L 1,3 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 6 (bottom-left) -->
|
||||
<path d="M -4,4 L -2,2 L -3,0.5 L -4.5,2 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 7 (left) -->
|
||||
<path d="M -6,0 L -3,1 L -1.5,0 L -3,-1 Z" fill="url(#emerald)"/>
|
||||
<!-- Ray 8 (top-left) -->
|
||||
<path d="M -4,-4 L -4.5,-2 L -3,-0.5 L -2,-2 Z" fill="url(#emerald)"/>
|
||||
|
||||
<!-- Center core -->
|
||||
<circle cx="0" cy="0" r="2" fill="#10b981"/>
|
||||
<circle cx="0" cy="0" r="1.2" fill="url(#mint)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
75
resources/favicons/favicon-256.svg
Normal file
75
resources/favicons/favicon-256.svg
Normal file
@@ -0,0 +1,75 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.4"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="128" cy="128" r="128" fill="#ffffff"/>
|
||||
|
||||
<!-- Icon: 12-ray starburst -->
|
||||
<g transform="translate(128, 128)">
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-80 Q -10,-64 0,-96 Q 10,-64 0,-80" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,80 Q -10,64 0,96 Q 10,64 0,80" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 10 (270°) -->
|
||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Central core -->
|
||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
|
||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
||||
|
||||
<!-- Three inner lines -->
|
||||
<g opacity="0.7">
|
||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
40
resources/favicons/favicon-32.svg
Normal file
40
resources/favicons/favicon-32.svg
Normal file
@@ -0,0 +1,40 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="16" cy="16" r="16" fill="#ffffff"/>
|
||||
|
||||
<!-- Starburst (8 rays for 32px) -->
|
||||
<g transform="translate(16, 16)">
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-12 Q -2,-18 0,-24 Q 2,-18 0,-12" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 2 (top-right) -->
|
||||
<path d="M 8,-8 Q 10,-15 16,-20 Q 12,-12 8,-8" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 3 (right) -->
|
||||
<path d="M 12,0 Q 18,-4 24,0 Q 18,4 12,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 4 (bottom-right) -->
|
||||
<path d="M 8,8 Q 12,12 16,20 Q 10,15 8,8" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 5 (bottom) -->
|
||||
<path d="M 0,12 Q -2,18 0,24 Q 2,18 0,12" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 6 (bottom-left) -->
|
||||
<path d="M -8,8 Q -12,12 -16,20 Q -10,15 -8,8" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 7 (left) -->
|
||||
<path d="M -12,0 Q -18,-4 -24,0 Q -18,4 -12,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 8 (top-left) -->
|
||||
<path d="M -8,-8 Q -10,-15 -16,-20 Q -12,-12 -8,-8" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Center core -->
|
||||
<circle cx="0" cy="0" r="5" fill="#10b981"/>
|
||||
<circle cx="0" cy="0" r="3" fill="url(#mint)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
49
resources/favicons/favicon-64.svg
Normal file
49
resources/favicons/favicon-64.svg
Normal file
@@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emerald" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mint" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="1" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="32" cy="32" r="32" fill="#ffffff"/>
|
||||
|
||||
<!-- Starburst (8 rays for 64px) -->
|
||||
<g transform="translate(32, 32)">
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-24 Q -4,-36 0,-48 Q 4,-36 0,-24" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 2 (top-right) -->
|
||||
<path d="M 17,-17 Q 20,-30 32,-40 Q 24,-24 17,-17" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 3 (right) -->
|
||||
<path d="M 24,0 Q 36,-8 48,0 Q 36,8 24,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 4 (bottom-right) -->
|
||||
<path d="M 17,17 Q 24,24 32,40 Q 20,30 17,17" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 5 (bottom) -->
|
||||
<path d="M 0,24 Q -4,36 0,48 Q 4,36 0,24" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 6 (bottom-left) -->
|
||||
<path d="M -17,17 Q -24,24 -32,40 Q -20,30 -17,17" fill="url(#emerald)" opacity="0.92"/>
|
||||
<!-- Ray 7 (left) -->
|
||||
<path d="M -24,0 Q -36,-8 -48,0 Q -36,8 -24,0" fill="url(#emerald)" opacity="0.95"/>
|
||||
<!-- Ray 8 (top-left) -->
|
||||
<path d="M -17,-17 Q -20,-30 -32,-40 Q -24,-24 -17,-17" fill="url(#emerald)" opacity="0.92"/>
|
||||
|
||||
<!-- Center core -->
|
||||
<circle cx="0" cy="0" r="10" fill="#10b981" filter="url(#glow)"/>
|
||||
<circle cx="0" cy="0" r="6" fill="url(#mint)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
80
resources/icons/claude-howto-icon-dark.svg
Normal file
80
resources/icons/claude-howto-icon-dark.svg
Normal file
@@ -0,0 +1,80 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
||||
<stop offset="100%" style="stop-color:#051515"/>
|
||||
</linearGradient>
|
||||
<filter id="glowDark">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.5"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Dark background -->
|
||||
<circle cx="128" cy="128" r="128" fill="url(#bgDark)"/>
|
||||
|
||||
<!-- Icon: Rounded starburst dark mode -->
|
||||
<g transform="translate(128, 128)">
|
||||
<!-- Central core with glow -->
|
||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glowDark)"/>
|
||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
||||
|
||||
<!-- 12 rays -->
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 10 (270°) -->
|
||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Inner detail lines -->
|
||||
<g opacity="0.8">
|
||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.2 KiB |
76
resources/icons/claude-howto-icon.svg
Normal file
76
resources/icons/claude-howto-icon.svg
Normal file
@@ -0,0 +1,76 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<circle cx="128" cy="128" r="128" fill="#ffffff"/>
|
||||
|
||||
<!-- Icon: Rounded starburst -->
|
||||
<g transform="translate(128, 128)">
|
||||
<!-- Central core -->
|
||||
<circle cx="0" cy="0" r="28" fill="#10b981" filter="url(#glow)"/>
|
||||
<circle cx="0" cy="0" r="20" fill="url(#mintGrad)"/>
|
||||
|
||||
<!-- 12 rays - scaled up for 256px -->
|
||||
<!-- Ray 1 (top) -->
|
||||
<path d="M 0,-30 Q -10,-64 0,-96 Q 10,-64 0,-30" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 26,-16 Q 36,-44 56,-70 Q 46,-40 26,-16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 44,14 Q 60,30 84,56 Q 56,36 44,14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 30,0 Q 64,-10 96,0 Q 64,10 30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 44,-14 Q 60,-30 84,-56 Q 56,-36 44,-14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 26,16 Q 36,44 56,70 Q 46,40 26,16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,30 Q -10,64 0,96 Q 10,64 0,30" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -26,16 Q -36,44 -56,70 Q -46,40 -26,16" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -44,-14 Q -60,-30 -84,-56 Q -56,-36 -44,-14" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 10 (270°) -->
|
||||
<path d="M -30,0 Q -64,-10 -96,0 Q -64,10 -30,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -44,14 Q -60,30 -84,56 Q -56,36 -44,14" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -26,-16 Q -36,-44 -56,-70 Q -46,-40 -26,-16" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Inner detail lines -->
|
||||
<g opacity="0.7">
|
||||
<rect x="-7" y="-6" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="-0.4" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
<rect x="-7" y="5.2" width="14" height="2.4" fill="#0d1f0d" rx="1.2"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
126
resources/logos/claude-howto-logo-dark.svg
Normal file
126
resources/logos/claude-howto-logo-dark.svg
Normal file
@@ -0,0 +1,126 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Emerald gradient -->
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Mint gradient -->
|
||||
<linearGradient id="mintGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6ee7b7"/>
|
||||
<stop offset="100%" style="stop-color:#34d399"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Text gradient dark -->
|
||||
<linearGradient id="textDark" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#d1fae5"/>
|
||||
<stop offset="100%" style="stop-color:#a7f3d0"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Dark background -->
|
||||
<linearGradient id="bgDark" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
||||
<stop offset="50%" style="stop-color:#132813"/>
|
||||
<stop offset="100%" style="stop-color:#0a1a0a"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filter dark -->
|
||||
<filter id="glowDark" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.5"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- Dark gradient background -->
|
||||
<rect width="800" height="200" fill="url(#bgDark)"/>
|
||||
|
||||
<!-- Subtle grid overlay -->
|
||||
<g opacity="0.02">
|
||||
<line x1="0" y1="50" x2="800" y2="50" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="100" x2="800" y2="100" stroke="#10b981" stroke-width="1"/>
|
||||
<line x1="0" y1="150" x2="800" y2="150" stroke="#10b981" stroke-width="1"/>
|
||||
</g>
|
||||
|
||||
<!-- Icon: Claude-inspired rounded starburst -->
|
||||
<g transform="translate(70, 100)">
|
||||
<!-- Central circle with glow -->
|
||||
<circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glowDark)"/>
|
||||
<circle cx="0" cy="0" r="10" fill="url(#mintGrad)"/>
|
||||
|
||||
<!-- 12 rounded rays -->
|
||||
<!-- Ray 1 (top, 0°) -->
|
||||
<path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Ray 10 (270°, bottom-left) -->
|
||||
<path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.98"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="1" filter="url(#glowDark)"/>
|
||||
|
||||
<!-- Inner detail lines -->
|
||||
<g opacity="0.8">
|
||||
<rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Text: "Claude" -->
|
||||
<text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="url(#textDark)" letter-spacing="-1">
|
||||
Claude
|
||||
</text>
|
||||
|
||||
<!-- Text: "How-To" -->
|
||||
<text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#6ee7b7" letter-spacing="0.5">
|
||||
How-To
|
||||
</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6ee7b7" letter-spacing="0.5" font-weight="500" opacity="0.85">
|
||||
VISUAL GUIDE TO CLAUDE CODE
|
||||
</text>
|
||||
|
||||
<!-- Accent line with glow -->
|
||||
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.8"/>
|
||||
|
||||
<!-- Three dots -->
|
||||
<g fill="#6ee7b7" opacity="0.8">
|
||||
<circle cx="420" cy="158" r="2.5"/>
|
||||
<circle cx="435" cy="158" r="2.5"/>
|
||||
<circle cx="450" cy="158" r="2.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.0 KiB |
106
resources/logos/claude-howto-logo.svg
Normal file
106
resources/logos/claude-howto-logo.svg
Normal file
@@ -0,0 +1,106 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Emerald gradient -->
|
||||
<linearGradient id="emeraldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981"/>
|
||||
<stop offset="100%" style="stop-color:#059669"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Text gradient light -->
|
||||
<linearGradient id="textLight" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#0d1f0d"/>
|
||||
<stop offset="100%" style="stop-color:#047857"/>
|
||||
</linearGradient>
|
||||
|
||||
<!-- Glow filter -->
|
||||
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||||
<feGaussianBlur stdDeviation="2" result="blur"/>
|
||||
<feFlood flood-color="#10b981" flood-opacity="0.3"/>
|
||||
<feComposite in2="blur" operator="in"/>
|
||||
<feMerge>
|
||||
<feMergeNode/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<!-- White background -->
|
||||
<rect width="800" height="200" fill="#ffffff"/>
|
||||
|
||||
<!-- Icon: Claude-inspired rounded starburst with guide elements -->
|
||||
<g transform="translate(70, 100)">
|
||||
<!-- Central circle -->
|
||||
<circle cx="0" cy="0" r="14" fill="#10b981" filter="url(#glow)"/>
|
||||
<circle cx="0" cy="0" r="10" fill="#6ee7b7" opacity="0.9"/>
|
||||
|
||||
<!-- 12 rounded rays (inspired by Claude's organic design) -->
|
||||
<!-- Ray 1 (top, 0°) -->
|
||||
<path d="M 0,-15 Q -5,-32 0,-48 Q 5,-32 0,-15" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 2 (30°) -->
|
||||
<path d="M 13,-8 Q 18,-22 28,-35 Q 23,-20 13,-8" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 3 (60°) -->
|
||||
<path d="M 22,7 Q 30,15 42,28 Q 28,18 22,7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 4 (90°, right) -->
|
||||
<path d="M 15,0 Q 32,-5 48,0 Q 32,5 15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 5 (120°) -->
|
||||
<path d="M 22,-7 Q 30,-15 42,-28 Q 28,-18 22,-7" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 6 (150°) -->
|
||||
<path d="M 13,8 Q 18,22 28,35 Q 23,20 13,8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 7 (180°, left) -->
|
||||
<path d="M 0,15 Q -5,32 0,48 Q 5,32 0,15" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 8 (210°) -->
|
||||
<path d="M -13,8 Q -18,22 -28,35 Q -23,20 -13,8" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 9 (240°) -->
|
||||
<path d="M -22,-7 Q -30,-15 -42,-28 Q -28,-18 -22,-7" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Ray 10 (270°, bottom-left) -->
|
||||
<path d="M -15,0 Q -32,-5 -48,0 Q -32,5 -15,0" fill="url(#emeraldGrad)" opacity="0.94"/>
|
||||
|
||||
<!-- Ray 11 (300°) -->
|
||||
<path d="M -22,7 Q -30,15 -42,28 Q -28,18 -22,7" fill="url(#emeraldGrad)" opacity="0.92"/>
|
||||
|
||||
<!-- Ray 12 (330°) -->
|
||||
<path d="M -13,-8 Q -18,-22 -28,-35 Q -23,-20 -13,-8" fill="url(#emeraldGrad)" opacity="0.95"/>
|
||||
|
||||
<!-- Inner detail lines in core (representing guide/examples) -->
|
||||
<g opacity="0.7">
|
||||
<rect x="-3.5" y="-3" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="-0.2" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
<rect x="-3.5" y="2.6" width="7" height="1.2" fill="#0d1f0d" rx="0.6"/>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Text: "Claude" -->
|
||||
<text x="160" y="98" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="58" font-weight="600" fill="#0d1f0d" letter-spacing="-1">
|
||||
Claude
|
||||
</text>
|
||||
|
||||
<!-- Text: "How-To" -->
|
||||
<text x="160" y="138" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="44" font-weight="400" fill="#10b981" letter-spacing="0.5">
|
||||
How-To
|
||||
</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="520" y="75" font-family="'Segoe UI', 'Trebuchet MS', '-apple-system', sans-serif" font-size="12" fill="#6b7280" letter-spacing="0.5" font-weight="500">
|
||||
VISUAL GUIDE TO CLAUDE CODE
|
||||
</text>
|
||||
|
||||
<!-- Accent line -->
|
||||
<line x1="160" y1="153" x2="400" y2="153" stroke="url(#emeraldGrad)" stroke-width="2.5" stroke-linecap="round" opacity="0.6"/>
|
||||
|
||||
<!-- Three dots representing progression/examples -->
|
||||
<g fill="#10b981" opacity="0.75">
|
||||
<circle cx="420" cy="158" r="2.5"/>
|
||||
<circle cx="435" cy="158" r="2.5"/>
|
||||
<circle cx="450" cy="158" r="2.5"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -1,3 +1,8 @@
|
||||
<picture>
|
||||
<source media="(prefers-color-scheme: dark)" srcset="../resources/logos/claude-howto-logo-dark.svg">
|
||||
<img alt="Claude How To" src="../resources/logos/claude-howto-logo.svg">
|
||||
</picture>
|
||||
|
||||
# EPUB Builder Script
|
||||
|
||||
Build an EPUB ebook from the Claude How-To markdown files.
|
||||
|
||||
Reference in New Issue
Block a user