Sketch.Nono.Ma

Inspired by theme of Nono Martínez Alonso's blog: https://sketch.nono.ma

Many thanks to Nono for allowing us to use the theme, Jason Comely for recommending it, and Quiet Habits for helping recreate it on Write.as!

Copy Theme

CSS

/* 
   Written in 2019 by Nono Martínez Alonso

   To the extent possible under law, the author(s) have dedicated all 
   copyright and related and neighboring rights to this software to the 
   public domain worldwide. This software is distributed without any 
   warranty.

   You should have received a copy of the CC0 Public Domain Dedication 
   along with this software. If not, see 
   http://creativecommons.org/publicdomain/zero/1.0
*/

@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;
}

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

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;
}

JS

// 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;