Adapt pile-theme to my liking, and use with org
This commit is contained in:
TEC
parent
903a06b894
commit
21ee9a4f99
|
|
@ -4,4 +4,5 @@ Here you may find my config. There are only two files which matter
|
|||
- [[file:config.org][config.org]], my configuration file
|
||||
- [[file:init.el][init.el]], the doom-modules file
|
||||
|
||||
You may find the render of the HTML export of ~config.org~ [[https://tecosaur.github.io/emacs-config/config.html][here]].
|
||||
What you *really* want is the ~M-x org-html-export-to-html~ version of my config,
|
||||
which you can find [[https://tecosaur.github.io/emacs-config/config.html][here]].
|
||||
|
|
|
|||
495
config.org
495
config.org
|
|
@ -3763,7 +3763,7 @@ Saving seconds adds up after all! (but only so much)
|
|||
(title (plist-get xkcd-info :title))
|
||||
(file (xkcd-download img (string-to-number num))))
|
||||
(cond ((org-export-derived-backend-p backend 'html)
|
||||
(format "<img src='%s' title=\"%s\" alt='%s'>" img (subst-char-in-string ?\" ?“ alt) title))
|
||||
(format "<img class='invertable' src='%s' title=\"%s\" alt='%s'>" img (subst-char-in-string ?\" ?“ alt) title))
|
||||
((org-export-derived-backend-p backend 'latex)
|
||||
(format "\\begin{figure}[!htb]
|
||||
\\centering
|
||||
|
|
@ -4433,308 +4433,202 @@ the final documents.
|
|||
(ox-extras-activate '(ignore-headlines)))
|
||||
#+END_SRC
|
||||
**** Exporting to HTML
|
||||
***** Extra header content
|
||||
We want to tack on a few more bits to the start of the body. Unfortunately, there
|
||||
doesn't seem to be any nice variable or hook, so we'll just override the
|
||||
relevant function.
|
||||
|
||||
This is done to allow me to add the date and author to the page header,
|
||||
implement a CSS-only light/dark theme toggle, and a sprinkle of [[https://ogp.me/][Open Graph]]
|
||||
metadata.
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
(defadvice! org-html-template-fancier (contents info)
|
||||
"Return complete document string after HTML conversion.
|
||||
CONTENTS is the transcoded contents string. INFO is a plist
|
||||
holding export options. Adds a few extra things to the body
|
||||
compared to the default implementation."
|
||||
:override #'org-html-template
|
||||
(concat
|
||||
(when (and (not (org-html-html5-p info)) (org-html-xhtml-p info))
|
||||
(let* ((xml-declaration (plist-get info :html-xml-declaration))
|
||||
(decl (or (and (stringp xml-declaration) xml-declaration)
|
||||
(cdr (assoc (plist-get info :html-extension)
|
||||
xml-declaration))
|
||||
(cdr (assoc "html" xml-declaration))
|
||||
"")))
|
||||
(when (not (or (not decl) (string= "" decl)))
|
||||
(format "%s\n"
|
||||
(format decl
|
||||
(or (and org-html-coding-system
|
||||
(fboundp 'coding-system-get)
|
||||
(coding-system-get org-html-coding-system 'mime-charset))
|
||||
"iso-8859-1"))))))
|
||||
(org-html-doctype info)
|
||||
"\n"
|
||||
(concat "<html"
|
||||
(cond ((org-html-xhtml-p info)
|
||||
(format
|
||||
" xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"%s\" xml:lang=\"%s\""
|
||||
(plist-get info :language) (plist-get info :language)))
|
||||
((org-html-html5-p info)
|
||||
(format " lang=\"%s\"" (plist-get info :language))))
|
||||
">\n")
|
||||
"<head>\n"
|
||||
(org-html--build-meta-info info)
|
||||
(org-html--build-head info)
|
||||
(org-html--build-mathjax-config info)
|
||||
"</head>\n"
|
||||
"<body>\n<input type='checkbox' id='theme-switch'><div id='page'><label id='switch-label' for='theme-switch'></label>"
|
||||
(let ((link-up (org-trim (plist-get info :html-link-up)))
|
||||
(link-home (org-trim (plist-get info :html-link-home))))
|
||||
(unless (and (string= link-up "") (string= link-home ""))
|
||||
(format (plist-get info :html-home/up-format)
|
||||
(or link-up link-home)
|
||||
(or link-home link-up))))
|
||||
;; Preamble.
|
||||
(org-html--build-pre/postamble 'preamble info)
|
||||
;; Document contents.
|
||||
(let ((div (assq 'content (plist-get info :html-divs))))
|
||||
(format "<%s id=\"%s\">\n" (nth 1 div) (nth 2 div)))
|
||||
;; Document title.
|
||||
(when (plist-get info :with-title)
|
||||
(let ((title (and (plist-get info :with-title)
|
||||
(plist-get info :title)))
|
||||
(subtitle (plist-get info :subtitle))
|
||||
(html5-fancy (org-html--html5-fancy-p info)))
|
||||
(when title
|
||||
(format
|
||||
"<div class='page-header'><div class='page-meta'>%s, %s</div><h1 class=\"title\">%s%s</h1></div>\n"
|
||||
(format-time-string "%Y-%m-%d %A %-I:%M%p")
|
||||
(org-export-data (plist-get info :author) info)
|
||||
(org-export-data title info)
|
||||
(if subtitle
|
||||
(format
|
||||
(if html5-fancy
|
||||
"<p class=\"subtitle\">%s</p>\n"
|
||||
(concat "\n" (org-html-close-tag "br" nil info) "\n"
|
||||
"<span class=\"subtitle\">%s</span>\n"))
|
||||
(org-export-data subtitle info))
|
||||
"")))))
|
||||
contents
|
||||
(format "</%s>\n" (nth 1 (assq 'content (plist-get info :html-divs))))
|
||||
;; Postamble.
|
||||
(org-html--build-pre/postamble 'postamble info)
|
||||
;; Possibly use the Klipse library live code blocks.
|
||||
(when (plist-get info :html-klipsify-src)
|
||||
(concat "<script>" (plist-get info :html-klipse-selection-script)
|
||||
"</script><script src=\""
|
||||
org-html-klipse-js
|
||||
"\"></script><link rel=\"stylesheet\" type=\"text/css\" href=\""
|
||||
org-html-klipse-css "\"/>"))
|
||||
;; Closing document.
|
||||
"</div>\n</body>\n</html>"))
|
||||
#+END_SRC
|
||||
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
(defun org-html--build-meta-entry (label identity &optional content-format &rest content-formatters)
|
||||
"Construct <meta> tag with LABEL=\"IDENTITY\" and content from CONTENT-FORMAT and CONTENT-FORMATTER."
|
||||
(concat "<meta "
|
||||
(format "%s=\"%s" label identity)
|
||||
(when content-format
|
||||
(concat "\" content=\""
|
||||
(replace-regexp-in-string
|
||||
"\"" """
|
||||
(org-html-encode-plain-text
|
||||
(if content-formatters
|
||||
(apply #'format content-format content-formatters)
|
||||
content-format)))))
|
||||
"\" />\n"))
|
||||
|
||||
(defadvice! org-html--build-meta-info-extended (info)
|
||||
"Return meta tags for exported document, with more meta than usual.
|
||||
INFO is a plist used as a communication channel."
|
||||
:override #'org-html--build-meta-info
|
||||
(let* ((protect-string
|
||||
(lambda (str)
|
||||
(replace-regexp-in-string
|
||||
"\"" """ (org-html-encode-plain-text str))))
|
||||
(title (org-export-data (plist-get info :title) info))
|
||||
;; Set title to an invisible character instead of leaving it
|
||||
;; empty, which is invalid.
|
||||
(title (if (org-string-nw-p title) title "‎"))
|
||||
(subtitle (org-export-data (plist-get info :subtitle) info))
|
||||
(author (and (plist-get info :with-author)
|
||||
(let ((auth (plist-get info :author)))
|
||||
;; Return raw Org syntax.
|
||||
(and auth (org-element-interpret-data auth)))))
|
||||
(description (plist-get info :description))
|
||||
(keywords (plist-get info :keywords))
|
||||
(charset (or (and org-html-coding-system
|
||||
(fboundp 'coding-system-get)
|
||||
(coding-system-get org-html-coding-system
|
||||
'mime-charset))
|
||||
"iso-8859-1")))
|
||||
(concat
|
||||
(when (plist-get info :time-stamp-file)
|
||||
(format-time-string
|
||||
(concat "<!-- "
|
||||
(plist-get info :html-metadata-timestamp-format)
|
||||
" -->\n")))
|
||||
|
||||
(org-html--build-meta-entry "charset" charset)
|
||||
|
||||
(let ((viewport-options
|
||||
(cl-remove-if-not (lambda (cell) (org-string-nw-p (cadr cell)))
|
||||
(plist-get info :html-viewport))))
|
||||
(if viewport-options
|
||||
(org-html--build-meta-entry "name" "viewport"
|
||||
(mapconcat
|
||||
(lambda (elm) (format "%s=%s" (car elm) (cadr elm)))
|
||||
viewport-options ", "))))
|
||||
|
||||
(format "<title>%s</title>\n" title)
|
||||
|
||||
(org-html--build-meta-entry "name" "generator" "Org Mode")
|
||||
|
||||
(when (org-string-nw-p author)
|
||||
(org-html--build-meta-entry "name" "author" author))
|
||||
|
||||
(when (org-string-nw-p description)
|
||||
(org-html--build-meta-entry "name" "description" description))
|
||||
|
||||
(when (org-string-nw-p keywords)
|
||||
(org-html--build-meta-entry "name" "keywords" keywords))
|
||||
|
||||
(org-html--build-meta-entry "name" "theme-color" "#77aa99")
|
||||
|
||||
(org-html--build-meta-entry "property" "og:title" title)
|
||||
(org-html--build-meta-entry "property" "og:type" "article")
|
||||
(when (org-string-nw-p author)
|
||||
(org-html--build-meta-entry "property" "og:article:author:first_name" (car (s-split " " author))))
|
||||
(when (and (org-string-nw-p author) (s-contains-p " " author))
|
||||
(org-html--build-meta-entry "property" "og:article:author:first_name" (cdr (s-split-up-to " " author 2))))
|
||||
(org-html--build-meta-entry "property" "og:article:published_time" (format-time-string "%FT%T%z"))
|
||||
(when (org-string-nw-p subtitle)
|
||||
(org-html--build-meta-entry "property" "og:description" subtitle)))))
|
||||
#+END_SRC
|
||||
***** Custom CSS/JS
|
||||
There is a fantastic exporter config ([[https://github.com/fniessen/org-html-themes][fniessen/org-html-themes]]) which we can
|
||||
setup to be used with all our org files. Since most of the syntax highlighting
|
||||
colours from our [[*Theme and modeline][Theme]] gets used, we benefit from customising the code block style.
|
||||
#+BEGIN_SRC html :tangle misc/org-export-header.html
|
||||
<link rel='stylesheet' type='text/css' href='https://fniessen.github.io/org-html-themes/styles/readtheorg/css/htmlize.css'/>
|
||||
<link rel='stylesheet' type='text/css' href='https://fniessen.github.io/org-html-themes/styles/readtheorg/css/readtheorg.css'/>
|
||||
The default org HTML export is ... alright, but we can really jazz it up.
|
||||
[[https://lepisma.xyz][lepisma.xyz]] has a really nice style, and from and org export too!
|
||||
Suffice to say I've snatched it, with a few of my own tweaks applied.
|
||||
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
|
||||
<script type='text/javascript' src='https://fniessen.github.io/org-html-themes/styles/lib/js/jquery.stickytableheaders.min.js'></script>
|
||||
<script type='text/javascript' src='https://fniessen.github.io/org-html-themes/styles/readtheorg/js/readtheorg.js'></script>
|
||||
#+BEGIN_SRC html :tangle misc/org-export-header.html :comments no
|
||||
<link rel="icon" href="https://tecosaur.com/resources/org/nib.ico" type="image/ico" />
|
||||
|
||||
<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="https://tecosaur.com/resources/org/etbookot-roman-webfont.woff2">
|
||||
<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="https://tecosaur.com/resources/org/etbookot-italic-webfont.woff2">
|
||||
#+END_SRC
|
||||
|
||||
#+BEGIN_SRC css :tangle misc/org-export-style.css
|
||||
pre.src {
|
||||
background-color: var(--theme-bg);
|
||||
color: var(--theme-fg);
|
||||
scrollbar-color:#bbb6#9992;
|
||||
scrollbar-width: thin;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
div.org-src-container {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 1px;
|
||||
border: 1px solid#e1e4e5;
|
||||
}
|
||||
pre.src::before {
|
||||
background-color:#6666;
|
||||
top: 8px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
line-height: 1;
|
||||
border: 2px solid var(--theme-bg);
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
pre.src:hover::before { opacity: 1; }
|
||||
pre.src:active::before { opacity: 0; }
|
||||
|
||||
pre.example {
|
||||
border-radius: 12px;
|
||||
background: var(--theme-bg-alt);
|
||||
color: var(--theme-fg);
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 5px;
|
||||
background:#e8e8e8;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 80% SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||
line-height: normal;
|
||||
line-height: 10px;
|
||||
color:#444d56;
|
||||
vertical-align: middle;
|
||||
background-color:#fafbfc;
|
||||
border: 1px solid#d1d5da;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0#d1d5da;
|
||||
}
|
||||
|
||||
table {
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
a:not([aria-hidden='true']) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient(#d8dce9, #d8dce9);
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% 2px;
|
||||
transition: background-size .3s;
|
||||
}
|
||||
\#table-of-contents a {
|
||||
background-image: none;
|
||||
}
|
||||
a:hover:not([aria-hidden='true']),
|
||||
a:focus:not([aria-hidden='true']) {
|
||||
background-size: 100% 2px;
|
||||
}
|
||||
a[href^='#'] { font-variant-numeric: oldstyle-nums; }
|
||||
a[href^='#']:visited { color:#3091d1; }
|
||||
|
||||
li .checkbox {
|
||||
display: inline-block;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
border-radius: 3px;
|
||||
margin: 3px;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
li.on > .checkbox { background: var(--theme-green); box-shadow: 0 0 2px var(--theme-green); }
|
||||
li.trans > .checkbox { background: var(--theme-orange); box-shadow: 0 0 2px var(--theme-orange); }
|
||||
li.off > .checkbox { background: var(--theme-red); box-shadow: 0 0 2px var(--theme-red); }
|
||||
li.on > .checkbox::after {
|
||||
content: '';
|
||||
height: 0.45em;
|
||||
width: 0.225em;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
transform: scaleX(-1) rotate(135deg);
|
||||
border-right: 2.8px solid#fff;
|
||||
border-top: 2.8px solid#fff;
|
||||
opacity: 0.9;
|
||||
left: 0.10em;
|
||||
top: 0.45em;
|
||||
position: absolute;
|
||||
}
|
||||
li.trans > .checkbox::after {
|
||||
content: '';
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
position: absolute;
|
||||
top: 0.23em;
|
||||
left: 0.09em;
|
||||
width: 0.35em;
|
||||
height: 0.12em;
|
||||
background:#fff;
|
||||
opacity: 0.9;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
li.off > .checkbox::after {
|
||||
content: '✖';
|
||||
color:#fff;
|
||||
opacity: 0.9;
|
||||
position: relative;
|
||||
top: -0.40rem;
|
||||
left: 0.17em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
span.timestamp {
|
||||
color: #003280;
|
||||
background: #647CFF44;
|
||||
border-radius: 3px;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
\#content img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
\#table-of-contents { overflow-y: auto; }
|
||||
blockquote p { margin: 8px 0px 16px 0px; }
|
||||
\#postamble .date { color: var(--theme-green); }
|
||||
|
||||
::-webkit-scrollbar { width: 10px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background:#9992; }
|
||||
::-webkit-scrollbar-thumb { background:#ccc; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background:#888; }
|
||||
|
||||
/* sometimes this all-important space seems to go missing
|
||||
/so let's protect against that. If it's exteranious it's
|
||||
/just gobbled anyway. */
|
||||
span.section-number-1:after,
|
||||
span.section-number-2:after,
|
||||
span.section-number-3:after,
|
||||
span.section-number-4:after,
|
||||
span.section-number-5:after,
|
||||
span.section-number-6:after {
|
||||
content: ' '
|
||||
}
|
||||
|
||||
/* so the bounding box coveres the <a> */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
h1 > a[aria-hidden='true'],
|
||||
h2 > a[aria-hidden='true'],
|
||||
h3 > a[aria-hidden='true'],
|
||||
h4 > a[aria-hidden='true'],
|
||||
h5 > a[aria-hidden='true'],
|
||||
h6 > a[aria-hidden='true'] {
|
||||
color: #6a737d;
|
||||
float: left;
|
||||
padding-right: 4px;
|
||||
margin-left: -25px;
|
||||
position: relative;
|
||||
top: 7px;
|
||||
line-height: 1;
|
||||
font-size: 70%;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
h1:hover > a[aria-hidden='true'],
|
||||
h2:hover > a[aria-hidden='true'],
|
||||
h3:hover > a[aria-hidden='true'],
|
||||
h4:hover > a[aria-hidden='true'],
|
||||
h5:hover > a[aria-hidden='true'],
|
||||
h6:hover > a[aria-hidden='true'] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.music-track {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.music-track > img {
|
||||
height: 6rem;
|
||||
}
|
||||
|
||||
.music-track > span {
|
||||
margin-left: 2rem;
|
||||
min-width: 25%;
|
||||
}
|
||||
#+END_SRC
|
||||
|
||||
We also want to make the background and foreground colours of the ~<pre>~ blocks
|
||||
match out theme (they don't by default), so I scraped some code from ~emacs.stackexchange~.
|
||||
#+BEGIN_SRC emacs-lisp :noweb yes
|
||||
#+BEGIN_SRC emacs-lisp
|
||||
(after! org
|
||||
(setq org-custom-css (f-read-text (expand-file-name "misc/org-export-style.css" doom-private-dir)))
|
||||
(setq org-custom-html-header (f-read-text (expand-file-name "misc/org-export-header.html" doom-private-dir)))
|
||||
|
||||
(defun my-org-inline-css-hook (exporter)
|
||||
"Insert custom inline css to automatically set the
|
||||
background of code to whatever theme I'm using's background"
|
||||
(when (eq exporter 'html)
|
||||
(setq
|
||||
org-html-head-extra
|
||||
(concat
|
||||
(if (s-contains-p "<!––tec/custom-head-start-->" org-html-head-extra)
|
||||
(s-replace-regexp "<!––tec\\/custom-head-start-->[^🙜]*<!––tec\\/custom-head-end-->" "" org-html-head-extra)
|
||||
org-html-head-extra)
|
||||
"<!––tec/custom-head-start-->"
|
||||
(format "<style type=\"text/css\">
|
||||
:root {
|
||||
--theme-bg: %s;
|
||||
--theme-bg-alt: %s;
|
||||
--theme-base0: %s;
|
||||
--theme-base1: %s;
|
||||
--theme-base2: %s;
|
||||
--theme-base3: %s;
|
||||
--theme-base4: %s;
|
||||
--theme-base5: %s;
|
||||
--theme-base6: %s;
|
||||
--theme-base7: %s;
|
||||
--theme-base8: %s;
|
||||
--theme-fg: %s;
|
||||
--theme-fg-alt: %s;
|
||||
--theme-grey: %s;
|
||||
--theme-red: %s;
|
||||
--theme-orange: %s;
|
||||
--theme-green: %s;
|
||||
--theme-teal: %s;
|
||||
--theme-yellow: %s;
|
||||
--theme-blue: %s;
|
||||
--theme-dark-blue: %s;
|
||||
--theme-magenta: %s;
|
||||
--theme-violet: %s;
|
||||
--theme-cyan: %s;
|
||||
--theme-dark-cyan: %s;
|
||||
}
|
||||
</style>"
|
||||
(doom-color 'bg)
|
||||
(doom-color 'bg-alt)
|
||||
(doom-color 'base0)
|
||||
(doom-color 'base1)
|
||||
(doom-color 'base2)
|
||||
(doom-color 'base3)
|
||||
(doom-color 'base4)
|
||||
(doom-color 'base5)
|
||||
(doom-color 'base6)
|
||||
(doom-color 'base7)
|
||||
(doom-color 'base8)
|
||||
(doom-color 'fg)
|
||||
(doom-color 'fg-alt)
|
||||
(doom-color 'grey)
|
||||
(doom-color 'red)
|
||||
(doom-color 'orange)
|
||||
(doom-color 'green)
|
||||
(doom-color 'teal)
|
||||
(doom-color 'yellow)
|
||||
(doom-color 'blue)
|
||||
(doom-color 'dark-blue)
|
||||
(doom-color 'magenta)
|
||||
(doom-color 'violet)
|
||||
(doom-color 'cyan)
|
||||
(doom-color 'dark-cyan))
|
||||
(if (bound-and-true-p org-msg-currently-exporting) ""
|
||||
(concat org-custom-html-header "<style>" org-custom-css "</style>"))
|
||||
"<!––tec/custom-head-end-->"
|
||||
))))
|
||||
|
||||
(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook))
|
||||
(setq org-html-style-default
|
||||
(concat (f-read-text (expand-file-name "misc/org-export-header.html" doom-private-dir))
|
||||
"<script>\n"
|
||||
(f-read-text (expand-file-name "misc/pile-css-theme/toc.js" doom-private-dir))
|
||||
"</script>\n<style>\n"
|
||||
(f-read-text (expand-file-name "misc/pile-css-theme/main.css" doom-private-dir))
|
||||
"</style>"))
|
||||
org-html-htmlize-output-type 'css)
|
||||
#+END_SRC
|
||||
***** Make verbatim different to code
|
||||
Since we have =verbatim= and ~code~, let's use =verbatim= for key strokes.
|
||||
|
|
@ -4768,9 +4662,8 @@ I want to add github-style links on hover for headings.
|
|||
(when (org-export-derived-backend-p backend 'html)
|
||||
(unless org-msg-currently-exporting
|
||||
(replace-regexp-in-string
|
||||
"<h\\([0-9]\\) id=\"\\([a-z0-9-]+\\)\">" ; this is quite restrictive, but due to `org-heading-contraction' I can do this
|
||||
"<h\\1 id=\"\\2\">\
|
||||
<a class=\"anchor\" aria-hidden=\"true\" href=\"#\\2\">🔗</a>"
|
||||
"<h\\([0-9]\\) id=\"\\([a-z0-9-]+\\)\">\\(.*[^ ]\\)<\\/h[0-9]>" ; this is quite restrictive, but due to `org-heading-contraction' I can do this
|
||||
"<h\\1 id=\"\\2\">\\3<a aria-hidden=\"true\" href=\"#\\2\">#</a> </h\\1>"
|
||||
text))))
|
||||
|
||||
(add-to-list 'org-export-filter-headline-functions
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
<!-- [[file:../config.org::*Custom CSS/JS][Custom CSS/JS:1]] -->
|
||||
<link rel='stylesheet' type='text/css' href='https://fniessen.github.io/org-html-themes/styles/readtheorg/css/htmlize.css'/>
|
||||
<link rel='stylesheet' type='text/css' href='https://fniessen.github.io/org-html-themes/styles/readtheorg/css/readtheorg.css'/>
|
||||
<link rel="icon" href="https://tecosaur.com/resources/org/nib.ico" type="image/ico" />
|
||||
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
|
||||
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
|
||||
<script type='text/javascript' src='https://fniessen.github.io/org-html-themes/styles/lib/js/jquery.stickytableheaders.min.js'></script>
|
||||
<script type='text/javascript' src='https://fniessen.github.io/org-html-themes/styles/readtheorg/js/readtheorg.js'></script>
|
||||
<!-- Custom CSS/JS:1 ends here -->
|
||||
<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="https://tecosaur.com/resources/org/etbookot-roman-webfont.woff2">
|
||||
<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="https://tecosaur.com/resources/org/etbookot-italic-webfont.woff2">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
#+TITLE: pile-theme
|
||||
|
||||
Sass files for my [[http://lepisma.github.io/][web site]].
|
||||
Sass files for my org exporting. Taken from [[github:lepisma/pile-theme][lepisma/pile-theme]].
|
||||
|
||||
#+NAME: om-sass
|
||||
#+BEGIN_SRC shell :exports none
|
||||
sass --sourcemap=none ./main.scss ../lepisma.github.io/assets/css/main.css
|
||||
yes | cp ../lepisma.github.io/assets/css/main.css ../lepisma.github.io-deploy/assets/css/main.css
|
||||
sassc main.scss main.css
|
||||
#+END_SRC
|
||||
|
||||
#+RESULTS: om-sass
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
blockquote {
|
||||
@include left-line();
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include light-meta();
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
blockquote {
|
||||
@include left-line();
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer {
|
||||
@include light-meta();
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin box($name, $base-color, $symbol-letter, $symbol-path, $symbol-height: 35px, $symbol-width: 35px, $symbol-line-height: 1.1) {
|
||||
div.#{$name} {
|
||||
background: rgba($base-color, 0.15);
|
||||
border-left: 4px solid rgba($base-color, 0.45);
|
||||
margin-top: 1.8rem;
|
||||
margin-bottom: 1.25rem;
|
||||
padding: 0.8em;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
clear: both;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
div.#{$name}::before {
|
||||
content: $symbol-letter;
|
||||
color: $back-white;
|
||||
background: rgba($base-color, 0.8);
|
||||
align-items: flex-end;
|
||||
top: -1rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.4rem;
|
||||
-webkit-clip-path: $symbol-path;
|
||||
clip-path: $symbol-path;
|
||||
width: $symbol-width;
|
||||
height: $symbol-height;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
left: -1.2rem;
|
||||
line-height: $symbol-line-height;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@include box(info, $blue, "i", circle(50% at 50% 50%), 30px, 30px, 1.3)
|
||||
@include box(success, $green, "✔", polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%), 35px, 35px, 1.5)
|
||||
@include box(warning, $orange, "!", polygon(50% 0,0 100%,100% 100%))
|
||||
@include box(error, $red, "!", polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%), 30px)
|
||||
|
|
@ -5,8 +5,34 @@ pre.src, pre.example {
|
|||
font-family: $code-font;
|
||||
font-size: 14px;
|
||||
line-height: 1.9;
|
||||
overflow-x: auto;
|
||||
overflow-x: visible;
|
||||
box-shadow: none;
|
||||
white-space: pre-wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
pre.example {
|
||||
border-left-style: dotted;
|
||||
border-left-width: 2px;
|
||||
}
|
||||
|
||||
pre.src::before {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
background-color: transparent;
|
||||
top: unset;
|
||||
bottom: -16px;
|
||||
left: 20px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
font-size: 80%;
|
||||
font-style: italic;
|
||||
color: $text-light;
|
||||
}
|
||||
|
||||
// accout for the odd result of noweb
|
||||
pre.src:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -16,6 +42,20 @@ code {
|
|||
padding: 0 5px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 80% $code-font;
|
||||
line-height: normal;
|
||||
line-height: 80%;
|
||||
color: $text-gray;
|
||||
vertical-align: middle;
|
||||
background-color: $back-light;
|
||||
border: 1px solid #91959a88;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #91959a88;
|
||||
}
|
||||
|
||||
li {
|
||||
code {
|
||||
font-size: 14px;
|
||||
|
|
@ -31,15 +71,15 @@ li {
|
|||
// background: #ffffff
|
||||
$code-builtin: #3a81c3;
|
||||
$code-comment: #555555;
|
||||
$code-constant: #4e3163;
|
||||
$code-doc: #2aa1ae;
|
||||
$code-func: #6c3163;
|
||||
$code-keyword: #3a81c3;
|
||||
$code-regex: #655370;
|
||||
$code-string: #2d9574;
|
||||
$code-type: #ba2f59;
|
||||
$code-variable: #715ab1;
|
||||
$code-warning: #dc752f;
|
||||
// $code-constant in _theme
|
||||
$code-doc: $cyan;
|
||||
// $code-func in _theme
|
||||
$code-keyword: $blue;
|
||||
// $code-regex:
|
||||
$code-string: $green;
|
||||
$code-type: $red;
|
||||
$code-variable: $purple;
|
||||
$code-warning: $orange;
|
||||
|
||||
.example,
|
||||
.src {
|
||||
|
|
@ -83,3 +123,95 @@ $code-warning: #dc752f;
|
|||
color: $code-constant;
|
||||
}
|
||||
}
|
||||
|
||||
/* Languages per Org manual */
|
||||
|
||||
pre.src-asymptote::before { content: 'Asymptote'; }
|
||||
pre.src-awk::before { content: 'Awk'; }
|
||||
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: 'LaTeX'; }
|
||||
pre.src-plain-tex::before { content: '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'; }
|
||||
pre.src-conf::before { content: 'Configuration File'; }
|
||||
|
|
|
|||
|
|
@ -1,64 +1,32 @@
|
|||
// Common mixins and variables
|
||||
@charset "UTF-8";
|
||||
|
||||
// Shades
|
||||
$c1: #000;
|
||||
$c2: #222;
|
||||
$c3: #444;
|
||||
$c4: #7b7b7b;
|
||||
$c5: #c8c8c8;
|
||||
$c6: #efefef;
|
||||
$c7: #fff;
|
||||
|
||||
$accent: #002642;
|
||||
$accent-dark: #00151c;
|
||||
|
||||
$code-foreground: #2c3e50;
|
||||
$code-background: $c6;
|
||||
|
||||
$back-white: $c7;
|
||||
$back-light: $c6;
|
||||
$back-medium: $c5;
|
||||
|
||||
$text-light: $c4;
|
||||
$text-gray: $c3;
|
||||
$text-medium: $c2;
|
||||
$text-dark: $c1;
|
||||
@import 'theme';
|
||||
|
||||
// Fonts
|
||||
@font-face {
|
||||
font-family: 'Bebas Neue Bold';
|
||||
src: url("../fonts/BebasNeue Bold.otf");
|
||||
}
|
||||
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: 'et-book';
|
||||
src: url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot');
|
||||
src: url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff') format('woff'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf') format('svg');
|
||||
src: url('https://tecosaur.com/resources/org/etbookot-roman-webfont.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: normal
|
||||
font-style: normal;
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'et-book';
|
||||
src: url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot');
|
||||
src: url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff') format('woff'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf') format('svg');
|
||||
src: url('https://tecosaur.com/resources/org/etbookot-italic-webfont.woff2') format('woff2');
|
||||
font-weight: normal;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'et-book';
|
||||
src: url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot');
|
||||
src: url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix') format('embedded-opentype'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff') format('woff'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf') format('truetype'), url('../fonts/et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf') format('svg');
|
||||
font-weight: bold;
|
||||
font-style: normal
|
||||
font-style: italic;
|
||||
font-display: fallback;
|
||||
}
|
||||
|
||||
// Face variables
|
||||
$sans-font: 'Open Sans';
|
||||
$body-font: 'Merriweather';
|
||||
$title-font: 'et-book';
|
||||
$code-font: 'Fira Mono';
|
||||
$code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||
|
||||
@mixin text-underline-crop($background) {
|
||||
text-shadow: .03em 0 $background,
|
||||
|
|
@ -100,7 +68,7 @@ $code-font: 'Fira Mono';
|
|||
@include text-selection($back-medium);
|
||||
|
||||
border-radius: 1px;
|
||||
background-color: $background;
|
||||
// background-color: $background;
|
||||
color: $text;
|
||||
text-decoration: none;
|
||||
|
||||
|
|
@ -179,7 +147,6 @@ $code-font: 'Fira Mono';
|
|||
font-size: 12px;
|
||||
line-height: 1.9;
|
||||
color: $text-light;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@mixin left-line() {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,5 @@
|
|||
figure {
|
||||
text-align: center;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
figcaption {
|
||||
.figure-number {
|
||||
@include light-meta();
|
||||
|
|
@ -15,3 +12,9 @@ figure {
|
|||
img.zoomTarget:hover {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
// make white image backgrounds match page
|
||||
img {
|
||||
filter: invert(6%);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,21 +13,81 @@ h6 {
|
|||
margin-top: 60px;
|
||||
}
|
||||
|
||||
// link
|
||||
|
||||
h1 > a[aria-hidden='true'],
|
||||
h2 > a[aria-hidden='true'],
|
||||
h3 > a[aria-hidden='true'],
|
||||
h4 > a[aria-hidden='true'],
|
||||
h5 > a[aria-hidden='true'],
|
||||
h6 > a[aria-hidden='true'] {
|
||||
color: $back-medium;
|
||||
position: relative;
|
||||
top: 0.06em;
|
||||
line-height: 1;
|
||||
font-size: 110%;
|
||||
padding-left: 0.2em;
|
||||
text-decoration: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
h1 > a[aria-hidden='true']:hover,
|
||||
h2 > a[aria-hidden='true']:hover,
|
||||
h3 > a[aria-hidden='true']:hover,
|
||||
h4 > a[aria-hidden='true']:hover,
|
||||
h5 > a[aria-hidden='true']:hover,
|
||||
h6 > a[aria-hidden='true']:hover {
|
||||
color: $text-light;
|
||||
}
|
||||
h1:hover > a[aria-hidden='true'],
|
||||
h2:hover > a[aria-hidden='true'],
|
||||
h3:hover > a[aria-hidden='true'],
|
||||
h4:hover > a[aria-hidden='true'],
|
||||
h5:hover > a[aria-hidden='true'],
|
||||
h6:hover > a[aria-hidden='true'] {
|
||||
visibility: visible;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
// so the bounding box coveres the <a>
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
// to work with the right-aligned section numbers
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Override sizes
|
||||
h1 {
|
||||
h1, .section-number-1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
h2, .section-number-2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
h3, .section-number-3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
// Just use three levels
|
||||
h3, h4, h5, h6 {
|
||||
h4, .section-number-4 {
|
||||
font-size: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.section-number-5 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 18px;
|
||||
font-style: italic;
|
||||
}
|
||||
.section-number-6 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
// Section numbers
|
||||
.section-number-1,
|
||||
.section-number-2,
|
||||
|
|
@ -36,20 +96,28 @@ h3, h4, h5, h6 {
|
|||
.section-number-5,
|
||||
.section-number-6 {
|
||||
@include light-meta();
|
||||
font-size: inherit;
|
||||
color: $back-medium;
|
||||
line-height: 1;
|
||||
position: absolute; // to remove the bounding box
|
||||
transform: translateX(-100%) translateX(-10px);
|
||||
}
|
||||
|
||||
.section-number-1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
// spacing tweaks
|
||||
|
||||
.section-number-2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.section-number-3,
|
||||
.section-number-4,
|
||||
.section-number-5,
|
||||
.section-number-6 {
|
||||
font-size: 20px;
|
||||
}
|
||||
.outline-text-2:empty, .outline-text-2:-moz-only-whitespace {
|
||||
+ .outline-3 > h3 {
|
||||
margin-top: 20px;
|
||||
}}
|
||||
.outline-text-3:empty, .outline-text-3:-moz-only-whitespace {
|
||||
+ .outline-4 > h4 {
|
||||
margin-top: 15px;
|
||||
}}
|
||||
.outline-text-4:empty, .outline-text-4:-moz-only-whitespace {
|
||||
+ .outline-5 > h5 {
|
||||
margin-top: 15px;
|
||||
}}
|
||||
.outline-text-5:empty, .outline-text-5:-moz-only-whitespace {
|
||||
+ .outline-6 > h6 {
|
||||
margin-top: 10px;
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -11,13 +11,18 @@ body {
|
|||
font-family: $body-font;
|
||||
}
|
||||
|
||||
#page {
|
||||
color: $text-dark;
|
||||
background-color: $back-light;
|
||||
}
|
||||
|
||||
#content, header, .page-header {
|
||||
margin: 32px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#content {
|
||||
margin-top: 0;
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
|
|
@ -31,11 +36,16 @@ body {
|
|||
|
||||
.page-header {
|
||||
margin-top: 80px;
|
||||
margin-left: 0 !important; // as inside #content
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
text-transform: none;
|
||||
.subtitle {
|
||||
font-size: 24px;
|
||||
color: $text-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -158,3 +168,7 @@ header > div {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#postamble {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,40 @@ p a,
|
|||
.page-tags a,
|
||||
table a,
|
||||
#crosslinks a:not(.highlight),
|
||||
li a {
|
||||
li a,
|
||||
dl a {
|
||||
@include link-underline($back-white, $text-dark);
|
||||
|
||||
&:hover {
|
||||
@include link-underline($back-light, $text-dark);
|
||||
@include text-underline-crop($back-white);
|
||||
@include text-background($back-white, $text-dark);
|
||||
@include text-selection($back-white);
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23000000' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
|
||||
background-position: 0% 100%;
|
||||
background-size: 0.8em auto;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&[href^="#"] {
|
||||
color: $text-gray;
|
||||
&:hover {
|
||||
@include link-underline($back-white, $text-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#theme-switch:checked ~ #page {
|
||||
#breadcrumbs a,
|
||||
figcaption a,
|
||||
p a,
|
||||
.page-tags a,
|
||||
table a,
|
||||
#crosslinks a:not(.highlight),
|
||||
li a,
|
||||
dl a {
|
||||
&:hover {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg id='squiggle-link' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:ev='http://www.w3.org/2001/xml-events' viewBox='0 0 20 4'%3E%3Cstyle type='text/css'%3E.squiggle{animation:shift .3s linear infinite;}@keyframes shift {from {transform:translateX(0);}to {transform:translateX(-20px);}}%3C/style%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' class='squiggle' d='M0,3.5 c 5,0,5,-3,10,-3 s 5,3,10,3 c 5,0,5,-3,10,-3 s 5,3,10,3'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,3 +73,53 @@ dl {
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// checkboxes
|
||||
li .checkbox {
|
||||
display: inline-block;
|
||||
width: 0.9em;
|
||||
height: 0.9em;
|
||||
border-radius: 3px;
|
||||
margin: 3px;
|
||||
top: 4px;
|
||||
position: relative;
|
||||
}
|
||||
li.on > .checkbox { background: $green; box-shadow: 0 0 2px $green; }
|
||||
li.trans > .checkbox { background: $orange; box-shadow: 0 0 2px $orange; }
|
||||
li.off > .checkbox { background: $red; box-shadow: 0 0 2px $red; top: 6px }
|
||||
li.on > .checkbox::after {
|
||||
content: '';
|
||||
height: 0.45em;
|
||||
width: 0.225em;
|
||||
-webkit-transform-origin: left top;
|
||||
transform-origin: left top;
|
||||
transform: scaleX(-1) rotate(135deg);
|
||||
border-right: 2.8px solid#fff;
|
||||
border-top: 2.8px solid#fff;
|
||||
opacity: 0.9;
|
||||
left: 0.10em;
|
||||
top: 0.45em;
|
||||
position: absolute;
|
||||
}
|
||||
li.trans > .checkbox::after {
|
||||
content: '';
|
||||
font-weight: bold;
|
||||
font-size: 1.6em;
|
||||
position: absolute;
|
||||
top: 0.2em;
|
||||
left: 0.11em;
|
||||
width: 0.35em;
|
||||
height: 0.12em;
|
||||
background:#fff;
|
||||
opacity: 0.9;
|
||||
border-radius: 0.1em;
|
||||
}
|
||||
li.off > .checkbox::after {
|
||||
content: '✖';
|
||||
color:#fff;
|
||||
opacity: 0.9;
|
||||
position: relative;
|
||||
top: -0.50rem;
|
||||
left: 0.17em;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
// Org export specific styling
|
||||
|
||||
#org-div-home-and-up,
|
||||
pre.src:hover::before {
|
||||
#org-div-home-and-up {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -25,6 +24,8 @@ pre.src:hover::before {
|
|||
|
||||
.timestamp, .timestamp-kwd {
|
||||
@include light-meta();
|
||||
background-color: $back-white;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.todo, .done {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ table {
|
|||
border-left: transparent;
|
||||
border-right: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-width: 2px;
|
||||
border-collapse: collapse;
|
||||
font-size: 15px;
|
||||
font-family: $sans-font;
|
||||
margin: 20px;
|
||||
|
|
@ -11,11 +12,20 @@ table {
|
|||
|
||||
thead {
|
||||
@include light-meta();
|
||||
font-size: 15px;
|
||||
tr th {
|
||||
padding: 4px 10px;
|
||||
background-color: #9991;
|
||||
}
|
||||
tr:last-of-type th {
|
||||
border-bottom: solid 1px $text-light;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
thead tr th {
|
||||
border-bottom: solid 1px $back-light;
|
||||
padding: 10px;
|
||||
|
||||
tr,th,td {
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
|
|
@ -23,12 +33,6 @@ table {
|
|||
padding: 0 10px;
|
||||
}
|
||||
|
||||
thead tr th,
|
||||
tbody tr td {
|
||||
border-left: solid 1px $back-light;
|
||||
border-right: solid 1px $back-light;
|
||||
}
|
||||
|
||||
tr {
|
||||
line-height: 1.9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,107 @@
|
|||
$blue: #3a81c3;
|
||||
$green: #2d9574;
|
||||
$red: #ba2f59;
|
||||
$orange: #dc752f;
|
||||
$cyan: #2aa1ae;
|
||||
$purple: #715ab1;
|
||||
|
||||
$accent: var(--accent);
|
||||
$accent-dark: var(--accent-dark);
|
||||
|
||||
$code-foreground: var(--code-foreground);
|
||||
$code-background: var(--code-background);
|
||||
$code-func: var(--code-func);
|
||||
$code-constant: var(--code-const);
|
||||
$code-regex: var(--code-regex);
|
||||
|
||||
$back-white: var(--back-white);
|
||||
$back-light: var(--back-light);
|
||||
$back-medium: var(--back-medium);
|
||||
|
||||
$text-light: var(--text-light);
|
||||
$text-gray: var(--text-gray);
|
||||
$text-medium: var(--text-medium);
|
||||
$text-dark: var(--text-dark);
|
||||
|
||||
#page {
|
||||
--accent: #002642;
|
||||
--accent-dark: #00151c;
|
||||
|
||||
--code-foreground: #2c3e50;
|
||||
--code-background: #efefef;
|
||||
--code-func: #6c3163;
|
||||
--code-const: #4e3163;
|
||||
--code-regex: #655370;
|
||||
|
||||
--back-white: #fff;
|
||||
--back-light: #efefef;
|
||||
--back-medium: #c8c8c8;
|
||||
|
||||
--text-light: #7b7b7b;
|
||||
--text-gray: #444;
|
||||
--text-medium: #222;
|
||||
--text-dark: #000;
|
||||
|
||||
--switch-icon: "🌝";
|
||||
--switch-shadow-color: #fce477;
|
||||
}
|
||||
|
||||
#theme-switch:checked ~ #page {
|
||||
--accent: #002642;
|
||||
--accent-dark: #daf1ff;
|
||||
|
||||
--code-foreground: #a1a8ae;
|
||||
--code-background: #222;
|
||||
--code-func: #bd56ad;
|
||||
--code-const: #8755ab;
|
||||
--code-regex: #a184b3;
|
||||
|
||||
--back-white: #000;
|
||||
--back-light: #111;
|
||||
--back-medium: #444;
|
||||
|
||||
--text-light: #7b7b7b;
|
||||
--text-gray: #c8c8c8;
|
||||
--text-medium: #ddd;
|
||||
--text-dark: #efefef;
|
||||
|
||||
--switch-icon: "🌚";
|
||||
--switch-shadow-color: #373d4e;
|
||||
img.invertable {
|
||||
filter: invert(93%);
|
||||
}
|
||||
}
|
||||
|
||||
#theme-switch {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#switch-label {
|
||||
position: fixed;
|
||||
bottom: 4rem;
|
||||
left: 3rem;
|
||||
}
|
||||
@media (max-width: 1000px) {
|
||||
#switch-label {
|
||||
left: auto;
|
||||
left: bottom;
|
||||
right: 1%;
|
||||
top: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
#switch-label::before {
|
||||
content: var(--switch-icon);
|
||||
font-size: 20px;
|
||||
transition: text-shadow .2s;
|
||||
}
|
||||
|
||||
#switch-label::after {
|
||||
content: var(--switch-text);
|
||||
color: var(--switch-shadow-color);
|
||||
}
|
||||
|
||||
#theme-switch:focus ~ #page #switch-label::before,
|
||||
#switch-label:hover::before {
|
||||
text-shadow: 0 0 15px var(--switch-shadow-color);
|
||||
}
|
||||
|
|
@ -17,14 +17,6 @@ nav#table-of-contents {
|
|||
@include light-meta();
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
li a {
|
||||
@include link-underline($code-background, $text-gray);
|
||||
|
||||
&:hover {
|
||||
@include link-underline($code-background, $text-gray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
|
|
@ -68,13 +60,79 @@ nav#table-of-contents {
|
|||
li::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li a {
|
||||
@include link-underline($back-white, $text-gray);
|
||||
//
|
||||
// Fancy toc
|
||||
//
|
||||
|
||||
&:hover {
|
||||
@include link-underline($back-light, $text-gray);
|
||||
::-webkit-scrollbar { width: 10px; height: 8px; }
|
||||
::-webkit-scrollbar-track { background:transparent; }
|
||||
::-webkit-scrollbar-thumb { background:transparent; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background:transparent; }
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
#table-of-contents {
|
||||
position: fixed;
|
||||
right: 4rem;
|
||||
top: 0;
|
||||
padding: 1em;
|
||||
width: 15rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 4rem;
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
> div > ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
max-height: calc(100vh - 5rem - 40px);
|
||||
overflow-y: auto;
|
||||
overflow-x: visible;
|
||||
scrollbar-color: transparent transparent;
|
||||
scrollbar-width: thin;
|
||||
ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
> li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
ul.active > li {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
display: none;
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $text-light;
|
||||
text-decoration: none;
|
||||
-webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
// negating earlir styles
|
||||
text-shadow: none;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
li:hover, li:hover > ul > li {
|
||||
display: block !important;
|
||||
a {
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
li.active > a {
|
||||
color: $text-dark;
|
||||
}
|
||||
li::before {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1640px) {
|
||||
#table-of-contents {
|
||||
right: 10rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
// Components
|
||||
@import 'aside';
|
||||
@import 'blockquote';
|
||||
@import 'blocks';
|
||||
@import 'bibliography';
|
||||
@import 'code';
|
||||
@import 'dropcap';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const sections = document.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id]');
|
||||
const activate = (entry) => {
|
||||
entry.classList.add('active');
|
||||
if (["LI", "UL"].includes(entry.parentElement.tagName)) {
|
||||
activate(entry.parentElement);
|
||||
}
|
||||
};
|
||||
const activateLast = () => {
|
||||
document.querySelectorAll('#text-table-of-contents li.active, #text-table-of-contents ul.active').forEach(a => {
|
||||
a.classList.remove('active')
|
||||
});
|
||||
let mostRecent = { section: sections[0], bottom: -Infinity };
|
||||
const windowHeight = window.innerHeight;
|
||||
sections.forEach((section) => {
|
||||
const bounds = section.getBoundingClientRect()
|
||||
if ( bounds.bottom > mostRecent.bottom && bounds.top < windowHeight ) {
|
||||
mostRecent = { section, bottom: bounds.bottom };
|
||||
}
|
||||
})
|
||||
activate(document.querySelector(`#text-table-of-contents li a[href="#${mostRecent.section.getAttribute('id')}"]`).parentElement);
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
activateLast();
|
||||
});
|
||||
|
||||
sections.forEach((section) => {
|
||||
observer.observe(section);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue