Theme suggestion

WriteFreely Themes
1

Could you make a theme similar to this page? https://sketch.nono.ma/the-zine

Screenshot_1
Screenshot_1.png539×908 67 KB

I like the font selection (mix of serif and san serif), spacing, and that there are footnotes…

I just did a search and see I can do footnotes - something to add to the “recipe book”?

Thanks for listening.

2

That is a beautiful theme! We can certainly look into creating a similar one. Thanks for sharing! I had not heard of Nono before but now I am really getting into his sketches, writing, and podcast.

3

While we’re at it, is there a collection of themes/CSS code that I could use as reference?

4

Hi @naveen! Yes, we have an updating blog that is a collection of themes/CSS from the Write.as community. Check it out here. Feel free to use them as a reference or copy them fully.

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
6

This is great! I also added the link styling that Nono has:

p a {
    color: #ee464c;
    text-decoration: underline;
}

What do you think @jasoncomely? I was considering putting this on the Themes blog after getting permission from Nono. Would that be okay @quiethabits?

7

Works for me @cjeller1592! That blog probably won’t ever have any real content on it, though. It’s more of a testing space.

8

Sweet! No content is no problem - what’s there is great. I also got permission from the creator of the original theme (Nono Martínez Alonso @ nono.ma) so hopefully we’ll have it up on the Themes blog later this week or at the beginning of next week.

Thanks again for doing this @quiethabits! It looks great. I’ll be sure to give you credit in the post & when promoting it!

9

Awesome! I’m going to clean the code up a bit and tweak a few things. So glad to see that themes collection growing!

1 Like
10

Cool! Just let me know when you clean it up and I’ll use the updated code.

I am glad to see it growing too! We’ve been using Write.as blogs already out there but I’ve been thinking we need more themes like this – taking from other projects/platforms and putting them into Write.as. If anyone else has suggestions along those lines (or from other Write.as blogs out there) then we’d love to hear them!