diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css index 2114fd3aa..8f7e35e9f 100644 --- a/app/components/layout/index.module.css +++ b/app/components/layout/index.module.css @@ -27,18 +27,29 @@ } .siteLogo { - display: grid; - place-items: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; width: 36px; height: 36px; background-color: var(--color-accent); border-radius: var(--radius-field); - font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text); text-decoration: none; flex-shrink: 0; transition: background-color 0.2s; + line-height: 1; + gap: 1px; +} + +.siteLogoS { + font-size: var(--font-sm); +} + +.siteLogoInk { + font-size: 10px; } .siteLogo:hover { @@ -131,16 +142,19 @@ @media screen and (max-width: 599px) { .mobileLogo { - display: grid; - place-items: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; width: 36px; height: 36px; background-color: var(--color-accent); border-radius: var(--radius-field); - font-size: var(--font-lg); font-weight: var(--weight-bold); color: var(--color-text); text-decoration: none; flex-shrink: 0; + line-height: 1; + gap: 1px; } } diff --git a/app/components/layout/index.tsx b/app/components/layout/index.tsx index 16d61ddf4..079a4eb7d 100644 --- a/app/components/layout/index.tsx +++ b/app/components/layout/index.tsx @@ -347,7 +347,7 @@ function SiteTitle() {
- S + @@ -370,10 +370,19 @@ function SiteTitle() { ); } +function SiteLogoContent() { + return ( + <> + S + ink + + ); +} + function MobileLogo() { return ( - S + ); }