From e72cf8140557cc974e8c52dbc0a4816fefe155ac Mon Sep 17 00:00:00 2001 From: Wesley Moore Date: Sat, 30 Jan 2010 15:33:54 +1100 Subject: [PATCH] Work on layout of archives and article page --- Rules | 5 ++- content/personal/articles.html | 1 + content/personal/articles.yaml | 2 + content/technical/articles.html | 1 + content/technical/articles.yaml | 2 + layouts/article.html | 12 ++++++ layouts/article.yaml | 2 + layouts/articles.html | 31 ++++++--------- layouts/default.html | 22 +++++------ layouts/home.html | 54 +++++++++++++++++++++++++ layouts/home.yaml | 2 + output/css/mobile.css | 4 ++ output/css/style.css | 70 ++++++++++++++++++--------------- output/js/home.js | 1 - 14 files changed, 145 insertions(+), 64 deletions(-) create mode 100644 content/personal/articles.html create mode 100644 content/personal/articles.yaml create mode 100644 content/technical/articles.html create mode 100644 content/technical/articles.yaml create mode 100644 layouts/article.html create mode 100644 layouts/article.yaml create mode 100644 layouts/home.html create mode 100644 layouts/home.yaml diff --git a/Rules b/Rules index 2aa50f8..5c770db 100644 --- a/Rules +++ b/Rules @@ -1,7 +1,7 @@ #!/usr/bin/env ruby compile '/' do - layout 'listing' + layout 'home' end compile '/articles/', :rep => :json do @@ -10,6 +10,9 @@ end compile '/articles/' do layout 'articles' end +compile '/*/articles/' do + layout 'articles' +end compile '*' do filter :rdiscount diff --git a/content/personal/articles.html b/content/personal/articles.html new file mode 100644 index 0000000..b2cbfed --- /dev/null +++ b/content/personal/articles.html @@ -0,0 +1 @@ +Hi, I'm a new item! diff --git a/content/personal/articles.yaml b/content/personal/articles.yaml new file mode 100644 index 0000000..00a6e6c --- /dev/null +++ b/content/personal/articles.yaml @@ -0,0 +1,2 @@ +--- +title: Personal Articles diff --git a/content/technical/articles.html b/content/technical/articles.html new file mode 100644 index 0000000..b2cbfed --- /dev/null +++ b/content/technical/articles.html @@ -0,0 +1 @@ +Hi, I'm a new item! diff --git a/content/technical/articles.yaml b/content/technical/articles.yaml new file mode 100644 index 0000000..e34d3af --- /dev/null +++ b/content/technical/articles.yaml @@ -0,0 +1,2 @@ +--- +title: Technical Articles diff --git a/layouts/article.html b/layouts/article.html new file mode 100644 index 0000000..b667cc9 --- /dev/null +++ b/layouts/article.html @@ -0,0 +1,12 @@ +<% post_date = WezM::Helpers.post_date(@article) %> +
  • + + <%= post_date.day %> + <%= post_date.strftime('%b') %> + <%= post_date.year %> + +

    + <%= @article[:title] %> + A one sentence summary of this post would go here this one is longer then the other one. +

    +
    • diff --git a/layouts/article.yaml b/layouts/article.yaml new file mode 100644 index 0000000..20670d5 --- /dev/null +++ b/layouts/article.yaml @@ -0,0 +1,2 @@ +--- {} + diff --git a/layouts/articles.html b/layouts/articles.html index 8ab87fc..aacf95b 100644 --- a/layouts/articles.html +++ b/layouts/articles.html @@ -1,29 +1,22 @@ - - + + - + + <%= @item[:title] %> - - - - + + + + + - + <%= render 'header' %> -
    +

    <%= @item[:title] %>

      <% sorted_articles[0..9].each do |article| %> - <% post_date = WezM::Helpers.post_date(article) %> -
    • - - <%= post_date.day %> - <%= post_date.strftime('%b') %> - <%= post_date.year %> - - <%= article[:title] %> -
      • + <%= render 'article', :article => article %> <% end %>
    diff --git a/layouts/default.html b/layouts/default.html index 4887498..6c4f293 100644 --- a/layouts/default.html +++ b/layouts/default.html @@ -1,17 +1,17 @@ - - + + - - <%= @item[:title] %> - WezM.net - - - + + + <%= @item[:title] %> + + + - + <%= render 'header' %> -
    -

    <%= @item[:title] %>

    +

    <%= @item[:title] %>

    +
    <%= yield %>
    <%= render 'footer' %> diff --git a/layouts/home.html b/layouts/home.html new file mode 100644 index 0000000..f199615 --- /dev/null +++ b/layouts/home.html @@ -0,0 +1,54 @@ + + + + + + <%= @item[:title] %> + + + + + + + + + + <%= render 'header' %> +
    +
    +

    Geeky + +

    +
      + <% sorted_articles[0..4].each do |article| %> + <%= render 'article', :article => article %> + <% end %> +
    + More +
    +
    + +
    +
    +

    Non-Geeky + +

    +
      + <% sorted_articles[5..9].each do |article| %> + <%= render 'article', :article => article %> + <% end %> +
    + More +
    +
    + +
    + +
      +
    • + Test Monochrome +
      • +
    + <%= render 'footer' %> + + diff --git a/layouts/home.yaml b/layouts/home.yaml new file mode 100644 index 0000000..20670d5 --- /dev/null +++ b/layouts/home.yaml @@ -0,0 +1,2 @@ +--- {} + diff --git a/output/css/mobile.css b/output/css/mobile.css index 34a1181..1f4667a 100644 --- a/output/css/mobile.css +++ b/output/css/mobile.css @@ -1,3 +1,7 @@ #technical div, #personal div { padding: 0 1em; } + +.column { + min-width: 600px; +} diff --git a/output/css/style.css b/output/css/style.css index 5a7dba8..8a82148 100644 --- a/output/css/style.css +++ b/output/css/style.css @@ -1,8 +1,3 @@ -@font-face { - font-family: "Titillium"; - src: url(/fonts/TitilliumMaps26L004.otf) format("opentype"); -} - body { font-family: Constantia, Georgia, "Bitstream Vera Serif", "Liberation Serif", serif; font-size: 62.5%; @@ -118,10 +113,19 @@ ul#menu li { font-size: inherit; } -#main { - padding: 0 2em; +body.article h1 { + padding-left: 20px; + padding-right: 20px; +} + +#content { + padding: 0 20px; clear: both; } +body.article #content { + min-width: 600px; + margin-right: 40%; +} #footer { color: gray; @@ -147,7 +151,7 @@ ul#menu li { float: left; width: 50%; margin: 0; - min-width: 480px; + min-width: 400px; } #personal div { padding-right: 2em; @@ -155,36 +159,38 @@ ul#menu li { .column div { padding: 0 0 0 2em; } -.column strong { + +/* Article Listing */ +ul.articles { + list-style: none; + margin: 0; +} +ul.articles li { + margin: 0; + padding-top: 1em; + height: 80px; +} +body.articles ul.articles li { + height: 60px; +} +ul.articles li:first-child { + border-top: none; + padding-top: 1em; +} +ul.articles abbr { + display: block; + font-size: 0.8em; + color: #aaa; +} +ul.articles strong { font-family: "Helvetica Neue", Helvetica, "Liberation Sans", "Bitstream Vera Sans", Tahoma, Geneva, Arial, sans-serif; margin: 0; font-weight: 200; display: block; font-size: 18px; } -#twitter { - display: none; -} -.column p { -/* margin-bottom: 1em;*/ -} -.column ul { - list-style: none; - margin: 0; -} -.column ul li { - margin: 0; - padding-top: 1em; - height: 80px; -} -.column ul li:first-child { - border-top: none; - padding-top: 1em; -} -.column abbr { - display: block; - font-size: 0.8em; - color: #aaa; +a.more { +/* float: right;*/ } /* Inline flat list style */ diff --git a/output/js/home.js b/output/js/home.js index cf1dee2..dad8b53 100644 --- a/output/js/home.js +++ b/output/js/home.js @@ -1,4 +1,3 @@ - jQuery(function () { function populate_flickr(data, text_status) { var ul = $("ul", "#flickr");