Changeset 628056f in Klonkt

Timestamp:

06/22/2026 01:38:13 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

050aa02

Parents:

546f102

Message:

feat(circles): new vectorised icon via CSS mask (accent colour) as header

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

Location:

src

Files:

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

src/assets/img/cirkel-logo.svg

@@ -1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none" stroke="black" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
-  <defs>
-    <marker id="cf-a" viewBox="0 0 10 10" refX="6.5" refY="5" markerWidth="3" markerHeight="3" orient="auto-start-reverse">
-      <path d="M2 2 L7 5 L2 8" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-    </marker>
-  </defs>
-  <circle cx="50" cy="50" r="45"/>
-  <line x1="35" y1="40" x2="54" y2="29" marker-start="url(#cf-a)" marker-end="url(#cf-a)"/>
-  <line x1="65" y1="34" x2="65" y2="61" marker-end="url(#cf-a)"/>
-  <line x1="33.2" y1="53.3" x2="54" y2="66.2" marker-end="url(#cf-a)"/>
-  <circle cx="23" cy="47" r="9"/>
-  <circle cx="65" cy="23" r="9"/>
-  <circle cx="65" cy="73" r="9"/>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+         width="100%" viewBox="0 0 880 896" enable-background="new 0 0 880 896" xml:space="preserve">
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M431.626953,68.478996 
+        C441.878143,68.961205 451.084717,72.138283 460.245087,75.542473 
+        C474.152710,80.710869 486.270844,88.683327 497.154694,98.688499 
+        C505.639801,106.488625 513.643921,114.870438 518.532104,125.292831 
+        C528.591309,146.740570 534.703613,168.817184 530.780212,193.222534 
+        C528.136169,209.669739 523.238098,224.747299 514.337952,238.679993 
+        C503.552338,255.564056 489.487030,269.303070 471.714844,278.199005 
+        C451.533600,288.300812 429.939911,292.220428 407.025482,289.520233 
+        C382.944702,286.682556 362.510254,276.584198 344.685272,260.974030 
+        C325.220154,243.927490 314.020660,222.141098 310.739594,196.405319 
+        C309.139648,183.855881 309.341583,171.479553 311.669586,158.872375 
+        C316.477448,132.835327 329.686615,111.841339 349.163574,94.848549 
+        C367.104584,79.195831 388.438446,70.609299 412.385529,68.772850 
+        C418.697235,68.288818 424.962616,67.967941 431.626953,68.478996 
+M475.036377,240.512436 
+        C476.285187,239.433395 477.624329,238.441879 478.768280,237.261276 
+        C486.976166,228.790298 492.572083,218.872971 497.199493,207.952286 
+        C503.457520,193.183304 503.378326,178.088287 501.043854,163.095886 
+        C498.654144,147.748917 490.623779,134.508118 480.112549,123.114349 
+        C464.380920,106.061829 444.118164,98.230301 421.468872,97.891777 
+        C400.812653,97.583038 382.483795,104.809311 366.539703,118.643982 
+        C350.545715,132.521957 341.954285,150.009552 339.469910,170.396835 
+        C336.494141,194.816711 344.114868,216.299423 360.491486,234.656769 
+        C378.224548,254.534653 400.746613,262.658264 426.884460,260.855560 
+        C444.844025,259.616913 461.017517,253.356476 475.036377,240.512436 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M89.684837,759.447327 
+        C79.231636,752.344788 69.978523,744.603088 61.767109,735.280273 
+        C46.686436,718.158264 39.496655,697.845642 36.223007,675.989807 
+        C33.850376,660.149414 37.201427,644.610413 41.626446,629.312500 
+        C45.351673,616.433960 52.455685,605.429993 60.193054,594.833252 
+        C65.370605,587.742249 71.796913,581.581543 78.900391,576.400513 
+        C92.020836,566.830872 106.219246,559.050232 122.235283,555.753723 
+        C140.564545,551.981262 158.815399,551.863220 177.242859,557.046204 
+        C199.328659,563.257935 217.240814,575.614319 232.193588,592.225586 
+        C240.013245,600.912537 245.926743,611.362732 250.159103,622.476135 
+        C257.317017,641.271545 260.249420,660.764160 256.871796,680.598267 
+        C254.477539,694.657898 249.728546,708.228027 242.063889,720.496521 
+        C235.539856,730.939026 227.899490,740.442322 218.559006,748.587097 
+        C212.106888,754.213257 204.852921,758.667847 197.402359,762.551208 
+        C185.012909,769.008789 171.578690,772.573914 157.609055,773.843262 
+        C138.793579,775.553040 120.537125,773.670410 103.246178,765.428040 
+        C98.900940,763.356689 94.433350,761.542053 89.684837,759.447327 
+M85.535667,610.009705 
+        C81.996582,615.034485 77.888718,619.756958 75.027000,625.141724 
+        C67.038582,640.173157 64.155510,656.331726 66.051300,673.281494 
+        C68.057465,691.217957 75.403717,706.687744 87.762054,719.796326 
+        C103.255119,736.229858 122.694359,744.570435 144.879990,745.481812 
+        C167.049683,746.392517 186.530991,738.376587 202.799133,723.346985 
+        C223.209351,704.490723 230.436188,680.487793 227.842194,653.455017 
+        C226.007416,634.334106 217.549957,617.882996 203.498550,604.843140 
+        C182.019318,584.910217 156.567795,578.183594 127.921913,584.348755 
+        C111.179192,587.952148 97.645180,597.223877 85.535667,610.009705 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M658.833008,704.171875 
+        C653.755310,698.696716 648.782104,693.617920 644.862793,687.615540 
+        C634.414490,671.614136 628.221741,654.109863 626.971008,635.072571 
+        C624.804016,602.089355 635.057007,573.383850 657.567139,549.096558 
+        C665.552185,540.481079 674.763916,533.304382 685.112915,527.987183 
+        C700.468140,520.097778 716.843567,515.807190 734.333557,515.409668 
+        C767.132812,514.664246 794.726318,526.453491 817.001221,549.944763 
+        C839.759766,573.945984 850.498901,603.091309 846.872498,636.063782 
+        C843.997925,662.200195 833.281677,685.396545 814.450317,704.531067 
+        C799.034607,720.195007 780.564209,729.230286 759.174194,733.618652 
+        C743.194336,736.897095 727.487000,736.639526 711.790222,733.111938 
+        C696.901367,729.765991 683.097778,723.790344 671.112427,714.081360 
+        C667.118958,710.846252 663.108398,707.632385 658.833008,704.171875 
+M818.005920,627.997864 
+        C819.321045,625.349182 817.906372,622.755066 817.789551,620.145020 
+        C816.921753,600.753601 809.526306,583.749390 796.118652,570.186768 
+        C776.937439,550.784058 753.646301,541.166565 725.752502,545.256531 
+        C704.332153,548.397400 686.589294,558.029785 673.230652,575.078369 
+        C660.467407,591.367065 654.526550,610.083496 655.830261,630.769348 
+        C657.020508,649.655212 664.776184,665.677307 677.138428,680.066772 
+        C690.589905,695.723938 707.778748,703.978149 727.472229,706.457397 
+        C751.485413,709.480408 773.268494,702.948547 791.390259,686.318909 
+        C808.195312,670.897644 817.580872,651.936523 818.005920,627.997864 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M188.218002,425.571594 
+        C195.825775,428.675568 196.912369,435.643188 198.771484,441.901886 
+        C202.080933,453.043213 205.025116,464.293488 208.076111,475.510712 
+        C208.567825,477.318542 208.913452,479.181946 211.072144,479.680206 
+        C213.408691,480.219482 214.922119,478.825836 216.024963,477.077942 
+        C221.246979,468.801483 226.344894,460.446686 231.581497,452.179596 
+        C245.102722,430.833618 258.718994,409.547760 272.210297,388.182953 
+        C282.603638,371.724121 292.871124,355.185760 303.176727,338.671661 
+        C304.418030,336.682556 305.916138,334.469849 304.296143,332.218475 
+        C302.702148,330.003265 300.220581,331.372528 298.234436,331.769104 
+        C283.433899,334.724213 268.691284,337.977448 253.865311,340.793976 
+        C246.881058,342.120758 241.240997,338.187439 239.534866,331.687408 
+        C237.705307,324.717194 240.886230,317.418762 247.491089,315.227692 
+        C258.403839,311.607605 269.803864,310.248322 280.903198,307.495819 
+        C296.046570,303.740479 311.404266,300.852600 326.658051,297.537354 
+        C330.391357,296.725952 334.056458,295.250061 337.943420,295.890137 
+        C343.691833,296.836761 348.264984,299.444458 350.125183,305.447754 
+        C354.241425,318.731598 357.235260,332.310791 360.808319,345.730957 
+        C364.603638,359.985962 368.108307,374.313019 371.797638,388.591766 
+        C374.469818,398.933685 370.331879,405.260895 360.585510,406.890869 
+        C354.411438,407.923462 346.772797,402.787964 345.321350,396.693878 
+        C341.760986,381.744904 338.171661,366.802826 334.581635,351.860962 
+        C334.171570,350.154266 333.339386,348.658813 331.474823,348.327606 
+        C329.035187,347.894287 327.904663,349.735382 326.846344,351.443634 
+        C320.277618,362.046173 313.797150,372.703796 307.180023,383.275909 
+        C289.544556,411.451935 271.880280,439.610016 254.169403,467.738647 
+        C249.386551,475.334808 244.383743,482.792267 239.516464,490.335724 
+        C238.799866,491.446320 238.096786,492.623413 237.695953,493.869019 
+        C236.546555,497.440613 237.882385,498.993225 241.564804,498.173889 
+        C251.913513,495.871185 262.296417,493.673218 272.534393,490.941376 
+        C277.992615,489.484924 283.582489,488.839905 289.057373,487.420563 
+        C296.259705,485.553436 303.510376,492.006439 305.014374,500.388977 
+        C306.044312,506.129395 300.370911,513.908203 294.022125,515.014221 
+        C268.508026,519.458984 243.489944,526.150330 218.197800,531.595459 
+        C214.795654,532.327942 211.356613,533.032471 207.898453,533.332153 
+        C200.154968,534.003113 194.763855,530.285095 192.642212,522.796204 
+        C189.129181,510.395905 185.839096,497.932556 182.350723,485.525146 
+        C178.272842,471.021027 174.147202,456.532623 170.898819,441.810883 
+        C168.402664,430.498383 176.570465,422.575623 188.218002,425.571594 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M416.878723,705.148254 
+        C396.423340,704.158020 376.391968,703.368347 356.384186,702.180969 
+        C337.865570,701.082092 319.371338,699.569336 300.868103,698.215332 
+        C291.104645,697.500854 286.319336,692.641418 286.673981,683.878845 
+        C286.977234,676.386230 293.524384,670.363525 302.106995,670.825867 
+        C318.654633,671.717102 335.178070,673.102356 351.698273,674.446045 
+        C373.857361,676.248474 396.056061,677.306274 418.266602,678.088135 
+        C447.171967,679.105774 476.021393,677.949768 504.880951,676.090576 
+        C518.473450,675.214905 532.009949,673.882751 545.577271,672.827454 
+        C547.671326,672.664673 549.785706,672.575012 550.442627,670.237000 
+        C551.085327,667.949524 549.430481,666.490173 547.774902,665.311646 
+        C534.640686,655.961548 521.569519,646.518372 508.282593,637.389587 
+        C503.413635,634.044434 500.845612,629.769043 501.322510,624.069885 
+        C501.799713,618.366821 504.777985,614.119812 510.394257,612.053345 
+        C513.991699,610.729614 517.431946,610.593933 520.749573,612.886292 
+        C537.832825,624.690125 554.671753,636.833679 571.534912,648.948364 
+        C580.568298,655.438171 589.884705,661.563354 598.831726,668.191467 
+        C604.797974,672.611389 606.719666,680.881226 602.803101,687.248413 
+        C594.964905,699.991333 586.764099,712.512085 578.654663,725.086792 
+        C571.630981,735.977844 564.542480,746.827148 557.447266,757.671753 
+        C555.630554,760.448425 553.832275,763.259705 551.759216,765.841309 
+        C547.599731,771.021179 539.799622,772.427246 534.869507,769.080688 
+        C528.038330,764.443726 526.087158,757.881165 529.615295,751.168213 
+        C537.291748,736.562561 547.524597,723.566711 555.950439,709.431702 
+        C556.461548,708.574280 557.049561,707.762695 557.602539,706.930237 
+        C558.663391,705.333069 559.372375,703.599731 558.391968,701.780579 
+        C557.322449,699.795898 555.245667,700.066650 553.472839,700.199768 
+        C543.875854,700.920532 534.286011,701.737549 524.695374,702.541565 
+        C504.040741,704.273193 483.341400,705.197876 462.625000,705.461243 
+        C447.524658,705.653320 432.417267,705.290710 416.878723,705.148254 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+        d="
+M633.939697,513.170654 
+        C617.527527,510.104584 601.564636,506.951324 585.564148,504.002136 
+        C577.590881,502.532562 569.543213,501.471008 561.539673,500.160706 
+        C555.271729,499.134552 550.233398,496.248840 547.592773,490.185333 
+        C545.387634,485.121826 547.426575,480.733917 550.226929,476.627075 
+        C553.573120,471.719604 560.096741,470.783081 568.491638,472.536865 
+        C581.795044,475.316071 595.231384,477.465149 608.628235,479.783844 
+        C610.358704,480.083344 612.475769,480.446136 613.521667,478.360077 
+        C614.403076,476.602142 613.380066,474.957581 612.254517,473.812866 
+        C602.972473,464.373657 598.512939,451.457428 589.244995,442.023010 
+        C588.898315,441.670135 588.594788,441.253448 588.354736,440.820221 
+        C580.765259,427.120758 571.049622,414.797363 561.809143,402.299347 
+        C554.326599,392.178925 548.692078,380.749084 539.881897,371.561066 
+        C537.163391,368.725983 535.484070,364.906982 533.254150,361.588715 
+        C522.334839,345.339966 510.182770,329.966309 499.438049,313.579590 
+        C493.577240,304.641357 496.644897,297.865417 501.621552,293.527924 
+        C507.379517,288.509460 517.298218,290.343323 522.135925,297.904907 
+        C528.767029,308.269653 536.104004,318.150482 543.433167,327.937073 
+        C550.282837,337.083435 555.490845,347.391541 563.440796,355.756195 
+        C565.922913,358.367828 567.584839,361.785889 569.487305,364.916809 
+        C576.221985,376.000427 584.292603,386.172791 591.593994,396.865295 
+        C601.497681,411.368652 611.861267,425.588104 622.031189,439.924927 
+        C626.435913,446.134369 630.853455,452.350189 635.114929,458.669891 
+        C636.170349,460.235168 637.270935,461.859009 639.452393,461.293152 
+        C641.527588,460.754913 642.248535,458.827728 642.372925,457.009430 
+        C643.436951,441.459167 648.317444,426.503174 649.418579,410.950348 
+        C649.866699,404.620789 657.571655,398.102905 663.402832,398.530792 
+        C671.409790,399.118317 677.431152,405.164276 676.954102,412.891418 
+        C676.557556,419.312653 675.844177,425.796387 674.410400,432.055237 
+        C670.959900,447.117371 669.655029,462.531372 666.447327,477.637421 
+        C665.016296,484.376801 664.505737,491.353088 663.427979,498.207642 
+        C661.406189,511.065369 655.208557,518.065979 640.749573,514.299866 
+        C638.667175,513.757446 636.500854,513.537109 633.939697,513.170654 
+z"/>
 </svg>

