use variables for calculating hero spacings

previously the borders of the nav.section elements were off by the width
of the border line

Signed-off-by: Robert Günzler <r@gnzler.io>

1 files changed, 8 insertions, 4 deletions

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 {