Now, instead of having it show up under the title all the time, I also wanted it to show up to the right of the title, if the screen was wide enough.
So, if the page is being viewed on a wide screen, like on a desktop computer, the “Last Updated Date” will show up on the right side. If the page is being viewed on a small screen, like on a mobile phone, the “Last Updated Date” will show up under the title.
Here is how I made it responsive using Custom CSS:
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.
Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that you wanted to add a Previous or Next link to.
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
Update 04/26/2021: I have since taken down my Journal Entries, so the links on this post won't work anymore. However, the idea and logic described in this post, is still applicable for posts that uses index numbers for post slugs. For a working example of this, check out the posts on my photo-blog.
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 write.as sites. To make the YouTube videos I embed on write.as sites responsive, I simply followed the instructions from this Responsive Youtube Embed post. Specifically, these are the changes I added to my journal.