Theme suggestion

WriteFreely Themes
5

Seemed like a fun challenge to see if I could replicate this with a write.as blog. It’s definitely not perfect and the code is still messy, but it looks pretty close (in my humble opinion) and has footnotes (they don’t work on the blog index page, but look great in the individual post). I matched the fonts as best as I could with Google Fonts. This should at least give you a good head start, you can change colors and fonts as needed.

Here’s my CSS (it’s sloppy, I know, I hack things together)

@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:400,500,600|EB+Garamond&display=swap');
.h-entry {
    border: 1px solid rgba(0,0,0,.07);
    padding: 1.75em 1em;
}
#blog-title {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: red;
    text-align: center;
}
p.description.p-note {
    font-family: 'EB Garamond', serif;
    font-size: 1.5em;
    color: red;
}
body#collection article { 
    padding: 1.75em 1em;
    max-width: 600px;
}
body#collection article p {
    font-family: 'Arial', sans-serif;
}
#wrapper h2+time {
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
}
body#collection #wrapper time {
    font-size: 14px;
    color: #7b7b7b;
    font-family: 'Libre Franklin', serif;
    font-weight: 600;
}

body#post article h2#title {
font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: red;
    font-size: 2.5em;
    text-align: center;
}
a.u-url {
    font-family: 'Barlow Condensed', sans-serif;
    text-transform: uppercase;
    color: red;
    font-size: 1.5em;
}
h2.post-title {
    text-align: center;
}

#post article p {
    font-family: Arial;
}

#post article.norm {
    line-height: 24px;
    font-size: 16px;
    max-width: 600px;
}

h1, h2, h3, h4, h5 {
    font-family: 'EB Garamond', serif;
}

body#collection article .book h1 {
    font-size: 1.75em;
}

body#post header {
    text-align: center;
}
body#post header h1 {
    font-size: 2.75em;
    color: red;
}
a.h-card {
    color: red;
}
body#post header, body#subpage header {
-webkit-opacity: 1;
opacity: 1;
}
.footnote {
    text-decoration: underline;
    color: red;
}
.footnote:hover {
    color: black;
}
.footnote-ref {
    text-decoration: underline;
    font-size: 12px;
    color: red;
}
.footnote-ref:hover {
    color: black;
}
.footnote-ref-text {
    font-size: 12px;
}

And the javascript for the footnotes, borrowed from this post:

// FOOTNOTE LINKS IN BODY TEXT
var notePattern = /\[\^(\d+)\]/g;
var noteText = "<a name=\"fn$1\"></a><sup><a class=\"footnote\" href=\"#fnref$1\">$1</a></sup>";

// REFERENCES AT THE BOTTOM
var refPattern = /\[(\d+)\](.*)/g;
var refText = "<a name=\"fnref$1\"></a><a class=\"footnote-ref\" href=\"#fn$1\">$1</a><span class=\"footnote-ref-text\">$2</span>";

var postContent = document.getElementById("post-body").innerHTML;
postContent = postContent.replace(notePattern, noteText);
postContent = postContent.replace(refPattern, refText);
document.getElementById("post-body").innerHTML = postContent;
3 Likes