From 45cc99a2e08a6b57e7e7a5b59649b9218c7a4db8 Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 24 Apr 2025 14:04:06 -0400 Subject: [PATCH] UX: better full-width support for wide logos (#149) Helps avoid situations like this: ![image](https://github.com/user-attachments/assets/78adec74-8fb7-457f-b592-da1b56a98b1a) Some examples... text-logos ![image](https://github.com/user-attachments/assets/c87333cb-727a-4167-af76-a5db0b3cd20c) ![image](https://github.com/user-attachments/assets/8cc62ab9-4f3e-4697-a763-851dc21aa2ec) ![image](https://github.com/user-attachments/assets/e36ffa7e-a3a9-463a-b448-833da2b3bc69) image-logos ![image](https://github.com/user-attachments/assets/962f33c1-d83c-4d74-a707-ec1fb867d557) ![image](https://github.com/user-attachments/assets/0014505a-bfab-4616-962a-c1a5fa30938e) ![image](https://github.com/user-attachments/assets/32d9730a-1a43-49ac-b160-b6dd610f4482) --- scss/desktop-full-width.scss | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/scss/desktop-full-width.scss b/scss/desktop-full-width.scss index a581c15..de1378b 100644 --- a/scss/desktop-full-width.scss +++ b/scss/desktop-full-width.scss @@ -13,12 +13,28 @@ $sidebar-width: 17em; } .d-header #site-logo { - // constraining the logo to fit its grid container // this prevents the logo from shifting header content // when the sidebar is opened max-height: 100%; max-width: 100%; object-fit: contain; // contains logo without squishing/stretching + + // allows some flexibility for wide logos + body:not(.has-sidebar-page) & { + max-width: unset; + @include breakpoint("mobile-extra-large") { + max-width: 25vw; + } + } +} + +.d-header #site-text-logo { + font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2)); + .has-sidebar-page & { + white-space: wrap; + line-height: var(--line-height-small); + @include line-clamp(2); + } } #main-outlet-wrapper { @@ -150,7 +166,7 @@ $sidebar-width: 17em; overflow: visible; .title { - flex: 1 0 auto; + flex: 1 1 auto; } }