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 | |
| parent | coqffi has been published! (diff) | |
Variablify the margin of a page
Diffstat (limited to 'site/cleopatra')
| -rw-r--r-- | site/cleopatra/coq.org | 4 | ||||
| -rw-r--r-- | site/cleopatra/theme.org | 26 |
2 files changed, 26 insertions, 4 deletions
diff --git a/site/cleopatra/coq.org b/site/cleopatra/coq.org index 2f66ebe..d905385 100644 --- a/site/cleopatra/coq.org +++ b/site/cleopatra/coq.org @@ -38,12 +38,12 @@ span.inlinecode font-size : 80% div.doc - max-width : 35rem + max-width : $content-width line-height : 140% /* dirty patch to get the code in full page width */ pre - width : calc(100vw - 2*5rem) + width : calc(100vw - 2*var(--side-margin)) .paragraph margin-bottom : .8em 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, |