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.
2026-01-09 10:36:58 +01:00
parent c2130fc769
commit 58e586f09b
37 changed files with 1885 additions and 54 deletions
--- a/resources/logos/claude-howto-logo.svg
+++ b/resources/logos/claude-howto-logo.svg
@@ -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>