Tea Time
CSS
/*
Written in 2019 by Melyanna
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
*/
/* Use system fonts and set a background image*/
body {
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
background-image: url("https://urltobackgroundimage.net")
}
/* All text is the same size. Otherwise text in the mane page looks to tint to me*/
body#collection article p, body#post article p {
font-size:1.25rem;
}
body#collection article li, body#post article li {
font-size:1.25rem;
}
body#collection article ol, body#post article ol {
font-size:1.25rem;
}
/* Highlight system. Works great with yellow or other light colours. Remember to wrap text you want to highlight inside a <span class="highlight">text here<span> tag.*/
.highlight {
background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), pink 85%, rgba(255, 255, 255, 0));
}
/* This highlights links to pinned posts in the main page*/
.pinned {
color: #111;
background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), pink 85%, rgba(255, 255, 255, 0));
}
/* I like links at the bottom of the page to be centered.*/
.custom-nav {
text-align: center;
}
/* The teacup image near my blog title.*/
#blog-title a {
background: transparent url('https://melyanna.net/tea.png') no-repeat bottom left;
padding-left: 50px;
}
/* Fancy horizontal lines*/
hr{
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
JS
/*
Written in 2019 by Melyanna
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
*/
/* The footer */
var topP = document.createElement("p");
topP.innerHTML = '<hr><div class="custom-nav"><a href="mailto:youremail@domain.net">Email</a> // <a href="https://somelink.net">Some link</a> // <a rel="me" href="https://someotherlink.net">Some other link</a> // <a href="#">⬆</a></div>';
var cont = document.getElementById("wrapper");
if (cont !== null) {
// Add to blog index and tag pages
cont.appendChild(topP);
} else {
// Add to individual blog post page
cont = document.getElementById("post-body");
cont.insertAdjacentHTML("afterend", topP.outerHTML);
}