Tufte + Firn

A.org

README

This shows the result of mixing the usual firn_base.css with elements of tufte.css from https://github.com/edwardtufte/tufte-css

I tried to display one of my marginal notes as a div rather than a span but that didn’t work.

a.png

firn_base.css

@charset "UTF-8";

/*
 * Firn's default style sheet uses a modified version of:
 * MVP.css v1.6.2 - https://github.com/andybrewer/mvp
 * Change the default variables below to find a styling you like.
 */

/* Reset / Overrides */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* CSS Variables (light mode) */

:root {
  --border-radius: 4px;
  --box-shadow: 2px 2px 10px;
  --color-primary: #3498db;
  --color-primary-accent: #3498db14;
  --color-bg: #fff;
  --color-bg-secondary: #e9e9e9;
  --color-secondary: #222;
  --color-secondary-accent: #222ab;
  --color-shadow: #f4f4f4;
  --color-text: #444;
  --color-text-secondary: #999;
  --font-family: "Arial", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --hover-brightness: 1.2;
  --justify-important: center;
  --justify-normal: left;
  --line-height: 1.65;
  --width-card-wide: 800px;
  --width-content: 48rem;

  /* Currently, Firn only supports 'todo | done' keywords. */
  --keyword-active: #2ecc71; /* For "active" Todo keywords. */
  --keyword-done: #bdc3c7; /* For "done type keywords" */
  --keyword-size: xx-small;

  /* Headline priorities ([#A] [#B] etc) */
  --priority-a-bg: #c0392b;
  --priority-b-bg: #3498db;
  --priority-c-bg: #2ecc71;
  --priority-size: xx-small;

  /* Headline Tags (:my-tag: :unfinished: etc)*/
  --tag-size: x-small;
  --tag-bg: #ecf0f1;
}

/* CSS Variables (dark mode) */
@media (prefers-color-scheme: dark) {
  :root {
    --color: #0097fc;
    --color-primary-accent: #555;
    --color-bg: #333;
    --color-bg-secondary: #555;
    --color-shadow: #bbbbbb20;
    --color-secondary: #efefef;
    --color-secondary-accent: #efefef;
    --color-text: #f7f7f7;
    --color-text-secondary: #aaa;
    --tag-bg: #555;
  }
}

/* Layout */

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  line-height: var(--line-height);
  font-size: 15px;
  margin: 0;
  overflow-x: hidden;
  counter-reset: sidenote-counter; 
}

footer,
main {
  margin: 0 auto;
}

.content {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 32px;
}

.back-to-main { margin-left:15px; }

hr {
  margin: 2rem 0;
  border-top: 1px solid var(--border-col);
  border-bottom: none;
}

/* Headers */
article header,
div header,
main header {
  padding-top: 0;
}

/* Typography */
code,
samp {
  background-color: var(--color-primary-accent);
  border-radius: var(--border-radius);
  color: var(--color-text);
  display: inline-block;
  margin: 0 0.1rem;
  padding: 0 0.5rem;
  font-size: 0.85em;
}

details {
  margin: 1.3rem 0;
}

details summary {
  font-weight: bold;
  cursor: pointer;
  padding: 0 8px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: var(--line-height);
  margin: 1em 0;
}

mark {
  padding: 0.1rem;
}

ol,
ul {
  margin: 0.125rem 0;
  padding-left: 1.25rem;
}

ol li,
ul li {
  padding: 0.125rem 0;
}

p {
  margin: 1rem 0;
  padding: 0;
}

pre {
  margin: 1rem 0;
  padding: 1rem 0;
}

pre code,
pre samp {
  display: block;
  padding: 0.5rem 1rem;
  overflow-x: auto;
}

small {
  color: var(--color-text-secondary);
}

sup {
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-size: xx-small;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
  position: relative;
  top: -2px;
}

a {
  color: var(--color-secondary);
  text-decoration: none;
}

a:hover {
  filter: brightness(var(--hover-brightness));
  text-decoration: underline;
}

/* -- Images */

figure {
  margin: 0;
  padding: 0;
}

figure img {
  max-width: 100%;
}

figure figcaption {
  color: var(--color-text-secondary);
}

/* -- Tables */
table {
  border: 1px solid var(--color-bg-secondary);
  border-radius: var(--border-radius);
  border-spacing: 0;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 0;
  white-space: nowrap;
}

table td,
table th,
table tr {
  padding: 0.4rem 0.8rem;
  font-size: 0.9em;
}

