org-mode css

CSS file to make org mode documents look better when exported as html. Based on https://github.com/DEADB17/org-mode-css, the main changes are:

Respecting dark/light mode of the browser
Color scheme based on dracula
Table of contents on the right

The main features kept fromt the original are

Light-weight single CSS file. No JavaScript, no images, no custom fonts
Responsive across screens sizes
Normalized across browsers and operating systems
Minimalist design, just enough to enhance readability
Simple to change and extend (edit this file and export)

View the sample documet.

Some alternatives:

Usage

Download docs/org.css.

Reference it in the settings section of the file that will be exported.

#+HTML_HEAD: <link rel="stylesheet" href="org.css">

E.g.:

#+OPTIONS: ':nil *:t -:t ::t <:t H:3 \n:nil ^:nil arch:headline author:t
#+OPTIONS: broken-links:nil c:nil creator:t d:(not "LOGBOOK") date:t e:t
#+OPTIONS: email:t f:t inline:t num:nil p:nil pri:nil prop:nil stat:t tags:t
#+OPTIONS: tasks:t tex:t timestamp:t title:t toc:nil todo:t |:t
#+OPTIONS: html-style:nil html-scripts:nil
#+OPTIONS: html5-fancy:t
#+HTML_CONTAINER: section
#+HTML_DOCTYPE: html5
#+HTML_HEAD: <link rel="stylesheet" href="org.css">
#+LANGUAGE: en
#+SELECT_TAGS: export
#+EXCLUDE_TAGS: noexport
#+CREATOR: Emacs 26.1 (Org mode 9.1.14)

Note that the setup can also be put in a file and then included, e.g.:

#+SETUPFILE: ./setup.org

Generate the `org.css` output file

The output file is generated from this document. To generate it evaluate ( C-c C-c ) this source block.

cat $sanitize $typography $forms $org $colors

the css for the responsive toc

cat  $orgtoc

If you have Node.js and npm installed evaluate this source block to minify the file.

npx uglifycss $sanitize $typography $forms $org $colors

Or if you have csscompressor installed evaluate this source block to minify the file.

python -m csscompressor $sanitize $typography $forms $org $colors

On nixos run

nix-shell -p "python3.withPackages (p: [ p.csscompressor ])" --run "python -m csscompressor $sanitize $typography $forms $org $colors"

nix-shell -p "python3.withPackages (p: [ p.csscompressor ])" --run "python -m csscompressor $orgtoc"

`org.css` contents

The customized options are in the Org and Colors sections below. The other sections are from the sanitize.css project.

Org

h2, h3, h4, h5, h6 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

h1, h2, h3, h4 {
  line-height: 1;
  font-weight: normal;
}

h1 {font-size: 3.052em;}

h2 {font-size: 2.441em;}

h3 {font-size: 1.953em;}

h4 {font-size: 1.563em;}

h5 {font-size: 1.25em;}

p {hyphens: auto;}

small {font-size: 0.8em;}

kbd {
  display: inline-block;
  padding: 0.19em 0.31em;
  font-size: 75%;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
  border-radius: 20%;
}

