I see that you are doing this:

#+HTML: <div class="outline-2" id="meta">
| *Author* | {{{author}}} ({{{email}}})    |
| *Date*   | {{{time(%Y-%m-%d %H:%M:%S)}}} |
#+HTML: </div>

However, orgmode already outputs this information in postamble. Right now it is rendered underneath the ToC, which is definitely not right.

And maybe other things. See this list: https://github.com/fniessen/refcard-org-mode/blob/master/README.org#admonitions

Example:

#+begin_note
This is a useful note.
#+end_note

#+begin_warning
Be careful!  Check that you have...
#+end_warning

Instead of disappearing completely it should probably appear on the top.

For example:

http://contrastchecker.com/ says this for the screenshot above:

And I agree. It is hard to read.

Add variables for:

• link colors
• notice box colors
• syntax classes
• code bg
• fonts (headers, body, code)
• print opts (e.g. page breaks for h2 / h3...)

It is:

pre {
    font-family: Inconsolata;
    …
}

It should be:

pre {
    font-family: Inconsolata, monospace;
    …
}

Otherwise tables look too wide.

Compare this:

With this:

It looks better, except that JS label is on top of the text. Perhaps fix it with a little bit of right padding?

A lot of users will probably just use the style.css file, so it would be nice if it included at least the link to this repo.

Right now I am afraid to submit pull requests because I don't want to break something.

Would be cool if there was a set of test cases, so that I can open both versions (old and new) side by side and see if everything looks correctly.

One way to do it so to create test-like .org files for each expected feature. Another is to expand files in sections/ folder so that every possible feature (or edge case) is there. I'd much rather prefer the former (each test in a separate file).

Not sure if there is any way to automate it. Perhaps create an image for every test with wkhtmltoimage, compose them side by side and save into a folder? I have no idea how CSS projects are usually tested.

Actually, I am not sure about this one.

But try this:

• Create a document with many headings
• Change height of your window slightly, so that some part of the ToC is cut off (does not fit into the window vertically)
• Scrollbar should appear
• If you scroll down, can you see the last ToC item?

I can't, but I already have a lot of modifications to the style, so perhaps my bug report is not valid. Try it yourself.

I did this to fix it:

@media screen {
    #table-of-contents {
        padding: 0 0 0 2em; /* was 2em 0 2em 2em */
    }
    #table-of-contents h2 {
        margin-top: 1.5em; /* was 0 */
    }
}

It would be great to be able to make versioned word documents (e.g. generated with pandoc).

Others can then make changes (using change highlighting) that i can then use to update the source.

It is too small. Not only it is way too hard to read, but it is also hard to click on the links.

pre elements are styled like this:

pre {
    background-color: #f8f8f8;
    background-size: 8px 8px;
    background-image: linear-gradient(135deg, transparent 25%, rgba(0, 0, 0, 0.02) 25%, rgba(0, 0, 0, 0.02) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.02) 75%, rgba(0, 0, 0, 0.02));
}

This may not be noticeable on faster machines, but this kind of background lags way too much on some computers. Perhaps it also depends on the browser (I am using firefox), but I recommend to just throw it away.

This zebra-like background makes code hard to read anyway, plain gray background is probably better.

RFC2119 keywords can be macros, allowing programmatic handling of these elements, summary tables, etc. For example:

#+MACRO: MUST <something>
#+MACRO: SHOULD <something>

The document {{{MUST(support RFC2119)}}} and {{{SHOULD(have neat feature)}}}

where <something> can be an inline code block, which both prints the string so it is included in the Org source and exported, but also appends the string to a file that could be included elsewhere as a table in the Appendix that aggregates and references all of the MUST and SHOULD clauses.

This is a superb theme. Yet I noticed that the verbatim or code markup of fonts in tables does not work: This table

  | =verbatim= | text      |
  | ~code~     | more text |

does not display properly, while this inline markup is fine: =verbatim= and ~code~.

It seem as if the css file needs to be modified to the effect that td code is deleted from the line

h2 code, h3 code, h4 code, h5 code, td code{
    font-family: inherit !important;
    font-size: inherit !important;
}