/* Firn currently can't discern if a table has a <th>,*/
/* so we style the first element.*/
table tr:first-child {
  background-color: var(--color-primary);
  border-collapse: collapse;
  border-radius: var(--border-radius);
  color: var(--color-bg);
  margin: 0;
  padding: 0;
}

table thead th:first-child {
  border-top-left-radius: var(--border-radius);
}

table thead th:last-child {
  border-top-right-radius: var(--border-radius);
}

table thead th:first-child,
table tr td:first-child {
  text-align: var(--justify-normal);
}

table tr:nth-child(even) {
  background-color: var(--color-primary-accent);
}

blockquote {
  display: block;
  font-size: large;
  font-style: italic;
  line-height: var(--line-height);
  padding: 1.5rem 0;
  background: var(--color-primary-accent);
}

blockquote footer {
  color: var(--color-text-secondary);
  display: block;
  font-size: small;
  line-height: var(--line-height);
  padding: 1.5rem 0;
}

/* -- Firn Org Tweaks ---- */

/* Because firn spits out nested content (for example, the parser spits out p
   tags within li tags), sometimes you may need to style the children of html
   elements to get the spacing you like.*/

li > p {
  margin: 0;
  padding: 0;
}

/* -- Firn "Components" ---- */

/* Images */
.firn-img-with-caption {
  display: flex;
  flex-direction: column;
}

.firn-img-with-caption img {
  align-self: flex-start;
}

.firn-img-caption {
  font-style: italic;
}

/* Headline Keywords and Priority */

/* This applies to ALL h1-h6 */
.firn-headline {
  display: flex;
  align-items: center; /* center align useful for aligning tags + keywords */
}

.firn-headline-section {
  margin-bottom: 32px;
}

.firn-headline-priority {
  background-color: var(--color-secondary);
  border-radius: var(--border-radius);
  color: white;
  font-size: xx-small;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.3rem;
  font-size: var(--priority-size);
}

.firn-headline-priority__A {
  background-color: var(--priority-a-bg);
}

.firn-headline-priority__B {
  background-color: var(--priority-b-bg);
  font-size: var(--priority-size);
}

.firn-headline-priority__C {
  background-color: var(--priority-c-bg);
  font-size: var(--priority-size);
}

.firn-headline-keyword__DONE {
  background-color: var(--keyword-done);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-size: var(--keyword-size);
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.3rem;
  position: relative;
}

.firn-headline-keyword__TODO {
  background-color: var(--keyword-active);
  border-radius: var(--border-radius);
  color: var(--color-bg);
  font-size: xx-small;
  font-weight: bold;
  margin-right: 0.5rem;
  padding: 0.2rem 0.3rem;
  position: relative;
}

.firn-headline-text {
  /* display: flex; */
  flex: 1;
  align-items: center;
}

.firn-cookie {
}

/* Org Footnotes */

.firn-footnote-ref {
}

.firn-footnote-def {
}

/* Org Property Drawers */

.firn-properties {
  background-color: var(--color-bg-secondary);
}

.firn-property-key {
}

.firn-property-value {
}

/* Styling for internal and external links */

.firn-external {
}

.firn-internal {
}

/* If you choose to render :PROPERTIES: drawers, you may style them: */
.firn-properties {
  background: var(--color-bg-secondary);
  padding: 8px;
}
.firn-property-key {
}
.firn-property-value {
}

/* -- Folding ---------------------------------------------------------------- */

/* Folding leverages html <details> and <summary> tags to emulate the folding
   feature of org-mode. This is a bit hacky; we hide the regular heading (so
   that it still exists so it is anchorable, still has tags, priority etc).
*/

/* Headline text is hidden when using folding; it is instead rendered in a
   <summary> tag. */
.firn-headline-text-hidden {
  visibility: collapse;
  overflow: auto;
  flex: 1;
}

/* This moves tags, priority, other non-content text in headings up to
   approximately where the <summary> tag is. */
.firn-headline-hidden {
  margin-top: -2.6em;
  justify-content: right;
  display: flex;
}

/* If folding, we have to style the <summary> tags to make them look like headings. */

/* Set the parent element, so we can size-down on mobile. */
.firn-fold {
  font-size: 15px;
}
.firn-headline-summary-1 {
  font-size: 1.3em;
  margin: 1em 0;
}
.firn-headline-summary-2 {
  font-size: 1.15em;
  margin: 1em 0;
}
.firn-headline-summary-3 {
  font-size: 1.05em;
  margin: 1em 0;
}
.firn-headline-summary-4 {
  font-size: 1em;
  margin: 1em 0;
}
.firn-headline-summary-5 {
  font-size: 0.85em;
  margin: 1em 0;
}
.firn-headline-summary-6 {
  font-size: 0.75em;
  margin: 1em 0;
}