body {
  --max-width: 84rem;
  --text-width: 60rem;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

body > * {
  max-width: var(--text-width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 60rem) {
  body > * {
      padding-left: 1rem;
      padding-right: 1rem;
  }
}

ul,
ol {padding-left: 1.5em;}

thead > tr,
tbody > tr {border-bottom: 0.0625em solid;}
tbody {border-bottom: 0.188em solid;}
tbody:last-child,
tbody > tr:last-child {border-bottom: none;}

th,
td {padding: 0.4em 1.2em;}
th:first-child,
td:first-child {padding-left: 0;}
th:last-child,
td:last-child {padding-right: 0;}

blockquote {
  margin-right: 0;
  border-right: .125em solid;
  padding-right: 1em;
  margin-left: 0;
  border-left: .125em solid;
  padding-left: 1em;
}

table,
figure {
  margin-left: auto;
  margin-right: auto;
}

/* make the table scrollable vertically on small screens */
table {
  display: block;
  max-width: -moz-fit-content;
  max-width: fit-content;
  margin: 0 auto;
  overflow-x: auto;
  white-space: nowrap;
}

figure {
  text-align: center;
}

img,
object {
  max-width: 100%;
}

.title { text-align: center; }

.subtitle { text-align: center; }

.ABSTRACT {
  border-top: 0.125em solid;
  border-bottom: 0.125em solid;
}

.underline { text-decoration: underline; }

pre.src,
pre.example {
  overflow-x: auto;
  padding: 0 1em;
  background: repeating-linear-gradient(rgba(0,0,0,.0625), rgba(0,0,0,.0625) 1.5em, transparent 1.5em, transparent 3em);
}

.on > code,
.trans > code,
.off > code { display: none; }
.on::marker,
.trans::marker,
.off::marker { padding-right: 0.5em; }
.on::marker { content: "☑"}
.trans::marker,
.off::marker { content: "□"}

h2 .timestamp-wrapper,
h3 .timestamp-wrapper,
h4 .timestamp-wrapper,
h5 .timestamp-wrapper,

.timestamp-wrapper,
.priority,
.todo,
.done {
  font-weight: normal;
}
.todo,
.done {
  border: 0.125em solid;
  font-size: 60%;
  padding: .2em;
}

h2 .priority,
h2 .todo,
h2 .done,
h3 .priority,
h3 .todo,
h3 .done,
h4 .priority,
h4 .todo,
h4 .done,
h5 .priority,
h5 .todo,
h5 .done,
h6 .priority,
h6 .todo,
h6 .done
{ margin-right: 0.5em; }

.timestamp-wrapper,
.priority,
.todo,
.done,
.tag {opacity: 0.66;}

.tag {
  font-weight: normal;
  margin-left: auto;
}

.footref {
  padding: 0 0.25em;
  text-decoration: none;
}
.footdef { display: flex; }
.footdef sup { padding-right: 0.5rem; }
.footpara { margin-top: 0; }

#postamble {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.8em;
  margin-top: 6rem;
  margin-bottom: 1rem;
  border-top: 0.125em solid;
}
#postamble > * { margin-bottom: 0; }
#postamble > .validation { display: none; }

#org-div-home-and-up{
    position: fixed;
    top: 0.25rem;
    left: calc((100% - var(--text-width)) / 2);
    padding: 2px 5px 2px 5px;
}
@media (max-width: 60rem) {
    #org-div-home-and-up{
        left: 1rem;
    }
}

responsive toc

body {
    --toc-width: 24rem;
}

#table-of-contents .timestamp-wrapper {
    font-size: 80%;
}

#table-of-contents {
    white-space: normal;
    overflow: auto;
}
@media (min-width: 86rem) {
    body > * {
        left: calc( (100% - var(--text-width) + var(--toc-width)) / 2 );
        margin-right: 1rem;
        top: 1rem;
    }

    #table-of-contents {
        position: fixed;
        top: 5rem;
        left: calc( (100% - var(--text-width) - var(--toc-width)) / 2 );
        width: var(--toc-width);
        overflow-y: auto;
    }

    #org-div-home-and-up{
        left: calc( (100% - var(--text-width) - var(--toc-width)) / 2 );
    }

    #table-of-contents > h2 {
        font-size: 1.563em;
    }
}
@media (min-width: 104rem) {
    body > * {
        margin-left: auto;
        margin-right: auto;
    }

    #table-of-contents {
        position: fixed;
        top: 5rem;
        left: calc((100% - var(--text-width))/2 - var(--toc-width));;
        overflow-y: auto;
    }

    #org-div-home-and-up{
        left: calc((100% - var(--text-width))/2 - var(--toc-width));;
    }
}

Colors

/* screen */
  @media (prefers-color-scheme: dark) {
    body {
      color: #f8f8f2;
      background-color: #282a36;
    }

    kbd {
      color: #f8f8f2;
      background-color: #6272a4;
      border-color: #44475a;
    }

    a:link {color: #8be9fd;}

    a:visited {color: #bd93f9;}

    .priority {color: #f1fa8c;}
    .todo {color: #ffb86c;}
    .done { color: #50fa7b;}
    #org-div-home-and-up{
      background-color: #282a36;
    }
  }
  @media (prefers-color-scheme: light) {
    /* body { */
    /*   color: #282a36; */
    /*   background-color: #f8f8f2; */
    /* } */

    kbd {
      color: #f8f8f2;
      background-color: #6272a4;
      border-color: #44475a;
    }

    a:link {color: #007e90;}

    a:visited {color: #855fbf;}

    .priority {color: #6c7908;}
    .todo {color: #7d4800;}
    .done { color: #008504;}

    #org-div-home-and-up{
      background-color: white;
    }
  }

Sanitize

curl -L  https://unpkg.com/sanitize.css

Typography

curl -L https://unpkg.com/sanitize.css/typography.css

Forms

curl -L https://unpkg.com/sanitize.css/forms.css

benneti / org-mode-css

org-mode css

Usage

Generate the `org.css` output file

`org.css` contents

Org

responsive toc

Colors

Sanitize

Typography

Forms

About

org-mode css

Usage

Generate the org.css output file

org.css contents

Org

responsive toc

Colors

Sanitize

Typography

Forms

About

Generate the `org.css` output file

`org.css` contents