Changeset cd69b6a in Klonkt

Timestamp:

06/22/2026 01:08:29 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

28d152e

Parents:

face47a

Message:

feat(circles): new network logo as header on the /cirkel page

Ring with asymmetric directed network (Robin's design) replaces the triangle
badge icon in the circles hero. currentColor (= accent colour, visible in both
light and dark), badge 60->112px. Standalone logo file in assets/img/cirkel-logo.svg.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/img/cirkel-logo.svg (added)
• views/pages/circle-feed.ejs (modified) (2 diffs)

src/views/pages/circle-feed.ejs

@@ -1 +1 @@
 <div class="container cirkel-hero">
   <span class="cirkel-badge" aria-hidden="true">
-    <svg viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
-      <line x1="32" y1="16" x2="17" y2="45"/>
-      <line x1="32" y1="16" x2="47" y2="45"/>
-      <line x1="17" y1="45" x2="47" y2="45"/>
-      <circle cx="32" cy="16" r="8" fill="currentColor" fill-opacity=".16"/>
-      <circle cx="17" cy="45" r="8" fill="currentColor" fill-opacity=".16"/>
-      <circle cx="47" cy="45" r="8" fill="currentColor" fill-opacity=".16"/>
+    <svg viewBox="0 0 1024 1024" fill="none">
+      <defs>
+        <marker id="cf-arrow" markerWidth="12" markerHeight="12" refX="10" refY="6" orient="auto"><path d="M0,0 L12,6 L0,12 Z" fill="currentColor"/></marker>
+      </defs>
+      <circle cx="512" cy="512" r="420" fill="none" stroke="currentColor" stroke-width="10"/>
+      <g fill="currentColor">
+        <circle cx="300" cy="520" r="24"/>
+        <circle cx="500" cy="510" r="28"/>
+        <circle cx="670" cy="320" r="24"/>
+        <circle cx="720" cy="610" r="24"/>
+        <circle cx="400" cy="760" r="24"/>
+      </g>
+      <g stroke="currentColor" stroke-width="10" fill="none">
+        <line x1="330" y1="520" x2="460" y2="510" marker-end="url(#cf-arrow)"/>
+        <line x1="520" y1="500" x2="640" y2="350" marker-end="url(#cf-arrow)"/>
+        <line x1="530" y1="520" x2="680" y2="600" marker-end="url(#cf-arrow)"/>
+        <line x1="690" y1="350" x2="710" y2="580" marker-end="url(#cf-arrow)"/>
+        <line x1="320" y1="550" x2="390" y2="720" marker-end="url(#cf-arrow)"/>
+        <line x1="420" y1="740" x2="690" y2="620" marker-end="url(#cf-arrow)"/>
+        <path d="M610 280 C480 260, 430 360, 460 480" marker-end="url(#cf-arrow)"/>
+        <path d="M710 340 C860 360, 860 700, 450 800" marker-end="url(#cf-arrow)"/>
+        <path d="M330 600 C480 660, 600 760, 720 650" marker-end="url(#cf-arrow)"/>
+      </g>
     </svg>
   </span>
@@ -62 +78 @@
 <style>
 .cirkel-hero { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
-.cirkel-badge { display: block; width: 60px; height: 60px; margin: 0 auto .6rem; color: var(--accent); }
+.cirkel-badge { display: block; width: 112px; height: 112px; margin: 0 auto .7rem; color: var(--accent); }
 .cirkel-badge svg { width: 100%; height: 100%; }
 .cirkel-hero h1 { font-family: var(--font-display, serif); font-size: 2.4rem; margin: 0 0 .3rem; }