The logo stands on the baseline beside its name
The mark sat in a square with room around it and was centred on the line box, so beside "g1t" it floated high with an uneven gap. Beside type it is now cropped to the figure, as tall as the capitals and standing on the baseline, as in the brand files, on g1t.sh and in the docs.
2 files+29−130/2 viewed
| 4 | 4 | --- | |
| 5 | 5 | ||
| 6 | 6 | <a href="/" class="g1t-title" aria-label="g1t docs home"> | |
| 7 | − | <svg viewBox="0 0 32 32" aria-hidden="true"> | |
| 7 | + | <span class="g1t-title-lockup"> | |
| 8 | + | <svg viewBox="6.9 5 18.2 22" aria-hidden="true"> | |
| 8 | 9 | <g transform="translate(0.7 0.5)"> | |
| 9 | 10 | <rect x="6.2" y="9.5" width="4.4" height="17" rx="2.2" fill="var(--g1t-merged)" fill-opacity="0.35"></rect> | |
| 10 | 11 | <rect x="12.4" y="7" width="4.8" height="19.5" rx="2.4" fill="var(--g1t-merged)" fill-opacity="0.65"></rect> | |
| 13 | 14 | </g> | |
| 14 | 15 | </svg> | |
| 15 | 16 | <span class="g1t-title-name">g1t</span> | |
| 17 | + | </span> | |
| 16 | 18 | <span class="g1t-title-docs">Docs</span> | |
| 17 | 19 | </a> | |
| 18 | 20 | ||
| 20 | 22 | .g1t-title { | |
| 21 | 23 | display: inline-flex; | |
| 22 | 24 | align-items: center; | |
| 23 | − | gap: 0.55rem; | |
| 25 | + | gap: 0.6rem; | |
| 24 | 26 | color: var(--g1t-fg); | |
| 25 | 27 | text-decoration: none; | |
| 26 | 28 | } | |
| 29 | + | /* As on g1t.sh: the mark as tall as the capitals, on the baseline. */ | |
| 30 | + | .g1t-title-lockup { | |
| 31 | + | display: inline-flex; | |
| 32 | + | align-items: baseline; | |
| 33 | + | gap: 0.3em; | |
| 34 | + | font-size: 1.25rem; | |
| 35 | + | font-weight: 700; | |
| 36 | + | line-height: 1; | |
| 37 | + | } | |
| 27 | 38 | svg { | |
| 28 | − | width: 1.35rem; | |
| 29 | − | height: 1.35rem; | |
| 39 | + | height: 0.74em; | |
| 40 | + | width: auto; | |
| 41 | + | flex-shrink: 0; | |
| 30 | 42 | } | |
| 31 | 43 | .g1t-title-name { | |
| 32 | − | font-size: 1.05rem; | |
| 33 | − | font-weight: 700; | |
| 34 | − | letter-spacing: -0.035em; | |
| 44 | + | letter-spacing: -0.045em; | |
| 35 | 45 | } | |
| 36 | 46 | .g1t-title-docs { | |
| 37 | 47 | border-radius: 999px; |
| 4 | 4 | * the two behind it fade into lavender. The same shapes as the favicon and | |
| 5 | 5 | * the brand files in .g1t/brand and public/brand. | |
| 6 | 6 | */ | |
| 7 | − | export function Mark({ className }: { className?: string }) { | |
| 7 | + | export function Mark({ className, tight = false }: { className?: string; tight?: boolean }) { | |
| 8 | 8 | return ( | |
| 9 | − | <svg viewBox="0 0 32 32" className={className} aria-hidden="true"> | |
| 9 | + | // Square for icons; `tight` crops to the figure itself, for setting it | |
| 10 | + | // beside type, where it must stand on the baseline. | |
| 11 | + | <svg viewBox={tight ? "6.9 5 18.2 22" : "0 0 32 32"} className={className} aria-hidden="true"> | |
| 10 | 12 | <g transform="translate(0.7 0.5)"> | |
| 11 | 13 | {/* The agents behind */} | |
| 12 | 14 | <rect x="6.2" y="9.5" width="4.4" height="17" rx="2.2" fill="var(--g1t-merged)" fillOpacity="0.35" /> | |
| 19 | 21 | ); | |
| 20 | 22 | } | |
| 21 | 23 | ||
| 22 | − | export function Logo() { | |
| 24 | + | /** | |
| 25 | + | * The lockup, as in the brand files: the mark as tall as the wordmark's | |
| 26 | + | * capitals, standing on its baseline. Sized by its font size. | |
| 27 | + | */ | |
| 28 | + | export function Logo({ className = "text-[1.3rem]" }: { className?: string }) { | |
| 23 | 29 | return ( | |
| 24 | − | <span className="inline-flex items-center gap-2 text-fg"> | |
| 25 | − | <Mark className="size-6" /> | |
| 26 | − | <span className="text-[1.15rem] leading-none font-bold tracking-[-0.035em]">g1t</span> | |
| 30 | + | <span className={`inline-flex items-baseline gap-[0.3em] leading-none font-bold text-fg ${className}`}> | |
| 31 | + | <Mark tight className="h-[0.74em] w-auto shrink-0 self-baseline" /> | |
| 32 | + | <span className="tracking-[-0.045em]">g1t</span> | |
| 27 | 33 | </span> | |
| 28 | 34 | ); | |
| 29 | 35 | } |