GameCult/gamecult-site
Watch
9
0
Fork
You've already forked gamecult-site
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Community hit gap: the row's gap is floored so neighbouring 44px hit areas never cross

Browse source 
The hit size becomes --gamecult-hit on the community row, read by the ::after
hit box and by gap: max(0.35em, calc(var(--gamecult-hit) + 1px - 0.92em)).
At desktop title sizes the em gap wins unchanged; at 1.9rem the gap grows so
centres sit 45px apart.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Meta Vens 2026-10-02 19:09:33 +02:00
commit b4a2767e68
1 changed files with 7 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

12
site/quartz/styles/custom.scss
View file

@ -726,7 +726,8 @@ body[data-slug="Blog/witness-authoritative-networking"] {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.35em;
--gamecult-hit: 44px;
gap: max(0.35em, calc(var(--gamecult-hit) + 1px - 0.92em));
margin-left: auto;
flex: 0 0 auto;
font-size: var(--gamecult-title-size);
@ -749,16 +750,17 @@ body[data-slug="Blog/witness-authoritative-networking"] {
width: 0.92em;
}
/* The hit area is at least 44px square around each box; the box and glyph
keep their em sizes. */
/* The hit area is at least --gamecult-hit square around each box; the box and
glyph keep their em sizes. The row's gap is floored so neighbouring hit
areas never cross (centres at least --gamecult-hit + 1px apart). */
.gamecult-nav-wordmark::after,
.gamecult-nav-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
width: max(100%, var(--gamecult-hit));
height: max(100%, var(--gamecult-hit));
transform: translate(-50%, -50%);
}