Sitelet https://github.com/aker-dev/microfolio/commit/2d04cc935b27814a371751b40969c3970591a691
Skip to content

Commit 2d04cc9

Browse files
zakxxiclaude
zakxxi
and
claude
committed
style: fold the map attribution, and give the empty video a surface
Three cosmetic knock-ons of recent work. The attribution now opens as a pill rather than a rectangle ending in a round button — the seam between the two was the whole complaint, and the square corners were mine: MapLibre gives that container a 12px radius natively and the OpenFreeMap pass flattened it. It also starts folded, down to the ⓘ alone. MapLibre opens it on first render even in compact mode, adding `maplibregl-compact-show` itself, so folding means taking that class back off after load. The credit stays one click away, which is what compact mode is for. Its focus ring was MapLibre's blue #0096ff glow, and the button carried `outline: none`, which is what had been stopping the site's own ring from ever reaching it. Both undone, on the zoom buttons too. The video player has had nothing to show since preload went to none, and unstyled it was a hole in the page in dark mode. It gets bg-box, the same surface as the document links below it, and a 16/9 box: with no metadata the element falls back to 300x150, which full width stretched into a 4:1 strip. A video of another shape is letterboxed, never cropped. Map screenshots retaken — the attribution reads differently now. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent c261a0d commit 2d04cc9

5 files changed

Lines changed: 50 additions & 2 deletions

File tree

‎doc/screenshots/microfolio_map.png‎

1.03 KB
Loading

‎doc/screenshots/microfolio_map_dark.png‎

64 Bytes
Loading

‎src/app.css‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,18 +134,42 @@
134134
paints that state white through `.maplibregl-ctrl-attrib.maplibregl-compact`,
135135
which ties on specificity and wins on order. Two classes left the bar white
136136
with white links on it — legible only where the text was not a link. */
137+
/* The one rounded surface in a square site, and deliberately so: this bar ends
138+
in MapLibre's round ⓘ button, and square corners left a rectangle with a disc
139+
stuck on its end. A pill runs into the button instead. */
137140
.maplibregl-ctrl.maplibregl-ctrl-attrib,
138141
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
139-
border-radius: 0;
142+
border-radius: 9999px;
140143
background-color: var(--color-box);
141144
color: var(--color-primary);
142145
font-size: 0.6875rem;
143146
}
144147

148+
/* Folded, the container is nothing but the button itself, so it carries no
149+
surface of its own — otherwise two discs sit one on the other. */
150+
.maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
151+
background-color: transparent;
152+
}
153+
145154
.maplibregl-ctrl.maplibregl-ctrl-attrib a {
146155
color: var(--color-primary);
147156
}
148157

158+
/* MapLibre rings its buttons in #0096ff and, on the attribution one, sets
159+
`outline: none`, which is what kept the site's own focus ring from ever
160+
showing. Both undone so :focus-visible in this file applies here like
161+
anywhere else. */
162+
.maplibregl-ctrl .maplibregl-ctrl-attrib-button:focus,
163+
.maplibregl-ctrl.maplibregl-ctrl-group button:focus {
164+
box-shadow: none;
165+
}
166+
167+
.maplibregl-ctrl .maplibregl-ctrl-attrib-button:focus-visible,
168+
.maplibregl-ctrl.maplibregl-ctrl-group button:focus-visible {
169+
outline: 2px solid var(--color-primary);
170+
outline-offset: 2px;
171+
}
172+
149173
/* MapLibre bakes its icons into dark SVG data URIs, and the only variants it
150174
ships are for Windows' forced-colors mode — so on a dark control they go
151175
invisible. Inverted rather than replaced, and tested through both mechanisms

‎src/routes/map/+page.svelte‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
map.on('load', () => {
8181
mapReady = true;
8282
updateMarkers();
83+
foldAttribution();
8384
});
8485
8586
// Light and dark are two published styles rather than one repainted, so
@@ -121,6 +122,22 @@
121122
* wants [longitude, latitude]. This is the one place the two orders meet, and
122123
* the only place the swap happens.
123124
*/
125+
/**
126+
* Leaves the attribution as the ⓘ button alone. MapLibre opens it on first
127+
* render even in compact mode — it adds `maplibregl-compact-show` itself — so
128+
* folding it means taking that class back off. The credit stays one click
129+
* away, which is what compact mode is for.
130+
*
131+
* Through the class rather than the control's `_toggleAttribution`, which is
132+
* private. The class names are no more stable, but `app.css` already leans on
133+
* exactly these.
134+
*/
135+
function foldAttribution() {
136+
mapContainer
137+
?.querySelector('.maplibregl-ctrl-attrib.maplibregl-compact-show')
138+
?.classList.remove('maplibregl-compact-show');
139+
}
140+
124141
function toLngLat(coordinates) {
125142
if (!Array.isArray(coordinates) || coordinates.length !== 2) return null;
126143

‎src/routes/projects/[slug]/+page.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,14 @@
254254
project's single video, more than everything else on the page
255255
put together. Nothing is fetched now until the visitor presses
256256
play. -->
257-
<video controls class="w-full" preload="none">
257+
<!-- Given a surface rather than a frame: with nothing preloaded the
258+
player has no still to show, and left unstyled it is a hole in the
259+
page in dark mode. bg-box, the same surface as the document links
260+
below, and a 16/9 box because an element with no metadata falls
261+
back to 300x150, which full width stretches into a 4:1 strip.
262+
Videos of another shape are letterboxed, never cropped: a video
263+
element contains rather than covers. -->
264+
<video controls class="bg-box aspect-video w-full" preload="none">
258265
<source src={video.path} type="video/mp4" />
259266
<track kind="captions" />
260267
{$_('ui.video_not_supported')}

0 commit comments

Comments
 (0)