Adding POC for tufte css
This commit is contained in:
James Patrick
James Patrick
parent
363e7b3766
commit
b2bc0197f5
|
|
@ -160,6 +160,13 @@ See https://emacs.stackexchange.com/questions/63517/org-mode-evaluate-diff-code-
|
|||
;(add-hook! 'org-mode-hook #'solaire-mode)
|
||||
;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset)
|
||||
|
||||
(require 'ox-tufte)
|
||||
|
||||
(setq org-html-head ""
|
||||
org-html-head-extra "")
|
||||
|
||||
(setq org-html-htmlize-output-type "css")
|
||||
|
||||
(setq +org-capture-frame-parameters '((name . "doom-capture")
|
||||
(width . 100)
|
||||
(height . 20)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
#+title: Doom Emacs Configuration
|
||||
#+SETUPFILE: ./dist/setup.org
|
||||
|
||||
I'll fill out the how and why of this all as I figure out what the hell I'm doing. My current Emacs Configuration is a mess of copy and pasted snippet loosely grouped together. There's a fair number of work around, to transient configuration issues that now no longer exist, and more of stuff cribbed off StackOverflow & held together with string & bubble gum. While not yet calling Configuration Bankrupt's, I am going to try to see if I can restructure this technical debt.
|
||||
|
||||
|
|
@ -858,6 +859,38 @@ cat a.org
|
|||
;(add-hook 'mixed-pitch-mode-hook #'solaire-mode-reset)
|
||||
#+end_src
|
||||
|
||||
*** Export to Tufte
|
||||
Rather than using =org-export-dispatch='s html export, we'll want to use [[https://github.com/ox-tufte/ox-tufte][ox-tufte]]. The HTML output is a more reasonable than the HTML format.
|
||||
|
||||
#+BEGIN_SRC emacs-lisp :tangle "packages.el"
|
||||
(package! ox-tufte)
|
||||
#+END_SRC
|
||||
|
||||
Just load the require to setup the dependency.
|
||||
#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no
|
||||
(require 'ox-tufte)
|
||||
#+end_src
|
||||
|
||||
By default the =org-export-dispatch=, includes some basic styling. This causes issues with our HTML. We'll need to turn off these.
|
||||
|
||||
#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no
|
||||
(setq org-html-head ""
|
||||
org-html-head-extra "")
|
||||
#+end_src
|
||||
|
||||
The syntax highlighting for html is done inline in the by default. We don't want to do that; we're using CSS. See the file in [[file:dist/code.css][code.css]] file for more.
|
||||
|
||||
#+begin_src emacs-lisp :tangle "+orgmode.el" :noweb no-export :comments no
|
||||
(setq org-html-htmlize-output-type "css")
|
||||
#+end_src
|
||||
|
||||
To use this you will need to include the setup file. This will load the required css & js files. See [[https://orgmode.org/manual/In_002dbuffer-Settings.html][here]] for more.
|
||||
|
||||
#+begin_src org :tangle no
|
||||
#+SETUPFILE: ~/.dotfiles/emacs/dist/setup.org
|
||||
#+end_src
|
||||
|
||||
This will load the CSS and JS files located in the =dotfiles/emacs/dist/= directory.
|
||||
** Capture
|
||||
The default =+org-capture/open-frame= is a little small. Let's modify the parameters to make it a little larger
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
* This file is largely lifted from
|
||||
* */
|
||||
/* eslint-disable no-script-url,padded-blocks,spaced-comment */
|
||||
(function (exports, options) {
|
||||
"use strict";
|
||||
|
||||
var win = exports;
|
||||
var doc = exports.document;
|
||||
|
||||
// Just so we can test without having to build theme options
|
||||
if (!options) {
|
||||
options = {};
|
||||
}
|
||||
|
||||
// Query selector helper
|
||||
function $(selector) {
|
||||
var lookup = doc.querySelectorAll(selector);
|
||||
return [].slice.call(lookup);
|
||||
}
|
||||
|
||||
// Setup checklists
|
||||
function setupChecklists() {
|
||||
// Remove `<code>` from `li.on` and `li.off`
|
||||
$("li[class^=o] code").forEach(function (node) {
|
||||
var ul = node.parentNode.parentNode;
|
||||
var li = node.parentNode;
|
||||
var code = node;
|
||||
var isChecked = li.classList.contains("on");
|
||||
var checkbox = createCheckbox(isChecked);
|
||||
|
||||
// Add `checklist` class to the list
|
||||
ul.classList.add("checklist");
|
||||
|
||||
// Insert a checkbox element to the list item
|
||||
li.insertBefore(checkbox, code);
|
||||
|
||||
// Remove code node
|
||||
code.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Setup task lists
|
||||
function setupTasklists() {
|
||||
$(".done, .todo").forEach(function (node) {
|
||||
var container = node.parentNode;
|
||||
var status = node;
|
||||
var isChecked = node.classList.contains("done");
|
||||
var checkbox = createCheckbox(isChecked);
|
||||
|
||||
// Add `checklist` class to the task container
|
||||
container.insertBefore(checkbox, status);
|
||||
|
||||
// Remove task node
|
||||
status.remove();
|
||||
});
|
||||
}
|
||||
|
||||
// Creates a simple checkbox element
|
||||
// isChecked: Whether or not it should display checked
|
||||
function createCheckbox(isChecked) {
|
||||
var checkbox = doc.createElement("input");
|
||||
checkbox.setAttribute("type", "checkbox");
|
||||
checkbox.setAttribute("disabled", "disabled");
|
||||
|
||||
if (isChecked) {
|
||||
checkbox.setAttribute("checked", "checked");
|
||||
}
|
||||
|
||||
return checkbox;
|
||||
}
|
||||
|
||||
// Add "back to top" button
|
||||
function addBackToTop() {
|
||||
var link = doc.createElement("a");
|
||||
var container = doc.querySelector("body");
|
||||
|
||||
link.classList.add("back-to-top");
|
||||
link.setAttribute("href", "javascript:scroll(0, 0);");
|
||||
link.innerHTML = "<i></i>" + options["back-to-top-text"];
|
||||
|
||||
container.appendChild(link);
|
||||
}
|
||||
|
||||
// Display the collection name and user avatar at the header
|
||||
function addCollection(collection) {
|
||||
var content = doc.querySelector("#content");
|
||||
var wrapper = doc.createElement("div");
|
||||
var link = doc.createElement("a");
|
||||
var avatar = doc.createElement("img");
|
||||
var title = doc.createTextNode(collection.title);
|
||||
var hasAvatar = collection.avatar && collection.avatar.length;
|
||||
|
||||
wrapper.classList.add("collection");
|
||||
|
||||
link.classList.add("collection-url");
|
||||
link.href = collection.url || "/";
|
||||
|
||||
avatar.classList.add("collection-avatar");
|
||||
avatar.src = collection.avatar;
|
||||
avatar.alt = collection.title;
|
||||
|
||||
if (hasAvatar) {
|
||||
link.appendChild(avatar);
|
||||
}
|
||||
|
||||
link.appendChild(title);
|
||||
wrapper.appendChild(link);
|
||||
content.insertBefore(wrapper, content.firstChild);
|
||||
}
|
||||
|
||||
function bootstrap() {
|
||||
// Bootstrap lists
|
||||
if (options["fancy-lists"]) {
|
||||
setupChecklists();
|
||||
setupTasklists();
|
||||
}
|
||||
|
||||
// Bootstrap "back to top"
|
||||
if (options["back-to-top"]) {
|
||||
addBackToTop();
|
||||
}
|
||||
|
||||
if (options.collection.enabled) {
|
||||
addCollection(options.collection);
|
||||
}
|
||||
|
||||
// console.log($("#content")[0].classList.add("show"));
|
||||
}
|
||||
|
||||
// Hold bootstrap until document body is parsed
|
||||
exports.onload = bootstrap;
|
||||
})(window, {
|
||||
"table-of-contents": false,
|
||||
"section-numbers": false,
|
||||
postamble: true,
|
||||
"fancy-lists": true,
|
||||
"fancy-icons": true,
|
||||
"back-to-top": true,
|
||||
"back-to-top-text": "Back to top",
|
||||
collection: { enabled: false, avatar: "", title: "", url: "/" },
|
||||
});
|
||||
|
|
@ -0,0 +1,441 @@
|
|||
pre {
|
||||
border-radius: 3px;
|
||||
padding: 8pt;
|
||||
font-family: monospace;
|
||||
overflow: auto;
|
||||
margin: 1.2em;
|
||||
|
||||
&.src {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 12px;
|
||||
padding: 3px;
|
||||
color: #555;
|
||||
background-color: #f2f2f299;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
display: inline;
|
||||
margin-top: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================================================
|
||||
Code Highlighting
|
||||
==============================================================================
|
||||
*/
|
||||
pre {
|
||||
background-color: var(--code-bg);
|
||||
& span {
|
||||
&.org-highlight-quoted-symbol {
|
||||
color: var(--code-08);
|
||||
}
|
||||
&.org-warning {
|
||||
color: var(--code-08);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.org-error {
|
||||
color: var(--code-09);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.org-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
&.org-success {
|
||||
color: var(--code-03);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.org-highlight-quoted-quote {
|
||||
color: var(--code-01);
|
||||
}
|
||||
&.org-builtin {
|
||||
color: var(--code-02);
|
||||
}
|
||||
&.org-string {
|
||||
color: var(--code-03);
|
||||
}
|
||||
&.org-doc {
|
||||
color: var(--code-10);
|
||||
}
|
||||
&.org-keyword {
|
||||
color: var(--code-01);
|
||||
}
|
||||
&.org-variable-name {
|
||||
color: var(--code-05);
|
||||
}
|
||||
&.org-function-name {
|
||||
color: var(--code-02);
|
||||
}
|
||||
&.org-type {
|
||||
color: var(--code-08);
|
||||
}
|
||||
&.org-preprocessor {
|
||||
color: var(--code-01);
|
||||
font-weight: bold;
|
||||
}
|
||||
&.org-constant {
|
||||
color: var(--code-04);
|
||||
}
|
||||
&.org-comment-delimiter {
|
||||
color: var(--code-07);
|
||||
}
|
||||
&.org-comment {
|
||||
color: var(--code-07);
|
||||
}
|
||||
&.org-outshine-level-1 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-2 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-3 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-4 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-5 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-6 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-7 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-8 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-outshine-level-9 {
|
||||
color: #8d8d84;
|
||||
font-style: italic;
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-1 {
|
||||
color: var(--code-01);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-2 {
|
||||
color: var(--code-02);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-3 {
|
||||
color: var(--code-03);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-4 {
|
||||
color: var(--code-04);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-5 {
|
||||
color: var(--code-01);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-6 {
|
||||
color: var(--code-02);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-7 {
|
||||
color: var(--code-03);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-8 {
|
||||
color: var(--code-04);
|
||||
}
|
||||
&.org-rainbow-delimiters-depth-9 {
|
||||
color: var(--code-09);
|
||||
}
|
||||
&.org-sh-quoted-exec {
|
||||
color: var(--code-01);
|
||||
}
|
||||
&.org-diff-added {
|
||||
color: var(--code-03);
|
||||
}
|
||||
&.org-diff-changed {
|
||||
color: var(--code-08);
|
||||
}
|
||||
&.org-diff-header {
|
||||
color: var(--code-12);
|
||||
}
|
||||
&.org-diff-hunk-header {
|
||||
color: var(--code-04);
|
||||
}
|
||||
&.org-diff-none {
|
||||
color: var(--code-11);
|
||||
}
|
||||
&.org-diff-removed {
|
||||
color: var(--code-09);
|
||||
}
|
||||
}
|
||||
}
|
||||
/*
|
||||
==============================================================================
|
||||
Stay what the code mode is.
|
||||
==============================================================================
|
||||
*/
|
||||
pre {
|
||||
/* Languages per Org manual */
|
||||
&.src-asymptote:before {
|
||||
content: "Asymptote";
|
||||
}
|
||||
&.src-awk:before {
|
||||
content: "Awk";
|
||||
}
|
||||
&.src-authinfo::before {
|
||||
content: "Authinfo";
|
||||
}
|
||||
&.src-C:before {
|
||||
content: "C";
|
||||
}
|
||||
/* pre.src-C++ doesn't work in CSS */
|
||||
&.src-clojure:before {
|
||||
content: "Clojure";
|
||||
}
|
||||
&.src-css:before {
|
||||
content: "CSS";
|
||||
}
|
||||
&.src-D:before {
|
||||
content: "D";
|
||||
}
|
||||
&.src-ditaa:before {
|
||||
content: "ditaa";
|
||||
}
|
||||
&.src-dot:before {
|
||||
content: "Graphviz";
|
||||
}
|
||||
&.src-calc:before {
|
||||
content: "Emacs Calc";
|
||||
}
|
||||
&.src-emacs-lisp:before {
|
||||
content: "Emacs Lisp";
|
||||
}
|
||||
&.src-fortran:before {
|
||||
content: "Fortran";
|
||||
}
|
||||
&.src-gnuplot:before {
|
||||
content: "gnuplot";
|
||||
}
|
||||
&.src-haskell:before {
|
||||
content: "Haskell";
|
||||
}
|
||||
&.src-hledger:before {
|
||||
content: "hledger";
|
||||
}
|
||||
&.src-java:before {
|
||||
content: "Java";
|
||||
}
|
||||
&.src-js:before {
|
||||
content: "Javascript";
|
||||
}
|
||||
&.src-latex:before {
|
||||
content: "LaTeX";
|
||||
}
|
||||
&.src-ledger:before {
|
||||
content: "Ledger";
|
||||
}
|
||||
&.src-lisp:before {
|
||||
content: "Lisp";
|
||||
}
|
||||
&.src-lilypond:before {
|
||||
content: "Lilypond";
|
||||
}
|
||||
&.src-lua:before {
|
||||
content: "Lua";
|
||||
}
|
||||
&.src-matlab:before {
|
||||
content: "MATLAB";
|
||||
}
|
||||
&.src-mscgen:before {
|
||||
content: "Mscgen";
|
||||
}
|
||||
&.src-ocaml:before {
|
||||
content: "Objective Caml";
|
||||
}
|
||||
&.src-octave:before {
|
||||
content: "Octave";
|
||||
}
|
||||
&.src-org:before {
|
||||
content: "Org mode";
|
||||
}
|
||||
&.src-oz:before {
|
||||
content: "OZ";
|
||||
}
|
||||
&.src-plantuml:before {
|
||||
content: "Plantuml";
|
||||
}
|
||||
&.src-processing:before {
|
||||
content: "Processing.js";
|
||||
}
|
||||
&.src-python:before {
|
||||
content: "Python";
|
||||
}
|
||||
&.src-R:before {
|
||||
content: "R";
|
||||
}
|
||||
&.src-ruby:before {
|
||||
content: "Ruby";
|
||||
}
|
||||
&.src-sass:before {
|
||||
content: "Sass";
|
||||
}
|
||||
&.src-scheme:before {
|
||||
content: "Scheme";
|
||||
}
|
||||
&.src-screen:before {
|
||||
content: "Gnu Screen";
|
||||
}
|
||||
&.src-sed:before {
|
||||
content: "Sed";
|
||||
}
|
||||
&.src-sh:before {
|
||||
content: "shell";
|
||||
}
|
||||
&.src-sql:before {
|
||||
content: "SQL";
|
||||
}
|
||||
&.src-sqlite:before {
|
||||
content: "SQLite";
|
||||
}
|
||||
/* additional languages in org.el's org-babel-load-languages alist */
|
||||
&.src-forth:before {
|
||||
content: "Forth";
|
||||
}
|
||||
&.src-io:before {
|
||||
content: "IO";
|
||||
}
|
||||
&.src-J:before {
|
||||
content: "J";
|
||||
}
|
||||
&.src-makefile:before {
|
||||
content: "Makefile";
|
||||
}
|
||||
&.src-maxima:before {
|
||||
content: "Maxima";
|
||||
}
|
||||
&.src-perl:before {
|
||||
content: "Perl";
|
||||
}
|
||||
&.src-picolisp:before {
|
||||
content: "Pico Lisp";
|
||||
}
|
||||
&.src-scala:before {
|
||||
content: "Scala";
|
||||
}
|
||||
&.src-shell:before {
|
||||
content: "Shell Script";
|
||||
}
|
||||
&.src-ebnf2ps:before {
|
||||
content: "ebfn2ps";
|
||||
}
|
||||
/* additional language identifiers per "defun org-babel-execute"
|
||||
in ob-*.el */
|
||||
&.src-cpp:before {
|
||||
content: "C++";
|
||||
}
|
||||
&.src-abc:before {
|
||||
content: "ABC";
|
||||
}
|
||||
&.src-coq:before {
|
||||
content: "Coq";
|
||||
}
|
||||
&.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. */
|
||||
&.src-bash:before {
|
||||
content: "bash";
|
||||
}
|
||||
&.src-csh:before {
|
||||
content: "csh";
|
||||
}
|
||||
&.src-ash:before {
|
||||
content: "ash";
|
||||
}
|
||||
&.src-dash:before {
|
||||
content: "dash";
|
||||
}
|
||||
&.src-ksh:before {
|
||||
content: "ksh";
|
||||
}
|
||||
&.src-mksh:before {
|
||||
content: "mksh";
|
||||
}
|
||||
&.src-posh:before {
|
||||
content: "posh";
|
||||
}
|
||||
/* Additional Emacs modes also supported by the LaTeX listings package */
|
||||
&.src-ada:before {
|
||||
content: "Ada";
|
||||
}
|
||||
&.src-asm:before {
|
||||
content: "Assembler";
|
||||
}
|
||||
&.src-caml:before {
|
||||
content: "Caml";
|
||||
}
|
||||
&.src-delphi:before {
|
||||
content: "Delphi";
|
||||
}
|
||||
&.src-html:before {
|
||||
content: "HTML";
|
||||
}
|
||||
&.src-idl:before {
|
||||
content: "IDL";
|
||||
}
|
||||
&.src-mercury:before {
|
||||
content: "Mercury";
|
||||
}
|
||||
&.src-metapost:before {
|
||||
content: "MetaPost";
|
||||
}
|
||||
&.src-modula-2:before {
|
||||
content: "Modula-2";
|
||||
}
|
||||
&.src-pascal:before {
|
||||
content: "Pascal";
|
||||
}
|
||||
&.src-ps:before {
|
||||
content: "PostScript";
|
||||
}
|
||||
&.src-prolog:before {
|
||||
content: "Prolog";
|
||||
}
|
||||
&.src-simula:before {
|
||||
content: "Simula";
|
||||
}
|
||||
&.src-tcl:before {
|
||||
content: "tcl";
|
||||
}
|
||||
&.src-tex:before {
|
||||
content: "TeX";
|
||||
}
|
||||
&.src-plain-tex:before {
|
||||
content: "Plain TeX";
|
||||
}
|
||||
&.src-verilog:before {
|
||||
content: "Verilog";
|
||||
}
|
||||
&.src-vhdl:before {
|
||||
content: "VHDL";
|
||||
}
|
||||
&.src-xml:before {
|
||||
content: "XML";
|
||||
}
|
||||
&.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 */
|
||||
&.src-conf:before {
|
||||
content: "Configuration File";
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
==============================================================================
|
||||
Colors
|
||||
==============================================================================
|
||||
*/
|
||||
:root {
|
||||
/* --dark-bg: #292c33; */
|
||||
--dark-bg: #24272d;
|
||||
--dark-fg: #bcc2ce;
|
||||
--code-bg: #24272d;
|
||||
--code-01: #68aee9;
|
||||
--code-02: #bb7ed7;
|
||||
--code-03: #a0bc70;
|
||||
--code-04: #a7a3dc;
|
||||
--code-05: #d5b1e6;
|
||||
--code-06: #cf8854;
|
||||
--code-07: #5c6267;
|
||||
--code-08: #e5bf84;
|
||||
--code-09: #ee7570;
|
||||
--code-10: #84898d;
|
||||
--code-11: #a5aab5;
|
||||
--code-12: #72d7fb;
|
||||
}
|
||||
|
||||
/*
|
||||
==============================================================================
|
||||
Disable Orgmode Config
|
||||
==============================================================================
|
||||
*/
|
||||
|
||||
[class^="section-number-"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#table-of-contents {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
# -*- mode: org; -*-
|
||||
#
|
||||
# This setup stack represents the following configuration:
|
||||
#
|
||||
#{
|
||||
# "table-of-contents": false,
|
||||
# "section-numbers": false,
|
||||
# "postamble": false,
|
||||
# "fancy-lists": false,
|
||||
# "fancy-icons": false,
|
||||
# "back-to-top": true,
|
||||
# "collection": {
|
||||
# "enabled": false,
|
||||
# }
|
||||
#}
|
||||
# I recommend you to generate your own css/js files by forking, cloning and customizing the file
|
||||
# theme.json before building it.
|
||||
#
|
||||
#
|
||||
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="dist/tufte.css"/>
|
||||
#+HTML_HEAD: <script src="dist/bundle.js" type="text/javascript" ></script>
|
||||
|
|
@ -1,16 +1,9 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
[class^="section-number-"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#table-of-contents {
|
||||
display: none;
|
||||
}
|
||||
@import "custom.css";
|
||||
@import "code.css";
|
||||
|
||||
/* Import ET Book styles
|
||||
adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */
|
||||
|
||||
@font-face {
|
||||
font-family: "NerdFontsSymbols Nerd Font";
|
||||
src: url("https://raw.githubusercontent.com/ryanoasis/nerd-fonts/master/patched-fonts/NerdFontsSymbolsOnly/SymbolsNerdFont-Regular.ttf");
|
||||
|
|
@ -99,20 +92,12 @@ body {
|
|||
padding-left: 12.5%;
|
||||
font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
|
||||
"Book Antiqua", Georgia, serif, "NerdFontsSymbols Nerd Font";
|
||||
background-color: #fffff8;
|
||||
color: #111;
|
||||
background-color: var(--dark-bg);
|
||||
color: var(--dark-fg);
|
||||
max-width: 1400px;
|
||||
counter-reset: sidenote-counter;
|
||||
}
|
||||
|
||||
/* Adds dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #151515;
|
||||
color: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 400;
|
||||
margin-top: 4rem;
|
||||
|
|
@ -292,11 +277,11 @@ a:link,
|
|||
.hover-tufte-underline:hover {
|
||||
text-decoration: none;
|
||||
background:
|
||||
-webkit-linear-gradient(#fffff8, #fffff8),
|
||||
-webkit-linear-gradient(#fffff8, #fffff8),
|
||||
-webkit-linear-gradient(var(--dark-bg), var(--dark-bg)),
|
||||
-webkit-linear-gradient(var(--dark-bg), var(--dark-bg)),
|
||||
-webkit-linear-gradient(currentColor, currentColor);
|
||||
background: linear-gradient(#fffff8, #fffff8),
|
||||
linear-gradient(#fffff8, #fffff8),
|
||||
background: linear-gradient(var(--dark-bg), var(--dark-bg)),
|
||||
linear-gradient(var(--dark-bg), var(--dark-bg)),
|
||||
linear-gradient(currentColor, currentColor);
|
||||
-webkit-background-size:
|
||||
0.05em 1px,
|
||||
|
|
@ -312,18 +297,18 @@ a:link,
|
|||
1px 1px;
|
||||
background-repeat: no-repeat, no-repeat, repeat-x;
|
||||
text-shadow:
|
||||
0.03em 0 #fffff8,
|
||||
-0.03em 0 #fffff8,
|
||||
0 0.03em #fffff8,
|
||||
0 -0.03em #fffff8,
|
||||
0.06em 0 #fffff8,
|
||||
-0.06em 0 #fffff8,
|
||||
0.09em 0 #fffff8,
|
||||
-0.09em 0 #fffff8,
|
||||
0.12em 0 #fffff8,
|
||||
-0.12em 0 #fffff8,
|
||||
0.15em 0 #fffff8,
|
||||
-0.15em 0 #fffff8;
|
||||
0.03em 0 var(--dark-bg),
|
||||
-0.03em 0 var(--dark-bg),
|
||||
0 0.03em var(--dark-bg),
|
||||
0 -0.03em var(--dark-bg),
|
||||
0.06em 0 var(--dark-bg),
|
||||
-0.06em 0 var(--dark-bg),
|
||||
0.09em 0 var(--dark-bg),
|
||||
-0.09em 0 var(--dark-bg),
|
||||
0.12em 0 var(--dark-bg),
|
||||
-0.12em 0 var(--dark-bg),
|
||||
0.15em 0 var(--dark-bg),
|
||||
-0.15em 0 var(--dark-bg);
|
||||
background-position:
|
||||
0% 93%,
|
||||
100% 93%,
|
||||
|
|
@ -338,27 +323,6 @@ a:link,
|
|||
}
|
||||
}
|
||||
|
||||
/* Adds dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
a:link,
|
||||
.tufte-underline,
|
||||
.hover-tufte-underline:hover {
|
||||
text-shadow:
|
||||
0.03em 0 #151515,
|
||||
-0.03em 0 #151515,
|
||||
0 0.03em #151515,
|
||||
0 -0.03em #151515,
|
||||
0.06em 0 #151515,
|
||||
-0.06em 0 #151515,
|
||||
0.09em 0 #151515,
|
||||
-0.09em 0 #151515,
|
||||
0.12em 0 #151515,
|
||||
-0.12em 0 #151515,
|
||||
0.15em 0 #151515,
|
||||
-0.15em 0 #151515;
|
||||
}
|
||||
}
|
||||
|
||||
a:link::selection,
|
||||
a:link::-moz-selection {
|
||||
text-shadow:
|
||||
|
|
@ -407,14 +371,13 @@ img {
|
|||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.sidenote-number:after {
|
||||
content: counter(sidenote-counter);
|
||||
.sidenote-number > .numeral {
|
||||
font-size: 1rem;
|
||||
top: -0.5rem;
|
||||
left: 0.1rem;
|
||||
}
|
||||
|
||||
.sidenote > numeral {
|
||||
.sidenote > .numeral {
|
||||
font-size: 1.2rem;
|
||||
top: -0.5rem;
|
||||
}
|
||||
|
|
@ -589,6 +552,6 @@ label.margin-toggle:not(.sidenote-number) {
|
|||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
wxdth: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,6 @@
|
|||
|
||||
(package! ob-mermaid)
|
||||
|
||||
(package! ox-tufte)
|
||||
|
||||
(package! gptel)
|
||||
|
|
|
|||
Loading…
Reference in New Issue