src/views/pages/circle-feed.ejs

@@ -1 +1 @@
 <div class="container cirkel-hero">
-  <span class="cirkel-badge" aria-hidden="true">
-    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
-      <defs>
-        <marker id="cf-a" viewBox="0 0 10 10" refX="6.5" refY="5" markerWidth="3" markerHeight="3" orient="auto-start-reverse"><path d="M2 2 L7 5 L2 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></marker>
-      </defs>
-      <circle cx="50" cy="50" r="45"/>
-      <line x1="35" y1="40" x2="54" y2="29" marker-start="url(#cf-a)" marker-end="url(#cf-a)"/>
-      <line x1="65" y1="34" x2="65" y2="61" marker-end="url(#cf-a)"/>
-      <line x1="33.2" y1="53.3" x2="54" y2="66.2" marker-end="url(#cf-a)"/>
-      <circle cx="23" cy="47" r="9"/>
-      <circle cx="65" cy="23" r="9"/>
-      <circle cx="65" cy="73" r="9"/>
-    </svg>
-  </span>
+  <span class="cirkel-badge" aria-hidden="true"></span>
   <h1><%= t('cfeed.title') %></h1>
   <p class="cirkel-sub"><%= t('cfeed.sub') %></p>
@@ -66 +53 @@
 <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; color: var(--accent); }
+.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 svg { width: 100%; height: 100%; }
 .cirkel-hero h1 { font-family: var(--font-display, serif); font-size: 2.4rem; margin: 0 0 .3rem; }