I posted Sort of Tufte CSS on Sunday, 23 February, 2020

I tried something new with my site style.

Sort of Tufte CSS
Post css site

Sort of Tufte CSS

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.

Indieweb Social

Did you mention this somewhere? I'd love it if you sent me the link!

disclaimer about timing

Mentions are sent to webmention.io. I fetch the latest mentions when building the site, so I may not see your feedback right away. Especially if my site's broken, which is often the case.

Public replies and mentions might be shared on the site, but I try to do a little quality check first.

Site Links