benw2/wezm.net
1
0
Fork 0
forked from wezm/wezm.net
Code Pull requests Activity

Work on layout of archives and article page

Browse source
This commit is contained in:
Wesley Moore 2010-01-30 15:33:54 +11:00
parent 63c669e47c
commit e72cf81405
14 changed files with 145 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Rules
View file

@ -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

1
content/personal/articles.html Normal file
View file

@ -0,0 +1 @@
Hi, I'm a new item!

2
content/personal/articles.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: Personal Articles

1
content/technical/articles.html Normal file
View file

@ -0,0 +1 @@
Hi, I'm a new item!

2
content/technical/articles.yaml Normal file
View file

@ -0,0 +1,2 @@
---
title: Technical Articles

12
layouts/article.html Normal file
View file

@ -0,0 +1,12 @@
<% post_date = WezM::Helpers.post_date(@article) %>
<li>
<abbr class="calender date" title="<%= post_date.iso8601 %>">
<span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%b') %></span>
<span class="year"><%= post_date.year %></span>
</abbr>
<p>
<strong><a href="<%= @article.reps.first.path %>"><%= @article[:title] %></a></strong>
A one sentence summary of this post would go here this one is longer then the other one.
</p>
</li>

2
layouts/article.yaml Normal file
View file

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

31
layouts/articles.html
View file

@ -1,29 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=600" />
<title><%= @item[:title] %></title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="/js/articles.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="/js/articles.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<body class="articles">
<%= render 'header' %>
<div id="main">
<div id="content">
<h1><%= @item[:title] %></h1>
<ul class="articles">
<% sorted_articles[0..9].each do |article| %>
<% post_date = WezM::Helpers.post_date(article) %>
<li>
<abbr class="calender date" title="<%= post_date.iso8601 %>">
<span class="day"><%= post_date.day %></span>
<span class="month"><%= post_date.strftime('%b') %></span>
<span class="year"><%= post_date.year %></span>
</abbr>
<a href="<%= article.reps.first.path %>"><%= article[:title] %></a>
</li>
<%= render 'article', :article => article %>
<% end %>
</ul>

20
layouts/default.html
View file

@ -1,17 +1,17 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title><%= @item[:title] %> - WezM.net</title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projector" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projector" />
<script src="/js/script.js" type="text/javascript"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=600" />
<title><%= @item[:title] %></title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />
</head>
<body>
<body class="article">
<%= render 'header' %>
<div id="main">
<h1><a href="<%= @item.reps.first.path %>"><%= @item[:title] %></a></h1>
<div id="content">
<%= yield %>
</div>
<%= render 'footer' %>

54
layouts/home.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=600" />
<title><%= @item[:title] %></title>
<link rel="stylesheet" href="/css/reset.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="/css/mobile.css" type="text/css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<script src="/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<%= render 'header' %>
<div id="technical" class="column">
<div>
<h1>Geeky
<sup><a href="<%= feed_url %>"><img src="/images/black-feed-icon.png" width="12" height="12" /></a></sup>
</h1>
<ul class="articles">
<% sorted_articles[0..4].each do |article| %>
<%= render 'article', :article => article %>
<% end %>
</ul>
<a href="/technical/articles/" class="more">More</a>
</div>
</div>
<div id="personal" class="column">
<div>
<h1>Non-Geeky
<sup><a href="<%= feed_url %>"><img src="/images/black-feed-icon.png" width="12" height="12" /></a></sup>
</h1>
<ul class="articles">
<% sorted_articles[5..9].each do |article| %>
<%= render 'article', :article => article %>
<% end %>
</ul>
<a href="/personal/articles/" class="more">More</a>
</div>
</div>
<div id="flickr">
<!-- <h1>Photos</h1> -->
<ul class="inline">
<li>
<a href="http://farm3.static.flickr.com/2708/4302496460_a1ec313d06.jpg" rel="prettyPhoto[flickr]"><img src="/images/photos/4302496460_a1ec313d06.jpg" alt="Test Monochrome" /></a>
</li>
</div>
<%= render 'footer' %>
</body>
</html>

2
layouts/home.yaml Normal file
View file

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

4
output/css/mobile.css
View file

@ -1,3 +1,7 @@
#technical div, #personal div {
padding: 0 1em;
}
.column {
min-width: 600px;
}

70
output/css/style.css
View file

@ -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 */

1
output/js/home.js
View file

@ -1,4 +1,3 @@
jQuery(function () {
function populate_flickr(data, text_status) {
var ul = $("ul", "#flickr");