From 99de5950cf3cd00bbacd360be879ecae76037c94 Mon Sep 17 00:00:00 2001 From: kerthcet Date: Sun, 6 Sep 2026 11:20:59 +0100 Subject: [PATCH 1/2] One format for the place on a contributor card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The card's heading was split on the comma so the country could carry the lighter ink. That put the comma on the city's side of the split and in the city's weight, so the line read "Shanghai," and then "China" rather than reading "Shanghai, China" — the two tones separated a name that is one thing. The heading is now `.label` whole, semibold, one colour: the weight is what separates the place from the handles under it, which is the only distinction that line needs. Country-level marks like India stop being a special case. Verified over CDP at 1440, 390 and 320: no heading wraps except "Amsterdam, Netherlands" in the 131px card the narrowest screen gives it, and the pointer walk from a dot into a card's links is unchanged. Co-Authored-By: Claude Opus 5 --- assets/scss/common/_custom.scss | 106 ++++++++++++++++++++++++++------ layouts/_default/home.html | 15 ++++- 2 files changed, 101 insertions(+), 20 deletions(-) diff --git a/assets/scss/common/_custom.scss b/assets/scss/common/_custom.scss index fa59c3b..b0d2667 100644 --- a/assets/scss/common/_custom.scss +++ b/assets/scss/common/_custom.scss @@ -742,17 +742,26 @@ $map-pulse-offsets: // CSS it is. width: 13rem; width: #{"min(13rem, calc(var(--map-room, 100) * 1cqw - 0.25rem))"}; - padding: 0.625rem 0.75rem; + padding: 0.6875rem 0.75rem; text-align: left; // Opaque: it sits on the map, and a tint would leave coastlines running through // the faces. background: var(--bs-body-bg, #fff); border: 1px solid $map-land; - border-radius: 0.5rem; - box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); + // Rounded to match the project cards below the map rather than to a value of its + // own: 0.5rem here against their 0.75rem read as a different family of box on the + // same page. + border-radius: 0.75rem; + // Two shadows rather than one. The wide soft one lifts the card off the land; the + // tight dark one under it is what gives it an edge to sit on, which a single 24px + // blur cannot do at any alpha — turned up it greys the map, turned down the card + // floats without landing. + box-shadow: + 0 0.75rem 2rem rgba(0, 0, 0, 0.09), + 0 0.125rem 0.375rem rgba(0, 0, 0, 0.04); // Text sized against the page, not the map: this is html, so unlike the city // labels in the svg it does not shrink with the viewBox. - font-size: 0.8125rem; + font-size: 0.875rem; line-height: 1.4; opacity: 0; visibility: hidden; @@ -770,12 +779,48 @@ $map-pulse-offsets: // it, the neighbour needs one more move of the mouse to answer. Only ever a // neighbour of the city you are already reading, and only while you are reading it. pointer-events: auto; + + // A caret pointing back at the dot, on the card's own vertical centre — which is the + // dot's centre, because that is what the card is positioned from. It is the one thing + // that says which mark a card belongs to, and it earns its place on the cluster + // around the Pearl River Delta, where a card can float over three other dots and + // otherwise names its city without pointing at it. + // + // A rotated square with two borders, the classic recipe: the corner made by + // `border-left` and `border-bottom` faces left once the square is turned 45°. Half of + // it hangs outside the card, and its own background covers the length of the card's + // border it crosses. + &::before { + content: ""; + position: absolute; + top: 50%; + left: -0.3125rem; + width: 0.5625rem; + height: 0.5625rem; + background: var(--bs-body-bg, #fff); + border-left: 1px solid $map-land; + border-bottom: 1px solid $map-land; + border-bottom-left-radius: 0.0625rem; + transform: translateY(-50%) rotate(45deg); + } } -// East of the middle, the card opens the other way — see the template. +// East of the middle, the card opens the other way — see the template. The caret turns +// with it: the other two borders make the corner that faces right. .worldmap-hit-left .worldmap-city { left: auto; right: 100%; + + &::before { + left: auto; + right: -0.3125rem; + border-left: 0; + border-bottom: 0; + border-top: 1px solid $map-land; + border-right: 1px solid $map-land; + border-bottom-left-radius: 0; + border-top-right-radius: 0.0625rem; + } } .worldmap-hit:hover .worldmap-city, @@ -787,10 +832,21 @@ $map-pulse-offsets: visibility 0s; } +// The place, on one line and in one ink, with a hairline under it — the same hairline the +// legend rules its rows with, so the card and the list beside the map are ruled by the +// same line. +// +// The city and the country were two tones here for a while, the country in the lighter +// ink. It read wrong: the comma belongs to neither half, so it took the city's weight and +// the line broke as "Shanghai," + "China" rather than as one place name. A place name is +// one thing, so it gets one format, and the weight is what separates the head from the +// handles under it. .worldmap-city-head { - margin: 0 0 0.5rem; + margin: 0 0 0.375rem; + padding-bottom: 0.375rem; + border-bottom: 1px solid $map-land; font-weight: 600; - line-height: 1.35; + line-height: 1.3; } .worldmap-city-people { @@ -798,36 +854,43 @@ $map-pulse-offsets: padding-left: 0; list-style: none; - li { - padding: 0.125rem 0; - } - // The link is the row, not a word in it: the face and the handle are one target, and // the flexbox that used to be the `li` lives here so the target is the whole line - // rather than 13px of text. + // rather than 14px of text. a { display: flex; align-items: center; gap: 0.5rem; + // Out into the card's own padding, so the highlight below is a band across the card + // rather than a pill floating inside it — and back again as padding, so the text + // still starts where the heading's does. + margin: 0 -0.375rem; + padding: 0.1875rem 0.375rem; + border-radius: 0.5rem; // Ink, not link colour. Ten orange handles inside a small white card over a map of // orange dots would have been the loudest thing in the section, and every row here // is a link — so nothing is distinguished by colouring them all. What marks them is - // the underline on hover and the cursor, which is what a row this size can carry. + // the row lighting up under the pointer, which is what a row this size can carry. color: inherit; text-decoration: none; + transition: background-color 0.12s ease; + // The mark's own colour at a tenth: the row a pointer is on belongs to the map's + // palette, and a grey band inside an orange-dotted card read as a disabled row. Kept + // to a tint rather than the 22% the halo uses, because the handle has to stay + // readable on top of it. &:hover, &:focus-visible { color: inherit; - text-decoration: underline; + background: rgba($map-mark, 0.1); } // Keyboard reaches these: the card opens on `:focus-within`, so tabbing into it is - // how it is read without a pointer, and each row has to say which one it is on. + // how it is read without a pointer, and each row has to say which one it is on. The + // tint alone would not — it is the same one the pointer leaves behind. &:focus-visible { outline: 2px solid $map-mark; - outline-offset: 2px; - border-radius: 0.25rem; + outline-offset: -1px; } } } @@ -841,6 +904,9 @@ $map-pulse-offsets: // (`img-src`). A missing or slow avatar leaves a grey circle rather than a gap // that moves the handle beside it. background: $map-land; + // A hairline ring, so a pale or white-cornered avatar still reads as a circle against + // the card. `box-shadow` rather than `border`, which would eat a pixel of the face. + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); } .worldmap-city-login { @@ -859,8 +925,10 @@ $map-pulse-offsets: display: flex; align-items: center; gap: 0.5rem; - margin: 0.125rem 0 0; - padding: 0.125rem 0; + // The same vertical rhythm as the rows above, so the ellipsis lands on the beat the + // faces are on. + margin: 0; + padding: 0.1875rem 0; font-size: 0.75rem; color: $map-text; } diff --git a/layouts/_default/home.html b/layouts/_default/home.html index d2dd674..876a929 100644 --- a/layouts/_default/home.html +++ b/layouts/_default/home.html @@ -169,7 +169,20 @@

Contributors

{{/* The place, and only the place. The count was here — "Shanghai, China — 6 contributors" — and it said twice what the card already shows: the faces below are the count, and the dot's - size is what carries it on the map. */}} + size is what carries it on the map. + + `.label` whole, in one format on one line. It was split on the + comma for a while so the country could carry the lighter ink, + and that put the comma on the city's side of the split, in the + city's weight: the line read "Shanghai," and then "China" + instead of reading "Shanghai, China". + + `.label` rather than `.short` plus `.country`, which are also + here: `.label` is the one that carries the abbreviations the + map is drawn with — "USA" and "UK" rather than "United States" + and "United Kingdom" — and those are what fit on a line 13rem + wide. A country-level mark like India is a label with no comma + in it, and needs no case of its own. */}}

{{ .label }}