The CSS is below:

#post-body .e-content img {
    min-width: 100%;
    margin-left: 0px;
    position: relative;
    display: inline-box;
}

@media (min-width: 1050px) {
    #post-body .e-content > :first-child img {
        min-width: 160%;
        margin-left: -30%;
        position: relative;
        display: inline-box;
    }
}

Don't forget to check Benjamin's CSS framework, readable.css.

#CSS #Writefreely #Blog

If you want to use the same theme I'm using here right now, or you want to use it as a base to build your own, you can find the CSS below or visit Pastebin and copy it from there.

You'll notice I'm using two typefaces from Google Fonts. If you don't want to use them or you don't like Google Fonts, remove the first two lines.

Update: I switched to using CSS variables

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,200;0,300;0,400;0,700;1,200;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* The variables names are taken from:
- https://raw.githubusercontent.com/folke/tokyonight.nvim/main/lua/tokyonight/colors.lua */
:root {
    --fg: #c8d3f5;
    --fg-dark: #828bb8;
    --fg-gutter: #3b4261;
    --bg: #222436;
    --bg-dark: #1e2030;
    --bg-highlight: #2f334d;
    --dark3: #545c7e;
    --terminal-black: #444a73;
    --yellow: #ffc777;
    --orange: #ff966c;
    --magenta2: #ff007c;
    --blue: #82aaff;
    --font-text: 'Hanken Grotesk', sans-serif;
    --font-title: 'Space Grotesk', sans-serif;
}

.video {
    width: 40rem;
    max-height: 600px;
}

nav#manage ul a {
    color: var(--fg);
}

nav#manage ul li:hover {
    background: var(--dark3);
}

nav#manage ul ul {
    background: var(--dark3);
    border: 1px solid var(--fg-gutter);
}

nav#manage ul a:hover, nav#manage ul a:active, nav#manage ul a:focus {
    color: var(--yellow);
}

body {
    background-color: var(--bg);
    color: var(--fg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-title);
}

body, .font.norm, body#collection article.norm, body#post article.norm, body#subpage article.norm, input#title.norm, pre.norm, span.norm, textarea.norm, header h1 {
    font-family: var(--font-text);
}

header p.description {
    color: var(--dark3);
}

#official-writing h2, #official-writing h3, #official-writing h4, #wrapper h2, #wrapper h3, #wrapper h4, .post-title a:visited, .post-title a {
    color: var(--magenta2);
}

time, body#post article time.dt-published, body#subpage article time.dt-published {
    opacity: 0.62;
    color: var(--fg);
}

body h1 a, body header h2 a {
    color: var(--fg-dark);
}

body h1 a:hover, body header h2 a:hover, body h1 a:active, body header h2 a:active, body h1 a:focus, body header h2 a:focus {
    color: var(--yellow);
}

article a {
    color: var(--yellow);
}

body#collection a.read-more, body#subpage a.read-more {
    color: var(--orange);
}

body#post header, body#subpage header {
    opacity: 1;
}

article.norm {
    font-size: 1.05em;
}

hr {
    background-color: var(--terminal-black);
}

body footer nav {
    color: var(--fg-dark);
}

body footer nav a:link, body footer nav a:visited, body footer ul a:link, body footer ul a:visited, body footer a.home:link, body footer a.home:visited {
    color: var(--blue);
}

.post-title a.action {
    color: var(--fg) !important;
}

body#collection pre, body#post pre, body#subpage pre {
    background: var(--bg-dark);
    border: 1px solid var(--bg-highlight);
    padding: .675em 1em;
    border-radius: 0.5em;
}

/* Uncomment the rule below and replace the font names to use a custom
monospaced font for your code sharing */
/*code, textarea#embed {
    font-family: 'custom monospace font', monospace;
}*/

#Writefreely #TokyoNight #DarkTheme #Blog

The low frequency of blog posts, the fact that I have no income due to this goddamn syndrome – making it a daunting task to even cook a quick meal – and having to deal with potential issues with the theme I'm using at each new version of Hugo will result in me not renewing my domain. I have to admit I'm sad about it, but I can't continue to pay for it. Medication and utilities are a priority, not a domain name for a blog I don't update often.

The thing is, I still want to have a blog where I can write from time to time, but I don't want to deal with maintenance and infrastructure. Using a Writefreely instance allows me to focus on the writing, with the added bonus of supporting ActivityPub for federation and writing in Markdown. I've been experimenting with Writefreely as a test on another instance, and I believe this will be more than enough for what I want.

This is it for now. Have a lovely day.

#Blog #Writefreely #Writing