From 597145cd5fcbf24b4debe783bd3fc39f067ac9ce Mon Sep 17 00:00:00 2001
From: Thomas Letan <lthms@soap.coffee>
Date: Fri, 9 Oct 2020 22:41:16 +0200
Subject: Variablify the margin of a page

---
 site/cleopatra/theme.org | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

(limited to 'site/cleopatra/theme.org')

diff --git a/site/cleopatra/theme.org b/site/cleopatra/theme.org
index 553b427..a88b63b 100644
--- a/site/cleopatra/theme.org
+++ b/site/cleopatra/theme.org
@@ -113,6 +113,28 @@ noscript.parentNode.removeChild(noscript);
 
 * Main SASS File
 
+First, we introduce a set of variables.
+
+#+BEGIN_SRC sass :tangle site/style/main.sass
+$content-width : 35rem
+$large-side-margin : 5rem
+$small-side-margin : 2rem
+#+END_SRC
+
+Then, we introduce a key CSS variable whose definition will change according to
+the current width of the page (something we cannot achieve with SASS variables,
+whose behavior is purely static).
+
+#+BEGIN_SRC sass :tangle site/style/main.sass
+\:root
+    @media screen and (min-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
+        --side-margin : #{$large-side-margin}
+    @media screen and (max-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
+        --side-margin : #{$small-side-margin}
+#+END_SRC
+
+Then, we style!
+
 #+BEGIN_SRC sass :tangle site/style/main.sass
 *
     box-sizing : border-box
@@ -123,7 +145,7 @@ html
 
 body
     font-family : 'Linux Libertine', serif
-    padding : 2rem 5rem
+    padding : 2rem var(--side-margin)
 
 main p,
 main h1,
@@ -137,7 +159,7 @@ main dl,
 main ol,
 header,
 footer
-    max-width : 35rem
+    max-width : $content-width
     line-height : 140%
 
 main h1,
-- 
cgit v1.2.3