Refactor the build process to use cleopatra the Second

author: Thomas Letan <lthms@soap.coffee> 2020-04-02 20:16:53 +0200
committer: Thomas Letan <lthms@soap.coffee> 2020-04-02 20:16:53 +0200
commit: 46b2e7a3be44312f93b3d638f9bbd944f5c063a1 (patch)
tree: b1eff65fa11c462e114204aadf7e6645d70d6b31 /site/cleopatra/theme.org
parent: Enjoy soupault’s plugin autodiscovery feature (diff)
1 files changed, 291 insertions, 0 deletions
diff --git a/site/cleopatra/theme.org b/site/cleopatra/theme.org
new file mode 100644
index 0000000..3bba6b7
--- /dev/null
+++ b/site/cleopatra/theme.org
@@ -0,0 +1,291 @@
+#+BEGIN_EXPORT html
+<h1>Theming and Templating</h1>
+#+END_EXPORT
+
+#+BEGIN_SRC makefile :tangle theme.mk
+SASS := site/style/main.sass
+CSS := $(SASS:.sass=.css)
+
+theme-build : ${SASS}
+	@cleopatra echo Compiling  "${CSS}"
+	@sassc --style=compressed --sass ${SASS} ${CSS}
+
+soupault-build : theme-build
+
+ARTIFACTS += ${CSS} ${SASS}
+#+END_SRC
+
+* Main HTML Template
+
+#+BEGIN_SRC html  :tangle templates/main.html :noweb no-export
+<html lang="en">
+  <<head>>
+  <<body>>
+</html>
+#+END_SRC
+
+** ~<head>~
+
+#+NAME: head
+#+BEGIN_SRC html :noweb no-export
+<head>
+  <<encoding>>
+  <<viewport>>
+  <title></title>
+  <<syncloading_html>>
+  <<asyncloading_html>>
+</head>
+#+END_SRC
+
+*** Encoding
+
+#+NAME: encoding
+#+BEGIN_SRC html
+<meta charset="utf-8">
+#+END_SRC
+
+*** Viewport
+
+#+NAME: viewport
+#+BEGIN_SRC html
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0">
+#+END_SRC
+
+*** Assets Loading
+
+#+NAME: syncloading_html
+#+BEGIN_SRC html
+<link rel="stylesheet" href="/style/main.css">
+<link rel="icon" type="image/ico"  href="/img/merida.webp">
+#+END_SRC
+
+#+NAME: asyncloading_js
+#+BEGIN_SRC js
+let noscript = document.getElementById('asyncloading');
+noscript.insertAdjacentHTML('beforebegin', noscript.innerText);
+noscript.parentNode.removeChild(noscript);
+#+END_SRC
+
+#+NAME: asyncloading_html
+#+BEGIN_SRC html
+<noscript id="asyncloading">
+  <link href="https://soap.coffee/+vendors/fira-code.2+swap/font.css"
+     rel="stylesheet">
+  <link href="https://soap.coffee/+vendors/et-book+swap/font.css"
+     rel="stylesheet">
+  <link href="https://soap.coffee/+vendors/katex.0.11.1+swap/katex.css"
+     rel="stylesheet">
+  <link href="https://soap.coffee/+vendors/fork-awesome.1.1.7+swap/css/fork-awesome.min.css"
+     rel="stylesheet">
+</nolink>
+#+END_SRC
+
+** ~body~
+
+#+NAME: body
+#+BEGIN_SRC html :noweb no-export
+<body id="default">
+  <nav>
+    <ul>
+      <li> <a href="/news">News</a></li>
+      <li> <a href="/">Write-ups</a></li>
+    </ul>
+  </nav>
+  <header>
+    <img src="/img/merida.webp"
+         alt="Merida in the movie Ralph 2.0" />
+  </header>
+  <main>
+  <!-- your page content will be inserted here,
+       see the content_selector option in soupault.conf -->
+  </main>
+  <script>
+    <<asyncloading_js>>
+  </script>
+</body>
+#+END_SRC
+
+* Main SASS File
+
+#+BEGIN_SRC sass :tangle site/style/main.sass
+$bg-color: #2d2a2e
+$bg-verbatim : #f4f4f4
+$code-fg-color: #fcfcfa
+$text-fg-color: #505050
+$primary-color: black
+$todo-bg: #e4d3b3
+$todo-fg: #2f2b24
+$remark-bg: #c5dbe2
+$remark-fg: #4d575e
+
+$sans-serif : sans-serif
+
+$document-width : 33rem
+
+a
+    color : #557de8
+a:visited
+    color : #40599a
+
+@mixin padding-centered($inc: 0rem)
+    @media screen and (min-width : $document-width)
+        padding-left : calc(50% - #{$document-width} / 2 - #{$inc})
+        padding-right : calc(50% - #{$document-width} / 2 - #{$inc})
+    @media screen and (max-width : $document-width)
+        padding-left : 1rem
+        padding-right : 1rem
+
+@mixin margin-centered($inc: 0rem)
+    @media screen and (min-width : $document-width)
+        margin-left : calc(50% - #{$document-width} / 2 - #{$inc})
+        margin-right : calc(50% - #{$document-width} / 2 - #{$inc})
+    @media screen and (max-width : $document-width)
+        margin-left : 1rem
+        margin-right : 1rem
+
+@mixin text-font
+    font-family : et-book, serif
+
+@mixin code-font($size : .9rem)
+    font-family: 'Fira Code', monospace
+    font-size: $size
+
+@mixin code-block
+    @include padding-centered
+    @include code-font
+    background : $bg-color
+    color : $code-fg-color
+    overflow-x : auto
+    scrollbar-width : thin
+
+@mixin verbatim-block
+    @include padding-centered
+    @include code-font
+    background : $bg-verbatim
+    overflow-x : auto
+    scrollbar-width : thin
+
+*
+  box-sizing: border-box
+
+html, body
+    margin : 0
+    padding : 0
+    width : 100%
+    height : 100%
+    font-size : 115%
+    @include text-font
+
+body
+    overflow-x : hidden
+
+code, tt
+    @include code-font
+
+pre
+    @include code-font
+
+body#default
+    nav
+        @include margin-centered
+        padding-top : 1rem
+        padding-bottom : 1rem
+
+        ul
+            padding : 0
+            margin : 0
+            width : 100%
+            display : flex
+            flex-direction : row
+            justify-content : center
+            list-style-type : none
+
+            li
+                padding-left: .5em
+                padding-right: .5em
+                text-transform: uppercase
+                font-family: sans-serif
+                font-weight: bold
+
+                a
+                    text-decoration: none
+
+    header
+        text-align: center
+
+        img
+            text-align: center
+            border-radius: 50%
+            width: 150px
+
+    main
+        h1
+            text-align: center
+
+        h1, h2, h3, h4, h5, h6
+            font-family : $sans-serif
+
+            code, tt
+                font-size: 100%
+
+        h1, h2, h3, h4, h5, h6, p, summary
+            @include padding-centered
+
+        dl, ul, ol
+            @include margin-centered
+
+        .TODO
+            background : $todo-bg
+            color : $todo-fg
+            padding-top : .1rem
+            padding-bottom : .1rem
+            margin-top : 1rem
+            margin-bottom : 1rem
+
+        @import coq, org
+
+.index
+    dt
+        font-weight : bold
+        color : $primary-color
+
+    dd
+        margin-left : 0
+        margin-bottom : 1em
+
+        ol
+            margin-top: 0.3em
+
+@import plugins
+
+/* VCARD (index.html) */
+body#vcard
+    display: flex
+    align-items: center
+    flex-direction: column
+    font-size: 125%
+
+    article
+        max-width: 400px
+        width: 80%
+        margin: auto
+
+        img
+            display: block
+            border-radius: 50%
+            width: 175px
+            margin: auto
+            margin-bottom: 3em
+
+    h1
+        color: $primary-color
+        font-size: 300%
+        text-align: center
+
+    nav dt
+        font-weight: bold
+
+        a
+            color: $primary-color
+#+END_SRC
author	Thomas Letan <lthms@soap.coffee>	2020-04-02 20:16:53 +0200
committer	Thomas Letan <lthms@soap.coffee>	2020-04-02 20:16:53 +0200
commit	46b2e7a3be44312f93b3d638f9bbd944f5c063a1 (patch)
tree	b1eff65fa11c462e114204aadf7e6645d70d6b31 /site/cleopatra/theme.org
parent	Enjoy soupault’s plugin autodiscovery feature (diff)