Exporting cleopatra Book
Table of Contents
ARTIFACTS += src/dependencies.png book/ book-prebuild : @cleopatra echo Exporting "cleopatra book" @cleopatra exec cleopatra-run-elisp export-book.el \ >>build.log 2>&1 book/assets/style.css : style/main.sass @cleopatra echo Compiling $@ @mkdir -p book/assets/ @sassc --style=compressed --sass style/main.sass $@ book-build : book/assets/style.css book-postbuild : @cp cleopatra.png book/ serve : cd book/ ; python -m http.server
1 Exporting the Book
(use-package rust-mode :ensure t :defer t) (use-package sass-mode :ensure t :defer t) (use-package espresso-theme :ensure t :init (load-theme 'espresso t)) (org-babel-do-load-languages 'org-babel-load-languages '((dot . t))) (cleopatra:configure) (org-babel-lob-ingest "src/commons.org") (setq org-publish-project-alist '(("cleopatra-book" :base-directory "src" :publishing-directory "book" :recursive t :publishing-function org-html-publish-to-html :html-link-home "/index.html" :html-head-include-default-style nil :html-head "<link rel=\"stylesheet\" href=\"/assets/style.css\">") ("cleopatra-static" :base-directory "src" :base-extension "png" :publishing-directory "book" :recursive t :publishing-function org-publish-attachment))) (org-publish-all)
2 Styling the Book
@import "https://soap.coffee/+vendors/fira-code.2+swap/font.css" @import "https://soap.coffee/+vendors/et-book+swap/font.css" $monospace : 'Fira Code', monospace $sans-serif : sans-serif $serif : et-book, serif * box-sizing: border-box html font-size : 100% width : 100% height : 100% background : #fcfcfc color : #444 body font-family : $serif font-size: 125% h1 text-align : center h1, h2, h3, h4, h5, h6 font-family: $sans-serif color : black code, tt, pre font-family : $monospace font-size : 85% color : black .section-number-2:after, .section-number-3:after content: ". " .section-number-4, .section-number-5, .section-number-6 display: none .org-src-container width : 100% overflow-x : auto a color : #557de8 a:visited color : #40599a #postamble display : none .figure text-align : center dl dt font-weight : bold #org-div-home-and-up font-family : $sans-serif font-size : 90% a font-weight : bold text-decoration : none
2.1 Theme Responsiveness
We try to make the theme of this website responsive. Because there will be quite some computations to do, we first introduce several SASS variables.
$toc-width : 18rem $toc-padding : 1rem $content-width : 54rem
Using these, we can compute the minimal width required for the content and the
table of contents to stick on the page side-by-side, and for the content to
remain centered (to that end, we multiply the width taken by the table of
contents by two). We recall #{} is the syntax which enables variables in
calc().
$min-width : calc(#{$content-width} + 2 * (#{$toc-width} + 2*#{$toc-padding}))
There is now two cases to consider: whether or not there is room for or “full”
page layout. If not, we just apply a padding to the body, in order for the
text not to touch the border of the screen.
@media screen and (max-width : $min-width) body max-width : $content-width margin: auto padding : 1rem
Otherwise, we use position : fixed to “remove” #table-of-contents from
#content, with left computed so that everything is centered. We recall that
vw stands for “viewport width.”
@media screen and (min-width : $min-width) #content max-width : $content-width margin : auto #table-of-contents, #org-div-home-and-up width : $toc-width padding-left : $toc-padding padding-right : $toc-padding position : fixed left : calc((100vw - #{$min-width})/2) h2 margin-top : 0