summaryrefslogtreecommitdiffstats
path: root/site/cleopatra/theme.org
diff options
context:
space:
mode:
authorThomas Letan <lthms@soap.coffee>2021-09-04 18:32:45 +0200
committerThomas Letan <lthms@soap.coffee>2021-09-04 18:32:45 +0200
commita1c8da62dccd27701ff2f00c9a6e622a2ceb1d81 (patch)
tree2a43077d5a6ae3946ba73a2003e85f0b03131e86 /site/cleopatra/theme.org
parentc737fabf6f1c0e520ec23c43432ea00469a23877 (diff)
Refine one more time the widths of the layout componentsHEADmain
Diffstat (limited to 'site/cleopatra/theme.org')
-rw-r--r--site/cleopatra/theme.org70
1 files changed, 57 insertions, 13 deletions
diff --git a/site/cleopatra/theme.org b/site/cleopatra/theme.org
index f51a768..4e105f4 100644
--- a/site/cleopatra/theme.org
+++ b/site/cleopatra/theme.org
@@ -33,16 +33,53 @@ CONFIGURE += package.json package-lock.json node_modules
area for the webpage content, and a margin column with side notes
and margin notes.
- #+begin_src css :tangle style.css
+ #+caption: Widths of page components (in ~rem~)
+ #+name: widths
+ | Content | 35 |
+ | Gutter | 3 |
+ | Margin | 13 |
+
+ #+name: main-width
+ #+begin_src emacs-lisp :exports none :noweb yes :var widths=widths[,1]
+(nth 0 widths)
+ #+end_src
+
+ #+name: gutter-width
+ #+begin_src emacs-lisp :exports none :noweb yes :var widths=widths[,1]
+(nth 1 widths)
+ #+end_src
+
+ #+name: margin-width
+ #+begin_src emacs-lisp :exports none :noweb yes :var widths=widths[,1]
+(nth 2 widths)
+ #+end_src
+
+ #+begin_src css :tangle style.css :noweb yes
:root {
- --main-width: 32rem;
- --gutter-width: 3rem;
- --margin-width: 13rem;
+ --main-width: <<main-width()>>rem;
+ --gutter-width: <<gutter-width()>>rem;
+ --margin-width: <<margin-width()>>rem;
--code-width: calc(var(--main-width) + var(--gutter-width) + var(--margin-width));
--body-width: calc(var(--main-width) + 2 * (var(--gutter-width) + var(--margin-width)));
}
+ #+end_src
-@media (max-width: 55rem) {
+ According to CSS’ own [[https://www.w3.org/TR/css-variables-1/#using-variables][specification]], you cannot use ~var()~ inside
+ media queries. As a consequnece, for our theme to be responsive,
+ the full width of the page content (\im 2 \times (that is,
+ \mathrm{margin\_width} + \mathrm{gutter\_width}) +
+ \mathrm{content\_width} \mi or call_body-width[:results raw]()rem)
+ has to be hard-coded[fn::Fortunately, this is a literate
+ program. This value is actually programmatically computed, so that
+ we do not have to worry about forgetting to update it].
+
+ #+name: body-width
+ #+begin_src bash :exports none :noweb yes
+echo $((2 * (<<margin-width()>> + <<gutter-width()>>) + <<main-width()>>))
+ #+end_src
+
+ #+begin_src css :tangle style.css :noweb yes
+@media (max-width: <<body-width()>>rem) {
:root {
--body-width: var(--main-width);
--code-width: var(--main-width);
@@ -50,23 +87,25 @@ CONFIGURE += package.json package-lock.json node_modules
}
#+end_src
- #+begin_src css :tangle style.css
+ And now, we are free to actually implement the layout.
+
+ #+begin_src css :tangle style.css :noweb yes
,* {
box-sizing: border-box;
}
-@media (min-width: 55rem) {
+.fullwidth {
+ width: var(--body-width);
+}
+
+@media (min-width: <<body-width()>>rem) {
.fullwidth {
margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width)));
}
}
-.fullwidth {
- width: var(--body-width);
-}
-
html {
- font-size: 1.1rem;
+ font-size: 1.2rem;
}
body {
@@ -133,6 +172,11 @@ img {
max-width: 100%;
}
+dd {
+ margin-left: 0;
+ margin-bottom: 0.5rem;
+}
+
.sidenote,
.marginnote {
font-size: smaller;
@@ -260,7 +304,7 @@ td.commit {
}
/* max-width has to be equal to --body-width */
-@media (max-width: 55rem) {
+@media (max-width: <<body-width()>>rem) {
body {
padding: 2rem;
margin: auto;