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.
accessibility
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.
fonts
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('https://fonts.googleapis.com/css2?family=Nunito:ital,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-code,
.hljs-emphasis {
font-style: italic !important
}
.hljs-section,
.hljs-tag {
color: #62c8f3 !important
}
.hljs-selector-class,
.hljs-selector-id,
.hljs-template-variable,
.hljs-variable {
color: #ade5fc !important
}
She may not look like much, but she's got it where it counts.