Option 1: CSS
I got this idea of customizing the footer via CSS after looking at Robert Xu's Write.as powered site. It puzzled me that I could not highlight the text in the footer. After viewing the page source, I finally figured out that it was CSS trickery.
So, anyway here we are. To customize the footer using CSS, all you need to do is modify the following CSS script, then add it to the Custom CSS settings for your website.
Just figured out how to change the order of the pinned pages on this write.as powered site. The order is based off when you pin a page. The most recent pinned page shows up at the end of the list. So, then it's simply a matter of unpinning pages, then pinning them again in a certain order, right? Yes and no.
The problem is that the “Pin” functionality is only available when viewing the list of posts on your homepage. Once you unpin a page that was written say, months or even years ago, you would have to scroll back possibly through multiple pages to find the post you want to pin.
My solution to this was to first update the “Created” date metadata, setting it to “now” or today's date. Then you can unpin it and it should show up as the first post on your homepage. Now, you can easily pin it again.
If you wanted to retain the original “Created” date value, you can write it down before you start updating it. Or you can just download/export a backup of your site before attempting this.
In Part 1, I covered how I generated links to the Previous and Next post for my “indexed” journal entries. In this post, I'll talk about how I generated the links for non-indexed journal entries.
Handling Old Journal Entries
To make navigation work between blog posts in a series, I made use of a standard format for post slugs/URLs. I call them “indexed” entries because I added an index to the end of the slug/URL. For example, “journal-entry-001”, “journal-entry-002”, “journal-entry-003” and so on. It's really just a way to help me figure out the sequence of posts.
var element = document.querySelector('meta[property="og:url"]');
var content = element && element.getAttribute("content");
// Get post slug
var postSlug = content.split('/').pop();
var postIndex = postSlug.split('-').pop();
Coney complained to me this morning that the Youtube videos on my latest music log entry were getting cut off when viewed from her phone. I've known about this issue for awhile but didn't really try to find a solution for it. Well, today I did and it turns out to be really easy.
The issue stems from the fact that I have to use iframes to embed videos on this site. To make the Youtube videos I embed on this Write.as site responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I made for this site.