Updated mobile site version

Today, I finished the mobile layout for this site today.  It uses pure CSS to make the layout, with a bit of JavaScript to set CSS styles when the user hits the navigation pane expand button (at the top left).  The static styles are set with the following CSS selector

@media screen and (max-width: 899px){
header .top-bar-wide {display: none}
header .top-bar-narrow {display: inline-block;

To animate the page sliding to the right to reveal the navigation drawer, I apply a CSS class using some simple JavaScript

document.getElementById('wrapper').className = "slideIn hfeed";






Below are some more pictures of the mobile site.


Posted in Programming, Projects, Website and tagged , , ,
Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">