@media (max-width: 768px) {
  .firn-fold {
    font-size: 12px;
  }
}

/* Sitemap, breadcrumbs, siblings files, related files. ---------------------- */

.firn-sitemap {
}

.firn-sitemap-item--parent {
  list-style-type: none;
}

.firn-breadcrumbs {
}

.firn-file-navigation {
  display: flex;
  justify-content: space-between;
}

/* Tags (Firn / Org tags) ---------------------------------------------------- */

/* There are two types of tags when using Firn: "org-tags" and "firn-tags"
/* org-tags are your standard org-mode heading tags:  ":mytag:"*/
/* firn-tags are file-based tags that allows tagging entire files.*/

/* Firn tags (tags that are per file basis.) */

.firn-file-tags {
}
.firn-file-tags-container {
}
.firn-file-tag-name {
  font-size: 1.2em;
  margin: 1em 0;
  text-transform: capitalize;
}
.firn-file-tag-list {
}
.firn-file-tag-item {
}
.firn-file-tag-link {
}

/* Org tags (tags that are per heading basis.) */

/* How an org tag (ex - `:mytag:`) looks when rendered alongside an org heading. */
.firn-org-tag {
  background-color: var(--tag-bg);
  border-radius: var(--border-radius);
  color: var(--color-text);
  font-size: var(--tag-size);
  font-weight: 400;
  margin: 0 4px;
  padding: 0.2rem 0.4rem;
}

.firn-org-tag:hover {
  filter: none;
}

/* Optional: Adds a "#" before an org-tag */
.firn-org-tag::before {
  content: "#";
}

/* The following css classes style the result of rendering your org-tags list via*/
/* `(render :org-tags)` */
.firn-org-tags {
}
.firn-org-tags-container {
}
.firn-org-tag-name {
  font-size: 1.2em;
  margin: 1em 0;
  text-transform: capitalize;
}
.firn-org-tag-list {
}
.firn-org-tag-item {
}
.firn-org-tag-link {
}

/* TUFTE STYLE */

/* Sidenotes, margin notes, figures, captions */
img {
    max-width: 100%; 
}

.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -45%;
    width: 40%;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    vertical-align: baseline;
    position: relative; 
    display: inline !important;
}

.sidenote-number {
    counter-increment: sidenote-counter; 
}

.sidenote-number:after,
.sidenote:before {
    font-family: et-book-roman-old-style;
    position: relative;
    vertical-align: baseline; 
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: 1rem;
    top: -0.5rem;
    left: 0.1rem; 
}

.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: 1rem;
    top: -0.5rem; 
}

blockquote .sidenote,
blockquote .marginnote {
    margin-right: -82%;
    min-width: 59%;
    text-align: left; 
}

div.fullwidth,
table.fullwidth {
    width: 100%; 
}

div.table-wrapper {
    overflow-x: auto;
    font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif; 
}

.sans {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
    letter-spacing: .03em; 
}

code, pre > code {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 1.0rem;
    line-height: 1.42;
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
}

.sans > code {
    font-size: 1.2rem; 
}

h1 > code,
h2 > code,
h3 > code {
    font-size: 0.80em; 
}

.marginnote > code,
.sidenote > code {
    font-size: 1rem; 
}

pre > code {
    font-size: 0.9rem;
    width: 52.5%;
    margin-left: 2.5%;
    overflow-x: auto;
    display: block;
}

pre.fullwidth > code {
    width: 90%; 
}

.fullwidth {
    max-width: 90%;
    clear:both; 
}

span.newthought {
    font-variant: small-caps;
    font-size: 1.2em; 
}

input.margin-toggle {
    display: none; 
}

label.sidenote-number {
    display: inline; 
}

label.margin-toggle:not(.sidenote-number) {
    display: none; 
}

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0; 
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

/* Links */
/* Links: replicate underline that clears descenders */

a:link,
a:visited {
    color: inherit; 
}

.no-tufte-underline:link {
    background: unset;
    text-shadow: unset;
}

