Skip to content

Instantly share code, notes, and snippets.

@ofisia
Created June 7, 2011 03:58
Show Gist options
  • Save ofisia/1011664 to your computer and use it in GitHub Desktop.
Save ofisia/1011664 to your computer and use it in GitHub Desktop.
/* Colours */
body, a { color: #222; }
a { border-bottom: 1px solid #ccc; }
em { color: #999; }
/* Typography */
body { font-family: "courier new", courier, "Andale Mono"; line-height: 1.3; }
ul li, p, em { font-size: 11px; font-style: normal; }
h1, h2 { font-size: 11px; font-weight: normal; }
a { text-decoration: none; }
/* Layout */
body { padding: 10px 0px 40px; text-align: center; }
div#container { margin: 0px auto; width: 890px; padding: 5px 20px; text-align: left; /*background: url('/images/grid-bg.gif') 20px 0px;*/ }
.col { float: left; margin: 0px 0px 0px 20px; padding: 0px; }
.col .col { margin: 0px; }
.one { width: 60px; }
.two { width: 140px; }
.three { width: 220px; }
.four { width: 300px; }
.five { width: 380px; }
.six { width: 460px; }
.seven { width: 540px; }
.eight { width: 620px; }
.nine { width: 700px; }
.ten { width: 780px; }
.eleven { width: 860px; }
.twelve { width: 940px; }
p, h2 { margin: 0px 0px 5px; }
hr { display: block; clear: both; margin: 0px 0px 45px; padding: 0px; height: 0px; overflow: hidden; visibility: hidden; }
.col hr { margin: 0px 0px 15px; }
em.three { margin: 0px 0px 0px 0px; }
div#navigation { margin: -30px 0px 0px 20px; }
div#navigation ul { list-style: none; padding: 0px 20px 0px 0px; margin: 0px; }
div#navigation ul li { margin: 0px 0px 8px; }
div#navigation ul li.selected { color: #999; text-indent: -1.2em; }
div#navigation ul li.selected a { border: 0px; color: #999; border-bottom: 1px solid #ccc; cursor: default; }
div#navigation ul li em { display: block; margin: 30px 0px 0px; }
div#content { margin: 20px 0px 0px 20px; }
div#media { clear: both; padding: 30px 0px 0px 60px; }
div.media { margin: 0px 0px 10px; }
div.home div#media { padding: 0px 0px 0px 60px; }
div.description div#media { padding: 0px 0px 0px 0px; }
p#gallery-count, div#gallery-navigation { display: none; }
div#image-wrapper { overflow: hidden; width: 560px; }
div#image-wrapper div#image-holder { width: 100000000px; }
div#image-wrapper div#image-holder div.image { float: left; width: 560px; }
p#footer { margin: 0px 0px 0px 320px; display: inline; }
p#footer em { display: block; }
a.atom-rss { margin: 0px 0px 0px 6px; padding: 1px 2px 0px; font-size: 0.93em; letter-spacing: 0.08em; background: #ddd; }
/* Javascript-enabled styles */
body.js-enabled p#gallery-count, body.js-enabled div#gallery-navigation { display: block; }
body.js-enabled p#project-count { display: none; }
body.js-enabled div#media div.image { display: none; }
body.js-enabled div#media div.image:first-child { display: block; }
/* Custom styles */
body#project div#navigation li.page,
body#page div#navigation li.project {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>@title, @name's Portfolio</title>
<link rel="alternate" type="application/atom+xml" href="@root_path/?/feed/">
<link rel="stylesheet" href="@root_path/public/docs/css/screen.css" type="text/css" media="screen">
</head>
<body id="page">
<div id="container">
<h1 class="col four">
<a href="@root_path">@name</a> / @profession
</h1>
<em class="col three">@email</em>
<hr>
:navigation
<div id="content" class="col eight">
<p class="date col one">&para;</p>
<div class="description col six">
<h2><a href="@root_path">@title</a></h2>
:media
@content
</div>
</div>
<hr>
<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/?/feed/">RSS</a><br>
<em>content managed by <a href="http://www.staceyapp.com">Stacey</a></em></p>
</div>
<script src="@root_path/public/docs/js/navigation.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
<div id="navigation" class="col three">
<ul>
get "/projects" do
<li><em>@title</em></li>
foreach $children do
<li class="project">
<a href="@url">@title</a>
</li>
endforeach
end
</ul>
<ul>
get "/pagez" do
<li><em>@title</em></li>
foreach $children do
<li class="page">
<a href="@url">@title</a>
</li>
endforeach
end
</ul>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>@title, @name's Portfolio</title>
<link rel="alternate" type="application/atom+xml" href="@root_path/?/feed/">
<link rel="stylesheet" href="@root_path/public/docs/css/screen.css" type="text/css" media="screen">
</head>
<body id="project">
<div id="container">
<h1 class="col four">
<a href="@root_path">@name</a> / @profession
</h1>
<em class="col three">@email</em>
<hr>
:navigation
<div id="content" class="col eight">
<p class="date col one">@date</p>
<div class="description col six">
<h2><a href="@root_path">@title</a></h2>
@content
</div>
<hr>
<p id="project-count" class="col one"><em>&#8470;</em> @index/@siblings_count</p>
<p id="gallery-count" class="col one">
<em>&#8470;</em> <span>1/1</span>
</p>
<div id="gallery-navigation" class="col three">
<p><a href="#" id="next-image">Next image</a> <em>&rarr;</em></p>
<p><a href="#" id="previous-image">Previous image</a> <em>&larr;</em></p>
</div>
<div class="col four">
:next_page
:previous_page
</div>
:media
</div>
<hr>
<p id="footer" class="col six">&copy; Copyright @name @current_year <a class="atom-rss" href="@root_path/?/feed/">RSS</a><br>
<em>content managed by <a href="http://www.staceyapp.com">Stacey</a></em></p>
</div>
<script type="text/javascript" charset="utf-8">
document.getElementsByTagName('body')[0].className += ' js-enabled';
</script>
<script src="@root_path/public/docs/js/navigation.js" type="text/javascript" charset="utf-8"></script>
<script src="@root_path/public/docs/js/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
<script src="@root_path/public/docs/js/gallery.js" type="text/javascript" charset="utf-8"></script>
<script src="@root_path/public/docs/js/init-gallery.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment