zymotux

I've never needed to use CSS before. One of the most appealing things about the Write.as blogging platform is that it gets out of your way and just lets you write! However, I thought it was time to jazz up and personalise my blog a little and thus started my descent into a wormhole of swirling CSS code and endless colour hex possibilities. Fortunately, I'd attached a bungee cord to stop me descending too far into web design and never resurfacing to the land of blogging!

That bungee cord came in the shape of my delightful little daughter, who naturally limited the time I could spend looking at things. So over the course of a couple of weeks I had a flick through the Write.as “How to” and “theme” pages here, a delve into the world of (complementary) colour hexes there, a quick detour into fonts (especially Google Font alternatives) and finally, today, a chunk of time pulling it all together and seeing what it looks like.

I'm happy with the result, particularly with finding the Kaushan Script Regular font for the overall blog title. My blog looks just different enough from vanilla Write.as. I'll probably tinker with it on and off, perhaps find my perfect sans-serif and unicode fonts instead of the defaults but for now, it's back to the blogging!

/* CSS for zymotux blog on Write.as, first created 2020-09-02, last edited 2020-09-02 */

/* Fonts used */
@import url('https://fontlibrary.org/face/kaushan-script');

/* Blog background */
body {
    background-color: #F9F6F4;
}

/* Blog header */
#blog-title a {
    color: #6d00a8;
    font-family: 'KaushanScriptRegular';
    font-weight: normal;
    font-style: normal;
    font-size: 3rem;
}
#blog-title a:hover {
    text-decoration: underline;
}
body#post #blog-title a {
    font-size: 1.5rem;
}

/* Disable post header fade effect */
body#post header {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1;
}

/* Blog description (underneath title) on index page */
header p.description {
    font-family: sans-serif;
    font-style: normal;
}

/* Pinned posts */
header nav a {
    color: #444;
    font-family: sans-serif;
    font-style: normal;
    display: inline-table;
}
header nav a:hover {
    text-decoration: underline;
}

/* "Read more..." links */
body#collection a.read-more {
    color: #444;
    text-decoration: none;
}
body#collection a:hover.read-more {
    color: #444;
    text-decoration: underline;
}

/* Links inside blog posts */
article p a {
    color: #6d00a8;
    text-decoration: none;
}
article p a:hover {
    color: #6d00a8;
    text-decoration: underline;
}

/* Blockquote */
body#collection blockquote, body#post blockquote, body#subpage blockquote {
    background: #f0e5f6;
    color: #000;
    border-left: 10px solid #6d00a8;
}

---

Entry 28 of my participation in the “100 Days to Offload” challenge – find out more and join in!

2020-09-02 #100DaysToOffload #blogging #coding #css