Teething Troubles: Responsive Menus in Hyde

So, after looking so nice on desktop and mobile, it turns out that dataonlygreater.com has some problems when it comes to ipads. I first noticed this on my Dad’s ipad, but there is also a neat online tool called Screenfly that will let you see your website using the resolution of many different devices. The results of looking at the Academic page using ipad resolutions were like this:

Now Hyde is a fully resposive template for Jekyll, meaning that it should display well on all devices, by rearranging itself or modifying the text size. I did make one change to the base Hyde configuration, in this respect, changing a number of the “@media” CSS commands from

@media (min-width: 48em)

to

@media (min-width: 48em) and (min-height: 32em)

The main navigation is in the side menu, so the problem with the first command was that if the screen height was small, and the width was wide, the menu would be lost and you could not navigate the site any more. This was the only “flaw” I found in the stock Hyde template.

Rather than Hyde, the problem that has shown itself with the navigation buttons on ipads is of my own doing. These navigation buttons were one of the last additions I made before launching the site (perhaps that’s why I didn’t test it as well as I should have!) and are modifications of Code a Responsive Navigation Menu by Joshua Johnson. To make them fit into the responsiveness method of Hyde, which uses min-widths, I changed the CSS styles of the menus to this:

@media (min-width: 48em) {
	.navmenu.academic nav li a {
	    width: 31%;
	    font: 400 1.5rem 'Luckiest Guy', cursive;
	    margin: 4px;
	}
}

The problem here is that I have not been very sympathetic to the way that Hyde changes with increasing width. There are, in fact, 3 different stages once the sidebar is to the left, including a font size change and a margin size change. These changes occur at 54em and 64em, with the switch to the left sidebar starting at 48em. So, I needed to add more responsiveness in the navigation buttons to cope with these changes.

My solution then was to keep the stacked menu until the font size changes at 54em and then add two more font size changes in the menu buttons at “full-screen” (80em) and an intermediate stage (72em) where the font is becoming a bit lost in the button. So the new CSS looks like this:

@media (min-width: 58em) {
	.navmenu.academic nav li a {
	    width: 32%;
	    font: 400 0.7rem 'Luckiest Guy', cursive;
	}
	.navmenu.academic nav small {
	    font: 100 0.65rem Helvetica, sans-serif;
    }
}

@media (min-width: 72em) {
	.navmenu.academic nav li a {
	    font: 400 1rem 'Luckiest Guy', cursive; 
    }
	.navmenu.academic nav small {
	    font: 100 0.7rem Helvetica, sans-serif;
    }
}

@media (min-width: 80em) {
	.navmenu.academic nav li a {
	    margin: 6px 2px;
	    font: 400 1.25rem 'Luckiest Guy', cursive;
	}
	.navmenu.academic nav small {
	    font: 100 0.8rem Helvetica, sans-serif;
    }
}

Thus we now have a functioning 3-column in page navigation menu for Hyde, and the Software page has a 2-column menu. Nonetheless, these menu solutions need a great deal of tailoring depending on the contents and the environment they are deployed into, so, sadly, I don’t think this will ever be a simple cut and paste solution for other Hyde bases projects.

Unofficial dataonlygreater.com Launch Party

I am pleased to announce the unofficial launch of www.dataonlygreater.com. Note, it is the unofficial launch in case we can have a better party with an official opening. Here is a nice picture of Augusta and I enjoying the festivities.

So what are we celebrating? Well dataonlygreater is the new conduit for me, Mathew Topper, (find out more about me here) to express my most geeky thoughts (both personal and professional) and share some of the stuff I have been working on, in some ways for the greater good, i.e. open source code.

Currently, the content here is mostly a collection of other work that was still available on the web (mathematicaltopper.wordpress.com, marineresearcher.wordpress.com) or are beyond my control or closed (www.wiki.ed.ac.uk/display/iesscicomp, www.see.ed.ac.uk/~mtopper). The wordpress blogs I will be shutting down as repeated content is bad and the inability to access the other stuff was one of my primary reasons for doing this anyway.

I should say that none of this would have been possible without the amazing piece of software that is Jekyll. Its a great system that I thoroughly recommend you try. I must also thank @mdo for developing Hyde and Joshua Lande for showing me the way. This template is the backbone of the site you see before you. There are also many little concepts and styles that I have pinched from places across the web, so thanks for sharing!

Well, that’s it. Hopefully I will be adding more content on a regular basis and improving what is already here. And, if you’re here looking for the University of Edinburgh Thesis template, don’t worry the page you need is here. Thanks for popping by!