Small design and layout tweaks

Rules

@@ -48,6 +48,7 @@ end
 
 compile '*' do
   filter :rdiscount
+  layout 'page'
   layout 'default'
   filter :rubypants
 end

content/screen.sass

@@ -1,4 +1,5 @@
 $ans-serif:  Carlito, Calibri, sans-serif
+$header-colour: #242424
 
 body
   font-family: $ans-serif
@@ -134,7 +135,7 @@ body > header
   font-size: 18px
   color: white
   padding: 0.5em
-  background: #1C1C1C
+  background-color: $header-colour
 
   a
     -webkit-transition: border-bottom-color 500ms ease-out
@@ -147,16 +148,16 @@ body > header
     &:hover
       border-bottom-color: rgba(255, 255, 255, 1.0)
 
-  span
-    display: none
-
 
 #menu
   float: right
   padding-right: 0.25em
 
   li
-    font-size: inherit
+    font-size: 14px
+    font-weight: bold
+    text-transform: uppercase
+    letter-spacing: 0.5px
 
 
 #content
@@ -303,17 +304,12 @@ body.articles #content nav
 
 
 #respond
-  margin-top: 10px
+  margin: 3em 0
-  padding: 10px
-  background-color: #ddd
   clear: both
 
   h2
     margin-top: 0
 
-  .short
-    font-size: smaller
-
 #content
   .published
     font-family: $ans-serif
@@ -521,13 +517,10 @@ body.weather
   body
     font-size: 20px
 
-  body > header span
+  body > header
-    float: right
+    text-align: center
-    display: inline
-    cursor: pointer
 
   #menu
-    display: none
     float: none
     padding: 0.5em 0 0 0
     line-height: 2

layouts/_head.html

@@ -1,17 +1,20 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="initial-scale=1.0" />
 <title><%=h [@item[:title], 'WezM.net by Wesley Moore'].compact.join(' - ') %></title>
+<meta name="author" content="Wesley Moore" />
 <% if @item[:extra] %><meta name="description" content="<%=h @item[:extra] %>"><% end %>
 <% if @item[:keywords] %><meta name="keywords" content="<%=h @item[:keywords].join(',') %>"><% end %>
 <!--[if lt IE 9]>
 <script src="/js/html5.js"></script>
 <![endif]-->
-<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
+<link rel="stylesheet" href="/css/reset.css" type="text/css" />
-<link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen,projection" />
+<link rel="stylesheet" href="/css/screen.css" type="text/css" />
-<link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" media="screen" charset="utf-8" />
+<link rel="stylesheet" href="/css/rouge.css" type="text/css" />
+<link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" charset="utf-8" />
 <link rel="alternate" href="/feed/" type="application/atom+xml" title="WezM.net - All Articles" />
 <link rel="alternate" href="/technical/feed/" type="application/atom+xml" title="WezM.net - Technical Articles" />
 <link rel="alternate" href="/personal/feed/" type="application/atom+xml" title="WezM.net - Personal Articles" />
+<link rel="author" href="http://www.wezm.net/" />
 <script src="/js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/jquery.timers-1.1.2.js" type="text/javascript" charset="utf-8"></script>
 <script src="/js/jquery.prettyPhoto.js?v=3.0.1" type="text/javascript" charset="utf-8"></script>

layouts/_header.html

@@ -1,12 +1,11 @@
 <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="/articles/">Archive</a></li>
     <li><a href="/about/">About</a></li>
     <li><a href="/projects/">Projects</a></li>
     <li>
-      <a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" /></a>&nbsp;<a href="/feed/">Feed</a>
+      <a href="/feed/"><img src="/images/feed-icon.svg" width="12" height="12" alt="White Feed Icon" />&nbsp;Feed</a>
     </li>
   </nav>
 </header>

layouts/article.html

@@ -1,24 +1,19 @@
 <% post_date = WezM::Helpers.parse_post_date(@item) %>
-<% short = @item[:short_url] %>
+<article>
-<div class="published">
+  <header>
+    <h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
+    <div class="published">
       Published on
-  <abbr class="calender date" title="<%= post_date.iso8601 %>">
+      <time datetime="<%= post_date.iso8601 %>"><%= post_date.strftime('%a, %d %B %Y') %></time>
-    <span class="weekday"><%= post_date.strftime('%a') %></span>,
+    </div>
-    <span class="day"><%= post_date.day %></span>
+  </header>
-    <span class="month"><%= post_date.strftime('%B') %></span>
+  <%= yield %>
-    <span class="year"><%= post_date.year %></span>
+  <div id="respond">
-  </abbr>
-</div>
-<%= yield %>
-<div id="respond">
     <h2>
       <img src="/images/comment.svg" width="32" height="32" alt="Comment icon" class="comment align-top" />
       Stay in touch!
     </h2>
     <p>Follow me on <a href="https://twitter.com/wezm">Twitter</a>, or <a href="https://mastodon.social/@wezm">Mastodon</a>, <a href="/feed/">subscribe to the feed</a>, or <a href="mailto:wes@wezm.net">send me an email</a>.
     </p>
-
-  <div class="text-right">
-    <span class="short">Short URL: <a href="<%= short %>"><%= short %></a></span>
   </div>
-</div>
+</article>

layouts/default.html

@@ -12,7 +12,6 @@
 <body<%= %Q( class="#{@item[:body_class]}") if @item[:body_class] %>>
   <%= render '_header' %>
   <div id="content">
-    <h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
     <%= yield %>
   </div>
   <%= render '_footer' %>

layouts/page.html

@@ -0,0 +1,4 @@
+<div id="content">
+  <h1><a href="<%= @item.reps[:default].path %>"><%=h @item[:title] %></a></h1>
+  <%= yield %>
+</div>

layouts/page.yaml

@@ -0,0 +1,2 @@
+--- {}
+

lib/default.rb

@@ -2,6 +2,7 @@
 # before nanoc starts compiling.
 
 require 'json'
+require 'rouge'
 
 include Nanoc::Helpers::Rendering
 include Nanoc::Helpers::Blogging

output/js/application.js

@@ -1,8 +1,4 @@
 jQuery(function() {
-  $('body > header span').click(function() {
-    $('#menu').slideToggle('normal');
-  })
-
   /*** Article Search ***/
   function reset_search() {
     $('#articles li').css({height: 'auto', opacity: 1.0});