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

Masthead: community links sized in em of the GAMECULT title; glow reduced; mobile size overrides deleted

Browse source 
The title size is one custom property on .gamecult-titlebar; $mobile overrides
only that property. Boxes are the title's line box (0.92em), icon glyphs 0.62em,
the Patreon wordmark 0.34em tall.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Meta Vens 2026-10-02 17:33:13 +02:00
commit 410485e50c
1 changed files with 16 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -644,6 +644,7 @@ body[data-slug="Blog/witness-authoritative-networking"] {
}
.gamecult-titlebar {
--gamecult-title-size: clamp(2.1rem, 4vw, 3.3rem);
display: flex;
flex-direction: column;
gap: 0.9rem;
@ -671,7 +672,7 @@ body[data-slug="Blog/witness-authoritative-networking"] {
margin: 0;
color: var(--dark);
font-family: var(--titleFont);
font-size: clamp(2.1rem, 4vw, 3.3rem);
font-size: var(--gamecult-title-size);
font-weight: 200;
line-height: 0.92;
letter-spacing: 0.08em;
@ -720,14 +721,17 @@ body[data-slug="Blog/witness-authoritative-networking"] {
color: var(--secondary);
}
/* The community row is sized in em of the title's own size, so at every width
each box is no taller than the title's line box and each glyph no taller
than its cap height. */
.gamecult-titlebar-community {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 1rem;
gap: 0.35em;
margin-left: auto;
flex: 0 0 auto;
padding-top: 0.1rem;
font-size: var(--gamecult-title-size);
}
.gamecult-nav-wordmark,
@ -735,6 +739,7 @@ body[data-slug="Blog/witness-authoritative-networking"] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 0.92em;
padding: 0;
line-height: 0;
color: rgba(236, 242, 250, 0.96);
@ -742,31 +747,24 @@ body[data-slug="Blog/witness-authoritative-networking"] {
}
.gamecult-nav-icon {
width: 4.7rem;
height: 4.7rem;
}
.gamecult-nav-wordmark {
min-width: 11.4rem;
height: 4.7rem;
width: 0.92em;
}
.gamecult-nav-wordmark svg,
.gamecult-nav-icon svg {
display: block;
fill: currentColor;
filter: drop-shadow(0 0 0.7rem rgba(89, 183, 255, 0.32));
filter: drop-shadow(0 0 0.1em rgba(89, 183, 255, 0.24));
}
.gamecult-nav-icon svg {
width: 3.5rem;
height: 3.5rem;
width: 0.62em;
height: 0.62em;
}
.gamecult-nav-wordmark svg {
width: 10.2rem;
height: auto;
max-height: 1.45rem;
width: 2.44em;
height: 0.34em;
}
.gamecult-nav-wordmark:hover,
@ -1443,9 +1441,8 @@ a:hover,
margin-top: 1.3rem;
}
.gamecult-titlebar-title,
.gamecult-titlebar-title a {
font-size: 1.9rem;
.gamecult-titlebar {
--gamecult-title-size: 1.9rem;
}
.gamecult-titlebar-nav {
@ -1459,31 +1456,7 @@ a:hover,
}
.gamecult-titlebar-community {
width: 100%;
justify-content: flex-start;
margin-left: 0;
padding-top: 0;
gap: 0.7rem;
}
.gamecult-nav-wordmark {
min-width: 9.8rem;
height: 3.9rem;
}
.gamecult-nav-wordmark svg {
width: 8.9rem;
max-height: 1.2rem;
}
.gamecult-nav-icon {
width: 3.9rem;
height: 3.9rem;
}
.gamecult-nav-icon svg {
width: 2.9rem;
height: 2.9rem;
}
.page > #quartz-body .center > article {