Styling adjustments primarily for mobile browsers

content/mobile.sass

@@ -1,10 +1,58 @@
+body.home
+  min-width: 0
+
+
+body > header span
+  float: right
+  display: inline
+  cursor: pointer
+
+#menu
+  display: none
+  float: none
+  padding: 0.5em 0 0 0
+  line-height: 2
+
+  li
+    margin: 0 1em 0 0
+
 #technical div, #personal div
   padding: 0 1em
 
 
 .column
-  min-width: 600px
+  float: none
+  width: auto
+  min-width: 0
 
 
 #content
-  min-width: 320px
+  min-width: 0
+  margin-right: 0
+  padding: 0 10px
+
+  h1
+    font-size: 30px
+  
+
+ul.articles li
+  margin: 0
+  padding-top: 0
+  height: auto
+
+#flickr
+
+  header
+    margin-left: 1em
+
+  ul
+    height: auto
+
+  li, li:first-child
+    margin: 0 0 1em 1em
+
+#respond
+  li.short
+    margin: 0.5em 0 0 0
+    float: none
+    display: block

content/screen.sass

@@ -5,7 +5,7 @@ body
   color: #223
 
   &.home
-    min-width: 520px
+    min-width: 960px
 
 
 p, li, blockquote
@@ -95,11 +95,11 @@ sup
 
 
 pre, code, tt
-  font-size: 13px
+  font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace
-  font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", fixed
 
 
 pre
+  font-size: 13px
   overflow-x: auto
 
 
@@ -126,6 +126,9 @@ body > header
     &:hover
       border-bottom-color: rgba(255, 255, 255, 1.0)
 
+  span
+    display: none
+  
 
 #menu
   float: right
@@ -143,7 +146,7 @@ body > header
 
 
 body.articles #content
-  min-width: auto
+  min-width: 0
   margin-right: 0
 
 
@@ -161,19 +164,11 @@ footer
     font-weight: 200
 
 
-.pagination
-  display: none
-  text-align: center
-
-  .newer
-    visibility: hidden
-
-
 .column
   float: left
   width: 50%
   margin: 0
-  min-width: 500px
+  min-width: 480px
 
 
 #personal div

layouts/_head.html

@@ -10,3 +10,5 @@
 <link rel="alternate" href="http://feeds.feedburner.com/wezm" type="application/atom+xml" title="WezM.net - All Articles" />
 <link rel="alternate" href="http://feeds.feedburner.com/wezm-technical" type="application/atom+xml" title="WezM.net - Technical Articles" />
 <link rel="alternate" href="http://feeds.feedburner.com/wezm-personal" type="application/atom+xml" title="WezM.net - Personal Articles" />
+<script src="/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="/js/application.js" type="text/javascript" charset="utf-8"></script>

layouts/_header.html

@@ -1,13 +1,13 @@
 <header>
+  <a href="/">WezM<sup>.net</sup></a>
+  <span>Menu</span>
   <nav id="menu" class="inline">
     <li><a href="/articles/">Articles</a></li>
     <li><a href="/contact/">Contact</a></li>
     <li><a href="/about/">About</a></li>
     <li><a href="/projects/">Projects</a></li>
     <li>
-      <a href="http://feeds.feedburner.com/wezm"><img src="/images/white-feed-icon.png" width="12" height="12" alt="White Feed Icon" /></a>
+      <a href="http://feeds.feedburner.com/wezm"><img src="/images/white-feed-icon.png" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="http://feeds.feedburner.com/wezm">Feed</a>
-      <a href="http://feeds.feedburner.com/wezm">Feed</a>
     </li>
   </nav>
-  <a href="/">WezM<sup>.net</sup></a>
 </header>

layouts/article.html

@@ -10,7 +10,7 @@
 </div>
 <%= yield %>
 <div id="respond">
-  <h2>Got Something to Add?</h2>
+  <h2>Something to Add?</h2>
   <p>Contact me by email or Twitter if you have a comment, correction or just want to get in touch.</p>
   <ul class="inline">
     <li>

output/js/application.js

@@ -115,3 +115,8 @@ var WezM = {
   }
 }
 
+jQuery(function() {
+  $('body > header span').click(function() {
+    $('#menu').slideToggle('normal');
+  })
+});