mirror of
https://github.com/wezm/wezm.net.git
synced 2024-11-10 01:42:32 +00:00
Lots of front page refinements
This commit is contained in:
Wesley Moore
parent
bc6bbc8d93
commit
d5c26ca032
4 changed files with 123 additions and 80 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<div id="header">
|
||||
<a href="/">WezM<sup>.net</sup> - ad some texture to this</a>
|
||||
<ul id="menu">
|
||||
<ul id="menu" class="inline">
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
<li><a href="/topics/">Topics</a></li>
|
||||
<li><a href="/about/">About</a></li>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,20 @@
|
|||
<!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=device-width" />
|
||||
<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>
|
||||
<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 type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAOgyewQJRALbOFE6pebbIGxT86vvqu6OnXxNObPf8e1JU6DVn3hS0DkeXsUXWU5ycqtFtNgmG_7fV2g"></script>
|
||||
<script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
|
||||
</head>
|
||||
<body>
|
||||
<%= render 'header' %>
|
||||
<div id="main">
|
||||
<div class="first column personal">
|
||||
<div id="technical" class="first column">
|
||||
<div>
|
||||
<h1>Geeky</h1>
|
||||
<ul>
|
||||
<% sorted_articles[0..9].each do |article| %>
|
||||
|
|
@ -22,15 +25,29 @@
|
|||
<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>
|
||||
<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>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column technical">
|
||||
<div id="personal" class="column">
|
||||
<div>
|
||||
<h1>Non-Geeky</h1>
|
||||
<ul>
|
||||
<li>
|
||||
<abbr class="calender date" title="2009-09-19T04:02:43+10:00">
|
||||
<span class="day">19</span>
|
||||
<span class="month">Sep</span>
|
||||
<span class="year">2009</span>
|
||||
</abbr>
|
||||
<p>
|
||||
<strong><a href="/technical/2009/09/font-smoothing-in-snow-leopard/">Font Smoothing in Snow Leopard</a></strong>
|
||||
A one sentence summary of this post would go here this one is longer then the other one.</p>
|
||||
</li>
|
||||
<% sorted_articles[0..9].each do |article| %>
|
||||
<% post_date = WezM::Helpers.post_date(article) %>
|
||||
<li>
|
||||
|
|
@ -39,53 +56,45 @@
|
|||
<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>
|
||||
<p>
|
||||
<strong><a href="<%= article.reps.first.path %>"><%= article[:title] %></a></strong>
|
||||
A one sentence summary of this post would go here.</p>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column twitter">
|
||||
<div id="twitter" class="column">
|
||||
<h1>Tweets</h1>
|
||||
<ul>
|
||||
<% 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>
|
||||
<% end %>
|
||||
<li>Loading…</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flickr">
|
||||
<!-- <h1>Photos</h1> -->
|
||||
make these monochrome
|
||||
<ul>
|
||||
<ul class="inline">
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268597148/" title="Blue Flower by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4013/4268597148_ab83667f21_s.jpg" width="75" height="75" alt="Blue Flower" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268597148/" title="Blue Flower by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4013/4268597148_ab83667f21_s.jpg" width="75" height="75" alt="Blue Flower" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267852401/" title="Wes on Steps in the Rainforest by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2677/4267852401_e2d539967b_s.jpg" width="75" height="75" alt="Wes on Steps in the Rainforest" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267852401/" title="Wes on Steps in the Rainforest by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2677/4267852401_e2d539967b_s.jpg" width="75" height="75" alt="Wes on Steps in the Rainforest" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267852153/" title="Wes and Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4021/4267852153_1060f0d092_s.jpg" width="75" height="75" alt="Wes and Manda in the Rainforest" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267852153/" title="Wes and Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4021/4267852153_1060f0d092_s.jpg" width="75" height="75" alt="Wes and Manda in the Rainforest" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268596618/" title="Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4061/4268596618_c9755d8507_s.jpg" width="75" height="75" alt="Manda in the Rainforest" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268596618/" title="Manda in the Rainforest by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4061/4268596618_c9755d8507_s.jpg" width="75" height="75" alt="Manda in the Rainforest" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268596324/" title="Mossy Path and Seat by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2755/4268596324_eaf83cde01_s.jpg" width="75" height="75" alt="Mossy Path and Seat" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268596324/" title="Mossy Path and Seat by wezm, on Flickr"><img src="http://farm3.static.flickr.com/2755/4268596324_eaf83cde01_s.jpg" width="75" height="75" alt="Mossy Path and Seat" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267851415/" title="Manda Sitting in Linden Gardens by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4049/4267851415_bd068d2d12_s.jpg" width="75" height="75" alt="Manda Sitting in Linden Gardens" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4267851415/" title="Manda Sitting in Linden Gardens by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4049/4267851415_bd068d2d12_s.jpg" width="75" height="75" alt="Manda Sitting in Linden Gardens" class="desaturate" /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268595626/" title="Tea and Coffee Supplies by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4033/4268595626_999db17916_s.jpg" width="75" height="75" alt="Tea and Coffee Supplies" /></a>
|
||||
<a href="http://www.flickr.com/photos/wezm/4268595626/" title="Tea and Coffee Supplies by wezm, on Flickr"><img src="http://farm5.static.flickr.com/4033/4268595626_999db17916_s.jpg" width="75" height="75" alt="Tea and Coffee Supplies" class="desaturate" /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -95,7 +104,6 @@
|
|||
|
|
||||
<a href="#older">Older »</a>
|
||||
</div>
|
||||
</div>
|
||||
<%= render 'footer' %>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
3
output/css/mobile.css
Normal file
3
output/css/mobile.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
#technical div, #personal div {
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
|
@ -12,12 +12,12 @@ body {
|
|||
}
|
||||
|
||||
p,li {
|
||||
font-size: 1.6em;
|
||||
font-size: 16px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em 0;
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
|
|
@ -39,23 +39,23 @@ h1,h2,h3,h4,h5,h6 {
|
|||
|
||||
/* 6,7,8,9,10,11,12,14,16,18,21,24,36,48,60,72 */
|
||||
h1 {
|
||||
font-size: 3.6em;
|
||||
font-size: 36px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2.4em;
|
||||
border-bottom: 1px solid gray;
|
||||
font-size: 24px;
|
||||
/* border-bottom: 1px solid gray;*/
|
||||
}
|
||||
h3 {
|
||||
font-size: 2.1em;
|
||||
font-size: 21px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.8em;
|
||||
font-size: 18px;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.6em;
|
||||
font-size: 16px;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.4em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -108,13 +108,13 @@ pre {
|
|||
}
|
||||
|
||||
ul#menu {
|
||||
list-style: none;
|
||||
/* list-style: none;*/
|
||||
float: right;
|
||||
margin: 0;
|
||||
/* margin: 0;*/
|
||||
padding-right: 0.25em;
|
||||
}
|
||||
ul#menu li {
|
||||
display: inline;
|
||||
/* display: inline;*/
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -142,22 +142,54 @@ ul#menu li {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Home page post listing columns */
|
||||
.column {
|
||||
width: 31%;
|
||||
float: left;
|
||||
margin-left: 2em;
|
||||
margin-bottom: 4em;
|
||||
width: 50%;
|
||||
margin: 0;
|
||||
min-width: 480px;
|
||||
}
|
||||
.first {
|
||||
margin-left: 0;
|
||||
#personal div {
|
||||
padding-right: 2em;
|
||||
}
|
||||
.column div {
|
||||
padding: 0 0 0 2em;
|
||||
}
|
||||
.column 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 ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
.column ul li {
|
||||
margin: 0 0 1em 0;
|
||||
float: left;
|
||||
}
|
||||
.column abbr {
|
||||
display: block;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
|
||||
/* Flickr thumbnails */
|
||||
.flickr {
|
||||
clear: both;
|
||||
}
|
||||
.flickr ul {
|
||||
|
||||
/* Inline flat list style */
|
||||
ul.inline {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
}
|
||||
.flickr li {
|
||||
ul.inline li {
|
||||
display: inline;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue