Skip to content

Commit 8acfee1

Browse files
githubflyideasgithubflyideas
committed
v2.11.2: brand visibility — bigger mark, blinking dot, new tagline, Fogping cross-link
- .mark grown from 19px to 26px, close to the metric readouts (30px) instead of reading as a subtitle. It was too easy to miss at a glance, which is the one job a wordmark has. - the dot after 'pingping' now alternates the same green/red already used for host status (healthy/down), so the letterhead uses a colour vocabulary the reader already knows instead of inventing one. Respects prefers-reduced-motion. - tagline: 'One binary. One graph. One metric: Latency.' replaces 'Zero guesswork.' (updated in both the visible tag and the share-intent text) - sponsor bar gains a 'Powered by Fogping' link next to Star on GitHub, pointing at the sibling project. Verified in a headless browser against a real build: mark renders at 26px, the blink dot is present, tagline and Fogping link resolve, zero console/page errors.
1 parent be4b4d0 commit 8acfee1

1 file changed

Lines changed: 16 additions & 4 deletions

File tree

‎static/index.html‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@
7272
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
7373
header { display:flex; align-items:baseline; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
7474
.mark { color:var(--phos); font-family:var(--mono); font-weight:700;
75-
font-size:var(--fs-title); letter-spacing:.04em; }
75+
font-size:26px; letter-spacing:.03em; display:flex; align-items:center; gap:9px; }
7676
.tag { color:var(--dim); font-size:var(--fs-small); font-weight:400; letter-spacing:.01em; }
7777
.row { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; flex-wrap:wrap; }
7878
.pills { display:flex; gap:8px; flex-wrap:wrap; }
@@ -83,6 +83,17 @@
8383
.pill.on { border-color:var(--phos); color:var(--phos); font-weight:600; }
8484
.led { width:8px; height:8px; border-radius:50%; background:var(--phos); box-shadow:0 0 6px var(--phos); }
8585
.led.bad { background:var(--alert); box-shadow:0 0 6px var(--alert); }
86+
/* Brand dot: alternates the two colours already used for host status (green =
87+
healthy, red = down), so the same signal that reads "up/down" on a target row
88+
reads "alive" at the letterhead — a small mnemonic, not a new colour language. */
89+
.brand-led { width:11px; height:11px; border-radius:50%; flex:none;
90+
animation: brand-blink 2.4s ease-in-out infinite; }
91+
@keyframes brand-blink {
92+
0%, 45% { background:var(--phos); box-shadow:0 0 8px var(--phos); }
93+
50%, 95% { background:var(--alert); box-shadow:0 0 8px var(--alert); }
94+
100% { background:var(--phos); box-shadow:0 0 8px var(--phos); }
95+
}
96+
@media (prefers-reduced-motion: reduce) { .brand-led { animation:none; background:var(--phos); } }
8697
.rng { display:flex; background:var(--panel); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
8798
.rng span { color:var(--dim); font-family:var(--sans); font-size:var(--fs-micro);
8899
font-weight:600; padding:9px 10px 0 12px; letter-spacing:.14em; }
@@ -130,8 +141,8 @@
130141
</head>
131142
<body>
132143
<header>
133-
<div class="mark">pingping ●</div>
134-
<div class="tag">One binary. One graph. Zero guesswork.</div>
144+
<div class="mark">pingping <span class="brand-led"></span></div>
145+
<div class="tag">One binary. One graph. One metric: Latency.</div>
135146
<button class="pill" id="themeBtn" title="switch theme" style="margin-left:auto">◐ <span id="themeName">dark</span></button>
136147
</header>
137148

@@ -187,6 +198,7 @@
187198
<div class="promo-h">LIKE PINGPING? <span id="ver" style="color:var(--phos)"></span></div>
188199
<div class="promo-b">
189200
<a href="https://github.com/githubflyideas/pingping" target="_blank" rel="noopener">★ Star on GitHub</a>
201+
<a href="https://github.com/githubflyideas/fogping" target="_blank" rel="noopener">Powered by Fogping</a>
190202
<span class="share-links" id="shareLinks"></span>
191203
</div>
192204
</div>
@@ -413,7 +425,7 @@
413425

414426
(function buildShare() {
415427
const url = 'https://github.com/githubflyideas/pingping';
416-
const text = 'pingping — a single-binary link quality oscilloscope. One binary. One graph. Zero guesswork.';
428+
const text = 'pingping — a single-binary link quality oscilloscope. One binary. One graph. One metric: Latency.';
417429
const links = {
418430
X: `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`,
419431
Facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,

0 commit comments

Comments
 (0)