From d529a9e36d5c5bfb4960c9713053736be8b0b6ce Mon Sep 17 00:00:00 2001 From: Hermes Date: Wed, 24 Jun 2026 17:39:13 +0200 Subject: [PATCH 1/2] Refine hovered sponsor layout --- theme/pagetoc.css | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/theme/pagetoc.css b/theme/pagetoc.css index f159b47f8..b00150a12 100644 --- a/theme/pagetoc.css +++ b/theme/pagetoc.css @@ -106,11 +106,11 @@ overflow: auto; display: flex; flex-direction: column; - gap:20px; + gap:16px; background-color: transparent; } .pagetoc { - max-height: 60%; + max-height: 52%; overflow: auto; border-left: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 12px; @@ -119,8 +119,8 @@ padding: 4px 4px; } .sidesponsor { - max-height: 40%; - height: 40%; + max-height: 48%; + height: 48%; background-color: transparent; border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 8px; @@ -149,7 +149,7 @@ width: 42px; padding: 4px; grid-area: sponsor-image; - align-self: start; + align-self: center; transition-duration: 0s; } .sidesponsor:hover { @@ -162,7 +162,7 @@ "sponsor-cta sponsor-cta"; column-gap: 8px; row-gap: 8px; - align-items: start; + align-items: center; align-content: start; overflow: hidden; } @@ -185,11 +185,12 @@ .sidesponsor:hover .sponsor-title{ grid-area: sponsor-title; margin-left: 0; - margin-top: 6px; + margin-top: 0; margin-bottom: 0; font-size: 1.55rem; line-height: 1.15; overflow-wrap: anywhere; + align-self: center; } .sidesponsor .sponsor-description{ display: block; @@ -260,8 +261,8 @@ } } .sidesponsor-bsa { - max-height: 40%; - height: 40%; + max-height: 48%; + height: 48%; background-color: transparent; border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 8px; From da81c92add3878c1da1119f7a6e764766f732b51 Mon Sep 17 00:00:00 2001 From: Carlos Polop Date: Wed, 24 Jun 2026 17:56:26 +0200 Subject: [PATCH 2/2] Adjust sponsor ad layout --- theme/pagetoc.css | 36 ++++++++++++++++++------------------ theme/sponsor.js | 4 ++-- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/theme/pagetoc.css b/theme/pagetoc.css index b00150a12..29a4e9340 100644 --- a/theme/pagetoc.css +++ b/theme/pagetoc.css @@ -106,11 +106,11 @@ overflow: auto; display: flex; flex-direction: column; - gap:16px; + gap:14px; background-color: transparent; } .pagetoc { - max-height: 52%; + max-height: 48%; overflow: auto; border-left: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 12px; @@ -119,8 +119,8 @@ padding: 4px 4px; } .sidesponsor { - max-height: 48%; - height: 48%; + max-height: 52%; + height: 52%; background-color: transparent; border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 8px; @@ -132,12 +132,12 @@ backdrop-filter: blur(6px); } .sidesponsor img { - height: 45%; - max-height: 150px; - min-height: 95px; + height: 50%; + max-height: 180px; + min-height: 110px; width: auto; - max-width: 78%; - padding: 10px; + max-width: 86%; + padding: 8px; object-fit: contain; align-self: center; flex: 0 0 auto; @@ -155,13 +155,13 @@ .sidesponsor:hover { display: grid !important; grid-template-columns: auto minmax(0, 1fr); - grid-template-rows: max-content minmax(0, 1fr) max-content; + grid-template-rows: max-content minmax(0, 1fr) auto; grid-template-areas: "sponsor-image sponsor-title" "sponsor-description sponsor-description" "sponsor-cta sponsor-cta"; column-gap: 8px; - row-gap: 8px; + row-gap: 10px; align-items: center; align-content: start; overflow: hidden; @@ -172,8 +172,8 @@ margin-left: 15px; margin-right: 15px; font-weight: 800; - font-size: var(--sponsor-title-font-size, clamp(1.28rem, 7.2cqw, 1.75rem)); - line-height: 1.08; + font-size: var(--sponsor-title-font-size, clamp(1.45rem, 7.8cqw, 2rem)); + line-height: 1.05; color: var(--sponsor-fg); overflow-wrap: anywhere; text-align: center; @@ -235,9 +235,9 @@ } .sidesponsor:hover .sponsor-cta{ grid-area: sponsor-cta; - margin-top: 0; - margin-bottom: 4px; - padding: 10px 14px; + margin-top: 22px; + margin-bottom: 8px; + padding: 9px 14px; box-sizing: border-box; max-width: 100%; overflow: hidden; @@ -261,8 +261,8 @@ } } .sidesponsor-bsa { - max-height: 48%; - height: 48%; + max-height: 52%; + height: 52%; background-color: transparent; border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent); border-radius: 8px; diff --git a/theme/sponsor.js b/theme/sponsor.js index 1f0c183d5..337740dab 100644 --- a/theme/sponsor.js +++ b/theme/sponsor.js @@ -97,11 +97,11 @@ function getSponsorTitleFontSize(title) { if (title.length > 45) { - return "1.25rem" + return "1.35rem" } if (title.length > 28) { - return "1.35rem" + return "1.55rem" } return ""