to make writefreely cute

Cute might be generous but it'll at least feel more like me.

There's an official customization guide, but there's also a whole gallery of themes that make a good starting point. I grabbed the generic Dark Theme, and then started tweaking.

new yak: a staging environment

Because how else am I going to play with page styles without making a mess on the live site, right?

Writefreely customization is raw CSS dumped wholesale into the <head /> of your public site. That sounded kind of like an old-school userstyle to me, so I loaded my new starting point into the Stylus Firefox addon and enabled it for my domain. Bam, staging environment. Without the environment.


I really like low-contrast palettes, but I know that can be rough on the eyes (or invisible) for some people. The Firefox page inspector shows me when colors break the WCAG contrast recommendations, so I can fiddle around until I find something I like that's not also a visual nightmare.


Remember how I said the customization system is raw CSS dumped wholesale into the header? That means @import statements work, and that means I can use anything in Google's font library.

@import url(',wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Solway:wght@300;400;500;700;800&display=swap');

Figuring out where to actually apply the fonts took a jaunt through the page inspector again, so I landed in a weird but functional place:

h1, h2, h3, h4, h5, h6, time, .read-more, nav, .action {
    font-family: Solway, serif;

.font.norm, body#collection article.norm, body#post article.norm, body#subpage article.norm, input#title.norm, pre.norm, span.norm, textarea.norm {
    font-family: Nunito, sans-serif;

syntax highlighting

Writefreely uses highlight.js, which has a gajillion themes available. Initially I thought I could just @import my theme of choice from a CDN. Aggravatingly, my custom CSS gets dumped into the page header before the highlight.js library loads, so my @import was overwritten. No problem: I'll just copy the raw CSS from the theme, add it to my custom CSS, and add !important everywhere.

.hljs-emphasis {
    font-style: italic !important
.hljs-tag {
    color: #62c8f3 !important
.hljs-variable {
    color: #ade5fc !important

She may not look like much, but she's got it where it counts.

#writefreely #css #webdev #accessibility #a11y