diff --git a/theme/pagetoc.css b/theme/pagetoc.css index 1b6947b26..f159b47f8 100644 --- a/theme/pagetoc.css +++ b/theme/pagetoc.css @@ -132,9 +132,15 @@ backdrop-filter: blur(6px); } .sidesponsor img { - height: auto; - width: 60%; + height: 45%; + max-height: 150px; + min-height: 95px; + width: auto; + max-width: 78%; padding: 10px; + object-fit: contain; + align-self: center; + flex: 0 0 auto; transition-property: all; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .3s; @@ -166,9 +172,15 @@ margin-left: 15px; margin-right: 15px; font-weight: 800; - font-size: 2rem; + font-size: var(--sponsor-title-font-size, clamp(1.28rem, 7.2cqw, 1.75rem)); line-height: 1.08; color: var(--sponsor-fg); + overflow-wrap: anywhere; + text-align: center; + flex: 0 0 auto; + } + .sidesponsor .sponsor-title.sponsor-title--long { + line-height: 1.02; } .sidesponsor:hover .sponsor-title{ grid-area: sponsor-title; @@ -181,8 +193,8 @@ } .sidesponsor .sponsor-description{ display: block; - margin-top: 5px; - margin-bottom: 15px; + margin-top: 0; + margin-bottom: 0; margin-left: 15px; margin-right: 15px; color: var(--sponsor-fg); diff --git a/theme/sponsor.js b/theme/sponsor.js index e86f73fac..1f0c183d5 100644 --- a/theme/sponsor.js +++ b/theme/sponsor.js @@ -95,6 +95,18 @@ return bsaScriptPromise } + function getSponsorTitleFontSize(title) { + if (title.length > 45) { + return "1.25rem" + } + + if (title.length > 28) { + return "1.35rem" + } + + return "" + } + function setLegacySponsorContent(sponsor, container, nodes) { nodes.img.src = sponsor.image_url nodes.img.alt = sponsor.name @@ -104,12 +116,13 @@ nodes.cta.textContent = sponsor.cta container.style.display = "flex" - if (sponsor.name.length > 45) { - nodes.title.style.fontSize = "1.6rem" - } + nodes.title.classList.toggle("sponsor-title--long", sponsor.name.length > 28) + nodes.title.style.fontSize = getSponsorTitleFontSize(sponsor.name) if (sponsor.description.length > 250) { nodes.description.style.fontSize = "1.4rem" + } else { + nodes.description.style.fontSize = "" } }