github-code/claude-howto
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: Add new V2.0 logo with dark/light mode support to all markdown files

Browse Source 
- 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
2026-01-09 10:36:58 +01:00
parent c2130fc769
commit 58e586f09b
37 changed files with 1885 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
resources/favicons/favicon-128.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

40
resources/favicons/favicon-16.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

75
resources/favicons/favicon-256.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

40
resources/favicons/favicon-32.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

49
resources/favicons/favicon-64.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB