diff options
Diffstat (limited to 'site/cleopatra/theme.org')
| -rw-r--r-- | site/cleopatra/theme.org | 489 |
1 files changed, 0 insertions, 489 deletions
diff --git a/site/cleopatra/theme.org b/site/cleopatra/theme.org deleted file mode 100644 index f51a768..0000000 --- a/site/cleopatra/theme.org +++ /dev/null @@ -1,489 +0,0 @@ -#+TITLE: Layout and Style - -#+SERIES: ../cleopatra.html -#+SERIES_PREV: ./literate-programming.html -#+SERIES_NEXT: ./soupault.html - -#+BEGIN_EXPORT html -<nav id="generate-toc"></nav> -<div id="history">site/cleopatra/theme.org</div> -#+END_EXPORT - -* Setup - - As often when it comes to frontend development, we will use several - tools hosted in the ~npm~ packages repository. ~npm~ is infamous - for downloading lots of files and to store it in the ~node_modules/~ - directory. We configure *~cleopatra~* accordingly. - - #+begin_src makefile :tangle theme.mk -CONFIGURE += package.json package-lock.json node_modules - #+end_src - -* Base CSS - - We know construct piece by piece the “base” CSS layout which we will - inject inside a ~<style>~ tag in each web page. - -** Layout - - Our goal is to have a three columns layout: one aside menu, with - the top-level navigation links (technical articles, news, etc.) and - the table of contents of the current pages if relevant, one main - area for the webpage content, and a margin column with side notes - and margin notes. - - #+begin_src css :tangle style.css -:root { - --main-width: 32rem; - --gutter-width: 3rem; - --margin-width: 13rem; - --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))); -} - -@media (max-width: 55rem) { - :root { - --body-width: var(--main-width); - --code-width: var(--main-width); - } -} - #+end_src - - #+begin_src css :tangle style.css -,* { - box-sizing: border-box; -} - -@media (min-width: 55rem) { - .fullwidth { - margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width))); - } -} - -.fullwidth { - width: var(--body-width); -} - -html { - font-size: 1.1rem; -} - -body { - line-height: 1.4; - max-width: var(--body-width); - margin-left: auto; - margin-right: auto; -} - -aside { - background: var(--bg); - z-index: 9999; - width: var(--body-width); - align-self: flex-start; - position: sticky; - top: 0; -} - -aside nav { - text-align: center; - border-bottom: 1px solid var(--fade); -} - -aside nav ul { - list-style: none; - padding: 1rem 0; - margin: 0; -} - -aside nav li { - display: inline; -} - -aside nav li:not(:first-of-type)::before { - content: " · "; -} - -main { - counter-reset: sidenote-counter; - max-width: var(--main-width); - margin: auto; -} - -main nav { - font-style: italic; - color: var(--fg-plus); - background: var(--current-line); - padding: .5rem 1rem; -} - -main nav .series-next { - text-align: right; -} - -main nav p.series-next::after { - content: " →"; -} - -main nav p.series-prev::before { - content: "← "; -} - -img { - max-width: 100%; -} - -.sidenote, -.marginnote { - font-size: smaller; - position: relative; - width: var(--margin-width); -} - -.sidenote { - margin-right: calc(-1 * (var(--margin-width) + var(--gutter-width))); - float: right; - clear: right; -} - -.marginnote { - float: left; - clear: left; - margin-left: calc(-1 * (var(--margin-width) + var(--gutter-width))); -} - -input.margin-toggle { - display: none; -} - -label.sidenote-number { - display: inline; -} - -label.margin-toggle:not(.sidenote-number) { - display: none; -} - -.sidenote-number:after, -.sidenote:before { - position: relative; - vertical-align: baseline; -} - -.sidenote-number { - counter-increment: sidenote-counter; -} - -.sidenote-number::after { - content: "(" counter(sidenote-counter, lower-greek) ")"; - font-size: 60%; - top: -0.4rem; - left: 0.1rem; -} - -.sidenote::before { - content: "(" counter(sidenote-counter, lower-greek) ")"; - font-size: 70%; - top: -0.5rem; - right: 0.1rem; -} - -div.code, -pre { - width: var(--code-width); - overflow-x: auto; - overflow-y: hidden; - padding: 1rem 2rem; -} - -main { - padding-top: 4.2rem; - padding-bottom: 4.2rem; -} - -h1 { - text-align: center; -} - -h2, h3, h4 { - font-style: italic; -} - -h1, h2, h3, h4 { - font-weight: normal; -} - -dt { - font-weight: bold; -} - -div.code, -span.inlinecode, -code, -.doc pre, -tt, -.dmath, -.imath { - font-family: monospace; - font-size: 80%; -} - -details { - margin: 1.5rem 0; -} - -table { - border-top: 2px solid var(--fg); - border-bottom: 2px solid var(--fg); - border-collapse: collapse; - width: 100%; - margin: 1.5rem 0; -} - -th { - font-weight: normal; - text-transform: uppercase; -} - -td, -th { - border-top: 1px solid var(--fade); - height: 2em; - padding: 0 1em; -} - -td.date, -td.commit { - text-align: center; - font-size: 0.75em; - font-family: monospace; -} - -/* max-width has to be equal to --body-width */ -@media (max-width: 55rem) { - body { - padding: 2rem; - margin: auto; - display: block; - } - - aside { - width: var(--main-width); - margin: auto; - } - - label.margin-toggle:not(.sidenote-number) { - display: inline; - } - - .sidenote, - .marginnote { - display: none; - } - - .margin-toggle:checked + .sidenote, - .margin-toggle:checked + .marginnote { - display: block; - float: left; - left: 1rem; - clear: both; - width: 95%; - margin: 1rem 2.5%; - vertical-align: baseline; - position: relative; - } - - label { - cursor: pointer; - } - - pre, aside { - width: 100%; - } -} - #+end_src - -** Colors - - #+begin_src css :tangle style.css -:root { - --bg: white; - --bg-plus: #f9f8f4; - --current-line: #fbfbfb; - --fade: #cfcecb; - --fg: #3c3c3c; - --fg-plus: #575757; - --doc: #91003e; - --warning: #bd745e; - --red: #b3534b; - --green: #6d9319; - --yellow: #d4b100; -} - #+end_src - - #+begin_src css :tangle style.css -body { - font-family: serif; - color: var(--fg); - background: var(--bg); -} - -a[href] { - color: inherit; - text-decoration-color: var(--doc); -} - -h2 a.anchor-link, -h3 a.anchor-link, -h4 a.anchor-link { - display: none; - font-style: normal; - text-decoration: none; - font-family: monospace; - font-size: smaller; - color: var(--doc); -} - -[id] { - scroll-margin-top: 4rem; -} - -h2:hover a.anchor-link, -h3:hover a.anchor-link, -h4:hover a.anchor-link { - display: inline; -} - -.sidenote, -.marginnote { - color: var(--fg-plus); -} - -.sidenote-number:after, -.sidenote:before, -pre, -code, -div.code, -span.inlinecode, -tt { - color: var(--doc); -} - #+end_src - -** Coq - - #+begin_src css :tangle style.css -div.code { - white-space: nowrap; -} - -div.code, -span.inlinecode { - font-family : monospace; -} - -.paragraph { - margin-bottom : .8em; -} - -.code a[href] { - color : inherit; - text-decoration : none; - background : var(--bg-plus); - padding : .1rem .15rem .1rem .15rem; - border-radius : 15%; -} - -.code .icon { - display: none; -} -#+END_SRC - -** Icons - - #+begin_src css :tangle style.css -.icon svg { - fill: var(--doc); - display: inline; - width: 1em; - height: .9em; - vertical-align: text-top; -} - -.url-mark.fa { - display: inline; - font-size: 90%; - width: 1em; -} - -.url-mark.fa-github::before { - content: "\00a0\f09b"; -} - -.url-mark.fa-external-link::before { - content: "\00a0\f08e"; -} - #+end_src - -** Minify CSS - - #+begin_src shell :shebang #!/bin/bash :tangle scripts/css.sh -minify="$(npm bin)/minify" -normalize="$(npm root)/normalize.css/normalize.css" -style="style.css" - -# minify add a newline character at the end of its input -# we remove it using `head' -echo " -@charset \"UTF-8\"; -$(cat ${normalize}) -$(cat ${style}) -" | ${minify} --css | head -c -1 > style.min.css - #+end_src - - #+begin_src makefile :tangle theme.mk -style.min.css : style.css dependencies-prebuild - @cleopatra echo "Minifying" "CSS" - @scripts/css.sh - -ARTIFACTS += style.min.css - -theme-build : style.min.css - #+end_src - -* HTML Templates - - It would be best if we had a preprocessing step to inject the - minified style, rather than using ~soupault~ to do the work once per - page. - - #+begin_src html :tangle templates/main.html :noweb yes -<html lang="en"> - <head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <style></style> - <link href="https://soap.coffee/+vendors/katex.0.11.1+swap/katex.css" rel="stylesheet" media="none" onload="if(media!='all')media='all'"> - <title></title> - </head> - <body> - <aside> - <nav> - <ul> - <li> - <a href="/">Technical Posts</a> - </li> - <li> - <a href="/opinions">Opinions</a> - </li> - <li> - <a href="/news">News</a> - </li> - </ul> - </nav> - </aside> - <main> - </main> - </body> -</html> - #+end_src |