From e3101718a038117fbe9ecd0a603cccc4e8c1a883 Mon Sep 17 00:00:00 2001 From: Robert Günzler Date: Mon, 25 Nov 2024 15:36:31 +0100 Subject: use variables for calculating hero spacings MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit previously the borders of the nav.section elements were off by the width of the border line Signed-off-by: Robert Günzler --- links/hero.css | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'links') diff --git a/links/hero.css b/links/hero.css index bd66c25..d392d70 100644 --- a/links/hero.css +++ b/links/hero.css @@ -1,5 +1,9 @@ :root { --body-spacing: 0; + --hero-width: 700px; + --hero-nav-width: calc(var(--hero-width) / 2); + --hero-section-width: calc((var(--hero-nav-width) / 2) - (var(--hero-section-border-width) / 2)); + --hero-section-border-width: 1px; } body { @@ -34,19 +38,19 @@ main.hero>nav section+section { } main.hero>nav section.left { - margin-right: calc((700px / 2) / 2); + margin-right: var(--hero-section-width); text-align: end; padding-right: 15px; - border-right: 1px solid var(--fg); + border-right: var(--hero-section-border-width) solid var(--fg); } main.hero>nav section.right { - margin-left: calc((700px / 2) / 2); + margin-left: var(--hero-section-width); text-align: start; padding-left: 15px; - border-left: 1px solid var(--fg); + border-left: var(--hero-section-border-width) solid var(--fg); } main.hero>nav ul { -- cgit 1.4.1