diff options
Diffstat (limited to 'site/cleopatra/Theme.org')
| -rw-r--r-- | site/cleopatra/Theme.org | 269 |
1 files changed, 151 insertions, 118 deletions
diff --git a/site/cleopatra/Theme.org b/site/cleopatra/Theme.org index afe0934..0d7c5e8 100644 --- a/site/cleopatra/Theme.org +++ b/site/cleopatra/Theme.org @@ -17,19 +17,64 @@ ARTIFACTS += ${CSS} ${SASS} * Main HTML Template -#+NAME: js_lazyloading +#+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('lazyloading'); +let noscript = document.getElementById('asyncloading'); let resources = noscript.innerText.split('\n'); for (var ix in resources) { noscript.insertAdjacentHTML('beforebegin', resources[ix]); } + +noscript.parentNode.removeChild(noscript); #+END_SRC -#+NAME: html_lazyloading +#+NAME: asyncloading_html #+BEGIN_SRC html -<noscript id="lazyloading"> +<noscript id="asyncloading"> <link rel="stylesheet" href="/vendors/fira-code.2+swap/font.css"> <link rel="stylesheet" href="/vendors/et-book+swap/font.css"> <link rel="stylesheet" href="/vendors/katex.0.11.1+swap/katex.css"> @@ -38,38 +83,30 @@ for (var ix in resources) { </nolink> #+END_SRC -#+BEGIN_SRC html :tangle templates/main.html :noweb tangle -<html lang="en"> - <head> - <meta charset="utf-8"> - <title> <!-- set automatically, see soupault.conf --> </title> - <meta name="viewport" - content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style/main.css"> - <link rel="icon" type="image/ico" href="/img/merida.webp"> - <<html_lazyloading>> - </head> - <body id="default"> - <nav> - <ul> - <li> <a href="/news">News</a></li> - <li> <a href="/posts">Write-ups</a></li> - <li> <a href="/">About</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> - <<js_lazyloading>> - </script> - </body> -</html> +** ~body~ + +#+NAME: body +#+BEGIN_SRC html :noweb no-export +<body id="default"> + <nav> + <ul> + <li> <a href="/news">News</a></li> + <li> <a href="/posts">Write-ups</a></li> + <li> <a href="/">About</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 @@ -84,57 +121,72 @@ $todo-fg: #494130 $remark-bg: #c5dbe2 $remark-fg: #4d575e -* - box-sizing: border-box +$sans-serif : sans-serif -body, html - width: 100% - height: 100% - padding: 0 - margin: 0 - font-size: 100% +$document-width : 33rem + +@mixin padding-centered($inc: 0rem) + padding-left : calc(50% - #{$document-width} / 2 - #{$inc}) + padding-right : calc(50% - #{$document-width} / 2 - #{$inc}) + +@mixin margin-centered($inc: 0rem) + margin-left : calc(50% - #{$document-width} / 2 - #{$inc}) + margin-right : calc(50% - #{$document-width} / 2 - #{$inc}) + +@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: $text-fg-color - font-family: 'et-book', serif + color: $code-fg-color -h1, h2, h3, h4, h5, a[href] - color: $primary-color +* + box-sizing: border-box -h1, h2, h3, h4, h5 - font-family: sans-serif +html, body + margin : 0 + padding : 0 + width : 100% + height : 100% + font-size : 120% + @include text-font -h1 - text-align: center +code, tt + @include code-font -/* default */ +pre + @include code-font body#default - overflow-x: hidden - nav - padding-top: 1em - padding-bottom: 1em - width: 100% + @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-size: 130% - font-weight: bold - - a - text-decoration: none + 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 @@ -142,42 +194,39 @@ body#default img text-align: center border-radius: 50% - width: 125px + width: 150px main - max-width: 30em - margin: auto - padding: 0em 1em 1em 1em - font-size: 130% + h1 + text-align: center -body#default main .code, code, pre, .inlinecode, tt - font-family: 'Fira Code', monospace - color: $code-fg-color - font-size: 75% + h1, h2, h3, h4, h5, h6 + font-family : $sans-serif + code, tt + font-size: 100% -body#default - main - summary - color: $primary-color - font-weight: bold + h1, h2, h3, h4, h5, h6, p, summary + @include padding-centered + + dl, ul, ol + @include margin-centered @import coq, org - .TODO - background: $todo-bg - color: $todo-fg - .REMARK - background: $remark-bg - color: $remark-fg +.index + dt + font-weight : bold + color : $primary-color - .TODO, .REMARK - padding: 1em 1em 1em 1em + dd + margin-left : 0 + margin-bottom : 1em + + ol + margin-top: 0.3em - p - margin: 0 - p:not(:list-child) - margin-bottom: 1em +@import plugins /* VCARD (index.html) */ body#vcard @@ -208,20 +257,4 @@ body#vcard a color: $primary-color - -/* indexes */ - -.index - dt - font-weight: bold - color: $primary-color - - dd - margin-left: 0 - margin-bottom: 1em - - ol - margin-top: 0.3em - -@import plugins #+END_SRC |