Site Updates: August 2015

An ongoing catalogue of Knossos Games website issues and minor updates.

Updated WordPress through v4.3.

Added footnotes plugin Easy Footnotes. This enables unobtrusive updates to older blog posts, such as this one (where I wanted to convey that the puzzle mentioned has now been posted).

Minor updates were necessary to the Logic Problems, Part 1 update. First, the Logic problem #1 coin box graphic had the same issues encountered by the Space Pods graphics. The same workaround was successfully applied, although I continue to be perplexed as to what the underlying problem is. I also increased the font size for the graphics in the solution for Logic problem #4 so as to be more readable, especially on lower resolution displays. Finally, the PDFs for each puzzle were updated to the version 7 website design, which I neglected to do in the original update.

Fixed: Links between Knossos Games puzzles and blog entries

Problem: Blog entries about specific puzzles link back to those puzzles. However, visitors who surf directly to the puzzles may not know about the blog entries about those puzzles. Up to now, links from puzzles back to blog entires have been haphazardly posted. Need an organized way to add links from puzzle web pages back to blog posts. This is necessitated by the origin story blog entires for each logic puzzle, whereas past origin story blog entries were for entire groups of puzzles (which were easier to track and link).

Solution: This is a bit of a chicken-and-egg problem. Each puzzle web page needs to be posted first, then the accompanying blog entry can be created which links back to the puzzle. Once the blog entry is generated (and the link is fixed), the web page for the puzzle can be linked back to the blog entry. It took me a little while to recognize that this is the necessary order of things, but now that I have, I’ve added this process to my workflow for each puzzle or website update.

Updated: Splash page to main site

Problem: The splash page is meant to showcase the variety of puzzles available on Knossos Games. This was originally accomplished by presenting an edge-to-edge compilation of puzzle swaths (css stylesheet code):

html { 
  background: url(../splash/splash.svg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}

This code takes a background image, centers it in both directions, and (using code specific to each browser) resizes it so that the image covers at least the size of the browser window top-to-bottom or left-to-right.

While this achieved my original objective for the splash page, it also presented certain problems. In order to cover the largest possible screens, the graphic had to be huge. But for small screens, such as mobile devices (with fixed data plans), a big graphic makes little sense. (The splash page redirected to the homepage after a few seconds, so if your data connection was lousy, it would simply skip the load.) In addition, the size of the swaths was not consistent between screen sizes/devices, or between the splash page and the rest of the website, because of the resizing.

Solution: Instead of the edge-to-edge graphic for the splash page, there is now a five swath by five swath graphic that is centered in both directions based on the specific size of the graphic (css stylesheet code):

#splash-center {
   margin: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   width: 900px;
   height: 810px;
   margin-top: -405px;
   margin-left: -450px;}

This new graphic maintains the size of swaths across the entire site regardless of screen size, and it is smaller by a full megabyte. If the screen isn’t wide or tall enough to display the full image, it’s simply cut off. If the screen is wider or taller than the image, there is empty white space. The splash page still automatically redirects to the homepage, but a link is now embedded in the graphic if the page loads quickly and you feel tired of waiting (or if javascript has been turned off).

I contemplated many different solutions to this problem. One possible solution, which I may still try at some point, is to include different sizes of graphics for the splash page, and serving the best size for each particular device. This can be accomplished using javascript.

Continuing aggravation: Drop shadows in svg files do not properly display in Safari

Problem: In recreating the splash page graphic, specifically the drop shadow for the “featured in Imagine magazine” text overlay, I ran into  a known issue in Safari: drop shadows in svg files do not properly display. Somehow, someway, I figured out how to trick Safari into displaying the drop shadow in the original, large splash graphic. But I could not figure out how I did this when recreating the image. Absolutely nothing worked.

Solution: After beating my head against the wall, I made a drop shadow by simply offsetting the text as black and translucent. (Nothing was done to blur the boundary, since that too has trouble rendering in Safari.) I’ll continue to revisit this issue as I change the new splash graphic to reflect current updates and featured puzzles.