a:link, .tufte-underline, .hover-tufte-underline:hover {
    text-decoration: none;
    background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
    background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 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;
    background-position: 0% 93%, 100% 93%, 0% 93%; 
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    a:link, .tufte-underline, .hover-tufte-underline:hover {
        background-position-y: 87%, 87%, 87%;
    }
}

a:link::selection,
a:link::-moz-selection {
    text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
    background: #b4d5fe;
}

@media (max-width: 760px) {
    body {
        width: 84%;
        padding-left: 8%;
        padding-right: 8%; 
    }
    
    hr,
    section > p,
    section > footer,
    section > table {
        width: 100%; 
    }
    
    pre > code {
        width: 97%; 
    }

    section > ol {
        width: 90%; 
    }

    section > ul {
        width: 90%; 
    }

    figure {
        max-width: 90%; 
    }
    
    figcaption,
    figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none; 
    }
    
    blockquote {
        margin-left: 1.5em;
        margin-right: 0em; 
    }

    blockquote p,
    blockquote footer {
        width: 100%; 
    }
    
    label.margin-toggle:not(.sidenote-number) {
        display: inline; 
    }

    .sidenote,
    .marginnote {
        display: none; 
    }
    
    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: 1rem;
        clear: both;
        width: 95%;
        margin: 1rem 2.5%;
        vertical-align: baseline;
        position: relative; 
    }

    label {
        cursor: pointer; 
    }

    div.table-wrapper,
    table {
        width: 85%; 
    }
    
    img {
        width: 100%;
    } 
}

tufte-example.html

<html><html><head><meta charset="UTF-8"/>
    <meta content="width=device-width, initial-scale=1.0"
          name="viewport"/>
    <link href="./firn_base.css"
          rel="stylesheet"/>
  </head>
  <<body><main><article class="content">
        <section>
          <h2 id="sidenotes">Sidenotes: Footnotes and Marginal Notes</h2>
          <p>One of the most distinctive features of Tufte’s style is his extensive use of sidenotes.<label for="sn-extensive-use-of-sidenotes" class="margin-toggle sidenote-number"></label><input type="checkbox" id="sn-extensive-use-of-sidenotes" class="margin-toggle"/><span class="sidenote">This is a sidenote.</span> Sidenotes are like footnotes, except they don’t force the reader to jump their eye to the bottom of the page, but instead display off to the side in the margin. Perhaps you have noticed their use in this document already. You are very astute.</p>
          <p>If you want a sidenote without footnote-style numberings, then you want a margin note.
            <label for="mn-demo" class="margin-toggle">&#8853;</label>
            <input type="checkbox" id="mn-demo" class="margin-toggle"/>
            <span class="marginnote">
              This is a margin note. Notice there isn’t a number preceding the note.  This one is formatted as a span (default for Tufte).
            </span> On large screens, a margin note is just a sidenote that omits the reference number. This lessens the distracting effect taking away from the flow of the main text, but can increase the cognitive load of matching a margin note to its referent text. However, on small screens, a margin note is like a sidenote except its viewability-toggle is a symbol rather than a reference number. This document currently uses the symbol &#8853; (<code>&amp;#8853;</code>), but it’s up to you.</p>
        </section>
        <section>
<h1>OBS
recordings</h1><div><div><section><p><span>We talked about creating
asyncronous recordings (screencasts, audio). We also talked about
possibly putting the audio recordings into a threaded voice mail
forum, but<label for="mn-demo" class="margin-toggle">&#8853;</label>
<input type="checkbox" id="mn-demo" class="margin-toggle"/>
<div style="display: inline;border: 1px solid #CCC;" class="marginnote">
This one is formatted with:
<pre>&lt;div style="display: inline;
  border: 1px solid #CCC;"
  class="marginnote"&gt;...&lt;/div&gt;</pre>
It produces a gap in the text at left.
</div>that’s a somewhat different
application.</span></p></section></div></div><div><hr /><div class="backlinks"><h4>Backlinks
to this
document:</h4><ul class="firn-backlinks"><li class="firn-backlink"><a href="http://localhost:4000/index">index</a></li><li class="firn-backlink"><a href="http://localhost:4000/20200810135126-organisational_infrastructure">Organisational
infrastructure</a></li></ul></div></div></section></article>
</main></body></html>

This is a result of mixing the usual firn_base.css with elements of tufte.css from https://github.com/edwardtufte/tufte-css

I tried to display one of my marginal notes as a div rather than a span but that didn't work.

The full CSS I used is here:

https://gist.github.com/holtzermann17/a2d8aca325bc715382a60984c93e7341