My blog theme

[dch82]

I don’t know what I should call it.

/* martian-mono-latin-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: auto;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/martian-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

* {
  font-family: 'Martian Mono Variable', monospace;
}

.font.code,
.font.mono,
.font.wrap,
body#collection article.code,
body#collection article.mono,
body#collection article.wrap,
body#post article.code,
body#post article.mono,
body#post article.wrap,
body#subpage article.code,
body#subpage article.mono,
body#subpage article.wrap,
input#title.code,
input#title.mono,
input#title.wrap,
pre.code,
pre.mono,
pre.wrap,
span.code,
span.mono,
span.wrap,
textarea.code,
textarea.mono,
textarea.wrap {
    font-family: 'Martian Mono Variable', Hack, consolas, Menlo-Regular, Menlo, Monaco, 'ubuntu mono', monospace, monospace
}

/* Links inside blog posts */
article p a {
    color: black;
    text-decoration: none;
    border-bottom: 0.1em solid;
}

article p a:hover {
    background-color: black;
    color: white;
    text-decoration: none;
    border-bottom: 0.1em solid white;
}

header a {
    border-bottom: 0.1em solid;
    text-decoration: none;
}

header a:hover {
    background-color: #767676;
    color: white;
    text-decoration: none;
    border-bottom: 0.1em solid #767676;
}

.post-title a {
    border-bottom: 0.1em solid;
    text-decoration: none;
}

.post-title a:hover {
    background-color: #333;
    color: white;
    text-decoration: none;
    border-bottom: 0.1em solid #333;
}

header nav a:hover {
    text-decoration: none;
}

#blog-title a {
    border-bottom: 0.1em solid;
}

#blog-title a:hover {
    background-color: black;
    color: white;
    text-decoration: none;
    border-bottom: 0.1em solid black;
}

a.hashtag {
    border-bottom: 0.1em solid #333;
}

a.hashtag:hover {
    color: white;
    background-color: #333;
    text-decoration: none;
    border-bottom: 0.1em solid #333;
}

a.hashtag:hover span+span {
    text-decoration: none;
}

a.hashtag:hover span {
    color: white;
}
/* Replace this if you want to */
footer nav::before {
    content: "All copyright is wavered.\A\AWARNING: This blog kills fascists.\ARead at your own discretion.\A";
    white-space: pre-wrap;
}

As used on my blog.

[ASilentDiplomat]

Love me a good “retro” theme! Great work. My only suggestion would be to see if there’s a way to make headings flow a little better, as they don’t break up the post as much as I usually prefer. But to be clear, I’m far from an expert, so your approach may well be preferred by most people.

Out of curiosity, do you find that using a URL via @font-face works better than just @import?

[nigel]

I really like that. Nice work.