diff options
author | Thomas Letan <lthms@soap.coffee> | 2020-10-09 22:41:16 +0200 |
---|---|---|
committer | Thomas Letan <lthms@soap.coffee> | 2020-10-09 22:41:16 +0200 |
commit | 597145cd5fcbf24b4debe783bd3fc39f067ac9ce (patch) | |
tree | 8de2048297c1df7d9d2b80f4e8d16a6dcca8f55e /site/cleopatra/theme.org | |
parent | coqffi has been published! (diff) |
Variablify the margin of a page
Diffstat (limited to 'site/cleopatra/theme.org')
-rw-r--r-- | site/cleopatra/theme.org | 26 |
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, |