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
  (load-theme 'espresso t))

 '((dot . t)))

(org-babel-lob-ingest "src/commons.org")

(setq org-publish-project-alist
         :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\">")
         :base-directory "src"
         :base-extension "png"
         :publishing-directory "book"
         :recursive t
         :publishing-function org-publish-attachment)))


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

    font-size : 100%
    width : 100%
    height : 100%
    background : #fcfcfc
    color : #444

    font-family : $serif
    font-size: 125%

    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

    content: ". "

    display: none

    width : 100%
    overflow-x : auto

    color : #557de8
    color : #40599a

    display : none

    text-align : center

        font-weight : bold

    font-family : $sans-serif
    font-size : 90%

        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)
        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)
        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)

            margin-top : 0

Author: Thomas Letan

Created: 2020-12-20 Sun 12:56