Themes

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