Compare changes
Choose two branches to see what one has that the other does not, then open a pull request for it.
1 commit
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 | } |