#+END_SRC
* Main SASS File
First, we introduce a set of variables.
#+BEGIN_SRC sass :tangle site/style/main.sass
$content-width : 35rem
$large-side-margin : 7rem
$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
html
width : 100%
height : 100%
font-size : 115%
body
font-family : Spectral, serif
margin : 0 var(--side-margin) 0 calc(var(--side-margin) - 2rem) !important
padding : 2rem
@media screen and (min-width: calc(#{$content-width} + 2 * #{$large-side-margin}))
border-left : 1px solid #ccc
main p,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main ul,
main dl,
main ol,
header,
footer
max-width : $content-width
line-height : 140%
main h1,
main h2,
main h3,
main h4,
main h5,
main h6
font-weight : bold
header a,
footer p
font-size : 90%
main
padding-top : 4rem
padding-bottom : 4rem
footer img
border-radius : 100%
max-width : 7rem
float : right
margin-left : 1rem
margin-bottom : 1rem
pre
overflow-x : auto
code,
tt,
pre
font-family : 'Fira Code', monospace
font-size : 80%
line-height : 140%
#gallery
display : flex
flex-wrap : wrap
align-content : flex-start
img
max-width : 20rem
@import plugins
@import org
@import coq
#+END_SRC
* Build Instructions
The build instruction are pretty straightforward. We start by how to compile the
main CSS file.
#+BEGIN_SRC makefile :tangle theme.mk
SASS := $(wildcard site/style/*.sass)
MAIN_SASS := site/style/main.sass
CSS := $(MAIN_SASS:.sass=.css)
${CSS} : ${SASS}
@cleopatra echo Compiling "${CSS}"
@sassc --style=compressed --sass ${MAIN_SASS} ${CSS}
#+END_SRC
Since the HTML template does not need any particular processing, the
=theme-build= phase is only responsible for generating the main CSS file. The
[[./soupault.org][=soupault= build phase]] needs to start after the CSS file is
compiled (since it copies all relevant files to the ~build/~ directory), so we
explicit this dependency.
#+BEGIN_SRC makefile :tangle theme.mk
theme-build : ${CSS}
soupault-build : theme-build
#+END_SRC
Therefore, at the end of this generation process only one file has been
generated.
#+BEGIN_SRC makefile :tangle theme.mk
ARTIFACTS += ${CSS}
#+END_SRC