Changeset 050aa02 in Klonkt for src/views/pages

Timestamp:

06/22/2026 01:50:00 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b4c845e

Parents:

628056f

Message:

style(circles): cleaner icon (thin lines, fine nodes) + subtle accent glow

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

File:

• src/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"></span>
+  <span class="cirkel-badge" aria-hidden="true">
+    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+      <defs>
+        <marker id="cf-a" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="3.4" markerHeight="3.4" orient="auto-start-reverse"><path d="M2.5 2.5 L7 5 L2.5 7.5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></marker>
+      </defs>
+      <circle cx="50" cy="50" r="46" stroke-width="2" opacity="0.45"/>
+      <line x1="31.9" y1="42.7" x2="58.1" y2="28.3" stroke-width="2.2" marker-start="url(#cf-a)" marker-end="url(#cf-a)"/>
+      <line x1="66" y1="33" x2="66" y2="63" stroke-width="2.2" marker-end="url(#cf-a)"/>
+      <line x1="31.7" y1="51.6" x2="58.3" y2="67.4" stroke-width="2.2" marker-end="url(#cf-a)"/>
+      <circle cx="24" cy="47" r="6.5" stroke-width="2.2"/>
+      <circle cx="66" cy="24" r="6.5" stroke-width="2.2"/>
+      <circle cx="66" cy="72" r="6.5" stroke-width="2.2"/>
+    </svg>
+  </span>
   <h1><%= t('cfeed.title') %></h1>
   <p class="cirkel-sub"><%= t('cfeed.sub') %></p>
@@ -53 +66 @@
 <style>
 .cirkel-hero { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
-.cirkel-badge { display: block; width: 104px; height: 104px; margin: 0 auto .7rem; background-color: var(--accent);
-  -webkit-mask: url('/assets/img/cirkel-logo.svg?v=3') center / contain no-repeat;
-          mask: url('/assets/img/cirkel-logo.svg?v=3') center / contain no-repeat; }
+.cirkel-badge { display: block; width: 100px; height: 100px; margin: 0 auto .7rem; color: var(--accent);
+  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 65%, transparent)) drop-shadow(0 0 1px 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; }