Created
June 16, 2011 21:16
-
-
Save joelbschwartz/1030306 to your computer and use it in GitHub Desktop.
cooktwice list view
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section> | |
<nav> | |
<ul> | |
<li><%= link_to "Index", '#' %></li> | |
<li class = "active_item"><%= "Recipes" %></li> | |
<li><%= link_to "Menu", '#' %></li> | |
</ul> | |
</nav> | |
<div id="view_list"> | |
<li class = "recipe"> | |
<a href="#" class="star"></a> | |
<h2><%= "Chile-Braised Pork Shoulder Tacos" %></h2> | |
<p class="details"><%= "Added by you, shared with 3 others, edited by 2 others, 5 comments" %></p> | |
<p class="source"><%= "Bon Apetit" %></p> | |
<div class="actions"> | |
<a href="#" class="share">Share</a> | |
</div> | |
</li> | |
---------- | |
CSS | |
.container { | |
position: relative; | |
width: 1000px; | |
} | |
body { | |
background: #f2f2f2; | |
} | |
header { | |
padding-bottom: 70px; | |
background: #fff; | |
border-bottom: solid #999 1px; | |
} | |
header img { | |
position: absolute; | |
left: 20px; | |
top: 10px; | |
} | |
section { | |
border-top: solid #999 1px; | |
font-size: 120%; | |
padding: 20px; | |
background: #fff; | |
} | |
#view_index {} | |
#view_list { | |
position: absolute; | |
display: block; | |
left: 30px; | |
right: 250px; | |
top: 130px; | |
} | |
#view_list li { | |
list-style-type: none; | |
display: block; | |
} | |
#view_list li.recipe { | |
position: relative; | |
margin-bottom: 10px; | |
padding: 10px 10px; | |
padding-left: 50px; | |
background: #eae8e8; | |
} | |
#view_list li a.star { | |
display: block; | |
position: absolute; | |
left: 10px; | |
width: 26px; | |
height: 25px; | |
background-image: url('/images/star.png'); | |
} | |
#view_list li a.unstar { | |
display: block; | |
position: absolute; | |
left: 10px; | |
width: 26px; | |
height: 25px; | |
background-image: url('/images/unstar.png'); | |
} | |
h2 { | |
position: relative; | |
font-size: 150%; | |
margin-bottom: 0px; | |
} | |
p { | |
margin-top: 0px; | |
margin-bottom: 0px; | |
} | |
p.details { | |
position: relative; | |
color: #999; | |
} | |
p.source { | |
position: relative; | |
color: #000; | |
} | |
.actions { | |
position: absolute; | |
right: 20px; | |
top: 10px; | |
padding: 0 0.7em; | |
-moz-border-radius: 10px; | |
-webkit-border-radius: 10px; | |
border-radius: 10px; | |
border: solid #999 1px; | |
color: #999; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment