From af340d9efe398a54db7bfee21ca81fce22cb05f0 Mon Sep 17 00:00:00 2001
From: Wesley Moore <wez@wezm.net>
Date: Wed, 30 Jun 2010 12:26:30 +1000
Subject: [PATCH] Styling adjustments primarily for mobile browsers

---
 content/mobile.sass      | 52 ++++++++++++++++++++++++++++++++++++++--
 content/screen.sass      | 21 +++++++---------
 layouts/_head.html       |  2 ++
 layouts/_header.html     |  6 ++---
 layouts/article.html     |  2 +-
 output/js/application.js |  5 ++++
 6 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/content/mobile.sass b/content/mobile.sass
index 5eb2238..6e49c21 100644
--- a/content/mobile.sass
+++ b/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
diff --git a/content/screen.sass b/content/screen.sass
index a0e1147..a4c65d7 100644
--- a/content/screen.sass
+++ b/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", fixed
+  font-family: Consolas, "Andale Mono", "Liberation Mono", Menlo, Monaco, "Bitstream Vera Sans Mono", monospace
 
 
 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
diff --git a/layouts/_head.html b/layouts/_head.html
index e9d8de5..598b27f 100644
--- a/layouts/_head.html
+++ b/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>
diff --git a/layouts/_header.html b/layouts/_header.html
index 7b86c8e..5419a57 100644
--- a/layouts/_header.html
+++ b/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">Feed</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>
     </li>
   </nav>
-  <a href="/">WezM<sup>.net</sup></a>
 </header>
diff --git a/layouts/article.html b/layouts/article.html
index da4573c..95952c8 100644
--- a/layouts/article.html
+++ b/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>
diff --git a/output/js/application.js b/output/js/application.js
index 10c1117..e929ca8 100644
--- a/output/js/application.js
+++ b/output/js/application.js
@@ -115,3 +115,8 @@ var WezM = {
   }
 }
 
+jQuery(function() {
+  $('body > header span').click(function() {
+    $('#menu').slideToggle('normal');
+  })
+});