From 932d7d92a645c4df434e84f22839890c72771e74 Mon Sep 17 00:00:00 2001 From: Marcel Gerber Date: Tue, 21 Jan 2025 22:06:42 +0100 Subject: [PATCH] refactor: use CSS variables as building blocks --- site/gdocs/pages/Homepage.scss | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/site/gdocs/pages/Homepage.scss b/site/gdocs/pages/Homepage.scss index eb0e7530ed..d3f32d3d87 100644 --- a/site/gdocs/pages/Homepage.scss +++ b/site/gdocs/pages/Homepage.scss @@ -98,10 +98,18 @@ .homepage-social-ribbon__social-list { grid-template-columns: 1fr; // fallback for browsers that don't support `max()` below. - // A bunch of magic numbers! - // The 40% ensures that auto-fit creates at most 2 columns. We can't use the more sensible 50%, because grid gaps need to be accounted for. - // The 120px ensures that a column is at least 120px wide, i.e. we only get 2 columns if the container is at least 240px (+gap) wide. - grid-template-columns: repeat(auto-fit, minmax(max(40%, 120px), 1fr)); + // A bunch of magic CSS! Let me explain. + // The goal here is to span the social links over 1 or 2 columns, ensuring that each column is at least 120px wide. + + // The width of a column if there are precisely 2 columns - we don't want to have more than 2 columns here. + --half-width: calc(50% - var(--grid-gap) / 2); + // A column should be at least 128px wide, but can grow to fill the available space to ensure we don't create more than 2 columns. + --min-column-width: max(var(--half-width), 128px); + // We want to fit 1 or 2 columns into the available space, depending on available width. + grid-template-columns: repeat( + auto-fit, + minmax(var(--min-column-width), 1fr) + ); margin-top: 16px; li {