1729 lines
149 KiB
HTML
1729 lines
149 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- 2025-11-28 -->
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=100%, initial-scale=0.7" />
|
|
<title>Webbieweb.org Sources</title>
|
|
<meta name="generator" content="Org Mode" />
|
|
<style type="text/css">
|
|
#content { max-width: 60em; margin: auto; }
|
|
.title { text-align: center;
|
|
margin-bottom: .2em; }
|
|
.subtitle { text-align: center;
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
margin-top:0; }
|
|
.todo { font-family: monospace; color: red; }
|
|
.done { font-family: monospace; color: green; }
|
|
.priority { font-family: monospace; color: orange; }
|
|
.tag { background-color: #eee; font-family: monospace;
|
|
padding: 2px; font-size: 80%; font-weight: normal; }
|
|
.timestamp { color: #bebebe; }
|
|
.timestamp-kwd { color: #5f9ea0; }
|
|
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
|
|
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
|
|
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
|
|
.underline { text-decoration: underline; }
|
|
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
|
|
p.verse { margin-left: 3%; }
|
|
pre {
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 3px;
|
|
background-color: #f2f2f2;
|
|
padding: 8pt;
|
|
font-family: monospace;
|
|
overflow: auto;
|
|
margin: 1.2em;
|
|
}
|
|
pre.src {
|
|
position: relative;
|
|
overflow: auto;
|
|
}
|
|
pre.src:before {
|
|
display: none;
|
|
position: absolute;
|
|
top: -8px;
|
|
right: 12px;
|
|
padding: 3px;
|
|
color: #555;
|
|
background-color: #f2f2f299;
|
|
}
|
|
pre.src:hover:before { display: inline; margin-top: 14px;}
|
|
/* Languages per Org manual */
|
|
pre.src-asymptote:before { content: 'Asymptote'; }
|
|
pre.src-awk:before { content: 'Awk'; }
|
|
pre.src-authinfo::before { content: 'Authinfo'; }
|
|
pre.src-C:before { content: 'C'; }
|
|
/* pre.src-C++ doesn't work in CSS */
|
|
pre.src-clojure:before { content: 'Clojure'; }
|
|
pre.src-css:before { content: 'CSS'; }
|
|
pre.src-D:before { content: 'D'; }
|
|
pre.src-ditaa:before { content: 'ditaa'; }
|
|
pre.src-dot:before { content: 'Graphviz'; }
|
|
pre.src-calc:before { content: 'Emacs Calc'; }
|
|
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
|
|
pre.src-fortran:before { content: 'Fortran'; }
|
|
pre.src-gnuplot:before { content: 'gnuplot'; }
|
|
pre.src-haskell:before { content: 'Haskell'; }
|
|
pre.src-hledger:before { content: 'hledger'; }
|
|
pre.src-java:before { content: 'Java'; }
|
|
pre.src-js:before { content: 'Javascript'; }
|
|
pre.src-latex:before { content: 'LaTeX'; }
|
|
pre.src-ledger:before { content: 'Ledger'; }
|
|
pre.src-lisp:before { content: 'Lisp'; }
|
|
pre.src-lilypond:before { content: 'Lilypond'; }
|
|
pre.src-lua:before { content: 'Lua'; }
|
|
pre.src-matlab:before { content: 'MATLAB'; }
|
|
pre.src-mscgen:before { content: 'Mscgen'; }
|
|
pre.src-ocaml:before { content: 'Objective Caml'; }
|
|
pre.src-octave:before { content: 'Octave'; }
|
|
pre.src-org:before { content: 'Org mode'; }
|
|
pre.src-oz:before { content: 'OZ'; }
|
|
pre.src-plantuml:before { content: 'Plantuml'; }
|
|
pre.src-processing:before { content: 'Processing.js'; }
|
|
pre.src-python:before { content: 'Python'; }
|
|
pre.src-R:before { content: 'R'; }
|
|
pre.src-ruby:before { content: 'Ruby'; }
|
|
pre.src-sass:before { content: 'Sass'; }
|
|
pre.src-scheme:before { content: 'Scheme'; }
|
|
pre.src-screen:before { content: 'Gnu Screen'; }
|
|
pre.src-sed:before { content: 'Sed'; }
|
|
pre.src-sh:before { content: 'shell'; }
|
|
pre.src-sql:before { content: 'SQL'; }
|
|
pre.src-sqlite:before { content: 'SQLite'; }
|
|
/* additional languages in org.el's org-babel-load-languages alist */
|
|
pre.src-forth:before { content: 'Forth'; }
|
|
pre.src-io:before { content: 'IO'; }
|
|
pre.src-J:before { content: 'J'; }
|
|
pre.src-makefile:before { content: 'Makefile'; }
|
|
pre.src-maxima:before { content: 'Maxima'; }
|
|
pre.src-perl:before { content: 'Perl'; }
|
|
pre.src-picolisp:before { content: 'Pico Lisp'; }
|
|
pre.src-scala:before { content: 'Scala'; }
|
|
pre.src-shell:before { content: 'Shell Script'; }
|
|
pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
|
|
/* additional language identifiers per "defun org-babel-execute"
|
|
in ob-*.el */
|
|
pre.src-cpp:before { content: 'C++'; }
|
|
pre.src-abc:before { content: 'ABC'; }
|
|
pre.src-coq:before { content: 'Coq'; }
|
|
pre.src-groovy:before { content: 'Groovy'; }
|
|
/* additional language identifiers from org-babel-shell-names in
|
|
ob-shell.el: ob-shell is the only babel language using a lambda to put
|
|
the execution function name together. */
|
|
pre.src-bash:before { content: 'bash'; }
|
|
pre.src-csh:before { content: 'csh'; }
|
|
pre.src-ash:before { content: 'ash'; }
|
|
pre.src-dash:before { content: 'dash'; }
|
|
pre.src-ksh:before { content: 'ksh'; }
|
|
pre.src-mksh:before { content: 'mksh'; }
|
|
pre.src-posh:before { content: 'posh'; }
|
|
/* Additional Emacs modes also supported by the LaTeX listings package */
|
|
pre.src-ada:before { content: 'Ada'; }
|
|
pre.src-asm:before { content: 'Assembler'; }
|
|
pre.src-caml:before { content: 'Caml'; }
|
|
pre.src-delphi:before { content: 'Delphi'; }
|
|
pre.src-html:before { content: 'HTML'; }
|
|
pre.src-idl:before { content: 'IDL'; }
|
|
pre.src-mercury:before { content: 'Mercury'; }
|
|
pre.src-metapost:before { content: 'MetaPost'; }
|
|
pre.src-modula-2:before { content: 'Modula-2'; }
|
|
pre.src-pascal:before { content: 'Pascal'; }
|
|
pre.src-ps:before { content: 'PostScript'; }
|
|
pre.src-prolog:before { content: 'Prolog'; }
|
|
pre.src-simula:before { content: 'Simula'; }
|
|
pre.src-tcl:before { content: 'tcl'; }
|
|
pre.src-tex:before { content: 'TeX'; }
|
|
pre.src-plain-tex:before { content: 'Plain TeX'; }
|
|
pre.src-verilog:before { content: 'Verilog'; }
|
|
pre.src-vhdl:before { content: 'VHDL'; }
|
|
pre.src-xml:before { content: 'XML'; }
|
|
pre.src-nxml:before { content: 'XML'; }
|
|
/* add a generic configuration mode; LaTeX export needs an additional
|
|
(add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
|
|
pre.src-conf:before { content: 'Configuration File'; }
|
|
|
|
table { border-collapse:collapse; }
|
|
caption.t-above { caption-side: top; }
|
|
caption.t-bottom { caption-side: bottom; }
|
|
td, th { vertical-align:top; }
|
|
th.org-right { text-align: center; }
|
|
th.org-left { text-align: center; }
|
|
th.org-center { text-align: center; }
|
|
td.org-right { text-align: right; }
|
|
td.org-left { text-align: left; }
|
|
td.org-center { text-align: center; }
|
|
dt { font-weight: bold; }
|
|
.footpara { display: inline; }
|
|
.footdef { margin-bottom: 1em; }
|
|
.figure { padding: 1em; }
|
|
.figure p { text-align: center; }
|
|
.equation-container {
|
|
display: table;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
.equation {
|
|
vertical-align: middle;
|
|
}
|
|
.equation-label {
|
|
display: table-cell;
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
}
|
|
.inlinetask {
|
|
padding: 10px;
|
|
border: 2px solid gray;
|
|
margin: 10px;
|
|
background: #ffffcc;
|
|
}
|
|
#org-div-home-and-up
|
|
{ text-align: right; font-size: 70%; white-space: nowrap; }
|
|
textarea { overflow-x: auto; }
|
|
.linenr { font-size: smaller }
|
|
.code-highlighted { background-color: #ffff00; }
|
|
.org-info-js_info-navigation { border-style: none; }
|
|
#org-info-js_console-label
|
|
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
|
|
.org-info-js_search-highlight
|
|
{ background-color: #ffff00; color: #000000; font-weight: bold; }
|
|
.org-svg { }
|
|
</style>
|
|
<!-- Fix flashes of unstyled content -->
|
|
<style>html{visibility: hidden;opacity:0;}</style>
|
|
|
|
<link rel="stylesheet" href="/static/fonts.css" type="text/css"/>
|
|
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
|
|
<link rel="icon" type="image/png" href="/static/favicon_96.png" sizes="96x96" />
|
|
|
|
<script type="text/javascript" src="/static/hide.js"></script>
|
|
<script type="text/javascript" src="/static/footnote.js"></script>
|
|
|
|
<link rel="alternate" type="application/rss+xml" title="WebbieWeb" href="https://webbieweb.org/feed.xml">
|
|
</head>
|
|
<body>
|
|
<div id="preamble" class="status">
|
|
<div id="header">
|
|
<a class="navbar-link" href="/">Home</a>
|
|
<a class="navbar-link" href="/sitemap.html">Sitemap</a>
|
|
<a class="navbar-link" href="/friends.html">Webring</a>
|
|
<span id="looking-for-work">
|
|
<a href="/work/looking_for_work.html"><b>Looking for Work</b></a> — software, sysadmin, other — <i>2hr free!</i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="content" class="content">
|
|
<div id="outline-container-orgfb22a83" class="outline-2">
|
|
<h2 id="orgfb22a83">Webbieweb.org Literate Sources   <span class="tag"><span class="h4left">h4left</span> <span class="h5left">h5left</span> <span class="h3underline">h3underline</span></span></h2>
|
|
<div class="outline-text-2" id="text-orgfb22a83">
|
|
</div>
|
|
<div id="outline-container-org63e0b35" class="outline-3">
|
|
<h3 id="org63e0b35">Introduction</h3>
|
|
<div class="outline-text-3" id="text-org63e0b35">
|
|
<p>
|
|
These are the <a href="https://en.wikipedia.org/wiki/Literate_programming">literate</a> sources of <i>webbieweb.org</i>. The code blocks here constitute the actual sources; therefore, this document is guaranteed to be up to date.
|
|
</p>
|
|
|
|
<p>
|
|
This page is self-contained; the only dependency is <code>ox-publish</code>. The following directory structure is expected:
|
|
</p>
|
|
<pre class="example" id="orgd4d6320">
|
|
.
|
|
|-- html ;; Export destination; you can copy this dir to any static file host and host the website that way.
|
|
|-- org ;; Org-mode sources; these will get compiled and the output copied to html/.
|
|
`-- source.org ;; This file.
|
|
|-- static ;; Images, videos, CSS files, fonts etc will be copied unchanged to html/static.
|
|
`-- util
|
|
|-- head.html ;; Contains HTML <head>; will be prepended to every output file.
|
|
|-- postamble.html ;; Navbar; will be prepended to <body> of every output file.
|
|
`-- preamble.html ;; Footer; as above.
|
|
</pre>
|
|
<div class="org-center">
|
|
<p>
|
|
(Apologies for the misalignment, I don’t know why that happens.)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org22a61d2" class="outline-3">
|
|
<h3 id="org22a61d2">Export Commands</h3>
|
|
<div class="outline-text-3" id="text-org22a61d2">
|
|
<p>
|
|
Load this file up in Emacs and hit C-c C-c on the code block below to export changes to HTML.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp" id="org5129634"><<blog-scaffolding>>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-babel-tangle</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
The one below will ignore caching; necessary in some situations, for instance: changes under <code>util/</code>.
|
|
Currently the habit tracker table also gets erronously cached.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp" id="orgf6f1b37"><<blog-scaffolding>>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/force-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-babel-tangle</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org783a4bc" class="outline-3">
|
|
<h3 id="org783a4bc">Elisp</h3>
|
|
<div class="outline-text-3" id="text-org783a4bc">
|
|
</div>
|
|
<div id="outline-container-org8341ebe" class="outline-4">
|
|
<h4 id="org8341ebe">Basic Settings/Scaffolding   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org8341ebe">
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp" id="orgad3a505"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">require</span> <span class="org-highlight-quoted-quote">'</span><span class="org-constant">ox-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<<no-sitemap>>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/get-util</span> <span class="org-rainbow-delimiters-depth-2">(</span>x<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">with-temp-buffer</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">insert-file-contents</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> <span class="org-string">"../util/"</span> x<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">buffer-string</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> <span class="org-variable-name">org-html-metadata-timestamp-format</span> <span class="org-string">"%Y-%m-%d"</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/spec</span> <span class="org-rainbow-delimiters-depth-2">()</span>
|
|
<span class="org-doc">"Return project settings for use with `</span><span class="org-doc"><span class="org-constant">org-publish-project-alist</span></span><span class="org-doc">'."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>html-head <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/get-util</span> <span class="org-string">"head.html"</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>html-preamble <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/get-util</span> <span class="org-string">"preamble.html"</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>html-postamble <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">blog/get-util</span> <span class="org-string">"postamble.html"</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
|
|
<span class="org-highlight-quoted-quote">`</span><span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span><span class="org-string">"pages"</span>
|
|
<span class="org-builtin">:base-directory</span> <span class="org-string">"."</span>
|
|
<span class="org-builtin">:base-extension</span> <span class="org-string">"org"</span>
|
|
<span class="org-builtin">:recursive</span> t
|
|
<span class="org-builtin">:publishing-directory</span> <span class="org-string">"../html"</span>
|
|
<span class="org-builtin">:publishing-function</span> org-html-publish-to-html
|
|
|
|
<span class="org-builtin">:html-doctype</span> <span class="org-string">"html5"</span>
|
|
<span class="org-builtin">:html-html5-fancy</span> t
|
|
|
|
<span class="org-builtin">:html-viewport</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>width <span class="org-string">"100%"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>initial-scale <span class="org-string">"0.7"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>minimum-scale <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>maximum-scale <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>user-scalable <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-builtin">:language</span> <span class="org-string">"en"</span>
|
|
<span class="org-builtin">:section-numbers</span> nil
|
|
|
|
<span class="org-builtin">:with-toc</span> nil
|
|
<span class="org-builtin">:with-date</span> t
|
|
<span class="org-builtin">:with-title</span> nil
|
|
<span class="org-builtin">:with-author</span> nil
|
|
|
|
<span class="org-builtin">:auto-sitemap</span> t
|
|
|
|
<span class="org-builtin">:sitemap-sort-files</span> anti-chronologically
|
|
<span class="org-builtin">:sitemap-format-entry</span> blog/sitemap-format-entry
|
|
|
|
<span class="org-builtin">:sitemap-function</span>
|
|
blog/sitemap-function
|
|
|
|
|
|
<span class="org-builtin">:headline-levels</span> <span class="org-highlight-numbers-number">4</span>
|
|
<span class="org-builtin">:html-head</span> ,html-head
|
|
|
|
<span class="org-builtin">:html-preamble</span> ,html-preamble
|
|
<span class="org-builtin">:html-postamble</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">lambda</span> <span class="org-rainbow-delimiters-depth-2">(</span>p<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>timestamp-format <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> p <span class="org-builtin">:html-metadata-timestamp-format</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>date <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-export-data</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-export-get-date</span> p timestamp-format<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
p<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>file <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> p <span class="org-builtin">:input-file</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>modified <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format-time-string</span>
|
|
timestamp-format
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">and</span> file <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-function-name">file-attribute-modification-time</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">file-attributes</span> file<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">concat</span>
|
|
<span class="org-string">"<div id='</span><span class="org-string"><span class="org-constant">footer</span></span><span class="org-string">'>"</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">when</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">not</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-function-name">string-blank-p</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">format</span> <span class="org-string">"%s"</span> date<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span> <span class="org-string">"<div id='</span><span class="org-string"><span class="org-constant">publish-date</span></span><span class="org-string">'>Published: %s</div>"</span> date<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">format</span> <span class="org-string">"<div id='</span><span class="org-string"><span class="org-constant">modified-date</span></span><span class="org-string">'>Last modified: %s</div>"</span> modified<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
,html-postamble
|
|
<span class="org-string">"</div>"</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-string">"static"</span>
|
|
<span class="org-builtin">:base-directory</span> <span class="org-string">"../static"</span>
|
|
<span class="org-builtin">:base-extension</span> <span class="org-string">"css</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">txt</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">jpg</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">gif</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">png</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">ttf</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">js</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">mp4</span><span class="org-string"><span class="org-regexp-grouping-backslash">\\</span></span><span class="org-string"><span class="org-regexp-grouping-construct">|</span></span><span class="org-string">webm"</span>
|
|
<span class="org-builtin">:recursive</span> t
|
|
<span class="org-builtin">:publishing-directory</span> <span class="org-string">"../html/static"</span>
|
|
<span class="org-builtin">:publishing-function</span> org-publish-attachment<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-string">"RSS"</span>
|
|
<span class="org-builtin">:base-directory</span> <span class="org-string">"../RSS"</span>
|
|
<span class="org-builtin">:base-extension</span> <span class="org-string">"xml"</span>
|
|
<span class="org-builtin">:publishing-directory</span> <span class="org-string">"../html"</span>
|
|
<span class="org-builtin">:publishing-function</span> org-publish-attachment<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-string">"blog"</span> <span class="org-builtin">:components</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-string">"pages"</span> <span class="org-string">"static"</span> <span class="org-string">"RSS"</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/publish</span> <span class="org-rainbow-delimiters-depth-2">()</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">setq</span> <span class="org-variable-name">org-publish-project-alist</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-function-name">blog/spec</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-publish-all</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/force-publish</span> <span class="org-rainbow-delimiters-depth-2">()</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">setq</span> <span class="org-variable-name">org-publish-project-alist</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-function-name">blog/spec</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-publish-remove-all-timestamps</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-publish-all</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgdae8d35" class="outline-3">
|
|
<h3 id="orgdae8d35">Features</h3>
|
|
<div class="outline-text-3" id="text-orgdae8d35">
|
|
</div>
|
|
<div id="outline-container-orgaa2806b" class="outline-4">
|
|
<h4 id="orgaa2806b">Sitemap   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-orgaa2806b">
|
|
<p>
|
|
Files with <code>#+FILETAGS: :no-sitemap:</code> at the top will be excluded from <a href="./sitemap.html">the sitemap</a>. Every directory <code>dir/</code> will link to <code>dir/index.org</code>, with <code>index.org</code> being removed as a child entry.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp" id="org9ed19c0"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/sitemap-format-entry</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>entry style project<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Blank out entries with :no_sitemap:</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>tags <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-publish-find-property</span> entry <span class="org-builtin">:filetags</span> project<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>skip <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">member</span> <span class="org-string">"no_sitemap"</span> tags<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">cond</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>skip <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">not</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">directory-name-p</span> entry<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span>
|
|
<span class="org-string">"[[file:%s][%s]]\n"</span>
|
|
entry
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-publish-find-title</span> entry project<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Link index to top level</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">eq</span> style <span class="org-highlight-quoted-quote">'</span><span class="org-highlight-quoted-symbol">tree</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span>
|
|
<span class="org-string">"[[file:%sindex.org][%s]]\n"</span>
|
|
entry
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">capitalize</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">file-name-nondirectory</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">directory-file-name</span> entry<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>t entry<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Remove blank entries from sitemap</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">blog/sitemap-function</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>title lst<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>sitemap <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-publish-sitemap-default</span> title lst<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">replace-regexp-in-string</span> <span class="org-string">"^[ \t]*-[ \t]*\n"</span> <span class="org-string">""</span> sitemap<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgb026ee9" class="outline-4">
|
|
<h4 id="orgb026ee9">Tag-based Section Control   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-orgb026ee9">
|
|
<p>
|
|
Org-mode headers support tags:
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-org"><span class="org-org-level-1"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-1"> Header </span><span class="org-org-level-1"><span class="org-org-tag">:foo:</span></span>
|
|
Sample text
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
Which will compile into something like:
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-html"><<span class="org-function-name">div</span> <span class="org-variable-name">id</span>=<span class="org-string">"outline-container-orgf43334f"</span> <span class="org-variable-name">class</span>=<span class="org-string">"outline-5"</span>>
|
|
<<span class="org-function-name">h5</span> <span class="org-variable-name">id</span>=<span class="org-string">"orgf43334f"</span> <span class="org-variable-name">style</span>=<span class="org-string">"cursor: pointer;"</span>>Header
|
|
<<span class="org-function-name">span</span> <span class="org-variable-name">class</span>=<span class="org-string">"tag"</span>>
|
|
<<span class="org-function-name">span</span> <span class="org-variable-name">class</span>=<span class="org-string">"foo"</span>>foo</<span class="org-function-name">span</span>>
|
|
</<span class="org-function-name">span</span>>
|
|
</<span class="org-function-name">h5</span>>
|
|
<<span class="org-function-name">div</span> <span class="org-variable-name">class</span>=<span class="org-string">"outline-text-5"</span> <span class="org-variable-name">id</span>=<span class="org-string">"text-orgf43334f"</span>>
|
|
<<span class="org-function-name">p</span>> Sample text </<span class="org-function-name">p</span>>
|
|
</<span class="org-function-name">div</span>>
|
|
</<span class="org-function-name">div</span>>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
We can use these tags to granularly control styling and JS features per header.
|
|
We will hide the tags themselves:
|
|
</p>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.tag</span> { <span class="org-css-property">display</span>: none; }
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org1172fcb" class="outline-4">
|
|
<h4 id="org1172fcb">Header Styling Tags   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org1172fcb">
|
|
<p>
|
|
Tags for granular styling. This page has <code>:h4left:h5left:h3underline:</code> at the top level.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-property">div</span>:has(* .tag .h4left) h4 {
|
|
<span class="org-css-property">text-align</span>: left;
|
|
}
|
|
|
|
<span class="org-css-property">div</span>:has(* .tag .h5left) h5 {
|
|
<span class="org-css-property">text-align</span>: left;
|
|
}
|
|
|
|
<span class="org-css-property">div</span>:has(* .tag .h3underline) h3 {
|
|
<span class="org-css-property">text-decoration</span>: underline;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org95b9821" class="outline-4">
|
|
<h4 id="org95b9821">Journal   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org95b9821">
|
|
<p>
|
|
Here’s a template for the journal files, as reference for what follows:
|
|
</p>
|
|
</div>
|
|
<div id="outline-container-org8f5b2f9" class="outline-5">
|
|
<h5 id="org8f5b2f9">Template   <span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
|
|
<div class="outline-text-5" id="text-org8f5b2f9">
|
|
<div class="org-src-container">
|
|
<pre class="src src-org"><span class="org-org-meta-line">#+FILETAGS: :no_sitemap:</span>
|
|
<span class="org-org-meta-line">#+TODO: NO(n) | YES(y) EXCELLENT(e) FREED(f)</span>
|
|
<span class="org-org-document-info-keyword">#+title:</span> <span class="org-org-document-title">Journal Week XX, XXXX</span>
|
|
<span class="org-org-block-begin-line">#+BEGIN_CENTER</span>
|
|
<span class="org-org-link"><span class="org-warning"><a href="./wXX-2025.org">Previous</a></span></span> | <span class="org-org-link"><a href="./index.org">Index</a></span>
|
|
<span class="org-org-block-end-line">#+END_CENTER</span>
|
|
<span class="org-org-level-1"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-1"> Journal Week XX, XXXX</span>
|
|
<span class="org-org-hide">*</span><span class="org-org-level-2"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-2"> Monday, XXth XXXXXXXX </span><span class="org-org-level-2"><span class="org-org-tag">:journal:</span></span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:DAILIES-YEAR:</span> <span class="org-org-property-value">2025</span>
|
|
<span class="org-org-special-keyword">:DAILIES-DAY:</span> <span class="org-org-property-value">XXX</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">**</span><span class="org-org-level-3"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-3"> NO Journal </span><span class="org-org-level-3"><span class="org-org-tag">:jentry:</span></span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-blogging</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">**</span><span class="org-org-level-3"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-3"> Habits </span><span class="org-org-level-3"><span class="org-org-tag">:autocollapse:habits:</span></span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Meditation</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-meditation</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Drawing</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-drawing</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Engineering</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-engineering</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO French</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-french</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Social</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-social</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Exercise</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-exercise</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
<span class="org-org-hide">***</span><span class="org-org-level-4"><span class="org-org-superstar-header-bullet">*</span></span><span class="org-org-level-4"> NO Reading</span>
|
|
<span class="org-org-drawer">:PROPERTIES:</span>
|
|
<span class="org-org-special-keyword">:CUSTOM_ID:</span> <span class="org-org-property-value">dailies-reading</span>
|
|
<span class="org-org-drawer">:END:</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org2893243" class="outline-5">
|
|
<h5 id="org2893243">Styling</h5>
|
|
<div class="outline-text-5" id="text-org2893243">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-property">div</span>:has(h3 .tag .journal) {
|
|
<span class="org-css-property">border</span>: none;
|
|
<span class="org-css-property">box-shadow</span>: none;
|
|
}
|
|
|
|
<span class="org-css-property">div</span>:has(> h3 .tag .journal)::after {
|
|
<span class="org-css-property">content</span>: <span class="org-string">'~ ❦ ~'</span>;
|
|
<span class="org-css-property">display</span>: block;
|
|
<span class="org-css-property">text-align</span>: center;
|
|
<span class="org-css-property">padding-top</span>: 0.2rem;
|
|
<span class="org-css-property">padding-bottom</span>: 0.2rem;
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey4</span>);
|
|
<span class="org-css-property">font-size</span>: 2rem;
|
|
}
|
|
|
|
<span class="org-css-property">h3</span>:has(.tag .journal) {
|
|
<span class="org-css-property">text-align</span>: left;
|
|
}
|
|
|
|
<span class="org-css-property">h4</span>:has(.tag .jentry) {
|
|
<span class="org-css-property">display</span>: none;
|
|
}
|
|
|
|
<span class="org-css-property">h4</span>:has(.tag .habits) {
|
|
<span class="org-css-property">text-align</span>: left;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org2c77c83" class="outline-4">
|
|
<h4 id="org2c77c83">Habit Tracker   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org2c77c83">
|
|
<p>
|
|
Implements the habit tracking table on the <a href="./index.html">front page</a>. Habits are extracted from journal entries and rendered into a table, including a “streak” heatmap and the ability to click cells to see the corresponding entry.
|
|
</p>
|
|
</div>
|
|
<div id="outline-container-orgd5db4c5" class="outline-5">
|
|
<h5 id="orgd5db4c5">Elisp   <span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
|
|
<div class="outline-text-5" id="text-orgd5db4c5">
|
|
<div class="org-src-container">
|
|
<pre class="src src-emacs-lisp" id="org69a7bb8"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/org-to-html</span> <span class="org-rainbow-delimiters-depth-2">(</span>org-string<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-doc">"Convert ORG-STRING to HTML."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">with-temp-buffer</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">insert</span> org-string<span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-mode</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-export-as</span> <span class="org-highlight-quoted-quote">'</span><span class="org-highlight-quoted-symbol">html</span> nil nil t nil<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/sort-habits</span> <span class="org-rainbow-delimiters-depth-2">(</span>habit-alist<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-doc">"Sort habit-alist by a predefined order of custom-ids."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>order <span class="org-highlight-quoted-quote">'</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-string">"dailies-blogging"</span> <span class="org-string">"dailies-meditation"</span> <span class="org-string">"dailies-french"</span> <span class="org-string">"dailies-engineering"</span>
|
|
<span class="org-string">"dailies-exercise"</span> <span class="org-string">"dailies-drawing"</span> <span class="org-string">"dailies-reading"</span> <span class="org-string">"dailies-social"</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">sort</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">copy-sequence</span> habit-alist<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">lambda</span> <span class="org-rainbow-delimiters-depth-1">(</span>a b<span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-delimiters-depth-3">(</span>pos-a <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">or</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">cl-position</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">car</span> a<span class="org-rainbow-delimiters-depth-2">)</span> order <span class="org-builtin">:test</span> <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-1">)</span> <span class="org-highlight-numbers-number">999</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span>pos-b <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">or</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">cl-position</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">car</span> b<span class="org-rainbow-delimiters-depth-2">)</span> order <span class="org-builtin">:test</span> <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-1">)</span> <span class="org-highlight-numbers-number">999</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant"><</span> pos-a pos-b<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/extract-habits</span> <span class="org-rainbow-delimiters-depth-2">(</span>file<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-doc">"Extract habits with date context from FILE.</span>
|
|
<span class="org-doc">Returns a list of plists with :custom-id, :todo-state, :date, :day-of-year."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">with-temp-buffer</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">insert-file-contents</span> file<span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-mode</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-4">(</span>results<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">org-element-map</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-element-parse-buffer</span><span class="org-rainbow-delimiters-depth-1">)</span> <span class="org-highlight-quoted-quote">'</span><span class="org-highlight-quoted-symbol">headline</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">lambda</span> <span class="org-rainbow-delimiters-depth-2">(</span>hl<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>custom-id <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:CUSTOM_ID</span> hl<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>todo-state <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:todo-keyword</span> hl<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">when</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">and</span> custom-id todo-state<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Get parent properties for context</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>parent <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:parent</span> hl<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>day-of-year <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">or</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:DAILIES-DAY</span> parent<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>grandparent <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:parent</span> parent<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">when</span> grandparent
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">org-element-property</span> <span class="org-builtin">:DAILIES-DAY</span> grandparent<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>body <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">org-element-interpret-data</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-function-name">org-element-contents</span> hl<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">push</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">list</span> <span class="org-builtin">:custom-id</span> custom-id
|
|
<span class="org-builtin">:todo-state</span> todo-state
|
|
<span class="org-builtin">:day-of-year</span> day-of-year
|
|
<span class="org-builtin">:file</span> file
|
|
<span class="org-builtin">:body</span> body<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
results<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">nreverse</span> results<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/extract-all-habits</span> <span class="org-rainbow-delimiters-depth-2">(</span>files<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">mapcan</span> <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">akk0/extract-habits</span> files<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> akk0/journal-files
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">directory-files</span> <span class="org-string">"./journal/"</span> t <span class="org-string">"^w.*\\.org$"</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/habits-alist</span> <span class="org-rainbow-delimiters-depth-2">(</span>habits<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-doc">"Transform HABITS list into nested alists: custom-id → day-of-year → habit-data."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-3">(</span>result<span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">dolist</span> <span class="org-rainbow-delimiters-depth-4">(</span>habit habits<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>custom-id <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">plist-get</span> habit <span class="org-builtin">:custom-id</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>day-of-year <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">plist-get</span> habit <span class="org-builtin">:day-of-year</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>todo-state <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">plist-get</span> habit <span class="org-builtin">:todo-state</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>body <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">plist-get</span> habit <span class="org-builtin">:body</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Get the alist for this custom-id</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>inner-alist <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">alist-get</span> custom-id result nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Store full data instead of just todo-state</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>habit-data <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">list</span> <span class="org-builtin">:todo-state</span> todo-state <span class="org-builtin">:body</span> body <span class="org-builtin">:day-of-year</span> day-of-year<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Update the inner alist</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>updated-inner <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">cons</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">cons</span> day-of-year habit-data<span class="org-rainbow-delimiters-depth-4">)</span> inner-alist<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Update result</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setf</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">alist-get</span> custom-id result nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-2">)</span> updated-inner<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
result<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> habit-alist <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-function-name">akk0/habits-alist</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-function-name">akk0/extract-all-habits</span> akk0/journal-files<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/get-habit-history</span> <span class="org-rainbow-delimiters-depth-2">(</span>habit-alist custom-id day-number days-back window-size<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>inner-alist <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">alist-get</span> custom-id habit-alist nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>result nil<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>all-states nil<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>score-for-state <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">lambda</span> <span class="org-rainbow-delimiters-depth-2">(</span>state<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">cond</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">equal</span> state <span class="org-string">"NO"</span><span class="org-rainbow-delimiters-depth-4">)</span> <span class="org-highlight-numbers-number">-1</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">equal</span> state <span class="org-string">"YES"</span><span class="org-rainbow-delimiters-depth-4">)</span> <span class="org-highlight-numbers-number">1</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">equal</span> state <span class="org-string">"EXCELLENT"</span><span class="org-rainbow-delimiters-depth-4">)</span> <span class="org-highlight-numbers-number">2</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span>t <span class="org-highlight-numbers-number">0</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">dotimes</span> <span class="org-rainbow-delimiters-depth-4">(</span>i days-back<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>current-day <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">+</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">-</span> day-number days-back<span class="org-rainbow-delimiters-depth-4">)</span> i <span class="org-highlight-numbers-number">1</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>current-day-str <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">number-to-string</span> current-day<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>habit-data <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">alist-get</span> current-day-str inner-alist nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>todo-state <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">if</span> habit-data
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">plist-get</span> habit-data <span class="org-builtin">:todo-state</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-string">"NODATA"</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>body <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">if</span> habit-data
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">plist-get</span> habit-data <span class="org-builtin">:body</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-string">""</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>doy <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">if</span> habit-data
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">plist-get</span> habit-data <span class="org-builtin">:day-of-year</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-string">""</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">push</span> todo-state all-states<span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-rainbow-delimiters-depth-3">(</span>window-states <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-function-name">seq-take</span> all-states window-size<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span>rolling-score <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">apply</span> <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">+</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">mapcar</span> score-for-state window-states<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">push</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">list</span> <span class="org-builtin">:todo-state</span> todo-state
|
|
<span class="org-builtin">:score</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">max</span> <span class="org-highlight-numbers-number">1</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">min</span> <span class="org-highlight-numbers-number">5</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">/</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">+</span> rolling-score <span class="org-highlight-numbers-number">5</span><span class="org-rainbow-delimiters-depth-3">)</span> <span class="org-highlight-numbers-number">2</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-builtin">:body</span> body
|
|
<span class="org-builtin">:doy</span> doy<span class="org-rainbow-delimiters-depth-3">)</span>
|
|
result<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">nreverse</span> result<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">defun</span> <span class="org-function-name">akk0/habits-to-html-table</span> <span class="org-rainbow-delimiters-depth-2">(</span>habit-alist day-number days-back window-size<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-doc">"Generate HTML table of habits with rolling scores.</span>
|
|
<span class="org-doc">Rows are custom-ids, columns are days."</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>color-map <span class="org-highlight-quoted-quote">'</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"NODATA"</span> . <span class="org-string">"grey"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"YES"</span> . <span class="org-string">"green"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"NO"</span> . <span class="org-string">"red"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"FREED"</span> . <span class="org-string">"purple"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"EXCELLENT"</span> . <span class="org-string">"blue"</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>symbol-map <span class="org-highlight-quoted-quote">'</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"NODATA"</span> . <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"YES"</span> . <span class="org-string">"●"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"NO"</span> . <span class="org-string">"×"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"FREED"</span> . <span class="org-string">"♣"</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-string">"EXCELLENT"</span> . <span class="org-string">"♦"</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>sorted-habits <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">akk0/sort-habits</span> habit-alist<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>html <span class="org-string">""</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Start table</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-string">"<table class='</span><span class="org-string"><span class="org-constant">habit-table</span></span><span class="org-string">' style='margin-left: auto; margin-right:auto; margin-bottom: 0.8rem;'>\n"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Header row with day numbers</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-string">" <tr>\n <th></th>\n"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">dotimes</span> <span class="org-rainbow-delimiters-depth-4">(</span>i days-back<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>day <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">+</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">-</span> day-number days-back<span class="org-rainbow-delimiters-depth-4">)</span> i <span class="org-highlight-numbers-number">1</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">concat</span>
|
|
html
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">cond</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">=</span> day day-number<span class="org-rainbow-delimiters-depth-1">)</span> <span class="org-string">"<th class='</span><span class="org-string"><span class="org-constant">habit-click-me</span></span><span class="org-string">'>click me ￬</th>"</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">=</span> <span class="org-highlight-numbers-number">0</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-variable-name">%</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">-</span> day day-number<span class="org-rainbow-delimiters-depth-3">)</span> <span class="org-highlight-numbers-number">7</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span> <span class="org-string">"<th>○</th>"</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>t <span class="org-string">"<th />"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-string">" </tr>\n"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Data rows - one per habit</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">dolist</span> <span class="org-rainbow-delimiters-depth-4">(</span>entry sorted-habits<span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-rainbow-delimiters-depth-2">(</span>custom-id <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">car</span> entry<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span>history <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-function-name">akk0/get-habit-history</span> habit-alist custom-id day-number days-back window-size<span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">concat</span> html <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">format</span> <span class="org-string">" <tr>\n <td class='</span><span class="org-string"><span class="org-constant">habit-name</span></span><span class="org-string">' style='padding-right: 20px; padding-top: 5px; padding-bottom: 5px;'><i>%s</i></td>\n"</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">capitalize</span> <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">string-remove-prefix</span> <span class="org-string">"dailies-"</span> custom-id<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Cell for each day</span>
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">dolist</span> <span class="org-rainbow-delimiters-depth-2">(</span>day-data history<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">let*</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-rainbow-delimiters-depth-4">(</span>todo-state <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> day-data <span class="org-builtin">:todo-state</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>score <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> day-data <span class="org-builtin">:score</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>body <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> day-data <span class="org-builtin">:body</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>doy <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">plist-get</span> day-data <span class="org-builtin">:doy</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>body-html <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">if</span> <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-keyword">and</span> body <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">not</span> <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-function-name">string-empty-p</span> body<span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-function-name">akk0/org-to-html</span> body<span class="org-rainbow-delimiters-depth-2">)</span>
|
|
<span class="org-string">""</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>color <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">alist-get</span> todo-state color-map nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>symbol <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">alist-get</span> todo-state symbol-map nil nil <span class="org-highlight-quoted-quote">#'</span><span class="org-highlight-quoted-symbol">equal</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>class <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span> <span class="org-string">"habit-brightness-%d"</span> score<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>style-var <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span> <span class="org-string">"--%s%d"</span> color score<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-4">(</span>escaped-body <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">replace-regexp-in-string</span> <span class="org-string">"\""</span> <span class="org-string">"&quot;"</span>
|
|
<span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">replace-regexp-in-string</span> <span class="org-string">"\n"</span> <span class="org-string">"&#10;"</span> body-html<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">)</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">format</span> <span class="org-string">" <td class=\"%s habit-cell\" style=\"background-color:var(%s)\" data-body=\"%s\" onclick=\"showHabitPopup(this)\" data-doy=\"%s\" data-activity=\"%s\"</span>
|
|
<span class="org-string"> data-status=\"%s\">%s</td>\n"</span>
|
|
class style-var
|
|
escaped-body
|
|
doy
|
|
custom-id
|
|
todo-state
|
|
symbol<span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">concat</span> html <span class="org-string">" </tr>\n"</span><span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-string">"</table>\n"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
<span class="org-comment-delimiter">;; </span><span class="org-comment">Legend and expansion section</span>
|
|
<span class="org-rainbow-delimiters-depth-3">(</span><span class="org-keyword">setq</span> html <span class="org-rainbow-delimiters-depth-4">(</span><span class="org-constant">concat</span> html <span class="org-string">"<span class='</span><span class="org-string"><span class="org-constant">center</span></span><span class="org-string">'><b>Key:</b></span>
|
|
<span class="org-string"><span style='color: var(--grey3);'>Unknown</span> |</span>
|
|
<span class="org-string"><span style='color: var(--red3);'>× No</span> |</span>
|
|
<span class="org-string"><span style='color: var(--green3);'>● Yes</span> |</span>
|
|
<span class="org-string"><span style='color: var(--blue3);'>♦ Excellent</span> |</span>
|
|
<span class="org-string"><span style='color: var(--purple3);'>♣ Freed Up</span></span>
|
|
<span class="org-string"></span></span>
|
|
<span class="org-string"><hr /></span>
|
|
<span class="org-string"><div class='</span><span class="org-string"><span class="org-constant">habit-popup</span></span><span class="org-string">' id='</span><span class="org-string"><span class="org-constant">habitPopup</span></span><span class="org-string">'></span>
|
|
<span class="org-string"> <div class='</span><span class="org-string"><span class="org-constant">habit-popup-content</span></span><span class="org-string">' id='</span><span class="org-string"><span class="org-constant">habitPopupContent</span></span><span class="org-string">'></span>
|
|
<span class="org-string"> <span class='</span><span class="org-string"><span class="org-constant">center</span></span><span class="org-string">'><i>This section intentionally left blank.</i></span></span>
|
|
<span class="org-string"> </div></span>
|
|
<span class="org-string"></div></span>
|
|
<span class="org-string">"</span><span class="org-rainbow-delimiters-depth-4">)</span><span class="org-rainbow-delimiters-depth-3">)</span>
|
|
|
|
html<span class="org-rainbow-delimiters-depth-2">)</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
|
|
<span class="org-rainbow-delimiters-depth-1">(</span><span class="org-function-name">akk0/habits-to-html-table</span> habit-alist <span class="org-rainbow-delimiters-depth-2">(</span><span class="org-constant">string-to-number</span> <span class="org-rainbow-delimiters-depth-3">(</span><span class="org-constant">format-time-string</span> <span class="org-string">"%j"</span><span class="org-rainbow-delimiters-depth-3">)</span><span class="org-rainbow-delimiters-depth-2">)</span> <span class="org-highlight-numbers-number">25</span> <span class="org-highlight-numbers-number">5</span><span class="org-rainbow-delimiters-depth-1">)</span>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgf327ccb" class="outline-5">
|
|
<h5 id="orgf327ccb">Expansion Section   <span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
|
|
<div class="outline-text-5" id="text-orgf327ccb">
|
|
<p>
|
|
A bit of JS for enabling the expanding of entries.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-javascript"><span class="org-keyword">function</span> <span class="org-function-name">formatDayOfYear</span>(<span class="org-variable-name">dayOfYear</span>, <span class="org-variable-name">year</span>) {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">date</span> = <span class="org-keyword">new</span> <span class="org-type">Date</span>(year, <span class="org-highlight-numbers-number">0</span>, dayOfYear);
|
|
|
|
<span class="org-keyword">return</span> date.toLocaleDateString(<span class="org-string">'en-GB'</span>, {
|
|
day: <span class="org-string">'numeric'</span>,
|
|
month: <span class="org-string">'short'</span>,
|
|
year: <span class="org-string">'numeric'</span>
|
|
});
|
|
}
|
|
|
|
<span class="org-keyword">let</span> <span class="org-variable-name">selectedCell</span> = <span class="org-constant">null</span>;
|
|
|
|
<span class="org-keyword">function</span> <span class="org-function-name">showHabitPopup</span>(<span class="org-variable-name">cell</span>) {
|
|
<span class="org-keyword">var</span> <span class="org-variable-name">bodyHtml</span> = cell.getAttribute(<span class="org-string">'data-body'</span>);
|
|
<span class="org-keyword">var</span> <span class="org-variable-name">doy</span> = cell.getAttribute(<span class="org-string">'data-doy'</span>);
|
|
<span class="org-keyword">var</span> <span class="org-variable-name">activity</span> = cell.getAttribute(<span class="org-string">'data-activity'</span>);
|
|
<span class="org-keyword">var</span> <span class="org-variable-name">status</span> = cell.getAttribute(<span class="org-string">'data-status'</span>);
|
|
activity = activity.replace(<span class="org-string">/^dailies-/</span>, <span class="org-string">''</span>).replace(<span class="org-string">/^./</span>, c => c.toUpperCase())
|
|
|
|
<span class="org-keyword">if</span> (!bodyHtml) bodyHtml = <span class="org-string">"<span class='center'><i>This section intentionally left blank.</i></span>"</span>
|
|
|
|
bodyHtml = <span class="org-string">`<h3><span class="grid ${status}">${activity}</span> — ${formatDayOfYear(parseInt(doy), 2025)}</h3> ${bodyHtml}`</span>
|
|
|
|
document.getElementById(<span class="org-string">'habitPopupContent'</span>).innerHTML = bodyHtml;
|
|
|
|
<span class="org-keyword">if</span> (selectedCell) {
|
|
selectedCell.classList.remove(<span class="org-string">'habitgrid-selected'</span>);
|
|
}
|
|
|
|
cell.classList.add(<span class="org-string">'habitgrid-selected'</span>);
|
|
selectedCell = cell;
|
|
enableFootnotes();
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org0e5c813" class="outline-5">
|
|
<h5 id="org0e5c813">CSS   <span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
|
|
<div class="outline-text-5" id="text-org0e5c813">
|
|
<p>
|
|
Color habit entries based on their completion status:
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.done.YES, .todo.NO, .done.EXCELLENT, .done.FREED</span> {
|
|
<span class="org-css-property">display</span>: none;
|
|
}
|
|
|
|
<span class="org-css-property">h2</span>:has(.done.YES), h3:has(.done.YES), h4:has(.done.YES), h5:has(.done.YES), .grid.YES {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--green3</span>);
|
|
}
|
|
|
|
<span class="org-css-property">h2</span>:has(.todo.NO), h3:has(.todo.NO), h4:has(.todo.NO), h5:has(.todo.NO), .grid.NO {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--red3</span>);
|
|
}
|
|
|
|
<span class="org-css-property">h2</span>:has(.done.EXCELLENT), h3:has(.done.EXCELLENT), h4:has(.done.EXCELLENT), h5:has(.done.EXCELLENT), .grid.EXCELLENT {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--blue3</span>);
|
|
}
|
|
|
|
<span class="org-css-property">h2</span>:has(.done.FREED), h3:has(.done.FREED), h4:has(.done.FREED), h5:has(.done.FREED), .grid.FREED {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--purple3</span>);
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
Style the cells, set legible text color, outline clickable:
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.habit-table th, .habit-table td</span> {
|
|
<span class="org-css-property">text-align</span>: center;
|
|
<span class="org-css-property">vertical-align</span>: middle;
|
|
<span class="org-css-property">width</span>: 20px;
|
|
<span class="org-css-property">height</span>: 20px;
|
|
<span class="org-css-property">cursor</span>: pointer;
|
|
<span class="org-css-property">user-select</span>: none;
|
|
<span class="org-css-property">padding</span>: .2em;
|
|
<span class="org-css-property">max-width</span>: 22px;
|
|
}
|
|
|
|
<span class="org-css-selector">.habit-table th</span> {
|
|
<span class="org-css-property">padding</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
}
|
|
|
|
<span class="org-css-selector">.habit-click-me</span> {
|
|
<span class="org-css-property">font-weight</span>: normal;
|
|
<span class="org-css-property">font-size</span>: calc(var(<span class="org-variable-name">--font-size</span>) * <span class="org-highlight-numbers-number">0.7</span>);
|
|
<span class="org-css-property">line-height</span>: calc(var(<span class="org-variable-name">--line-height</span>) * <span class="org-highlight-numbers-number">0.7</span>);
|
|
<span class="org-css-property">text-align</span>: center;
|
|
}
|
|
|
|
<span class="org-css-selector">.habit-name</span> {
|
|
<span class="org-css-property">max-width</span>: 15rem <span class="org-builtin">!important</span>;
|
|
}
|
|
|
|
<span class="org-css-selector">.habit-cell.habit-brightness-1</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey5</span>); <span class="org-css-property">outline-color</span>: var(<span class="org-variable-name">--grey5</span>) <span class="org-builtin">!important</span>; }
|
|
<span class="org-css-selector">.habit-cell.habit-brightness-2</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey5</span>); <span class="org-css-property">outline-color</span>: var(<span class="org-variable-name">--grey5</span>) <span class="org-builtin">!important</span>; }
|
|
<span class="org-css-selector">.habit-cell.habit-brightness-3</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey5</span>); <span class="org-css-property">outline-color</span>: var(<span class="org-variable-name">--grey5</span>) <span class="org-builtin">!important</span>; }
|
|
<span class="org-css-selector">.habit-cell.habit-brightness-4</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey2</span>); <span class="org-css-property">outline-color</span>: var(<span class="org-variable-name">--grey5</span>) <span class="org-builtin">!important</span>; }
|
|
<span class="org-css-selector">.habit-cell.habit-brightness-5</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey3</span>); <span class="org-css-property">outline-color</span>: var(<span class="org-variable-name">--grey5</span>) <span class="org-builtin">!important</span>; }
|
|
|
|
<span class="org-css-selector">.habit-cell:not([data-body=</span><span class="org-string">""</span><span class="org-css-selector">])</span> {
|
|
<span class="org-css-property">outline</span>: dotted 2px;
|
|
<span class="org-css-property">outline-offset</span>: -2px;
|
|
}
|
|
<span class="org-css-selector">.habitgrid-selected</span> {
|
|
<span class="org-css-property">outline</span>: solid 2px var(<span class="org-variable-name">--purple5</span>) <span class="org-builtin">!important</span>;
|
|
<span class="org-css-property">outline-offset</span>: -2px;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org1f66c64" class="outline-4">
|
|
<h4 id="org1f66c64">Header Collapsing   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org1f66c64">
|
|
<p>
|
|
Sections can be expanded and collapsed by clicking on their headers; this will assign <code>.orgjq-expanded</code> and <code>.orgjq-contracted</code> CSS classes as appropriate. Headers with the <code>:autocollapse:</code> tag will be collapsed by default (like this section).
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.orgjq-expanded p</span> {
|
|
<span class="org-css-property">margin-top</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">padding-bottom</span>: 1.5rem;
|
|
<span class="org-css-property">margin-bottom</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
}
|
|
|
|
<span class="org-css-selector">.orgjq-contracted > div</span> {
|
|
<span class="org-css-property">display</span>: none;
|
|
}
|
|
|
|
<span class="org-css-selector">.orgjq-contracted h2, .orgjq-contracted h3, .orgjq-contracted h4, orgjq-contracted h5</span> {
|
|
<span class="org-css-property">padding-top</span>: 0.3rem <span class="org-builtin">!important</span>;
|
|
<span class="org-css-property">padding-bottom</span>: 0.3rem <span class="org-builtin">!important</span>;
|
|
}
|
|
|
|
.orgjq-contracted > :first-child::before {
|
|
<span class="org-css-property">content</span>: <span class="org-string">'⮞ '</span>;
|
|
}
|
|
|
|
.orgjq-expanded > h3:has(.tag .autocollapse)::before,
|
|
.orgjq-expanded > h4:has(.tag .autocollapse)::before,
|
|
.orgjq-expanded > h5:has(.tag .autocollapse)::before {
|
|
<span class="org-css-property">content</span>: <span class="org-string">'⮟ '</span>;
|
|
}
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-javascript"><span class="org-keyword">function</span> <span class="org-function-name">isHideable</span>(<span class="org-variable-name">div_obj</span>) {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Ignore for TOC since it is handled differently</span>
|
|
<span class="org-keyword">if</span> (div_obj.id === <span class="org-string">"text-table-of-contents"</span>) <span class="org-keyword">return</span> <span class="org-constant">false</span>;
|
|
<span class="org-keyword">if</span> (div_obj.id === <span class="org-string">"table-of-contents"</span>) <span class="org-keyword">return</span> <span class="org-constant">false</span>;
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">No point in hiding top level</span>
|
|
<span class="org-keyword">if</span> (div_obj.classList.contains(<span class="org-string">"outline-2"</span>)) <span class="org-keyword">return</span> <span class="org-constant">false</span>;
|
|
<span class="org-keyword">if</span> (div_obj.classList.contains(<span class="org-string">"outline-text-2"</span>)) <span class="org-keyword">return</span> <span class="org-constant">false</span>;
|
|
<span class="org-keyword">return</span> <span class="org-constant">true</span>;
|
|
}
|
|
|
|
<span class="org-keyword">function</span> <span class="org-function-name">orgjqHide</span>(<span class="org-variable-name">div_obj</span>) {
|
|
<span class="org-keyword">if</span> (!isHideable(div_obj)) <span class="org-keyword">return</span>;
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">parent</span> = div_obj.parentElement;
|
|
parent.classList.remove(<span class="org-string">"orgjq-expanded"</span>);
|
|
parent.classList.add(<span class="org-string">"orgjq-contracted"</span>);
|
|
}
|
|
|
|
<span class="org-keyword">function</span> <span class="org-function-name">orgjqShow</span>(<span class="org-variable-name">div_obj</span>) {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">parent</span> = div_obj.parentElement;
|
|
parent.classList.remove(<span class="org-string">"orgjq-contracted"</span>);
|
|
parent.classList.add(<span class="org-string">"orgjq-expanded"</span>);
|
|
}
|
|
|
|
<span class="org-keyword">function</span> <span class="org-function-name">orgjqToggle</span>(<span class="org-variable-name">div_obj</span>) {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">parent</span> = div_obj.parentElement;
|
|
<span class="org-keyword">if</span> (parent.classList.contains(<span class="org-string">"orgjq-expanded"</span>)) {
|
|
orgjqHide(div_obj);
|
|
} <span class="org-keyword">else</span> {
|
|
orgjqShow(div_obj);
|
|
}
|
|
}
|
|
|
|
<span class="org-keyword">function</span> <span class="org-function-name">orgjqEnable</span>() {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Called once e.g. the first time the page is loaded</span>
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">handle the click event for each header</span>
|
|
<span class="org-keyword">for</span> (<span class="org-keyword">let</span> <span class="org-variable-name">i</span> = <span class="org-highlight-numbers-number">2</span>; i <= <span class="org-highlight-numbers-number">7</span>; ++i) {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">headers</span> = document.querySelectorAll(<span class="org-string">`h${i}`</span>);
|
|
headers.forEach(header => {
|
|
header.style.cursor = <span class="org-string">"pointer"</span>;
|
|
header.addEventListener(<span class="org-string">'click'</span>, <span class="org-keyword">function</span>() {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Get the first div sibling after the header</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">parent</span> = <span class="org-constant">this</span>.parentElement;
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">divs</span> = parent.querySelectorAll(<span class="org-string">':scope > div'</span>);
|
|
<span class="org-keyword">if</span> (divs.length > <span class="org-highlight-numbers-number">0</span>) {
|
|
orgjqToggle(divs[<span class="org-highlight-numbers-number">0</span>]);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Mark everything as open...</span>
|
|
<span class="org-keyword">for</span> (<span class="org-keyword">let</span> <span class="org-variable-name">i</span> = <span class="org-highlight-numbers-number">2</span>; i <= <span class="org-highlight-numbers-number">7</span>; ++i) {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">headers</span> = document.querySelectorAll(<span class="org-string">`h${i}`</span>);
|
|
headers.forEach(header => {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">parent</span> = header.parentElement;
|
|
parent.classList.remove(<span class="org-string">"orgjq-contracted"</span>);
|
|
parent.classList.add(<span class="org-string">"orgjq-expanded"</span>);
|
|
});
|
|
}
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">... except TOC ...</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">toc</span> = document.querySelector(<span class="org-string">"div#table-of-contents"</span>);
|
|
<span class="org-keyword">if</span> (toc) {
|
|
toc.classList.remove(<span class="org-string">"orgjq-expanded"</span>);
|
|
toc.classList.add(<span class="org-string">"orgjq-contracted"</span>);
|
|
}
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">... and autocollapse.</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">autocollapse</span> = document.querySelectorAll(<span class="org-string">".autocollapse"</span>);
|
|
autocollapse.forEach(element => {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">grandparent</span> = element.parentElement?.parentElement;
|
|
<span class="org-keyword">if</span> (grandparent) {
|
|
orgjqHide(grandparent);
|
|
}
|
|
});
|
|
}
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Run when DOM is loaded</span>
|
|
<span class="org-keyword">if</span> (document.readyState === <span class="org-string">'loading'</span>) {
|
|
document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, orgjqEnable);
|
|
} <span class="org-keyword">else</span> {
|
|
orgjqEnable();
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org8231618" class="outline-4">
|
|
<h4 id="org8231618">Hover Notes   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org8231618">
|
|
<p>
|
|
Turns org-mode footnotes (<code>[fn::Like this]</code>) into hover-notes<sup><a id="fnr.1" class="footref" href="#fn.1" role="doc-backlink">1</a></sup>.
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-javascript"><span class="org-keyword">function</span> <span class="org-function-name">enableFootnotes</span>() {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">footnoteRefs</span> = document.querySelectorAll(<span class="org-string">'.footref'</span>)
|
|
|
|
footnoteRefs.forEach(ref => {
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">footnoteId</span> = ref.href.split(<span class="org-string">'#'</span>)[<span class="org-highlight-numbers-number">1</span>]
|
|
ref.setAttribute(<span class="org-string">'data-footnote-id'</span>, footnoteId)
|
|
ref.href = <span class="org-string">'javascript:void(0)'</span>;
|
|
|
|
ref.addEventListener(<span class="org-string">'mouseenter'</span>, <span class="org-keyword">function</span>() {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Find footnote element</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">footnoteId</span> = <span class="org-constant">this</span>.getAttribute(<span class="org-string">'data-footnote-id'</span>)
|
|
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">footnoteElement</span> = document.getElementById(footnoteId).parentElement.nextElementSibling.children[<span class="org-highlight-numbers-number">0</span>]
|
|
|
|
<span class="org-keyword">if</span> (footnoteElement) {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Create tooltip container</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">tooltip</span> = document.createElement(<span class="org-string">'div'</span>);
|
|
tooltip.className = <span class="org-string">'footnote-tooltip'</span>
|
|
tooltip.innerHTML = footnoteElement.innerHTML
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Position tooltip</span>
|
|
<span class="org-keyword">const</span> <span class="org-variable-name">rect</span> = <span class="org-constant">this</span>.getBoundingClientRect();
|
|
tooltip.style.position = <span class="org-string">'absolute'</span>
|
|
tooltip.style.top = (rect.bottom + window.scrollY + <span class="org-highlight-numbers-number">5</span>) + <span class="org-string">'px'</span>
|
|
tooltip.style.left = rect.left + <span class="org-string">'px'</span>
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Add to page</span>
|
|
document.body.appendChild(tooltip)
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Store reference for cleanup</span>
|
|
<span class="org-constant">this</span>._tooltip = tooltip
|
|
}
|
|
});
|
|
|
|
ref.addEventListener(<span class="org-string">'mouseleave'</span>, <span class="org-keyword">function</span>() {
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Remove tooltip</span>
|
|
<span class="org-keyword">if</span> (<span class="org-constant">this</span>._tooltip) {
|
|
<span class="org-constant">this</span>._tooltip.remove()
|
|
<span class="org-constant">this</span>._tooltip = <span class="org-constant">null</span>
|
|
}
|
|
});
|
|
});
|
|
|
|
<span class="org-comment-delimiter">// </span><span class="org-comment">Hide footnotes section</span>
|
|
document.querySelector(<span class="org-string">"#footnotes"</span>).style.display=<span class="org-string">'none'</span>
|
|
}
|
|
|
|
document.addEventListener(<span class="org-string">'DOMContentLoaded'</span>, enableFootnotes);
|
|
</pre>
|
|
</div>
|
|
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.footnote-tooltip</span> {
|
|
<span class="org-css-property">position</span>: <span class="org-string">'absolute'</span>;
|
|
<span class="org-css-property">z-index</span>: <span class="org-highlight-numbers-number">1000</span>;
|
|
<span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--background-tooltip</span>);
|
|
<span class="org-css-property">border</span>: 1px solid var(<span class="org-variable-name">--accent1</span>);
|
|
<span class="org-css-property">border-radius</span>: = 4px;
|
|
<span class="org-css-property">padding</span>: 8px 12px;
|
|
<span class="org-css-property">max-width</span>: 300px;
|
|
<span class="org-css-property">font-size</span>: calc(var(<span class="org-variable-name">--font-size</span>) * <span class="org-highlight-numbers-number">0.9</span>);
|
|
<span class="org-css-property">box-shadow</span>: 1px 1px 1px var(<span class="org-variable-name">--grey2</span>);
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org80a91d4" class="outline-4">
|
|
<h4 id="org80a91d4">Colored Table Rows   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org80a91d4">
|
|
<p>
|
|
By adding some invisible helper elements like so:
|
|
</p>
|
|
<div class="org-src-container">
|
|
<pre class="src src-org"><span class="org-org-meta-line">#+MACRO: c @@html: <span class="row-color-$1" />@@</span>
|
|
<span class="org-org-table">| Cool colors: |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
<span class="org-org-table">| Red </span><span class="org-org-table"><span class="org-org-macro">{{{c(red4)}}}</span></span><span class="org-org-table"> |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
<span class="org-org-table">| Green </span><span class="org-org-table"><span class="org-org-macro">{{{c(green4)}}}</span></span><span class="org-org-table"> |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
<span class="org-org-table">| Blue </span><span class="org-org-table"><span class="org-org-macro">{{{c(blue4)}}}</span></span><span class="org-org-table"> |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
<span class="org-org-table">| Purple </span><span class="org-org-table"><span class="org-org-macro">{{{c(purple4)}}}</span></span><span class="org-org-table"> |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
<span class="org-org-table">| Grey </span><span class="org-org-table"><span class="org-org-macro">{{{c(grey4)}}}</span></span><span class="org-org-table"> |</span>
|
|
<span class="org-org-table">|-------------------------|</span>
|
|
</pre>
|
|
</div>
|
|
|
|
<p>
|
|
We can color table rows like so:
|
|
</p>
|
|
<table>
|
|
|
|
|
|
<colgroup>
|
|
<col class="org-left">
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="org-left">Cool colors:</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="org-left">Red <span class="row-color-red4" /></td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td class="org-left">Green <span class="row-color-green4" /></td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td class="org-left">Blue <span class="row-color-blue4" /></td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td class="org-left">Purple <span class="row-color-purple4" /></td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody>
|
|
<tr>
|
|
<td class="org-left">Grey <span class="row-color-grey4" /></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div id="outline-container-org51507aa" class="outline-5">
|
|
<h5 id="org51507aa">CSS   <span class="tag"><span class="autocollapse">autocollapse</span></span></h5>
|
|
<div class="outline-text-5" id="text-org51507aa">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-property">tbody</span>:has(.row-color-green1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green1</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-green2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green2</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-green3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green3</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-green4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green4</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-green5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--green5</span>); }
|
|
|
|
<span class="org-css-property">tbody</span>:has(.row-color-red1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red1</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-red2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red2</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-red3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red3</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-red4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red4</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-red5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red5</span>); }
|
|
|
|
<span class="org-css-property">tbody</span>:has(.row-color-blue1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue1</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-blue2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue2</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-blue3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue3</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-blue4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue4</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-blue5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--blue5</span>); }
|
|
|
|
<span class="org-css-property">tbody</span>:has(.row-color-purple1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple1</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-purple2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple2</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-purple3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple3</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-purple4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple4</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-purple5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--purple5</span>); }
|
|
|
|
<span class="org-css-property">tbody</span>:has(.row-color-grey1) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey1</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-grey2) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey2</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-grey3) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey3</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-grey4) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey4</span>); }
|
|
<span class="org-css-property">tbody</span>:has(.row-color-grey5) { <span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--grey5</span>); }
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org7b63abf" class="outline-3">
|
|
<h3 id="org7b63abf">Appearance</h3>
|
|
<div class="outline-text-3" id="text-org7b63abf">
|
|
</div>
|
|
<div id="outline-container-org44aecda" class="outline-4">
|
|
<h4 id="org44aecda">Global   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org44aecda">
|
|
</div>
|
|
<div id="outline-container-orgd010c85" class="outline-5">
|
|
<h5 id="orgd010c85">Variables</h5>
|
|
<div class="outline-text-5" id="text-orgd010c85">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">:root</span> {
|
|
<span class="org-variable-name">--site-width</span>: 1000px;
|
|
<span class="org-variable-name">--vert-content-margin</span>: 0.3rem;
|
|
|
|
<span class="org-variable-name">--font-size</span>: 1.2rem;
|
|
<span class="org-variable-name">--line-height</span>: 1.6rem;
|
|
<span class="org-variable-name">--font-family</span>: <span class="org-string">"Source Serif Pro"</span>, <span class="org-string">"Noto Sans Symbols 2"</span>;
|
|
|
|
<span class="org-variable-name">--scale</span>: <span class="org-highlight-numbers-number">2</span>;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgcb43503" class="outline-5">
|
|
<h5 id="orgcb43503">Color Variables</h5>
|
|
<div class="outline-text-5" id="text-orgcb43503">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">:root</span> {
|
|
<span class="org-variable-name">--green1</span>: <span class="custom-28">#123218</span>;
|
|
<span class="org-variable-name">--green2</span>: <span class="custom-27">#254f1b</span>;
|
|
<span class="org-variable-name">--green3</span>: <span class="custom-26">#356c22</span>;
|
|
<span class="org-variable-name">--green4</span>: <span class="custom-25">#5e8e40</span>;
|
|
<span class="org-variable-name">--green5</span>: <span class="custom-24">#85aa5f</span>;
|
|
|
|
<span class="org-variable-name">--blue1</span>: <span class="custom-23">#1b2459</span>;
|
|
<span class="org-variable-name">--blue2</span>: <span class="custom-22">#153a79</span>;
|
|
<span class="org-variable-name">--blue3</span>: <span class="custom-21">#2f5394</span>;
|
|
<span class="org-variable-name">--blue4</span>: <span class="custom-20">#417eaf</span>;
|
|
<span class="org-variable-name">--blue5</span>: <span class="custom-19">#69a8c6</span>;
|
|
|
|
<span class="org-variable-name">--purple1</span>: <span class="custom-18">#2e1e58</span>;
|
|
<span class="org-variable-name">--purple2</span>: <span class="custom-17">#493281</span>;
|
|
<span class="org-variable-name">--purple3</span>: <span class="custom-16">#6a45a6</span>;
|
|
<span class="org-variable-name">--purple4</span>: <span class="custom-15">#855aa3</span>;
|
|
<span class="org-variable-name">--purple5</span>: <span class="custom-14">#9b77b5</span>;
|
|
|
|
<span class="org-variable-name">--red1</span>: <span class="custom-13">#4b1313</span>;
|
|
<span class="org-variable-name">--red2</span>: <span class="custom-12">#682017</span>;
|
|
<span class="org-variable-name">--red3</span>: <span class="custom-11">#84301c</span>;
|
|
<span class="org-variable-name">--red4</span>: <span class="custom-10">#9c4830</span>;
|
|
<span class="org-variable-name">--red5</span>: <span class="custom-9">#c46849</span>;
|
|
|
|
<span class="org-variable-name">--grey1</span>: <span class="custom-8">#202124</span>;
|
|
<span class="org-variable-name">--grey2</span>: <span class="custom-7">#33333b</span>;
|
|
<span class="org-variable-name">--grey3</span>: <span class="custom-6">#605b66</span>;
|
|
<span class="org-variable-name">--grey4</span>: <span class="custom-5">#a79fa7</span>;
|
|
<span class="org-variable-name">--grey5</span>: <span class="custom-4">#c5bcbc</span>;
|
|
|
|
<span class="org-variable-name">--accent1</span>: var(<span class="org-variable-name">--purple4</span>);
|
|
<span class="org-variable-name">--link</span>: var(<span class="org-variable-name">--blue3</span>);
|
|
<span class="org-variable-name">--</span><span class="custom-2"><span class="custom-3">black</span></span>: var(<span class="org-variable-name">--grey1</span>);
|
|
<span class="org-variable-name">--</span><span class="custom"><span class="custom-1">grey</span></span>: var(<span class="org-variable-name">--grey3</span>);
|
|
<span class="org-variable-name">--background</span>: var(<span class="org-variable-name">--grey5</span>);
|
|
<span class="org-variable-name">--background-tooltip</span>: var(<span class="org-variable-name">--grey5</span>);
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orga467912" class="outline-5">
|
|
<h5 id="orga467912">Background image</h5>
|
|
<div class="outline-text-5" id="text-orga467912">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">body::before,</span>
|
|
<span class="org-css-selector">body::after</span> {
|
|
<span class="org-css-property">content</span>: <span class="org-string">''</span>;
|
|
<span class="org-css-property">position</span>: fixed;
|
|
<span class="org-css-property">top</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">height</span>: 100vh;
|
|
<span class="org-css-property">width</span>: <span class="org-highlight-numbers-number">50</span>%;
|
|
<span class="org-css-property">background-image</span>: url(<span class="org-string">'/static/images/background.png'</span>);
|
|
<span class="org-css-property">background-repeat</span>: no-repeat;
|
|
<span class="org-css-property">z-index</span>: -1;
|
|
|
|
<span class="org-css-property">image-rendering</span>: pixelated; <span class="org-comment-delimiter">/* </span><span class="org-comment">For Chrome/Safari</span><span class="org-comment-delimiter"> */</span>
|
|
<span class="org-css-property">image-rendering</span>: -moz-crisp-edges; <span class="org-comment-delimiter">/* </span><span class="org-comment">For Firefox</span><span class="org-comment-delimiter"> */</span>
|
|
<span class="org-css-property">image-rendering</span>: crisp-edges; <span class="org-comment-delimiter">/* </span><span class="org-comment">Fallback</span><span class="org-comment-delimiter"> */</span>
|
|
|
|
<span class="org-css-property">background-size</span>: calc(960px * var(<span class="org-variable-name">--scale</span>)) calc(1080px * var(<span class="org-variable-name">--scale</span>));
|
|
}
|
|
|
|
<span class="org-css-selector">body::before</span> {
|
|
<span class="org-css-property">left</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">background-position</span>: top right;
|
|
}
|
|
|
|
<span class="org-css-selector">body::after</span> {
|
|
<span class="org-css-property">right</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">background-position</span>: top right;
|
|
<span class="org-comment-delimiter">/* </span><span class="org-comment">Flip the right side horizontally</span><span class="org-comment-delimiter"> */</span>
|
|
<span class="org-css-property">transform</span>: scaleX(-1);
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
<ul class="org-ul">
|
|
<li><a id="orgc5c1c55"></a><span class="todo TODO">TODO</span> This is a weird approach and has some issues<br>
|
|
<div class="outline-text-6" id="text-orgc5c1c55">
|
|
<ul class="org-ul">
|
|
<li>White line in center in some setups</li>
|
|
<li>Crunchy lines depending on DPI</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div id="outline-container-orga89beb3" class="outline-5">
|
|
<h5 id="orga89beb3">Fonts</h5>
|
|
<div class="outline-text-5" id="text-orga89beb3">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">body</span> {
|
|
<span class="org-css-property">font-family</span>: var(<span class="org-variable-name">--font-family</span>);
|
|
<span class="org-css-property">font-size</span>: var(<span class="org-variable-name">--font-size</span>);
|
|
<span class="org-css-property">line-height</span>: var(<span class="org-variable-name">--line-height</span>);
|
|
<span class="org-css-property">word-spacing</span>: 0.25ch;
|
|
<span class="org-css-property">font-weight</span>: <span class="org-highlight-numbers-number">400</span>;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org9bea854" class="outline-5">
|
|
<h5 id="org9bea854">Header/Content/Footer blocks</h5>
|
|
<div class="outline-text-5" id="text-org9bea854">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">#content, #header, #footer</span> {
|
|
<span class="org-css-property">min-width</span>: 500px;
|
|
<span class="org-css-property">max-width</span>: min(var(<span class="org-variable-name">--site-width</span>), 90vw);
|
|
<span class="org-css-property">margin</span>: <span class="org-highlight-numbers-number">0</span> auto;
|
|
<span class="org-css-property">padding</span>: 5px 25px;
|
|
|
|
<span class="org-css-property">border</span>: 2px double var(<span class="org-variable-name">--grey1</span>);
|
|
<span class="org-css-property">margin-bottom</span>: 1.2rem;
|
|
<span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--background</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#header</span> {
|
|
<span class="org-css-property">display</span>: flex;
|
|
}
|
|
|
|
<span class="org-css-selector">#content, #footer</span> {
|
|
<span class="org-css-property">box-shadow</span>: 7px 7px 7px var(<span class="org-variable-name">--grey1</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#footer</span> {
|
|
<span class="org-css-property">padding-top</span>: 1rem;
|
|
<span class="org-css-property">padding-bottom</span>: 1rem;
|
|
}
|
|
|
|
<span class="org-css-selector">#header a, #header a:visited</span>{
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--purple2</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#header hr</span> {
|
|
<span class="org-css-property">margin-bottom</span>: var(<span class="org-variable-name">--vert-content-margin</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#footer hr</span> {
|
|
<span class="org-css-property">margin-top</span>: var(<span class="org-variable-name">--vert-content-margin</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#content h2, #content h3, #content h4, #content h5</span> {
|
|
<span class="org-css-property">margin-bottom</span>: 1rem;
|
|
<span class="org-css-property">margin-top</span>: 0.5rem;
|
|
<span class="org-css-property">margin-left</span>: 0.5rem;
|
|
}
|
|
|
|
<span class="org-css-selector">#content h2</span> {
|
|
<span class="org-css-property">margin-top</span>: 1rem;
|
|
}
|
|
|
|
<span class="org-css-selector">#content h3, #content h4</span> {
|
|
<span class="org-css-property">padding-top</span>: 0.5rem;
|
|
<span class="org-css-property">padding-bottom</span>: 0.5rem;
|
|
}
|
|
|
|
<span class="org-css-selector">#content h5</span> {
|
|
<span class="org-css-property">padding-top</span>: 0.3rem;
|
|
<span class="org-css-property">padding-bottom</span>: 0.3rem;
|
|
}
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org5366bf4" class="outline-4">
|
|
<h4 id="org5366bf4">Colors   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org5366bf4">
|
|
</div>
|
|
<div id="outline-container-orgf77bacd" class="outline-5">
|
|
<h5 id="orgf77bacd">Color Assignments</h5>
|
|
<div class="outline-text-5" id="text-orgf77bacd">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">body</span> {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--</span><span class="custom"><span class="custom-1">black</span></span>);
|
|
<span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--background</span>);
|
|
}
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgcdacd2d" class="outline-5">
|
|
<h5 id="orgcdacd2d">Syntax Highlighting</h5>
|
|
<div class="outline-text-5" id="text-orgcdacd2d">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">pre</span> {<span class="org-css-property">background-color</span>:var(<span class="org-variable-name">--grey1</span>); <span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);}
|
|
<span class="org-css-selector">pre span.org-builtin</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue4</span>);<span class="org-css-property">font-weight</span>:bold;}
|
|
<span class="org-css-selector">pre span.org-string</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--green4</span>);}
|
|
<span class="org-css-selector">pre span.org-keyword</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple5</span>);<span class="org-css-property">font-weight</span>:bold;}
|
|
<span class="org-css-selector">pre span.org-variable-name</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--green5</span>);<span class="org-css-property">font-style</span>:italic;}
|
|
<span class="org-css-selector">pre span.org-function-name</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue5</span>);}
|
|
<span class="org-css-selector">pre span.org-type</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple4</span>);}
|
|
<span class="org-css-selector">pre span.org-preprocessor</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-weight</span>:bold;}
|
|
<span class="org-css-selector">pre span.org-constant</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--red5</span>);}
|
|
<span class="org-css-selector">pre span.org-comment-delimiter</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey3</span>);}
|
|
<span class="org-css-selector">pre span.org-comment</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey3</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-1</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-2</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-3</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-4</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-5</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-6</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-7</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-8</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-outshine-level-9</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey5</span>);<span class="org-css-property">font-style</span>:italic}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-1</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--grey4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-2</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-3</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--green4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-4</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--red4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-5</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-6</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-7</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--green4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-8</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--red4</span>);}
|
|
<span class="org-css-selector">pre span.org-rainbow-delimiters-depth-9</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple4</span>);}
|
|
<span class="org-css-selector">pre span.org-sh-quoted-exec</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple3</span>);}
|
|
<span class="org-css-selector">pre span.org-doc</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--green5</span>);<span class="org-css-property">font-style</span>:italic;}
|
|
<span class="org-css-selector">pre span.org-css-selector</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--blue5</span>);<span class="org-css-property">font-weight</span>:bold;}
|
|
<span class="org-css-selector">pre span.org-css-property</span> {<span class="org-css-property">color</span>:var(<span class="org-variable-name">--purple4</span>); <span class="org-css-property">font-weight</span>: bold;}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org7eb1b15" class="outline-4">
|
|
<h4 id="org7eb1b15">General CSS   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org7eb1b15">
|
|
</div>
|
|
<div id="outline-container-orgb3fd92b" class="outline-5">
|
|
<h5 id="orgb3fd92b">Et Cetera</h5>
|
|
<div class="outline-text-5" id="text-orgb3fd92b">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">tbody</span> { <span class="org-css-property">border-bottom</span>: 1px dotted var(<span class="org-variable-name">--grey1</span>); }
|
|
<span class="org-css-selector">thead</span> { <span class="org-css-property">border-bottom</span>: 1px solid var(<span class="org-variable-name">--grey1</span>); }
|
|
<span class="org-css-selector">th, td</span> { <span class="org-css-property">padding-right</span>: 4rem; }
|
|
<span class="org-css-selector">th.org-left</span> { <span class="org-css-property">text-align</span>: left; }
|
|
|
|
<span class="org-css-selector">hr</span> {
|
|
<span class="org-css-property">border</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">border-top</span>: 2px dotted var(<span class="org-variable-name">--grey1</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">a, a:visited</span> {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--link</span>);
|
|
<span class="org-css-property">text-decoration</span>: none;
|
|
}
|
|
|
|
<span class="org-css-selector">.figure-number</span> {
|
|
<span class="org-css-property">display</span>: none;
|
|
}
|
|
|
|
<span class="org-css-selector">.caption</span> {
|
|
<span class="org-css-property">padding-top</span>: 0.5rem;
|
|
<span class="org-css-property">font-style</span>: italic;
|
|
}
|
|
|
|
<span class="org-css-selector">.outline-3, .outline-4, .outline-5</span> {
|
|
<span class="org-css-property">padding-left</span>: 0.6rem;
|
|
<span class="org-css-property">border-radius</span>: 0.2em;
|
|
<span class="org-css-property">margin</span>: 0.7rem;
|
|
}
|
|
|
|
<span class="org-css-selector">.outline-text-3, .outline-text-4, .outline-text-5</span> {
|
|
<span class="org-css-property">margin</span>: 0.3rem 1rem 0.5rem 0.5rem;
|
|
}
|
|
|
|
<span class="org-css-selector">h2</span> {
|
|
<span class="org-css-property">line-height</span>: 1.5rem;
|
|
<span class="org-css-property">text-align</span>: center;
|
|
}
|
|
|
|
<span class="org-css-selector">h3, h4, h5</span> {
|
|
<span class="org-css-property">text-align</span>: center;
|
|
}
|
|
|
|
<span class="org-css-selector">.section-number-1, .section-number-2, .section-number-3, .section-number-4</span> { <span class="org-css-property">display</span>: none; }
|
|
|
|
<span class="org-css-selector">ul</span> { <span class="org-css-property">margin-top</span>: <span class="org-highlight-numbers-number">0</span>; }
|
|
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org4648800" class="outline-5">
|
|
<h5 id="org4648800">Utility Classes</h5>
|
|
<div class="outline-text-5" id="text-org4648800">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.center</span> {
|
|
<span class="org-css-property">display</span>: block;
|
|
<span class="org-css-property">margin-left</span>: auto;
|
|
<span class="org-css-property">margin-right</span>: auto;
|
|
<span class="org-css-property">text-align</span>: center;
|
|
}
|
|
|
|
<span class="org-css-selector">.navbar-link</span> {
|
|
<span class="org-css-property">margin-right</span>: 5px;
|
|
<span class="org-css-property">margin-left</span>: 5px;
|
|
}
|
|
|
|
<span class="org-css-selector">.center, div.center</span> {
|
|
<span class="org-css-property">text-align</span>: center;
|
|
<span class="org-css-property">margin-left</span>: auto;
|
|
<span class="org-css-property">margin-right</span>: auto;
|
|
}
|
|
|
|
<span class="org-css-selector">.center figure,</span>
|
|
<span class="org-css-selector">.center figcaption,</span>
|
|
<span class="org-css-selector">div.center figure,</span>
|
|
<span class="org-css-selector">div.center figcaption</span> {
|
|
<span class="org-css-property">text-align</span>: center;
|
|
<span class="org-css-property">margin-left</span>: auto;
|
|
<span class="org-css-property">margin-right</span>: auto;
|
|
}
|
|
|
|
<span class="org-css-selector">.multi-img</span> {
|
|
<span class="org-css-property">display</span>: flex;
|
|
<span class="org-css-property">justify-content</span>: center;
|
|
<span class="org-css-property">text-align</span>: center;
|
|
<span class="org-css-property">margin</span>: 20px;
|
|
<span class="org-css-property">gap</span>: 20px;
|
|
}
|
|
|
|
<span class="org-css-selector">.multi-img figure</span> { <span class="org-css-property">margin</span>: 0px; }
|
|
|
|
<span class="org-css-selector">.poetry</span> {
|
|
<span class="org-css-property">padding-top</span>: 4rem;
|
|
<span class="org-css-property">padding-bottom</span>: 4rem;
|
|
<span class="org-css-property">text-align</span>: center;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org4fe8dcc" class="outline-4">
|
|
<h4 id="org4fe8dcc">Elements   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org4fe8dcc">
|
|
</div>
|
|
<div id="outline-container-orgfaaec87" class="outline-5">
|
|
<h5 id="orgfaaec87">Looking for Work</h5>
|
|
<div class="outline-text-5" id="text-orgfaaec87">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">#looking-for-work</span> {
|
|
<span class="org-css-property">background-color</span>: var(<span class="org-variable-name">--red2</span>);
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--grey5</span>);
|
|
<span class="org-css-property">padding</span>: 5px 25px;
|
|
<span class="org-css-property">margin-left</span>: auto;
|
|
<span class="org-css-property">margin-top</span>: -0.32rem;
|
|
<span class="org-css-property">margin-bottom</span>: -0.32rem;
|
|
<span class="org-css-property">margin-right</span>: -1.55rem;
|
|
<span class="org-css-property">border</span>: 2px double var(<span class="org-variable-name">--purple5</span>);
|
|
}
|
|
|
|
<span class="org-css-selector">#looking-for-work a, #looking-for-work a:visited</span> {
|
|
<span class="org-css-property">color</span>: var(<span class="org-variable-name">--blue5</span>) <span class="org-builtin">!important</span>;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org2b38558" class="outline-5">
|
|
<h5 id="org2b38558">Code Blocks</h5>
|
|
<div class="outline-text-5" id="text-org2b38558">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.src, .example</span> {
|
|
<span class="org-css-property">font-family</span>: monospace;
|
|
<span class="org-css-property">font-size</span>: 1rem;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgc149101" class="outline-5">
|
|
<h5 id="orgc149101">Publish/modified Date</h5>
|
|
<div class="outline-text-5" id="text-orgc149101">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">#publish-date, #modified-date</span> {
|
|
<span class="org-css-property">font-style</span>: italic;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org7c83709" class="outline-5">
|
|
<h5 id="org7c83709">Table of Contents</h5>
|
|
<div class="outline-text-5" id="text-org7c83709">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">#table-of-contents</span> {
|
|
<span class="org-css-property">z-index</span>: <span class="org-highlight-numbers-number">1</span>;
|
|
<span class="org-css-property">margin-top</span>: 105px;
|
|
<span class="org-css-property">margin-right</span>: <span class="org-highlight-numbers-number">5</span>%;
|
|
<span class="org-css-property">font-size</span>: calc(var(<span class="org-variable-name">--font-size</span>) * <span class="org-highlight-numbers-number">0.8</span>);
|
|
<span class="org-css-property">position</span>: fixed;
|
|
<span class="org-css-property">right</span>: 0em;
|
|
<span class="org-css-property">top</span>: 0em;
|
|
<span class="org-css-property">background</span>: var(<span class="org-variable-name">--background-toc</span>);
|
|
<span class="org-css-property">text-align</span>: right;
|
|
<span class="org-css-property">min-height</span>: 3rem;
|
|
|
|
<span class="org-css-property">box-shadow</span>: <span class="org-highlight-numbers-number">0</span> <span class="org-highlight-numbers-number">0</span> 0.5em var(<span class="org-variable-name">--shadow-toc</span>);
|
|
<span class="org-css-proprietary-property">-webkit-box-shadow</span>: <span class="org-highlight-numbers-number">0</span> <span class="org-highlight-numbers-number">0</span> 0.5em var(<span class="org-variable-name">--shadow-toc</span>);
|
|
<span class="org-css-proprietary-property">-moz-box-shadow</span>: <span class="org-highlight-numbers-number">0</span> <span class="org-highlight-numbers-number">0</span> 0.5em var(<span class="org-variable-name">--shadow-toc</span>);
|
|
<span class="org-css-proprietary-property">-webkit-border-bottom-left-radius</span>: 5px;
|
|
<span class="org-css-proprietary-property">-moz-border-radius-bottomleft</span>: 5px;
|
|
<span class="org-comment-delimiter">/* </span><span class="org-comment">ensure doesn't flow off the screen when expanded</span><span class="org-comment-delimiter"> */</span>
|
|
<span class="org-css-property">max-height</span>: <span class="org-highlight-numbers-number">80</span>%;
|
|
<span class="org-css-property">overflow</span>: auto;
|
|
}
|
|
<span class="org-css-selector">#table-of-contents h2</span> {
|
|
<span class="org-css-property">font-size</span>: 13pt;
|
|
<span class="org-css-property">max-width</span>: 9em;
|
|
<span class="org-css-property">border</span>: <span class="org-highlight-numbers-number">0</span>;
|
|
<span class="org-css-property">font-weight</span>: normal;
|
|
<span class="org-css-property">margin-top</span>: 0.75em;
|
|
<span class="org-css-property">margin-bottom</span>: 0.75em;
|
|
<span class="org-css-property">padding-left</span>: 0.5em;
|
|
<span class="org-css-property">padding-right</span>: 0.5em;
|
|
<span class="org-css-property">padding-top</span>: 0.05em;
|
|
<span class="org-css-property">padding-bottom</span>: 0.05em; }
|
|
<span class="org-css-selector">#table-of-contents #text-table-of-contents</span> {
|
|
<span class="org-css-property">display</span>: none;
|
|
<span class="org-css-property">text-align</span>: left; }
|
|
<span class="org-css-selector">#table-of-contents:hover #text-table-of-contents</span> {
|
|
<span class="org-css-property">display</span>: block;
|
|
<span class="org-css-property">padding</span>: 0.5em;
|
|
<span class="org-css-property">margin-top</span>: -1.5em;
|
|
<span class="org-css-property">padding-right</span>: 20px;
|
|
}
|
|
|
|
<span class="org-css-selector">#table-of-contents</span> {
|
|
<span class="org-css-property">display</span>: none;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-orgda8e124" class="outline-5">
|
|
<h5 id="orgda8e124">To-Dos</h5>
|
|
<div class="outline-text-5" id="text-orgda8e124">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">.TODO</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--red3</span>); }
|
|
<span class="org-css-selector">.DONE</span> { <span class="org-css-property">color</span>: var(<span class="org-variable-name">--green3</span>); }
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="outline-container-org7ab3fc0" class="outline-4">
|
|
<h4 id="org7ab3fc0">No unstyled content   <span class="tag"><span class="autocollapse">autocollapse</span></span></h4>
|
|
<div class="outline-text-4" id="text-org7ab3fc0">
|
|
<div class="org-src-container">
|
|
<pre class="src src-css"><span class="org-css-selector">html</span> {
|
|
<span class="org-css-property">visibility</span>: visible;
|
|
<span class="org-css-property">opacity</span>: <span class="org-highlight-numbers-number">1</span>;
|
|
}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footnotes">
|
|
<h2 class="footnotes">Footnotes: </h2>
|
|
<div id="text-footnotes">
|
|
|
|
<div class="footdef"><sup><a id="fn.1" class="footnum" href="#fnr.1" role="doc-backlink">1</a></sup> <div class="footpara" role="doc-footnote"><p class="footpara">Like this</p></div></div>
|
|
|
|
|
|
</div>
|
|
</div></div>
|
|
<div id="postamble" class="status">
|
|
<div id='footer'><div id='modified-date'>Last modified: 2025-11-28</div><hr>
|
|
If you have any comments about this page, you can email me at: <br>
|
|
<b>akk0</b> <i>{at}</i> <b>webbieweb</b> <i>{dot}</i> <b>org</b><br>
|
|
Proudly built using <a href="/source.html">org-mode</a>. <br>
|
|
All code on this website is licensed <b>GPLv3</b> unless otherwise indicated. <br>
|
|
<br>
|
|
<a href="http://validator.w3.org/feed/check.cgi?url=http%3A//webbieweb.org/feed.xml"><img src="/static/images/badges/css.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a><br>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|