hoelee/hoelee-blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(listing): portfolio-first archive, case-study hero, row action links

Browse Source 
/posts/ and /zh/posts/ become hybrid: three fixed-slug flagship cards above the
complete year/month archive, with the flagship block collapsing (inert, h=0) as
soon as the reader filters. /categories/case-studies/ becomes a portfolio: compact
two-column hero with a 21:9 deterministic topology banner, flagship ordering from
lib/portfolio.ts instead of pubDate, and one measured pill per card.

Also fixes what the screenshot review turned up: ZH archive rows and category chips
were printing raw English slugs, the two chip strips were unlabelled and read as one
list with a duplicated 'devops', card meta rows broke rhythm past four tags, the nav
had no current-section indicator, and mobile title links were under the 44px tap
minimum. scripts/probe-layout.mjs is the repeatable gate: 72/72 page x viewport
checks and the collapse test.
This commit is contained in:
hoelee committed 2026-10-27 04:06:54 +08:00
1 parent 68771101ea
commit 041471d25e
17 files changed
+1632 -76
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/images/categories/case-studies-banner.svg
+324
View File
@@ -0,0 +1,324 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="1029" viewBox="0 0 2400 1029" role="img">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#08120f" />
<stop offset="0.55" stop-color="#0c1a15" />
<stop offset="1" stop-color="#0a1512" />
</linearGradient>
<radialGradient id="copperGlow" cx="0.18" cy="0.9" r="0.7">
<stop offset="0" stop-color="#c07a3e" stop-opacity="0.16" />
<stop offset="1" stop-color="#c07a3e" stop-opacity="0" />
</radialGradient>
<radialGradient id="hubGlow" cx="0.5" cy="0.45" r="0.6">
<stop offset="0" stop-color="#d08b4a" stop-opacity="0.55" />
<stop offset="1" stop-color="#d08b4a" stop-opacity="0" />
</radialGradient>
<pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#8fb3a2" stroke-width="0.5" opacity="0.06" />
</pattern>
</defs>
<rect width="2400" height="1029" fill="url(#bg)" />
<rect width="2400" height="1029" fill="url(#grid)" />
<rect width="2400" height="1029" fill="url(#copperGlow)" />
<!-- baseline: the network everything sits on -->
<path d="M 60 909 H 2340" stroke="#2f5342" stroke-width="2" />
<path d="M 60 909 H 2340" stroke="#d08b4a" stroke-width="2" stroke-dasharray="120 26 8 26" opacity="0.45" />
<rect x="90" y="893" width="2" height="30" fill="#2f5342" />
<rect x="186" y="893" width="2" height="30" fill="#2f5342" />
<rect x="282" y="893" width="2" height="30" fill="#2f5342" />
<rect x="378" y="893" width="2" height="30" fill="#2f5342" />
<rect x="474" y="893" width="2" height="30" fill="#2f5342" />
<rect x="570" y="893" width="2" height="30" fill="#2f5342" />
<rect x="666" y="893" width="2" height="30" fill="#2f5342" />
<rect x="762" y="893" width="2" height="30" fill="#2f5342" />
<rect x="858" y="893" width="2" height="30" fill="#2f5342" />
<rect x="954" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1050" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1146" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1242" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1338" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1434" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1530" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1626" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1722" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1818" y="893" width="2" height="30" fill="#2f5342" />
<rect x="1914" y="893" width="2" height="30" fill="#2f5342" />
<rect x="2010" y="893" width="2" height="30" fill="#2f5342" />
<rect x="2106" y="893" width="2" height="30" fill="#2f5342" />
<rect x="2202" y="893" width="2" height="30" fill="#2f5342" />
<rect x="2298" y="893" width="2" height="30" fill="#2f5342" />
<g transform="translate(0, 24)">
<g>
<rect x="130" y="300" width="300" height="204" rx="12" fill="#0f1d18" stroke="#2f5342" stroke-width="1.8" />
<path d="M 130 326 h 300" stroke="#355944" stroke-width="1.4" />
<circle cx="148" cy="313" r="4" fill="#4fae7a" />
<circle cx="162" cy="313" r="4" fill="#3a7157" />
<circle cx="176" cy="313" r="4" fill="#d08b4a" />
<rect x="386" y="308" width="32" height="10" rx="5" fill="#1d3229" />
<rect x="144.0" y="340.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="172.0" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="200.0" y="340.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="228.0" y="340.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="256.0" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="284.0" y="340.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="312.0" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="340.0" y="340.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="368.0" y="340.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="396.0" y="340.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="144.0" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="172.0" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="200.0" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="228.0" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="256.0" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="284.0" y="355.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="312.0" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="340.0" y="355.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="368.0" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="396.0" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="144.0" y="370.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="172.0" y="370.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="200.0" y="370.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="228.0" y="370.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="256.0" y="370.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="284.0" y="370.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="312.0" y="370.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="340.0" y="370.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="368.0" y="370.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="396.0" y="370.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="144.0" y="385.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="172.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="200.0" y="385.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="228.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="256.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="284.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="312.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="340.0" y="385.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="368.0" y="385.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="396.0" y="385.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="144.0" y="400.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="172.0" y="400.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="200.0" y="400.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="228.0" y="400.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="256.0" y="400.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="284.0" y="400.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="312.0" y="400.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="340.0" y="400.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="368.0" y="400.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="396.0" y="400.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="144.0" y="415.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="172.0" y="415.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="200.0" y="415.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="228.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="256.0" y="415.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="284.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="312.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="340.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="368.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="396.0" y="415.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="144.0" y="430.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="172.0" y="430.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="144" y="492" width="272" height="2" rx="1" fill="#3a7157" opacity="0.8" />
<rect x="254" y="512" width="52" height="4" rx="2" fill="#2f5342" />
</g>
<g>
<rect x="520" y="210" width="320" height="234" rx="12" fill="#0f1d18" stroke="#2f5342" stroke-width="1.8" />
<path d="M 520 236 h 320" stroke="#355944" stroke-width="1.4" />
<circle cx="538" cy="223" r="4" fill="#4fae7a" />
<circle cx="552" cy="223" r="4" fill="#3a7157" />
<circle cx="566" cy="223" r="4" fill="#d08b4a" />
<rect x="796" y="218" width="32" height="10" rx="5" fill="#1d3229" />
<rect x="534.0" y="250.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="564.2" y="250.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="594.4" y="250.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="624.7" y="250.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="654.9" y="250.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="685.1" y="250.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="250.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="745.6" y="250.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="775.8" y="250.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="806.0" y="250.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="534.0" y="265.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="564.2" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="594.4" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="624.7" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="654.9" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="685.1" y="265.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="715.3" y="265.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="745.6" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="775.8" y="265.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="806.0" y="265.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="534.0" y="280.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="564.2" y="280.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="594.4" y="280.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="624.7" y="280.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="654.9" y="280.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="685.1" y="280.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="280.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="745.6" y="280.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="775.8" y="280.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="806.0" y="280.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="534.0" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="564.2" y="295.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="594.4" y="295.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="624.7" y="295.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="654.9" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="685.1" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="745.6" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="775.8" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="806.0" y="295.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="534.0" y="310.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="564.2" y="310.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="594.4" y="310.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="624.7" y="310.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="654.9" y="310.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="685.1" y="310.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="310.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="745.6" y="310.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="775.8" y="310.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="806.0" y="310.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="534.0" y="325.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="564.2" y="325.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="594.4" y="325.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="624.7" y="325.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="654.9" y="325.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="685.1" y="325.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="325.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="745.6" y="325.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="775.8" y="325.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="806.0" y="325.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="534.0" y="340.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="564.2" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="594.4" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="624.7" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="654.9" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="685.1" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="715.3" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="745.6" y="340.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="775.8" y="340.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="806.0" y="340.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="534.0" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="564.2" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="594.4" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="624.7" y="355.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="654.9" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="685.1" y="355.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="715.3" y="355.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="745.6" y="355.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="534" y="432" width="292" height="2" rx="1" fill="#3a7157" opacity="0.8" />
<rect x="654" y="452" width="52" height="4" rx="2" fill="#2f5342" />
</g>
<g>
<rect x="930" y="396" width="280" height="159" rx="12" fill="#0f1d18" stroke="#2f5342" stroke-width="1.8" />
<path d="M 930 422 h 280" stroke="#355944" stroke-width="1.4" />
<circle cx="948" cy="409" r="4" fill="#4fae7a" />
<circle cx="962" cy="409" r="4" fill="#3a7157" />
<circle cx="976" cy="409" r="4" fill="#d08b4a" />
<rect x="1166" y="404" width="32" height="10" rx="5" fill="#1d3229" />
<rect x="944.0" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="969.8" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="995.6" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1021.3" y="436.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="1047.1" y="436.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="1072.9" y="436.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="1098.7" y="436.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="1124.4" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1150.2" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1176.0" y="436.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="944.0" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="969.8" y="451.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="995.6" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1021.3" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1047.1" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1072.9" y="451.0" width="20" height="11" rx="2.5" fill="#d08b4a" />
<rect x="1098.7" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1124.4" y="451.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="1150.2" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="1176.0" y="451.0" width="20" height="11" rx="2.5" fill="#3a7157" />
<rect x="944.0" y="466.0" width="20" height="11" rx="2.5" fill="#4fae7a" />
<rect x="969.8" y="466.0" width="20" height="11" rx="2.5" fill="#2e5c48" />
<rect x="944" y="543" width="252" height="2" rx="1" fill="#3a7157" opacity="0.8" />
<rect x="1044" y="563" width="52" height="4" rx="2" fill="#2f5342" />
</g>
<g>
<path d="M 300 760 H 1560" fill="none" stroke="#d08b4a" stroke-width="3" opacity="0.7" stroke-linecap="round" />
<path d="M 1560 760 V 714" fill="none" stroke="#d08b4a" stroke-width="3" opacity="0.7" />
<circle cx="1560" cy="714" r="5" fill="#e8ab76" />
<g>
<path d="M 280 526 V 754" fill="none" stroke="#d08b4a" stroke-width="2.4" opacity="0.7" />
<circle cx="280" cy="526" r="4.5" fill="#d08b4a" />
<circle cx="280" cy="760" r="4" fill="#e8ab76" />
</g>
<g>
<path d="M 680 466 V 754" fill="none" stroke="#d08b4a" stroke-width="2.4" opacity="0.7" />
<circle cx="680" cy="466" r="4.5" fill="#d08b4a" />
<circle cx="680" cy="760" r="4" fill="#e8ab76" />
</g>
<g>
<path d="M 1070 577 V 754" fill="none" stroke="#d08b4a" stroke-width="2.4" opacity="0.7" />
<circle cx="1070" cy="577" r="4.5" fill="#d08b4a" />
<circle cx="1070" cy="760" r="4" fill="#e8ab76" />
</g>
</g>
<g>
<circle cx="1560" cy="514" r="196" fill="none" stroke="#3a7157" stroke-width="1.4" stroke-dasharray="4 9" opacity="0.9" />
<circle cx="1560" cy="514" r="152" fill="none" stroke="#4a8f6f" stroke-width="1.6" opacity="0.85" />
<circle cx="1560" cy="514" r="110" fill="#0d1f1a" stroke="#528b74" stroke-width="2.2" />
<circle cx="1560" cy="514" r="110" fill="url(#hubGlow)" opacity="0.55" />
<path d="M 1560 462 c 30 25 39 39 39 57 a 39 39 0 0 1 -78 0 c 0 -18 9 -32 39 -57 z" fill="#d08b4a" />
<path d="M 1560 496 c 14 14 18 21 18 30 a 18 18 0 0 1 -36 0 c 0 -9 4 -16 18 -30 z" fill="#0d1f1a" opacity="0.72" />
<g>
<rect x="1766" y="275" width="160" height="86" rx="10" fill="#0f1d18" stroke="#2f5342" stroke-width="1.4" />
<polyline points="1782,337 1796,329 1810,333 1824,319 1838,323 1852,311 1866,315" fill="none" stroke="#d08b4a" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" opacity="0.95" />
<rect x="1782" y="291" width="46" height="6" rx="3" fill="#3a7157" />
</g>
<g>
<rect x="1766" y="405" width="160" height="86" rx="10" fill="#0f1d18" stroke="#2f5342" stroke-width="1.4" />
<polyline points="1782,443 1796,455 1810,447 1824,461 1838,451 1852,463 1866,455" fill="none" stroke="#d08b4a" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" opacity="0.95" />
<rect x="1782" y="421" width="46" height="6" rx="3" fill="#3a7157" />
</g>
<g>
<rect x="1766" y="537" width="160" height="86" rx="10" fill="#0f1d18" stroke="#2f5342" stroke-width="1.4" />
<polyline points="1782,593 1796,577 1810,585 1824,571 1838,579 1852,575 1866,583" fill="none" stroke="#d08b4a" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" opacity="0.95" />
<rect x="1782" y="553" width="46" height="6" rx="3" fill="#3a7157" />
</g>
<g>
<rect x="1766" y="667" width="160" height="86" rx="10" fill="#0f1d18" stroke="#2f5342" stroke-width="1.4" />
<polyline points="1782,715 1796,713 1810,719 1824,707 1838,711 1852,701 1866,709" fill="none" stroke="#d08b4a" stroke-width="2.2" stroke-linejoin="round" stroke-linecap="round" opacity="0.95" />
<rect x="1782" y="683" width="46" height="6" rx="3" fill="#3a7157" />
</g>
</g>
<g>
<path d="M 1760 494 C 1860 494, 1860 376, 1960 376" fill="none" stroke="#5fd3a0" stroke-width="2.6" opacity="0.85" stroke-dasharray="8 7" />
<path d="M 2130 376 C 2240 376, 2220 526, 2160 526" fill="none" stroke="#5fd3a0" stroke-width="2.6" opacity="0.85" stroke-dasharray="8 7" />
<path d="M 2245 582 C 2245 640, 2160 676, 2130 676" fill="none" stroke="#5fd3a0" stroke-width="2.6" opacity="0.85" stroke-dasharray="8 7" />
<g>
<rect x="1960" y="320" width="170" height="112" rx="10" fill="#0f1d18" stroke="#3a7157" stroke-width="1.6" />
<rect x="1978" y="342" width="62" height="7" rx="3.5" fill="#4fae7a" />
<rect x="1978" y="364" width="112" height="6" rx="3" fill="#2e5c48" />
<rect x="1978" y="382" width="84" height="6" rx="3" fill="#2e5c48" />
<circle cx="2106" cy="346" r="5.5" fill="#4fae7a" />
<circle cx="2106" cy="346" r="12" fill="none" stroke="#4fae7a" stroke-width="1.2" opacity="0.5" />
</g>
<g>
<rect x="2160" y="470" width="170" height="112" rx="10" fill="#0f1d18" stroke="#3a7157" stroke-width="1.6" />
<rect x="2178" y="492" width="62" height="7" rx="3.5" fill="#4fae7a" />
<rect x="2178" y="514" width="112" height="6" rx="3" fill="#2e5c48" />
<rect x="2178" y="532" width="84" height="6" rx="3" fill="#2e5c48" />
<circle cx="2306" cy="496" r="5.5" fill="#4fae7a" />
<circle cx="2306" cy="496" r="12" fill="none" stroke="#4fae7a" stroke-width="1.2" opacity="0.5" />
</g>
<g>
<rect x="1960" y="620" width="170" height="112" rx="10" fill="#0f1d18" stroke="#3a7157" stroke-width="1.6" />
<rect x="1978" y="642" width="62" height="7" rx="3.5" fill="#4fae7a" />
<rect x="1978" y="664" width="112" height="6" rx="3" fill="#2e5c48" />
<rect x="1978" y="682" width="84" height="6" rx="3" fill="#2e5c48" />
<circle cx="2106" cy="646" r="5.5" fill="#4fae7a" />
<circle cx="2106" cy="646" r="12" fill="none" stroke="#4fae7a" stroke-width="1.2" opacity="0.5" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB