Navigation Placeholder

Beyond A Year With Contempo...


Blood Marble
Sphere
This is one of my classic Blood Marble spheres on a Blood Sky floor rendered using POV-Ray 3.6.
Since the last post, where I detailed my First Year With The Contempo Template, there have been some additional changes to the Anime Rating Guide. The Wallpaper Page received a makeover including new wallpapers and some CSS animation effects thanks to a page on Cool Image Captions with CSS3 by Thoriq Firdaus. The thumbnail images expand and the descriptions drop down over the thumbnails allowing visitors to read the descriptions (or not), but, still see most of the thumbnail images. Along with the new CSS animations, the page layout was changed to display the wallpapers in multiple columns. Likewise, the Anime List Page received some attention including zebra stripes and a touch of color. Under the hood, the section titles now hide themselves for small screens.
I had been using an existing image substitution gadget to swap images on-the-fly for the rating images that I use on the site. The plan was to upload a new set of rating images each time I wanted to change the look of the site and use a gadget to make the image replacements as needed. But, after seeing a page on No Image Aqua Buttons by Tomomi Imura, I was inspired to create some fancy spheres using CSS instead of images. After some trial and error, I created two different sizes -- small spheres that appear on the home page and larger spheres that appear in posts.

After changing the rating images to inline CSS, I had been reminded of some CSS I had on the site to hide the rating image placeholders and thought that I might try to place inline images into the links on the site to indication that the link will open in a new window. First, I created small icons with a transparent background and used a Base 64 Image Encoding site to encode the icons as text in the lines shown below that contain data:image/gif. Then, I came up with the following CSS to place a small icon next to any link that has _blank set for its target. There are three color variations below (blue, black and white):

a[target$="_blank"]:after {
content: url("data:image/gif;base64,R0lGODlhCAAIAJEAAACZ/////////wAAACH5BAUUAAIALAAAAAAIAAgAAAIPhC8Cmat6kFvmvSgbsxgUADs=");
position:relative;
left:3px;
margin-right:3px;
}


a[target$="_blank"]:after {
content: url("data:image/gif;base64,R0lGODlhCAAIAJEAAAAAAP///////wAAACH5BAUUAAIALAAAAAAIAAgAAAIPhC8Cmat6kFvmvSgbsxgUADs=");
position:relative;
left:3px;
margin-right:3px;
}


a[target$="_blank"]:after {
content: url("data:image/gif;base64,R0lGODlhCAAIAJEAAP///////////wAAACH5BAUUAAIALAAAAAAIAAgAAAIPhC8Cmat6kFvmvSgbsxgUADs=");
position:relative;
left:3px;
margin-right:3px;
}
From hell's heart, I stab at thee... For hate's sake, I spit my last breath at thee.
After adding a post for
Miss Kobayashi's Dragon Maid,
I wanted to start adding pull quotes to certain deserving posts. After a bit of experimentation, I decided on a format for the pull quotes. There would be a small thumbnail image and the quote would be extra-large print and aligned to the right side of the page.
After testing the site on the small screen, specifically a Samsung S3, I found that the site performs reasonably well in vertical mode and is somewhat less usable in horizontal mode as the browser controls leave only a small viewing area, through which, the site can be navigated. Based on my experience with the small screen, I made some minor tweaks for narrow screens like removing the spacer between the popular and random post links, so, that the links would stack nicely on the small screen. But, even without my tweaks, surprisingly, the vanilla Contempo template performs reasonably well on the small screen out of the box.

Another major change was to adapt the site for larger screens by allowing the font size and the width of the content area on the home page to increase with the screen size. I have a fairly small screen, but, I know that some of you out there (you know who you are), have really wide screens and the Contempo template is not very well optimized for extra-wide screens. I also adjusted the size of the popular and random posts links at the bottom of the page, so, that they would increase automatically from 72x72 to 100x100 with larger screen sizes. Also, since the sidebar is visible in wide screens, I decided to add a bit of color to the sidebar by adding images to the link list.

One of the nagging annoyances with the Contempo template is that the page title ins't always centered across the various incarnations of the header. It took quite a bit of trial and error, but, I finally (hopefully) managed to get the title centered consistently across the home page, the post pages and the sticky pages. This is actually the third time that I supposedly fixed this issue so, I'm crossing my fingers and knocking on wood in the hopes that third time is the charm.
Way back in the misty dawn of time, I had a ratings page for my anime soundtrack CDs. Initially, after Migrating my CDs into iTunes, I briefly considered using the iTunes rating system to rate my anime soundtrack CDs and then, perhaps export that list for use in an anime CD ratings page, but, eventually that idea died a quiet death. Recently, I thought it would be a good to revisit that idea by including CD Ratings for specific posts for which I have both the anime and the soundtrack CD. The rating system I use for CDs differs somewhat from the anime ratings in that the CD ratings are determined by the percentage of tracks that I like on a given CD:
Gargantia on the Verdurous Planet OST CD
  • A rating of 1 is for CDs that have at least one like and less than 20% likes in total.
  • A rating of 2 is for CDs that have at least 20% likes and less than 50% likes in total.
  • A rating of 3 is for CDs that have at least 50% likes and less than 80% likes in total.
  • And last, but, not least, a rating of 4 is for CDs that have at least 80% likes.
By the way, CDs that don't have any likes, don't get listed -- they die unhappy deaths and are never heard from again. As you might imagine, this rating system tends to discourage CDs with large numbers of tracks or CD sets with multiple disks. This was the case with the Gargantia on the Verdurous Planet soundtrack which received a 2 out of 4 for its two-disc set, but, if I only counted one disc in the set, it would have received a 4 out of 4.
Way back in the misty dawn of time, when the Contempo template had just been released, I liked the idea of a featured post, but, the out-of-the-box functionality didn't really meet my specific needs, so, with this latest set of revisions, I decided to revive the idea of a featured post by adapting an existing Contempo Two-column Format gadget to simulate a featured post by simply making the first post on the page be full width. This change caused the page curling effect to go horribly wrong, as the styling for full-width posts differed from two-column posts, so, I ended up eliminating the page curling effect. In addition, this change seems to work best with an odd number of posts, so, I changed the post options to display nine posts rather than ten.

Behind the scenes, I had noticed some odd search results in the user stats provided by Blogger where the search results would incorrectly point to the home page for content that wasn't on the home page. After some poking around, the issue was traced to the popular posts gadget. In the inner workings of the popular posts gadget, the post snippet text was being rendered and search engines were picking up the snippet text even though the snippet text was not visible. The fix was fairly simple -- I had to edit the popular post gadget and uncheck the box for for snippets. Of course, I had to wait for the site to be re-indexed by various search engines, but, eventually the search results did return to normal.

I updated most of the posts throughout the site to include, where applicable, trailers. Whenever possible, I tried to use trailers from official sources, but, I've been collecting anime for many years and some of the anime referenced in my posts are either very old or very unloved or both. As a general rule, since I try very hard keep my content reasonably family friendly, I try not to link to material that requires a content warning. So, when it comes to the Hentai titles, with the exceptions of Urotsukidoji and Koe de Oshigoto, there are simply no trailers available that I can use in a reasonably family friendly fashion.

Windows 7 mascot, Madobe Nanami, appears in an ad with English subtitles. Enjoy.