summaryrefslogtreecommitdiffstats
path: root/site/cleopatra/theme.org
diff options
context:
space:
mode:
authorThomas Letan <lthms@soap.coffee>2020-10-09 22:41:16 +0200
committerThomas Letan <lthms@soap.coffee>2020-10-09 22:41:16 +0200
commit597145cd5fcbf24b4debe783bd3fc39f067ac9ce (patch)
tree8de2048297c1df7d9d2b80f4e8d16a6dcca8f55e /site/cleopatra/theme.org
parentc0986e7ea3c4be251de869acd6c0ab01b1ac1996 (diff)
Variablify the margin of a page
Diffstat (limited to 'site/cleopatra/theme.org')
-rw-r--r--site/cleopatra/theme.org26
1 files changed, 24 insertions, 2 deletions
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,