Sort of Tufte CSS

I tried something new with my site style.

2020-02-23 post css site tools

Thought I’d try something new and bumped into Tufte CSS. That’s a CSS stylesheet and font set aspiring to the style of Edward Tufte. He wrote the The Visual Display of Quantitative Information.

Of course, I had to adjust the original CSS for my own quirks. Added more Fork Awesome icons. Made the RST elements fit. Tips from a David Walsh post helped me show external links.

One of the main goals was to get my site readable on mobile devices. Alas, Web design is not my strongest skill.

I’ll let you know if I figure out what my strongest skill is.

And I must say, this is the simplest highlighting theme I ever made:

    .code {
    line-height: 1.6;

    .builtin {
        font-weight: bold;
    }

    .comment {
        color: var(--accent-color);
        font-style: italic;
    }

    .keyword {
        font-weight: bold;
    }

    .output {
        color: var(--accent-color);
    }
}
  

It doesn’t highlight much. Heck it didn’t highlight anything in that SCSS. Here. Try this:

    $ echo "Hello world" # a small demonstration
Hello world

  

But I’m not sure how long I’ll keep this style. For one thing, some of the bits like footnotes aren’t quite used as the stylesheet recommends. Though I could probably make it work across the site with some shortcodes. And there’s an awful lot of float and clear to get those side notes working. That can be a brittle approach.

Besides, I’ve been itching to play with Tailwind CSS. I might even see if I can reimplement this theme with Tailwind. Except with more color.