Initial crack at "Legend" design

Uses the "legend" background image and simplifies the header markup and CSS a bit. The header background colors are pulled out of the fedora logo so things flow smoothly. I was going for something a bit more edgy. As of now, the design feels kind of soft. Perhaps we can spice it up later.
sinatra · Jan 21, 2009 · 6d6c13c · 6d6c13c
1 parent 6e7914d
commit 6d6c13c
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 135 deletions.
diff --git a/Thorfile b/Thorfile
@@ -28,7 +28,7 @@ class Legend < Thor
 
     def build_book
       puts "building book.html"
-      write_file "book.html", "Sinatra Book", book
+      write_file "book.html", "Sinatra: The Book", book
     end
 
     def readme

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,34 +1,43 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>{{ page.title }}</title>
-    <link href="/css/sinatra.css" rel="stylesheet" type="text/css">
-    <link href="/images/favicon.ico" rel="shortcut icon">
-  </head>
-  <body>
-    <div id="content">
-      <a href="/"><img alt="" height="108" src="/images/logo.gif" width="156"></a>
-      <div id="navigation">
-        <ul>
-          <li><a href="/">The Hat</a></li>
-          <li><a href="/book.html">The Book</a></li>
-          <li><a href="/api/index.html">The API</a></li>
-          <li><a href="http://github.com/sinatra/sinatra">The Source</a></li>
-        </ul>
-      </div>
-      <div class="inner">
-        {{ content }}
-      </div>
-    </div>
-    <script type="text/javascript">
-      var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-      document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-    </script>
-    <script type="text/javascript">
-      try {
-        var pageTracker = _gat._getTracker("UA-7097403-2");
-        pageTracker._trackPageview();
-        } catch(err) {}
-    </script>
-  </body>
+<head>
+  <title>{{ page.title }}</title>
+  <link rel='stylesheet' href='/css/legend.css' type='text/css'>
+  <link rel='shortcut icon' href='/images/favicon.ico'>
+</head>
+<body id='{{ page.id }}'>
+<div id='wrap'>
+
+  <div id='head'>
+    <h1><a href='/'><img src="/images/logo-small.gif" alt="">Sinatra</a></h1>
+    <ul>
+      <li><a href='/'>Home</a></li>
+      <li><a href='/intro.html'>Intro</a></li>
+      <li><a href='/book.html'>Book</a></li>
+      <li><a href='http://github.com/sinatra/sinatra'>Code</a></li>
+      <li><a href='/api/index.html'>RDoc</a></li>
+    </ul>
+  </div>
+
+  <div id='content'>
+    {{ content }}
+  </div>
+
+  <div id='foot'>
+  </div>
+
+</div>
+
+<!-- Google Analytics -->
+<script type="text/javascript">
+  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script type="text/javascript">
+  try {
+    var pageTracker = _gat._getTracker("UA-7097403-2");
+    pageTracker._trackPageview();
+    } catch(err) {}
+</script>
+</body>
 </html>
diff --git a/css/legend.css b/css/legend.css
@@ -0,0 +1,148 @@
+body {
+  font-family:'lucida grande', 'helvetica neue', verdana, helvetica, sans-serif;
+  background:#fff url(../images/legend.gif) no-repeat fixed right 130px;
+  color:#100;
+  line-height:1.3;
+  margin:0;
+}
+
+/* HEADER */
+#head img {
+  padding:0 20px 0 30px;
+  vertical-align:middle;
+  margin-top:-5px;
+  border:0;
+}
+#head h1 {
+  font-family:'lucida grande', verdana, helvetica, sans-serif;
+  font-size:2.3em;
+  font-weight:bold;
+  letter-spacing:0px;
+  color:#100;
+  background:#f3f1e8;
+  line-height:1;
+  margin:0;
+  padding:15px 0;
+}
+#head h1 a, #head h1 a:link, #head h1 a:visited, #head h1 a:hover {
+  color:#100;
+  text-decoration:none;
+}
+#head ul {
+  font-size:0.8em;
+  font-weight:bold;
+  background:#c7c1b5;
+  letter-spacing:1px;
+  margin:0;
+  padding:0.25em 40px;
+}
+#head ul li {
+  display:inline;
+  list-style-type:none;
+  padding:0 1.5em 0 0;
+}
+#head ul a, #head ul a:link, #head ul a:visited {
+  color:#333;
+  text-decoration:none;
+}
+#head ul a:hover {
+  color:#000;
+  text-decoration:underline
+}
+
+/* CONTENT */
+
+#content {
+  color:#222;
+  font-size:1.25em;
+  max-width:42em;
+  margin:20px 40px 0 40px;
+}
+#content h1:first-child {
+  margin-top:0;
+}
+
+/* HEADINGS */
+
+h1, h2, h3, h4, h5, h6 {
+  color:#000;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  letter-spacing:1px;
+}
+h1 {
+  font-size:230%;
+  font-family:georgia;
+  font-weight:normal;
+  margin:0.3em 0;
+}
+h2 {
+  color: #222;
+  font-size: 160%;
+  font-family:georgia;
+  font-weight:normal;
+}
+h3 {
+  font-weight: bold;
+  font-size: 110%;
+  color: #444;
+  margin: 1em 0 .2em;
+}
+h4 {
+  font-weight: bold;
+  font-size: 100%;
+  color: #100;
+}
+
+/* LINKS */
+
+a {
+  color:#1177DD;
+  text-decoration:none;
+}
+a:hover {
+  text-decoration:underline;
+}
+a img {
+  border:none;
+}
+h1 a { color:#222 }
+h2 a, h3 a { color:#333 }
+
+
+/* CODE */
+
+code, pre, textarea {
+  font-family:"Deja Vu Sans Mono", "Bitstream Vera Sans Mono", "Inconsolata", "Consolas", monospace;
+}
+pre {
+  margin:0.5em 0;
+  padding:0.5em;
+}
+pre {
+  margin:1em 0;
+  font-size:90%;
+  background-color:#f3f1e8;
+  border:1px solid #dedede;
+  padding:0.25em 0.5em;
+  line-height:1.2em;
+  color:#000;
+}
+pre code {
+  padding:0;
+  font-size:100%;
+  background-color:#f3f1e8;
+  border:none;
+}
+code {
+  font-size:90%;
+  color:#444;
+}
+
+/* MISC */
+hr {
+  margin:2em 0;
+  padding:0;
+}
+.maruku_toc {
+  margin:1em 0;
+}
diff --git a/css/sinatra.css b/css/sinatra.css
diff --git a/images/legend.gif b/images/legend.gif
diff --git a/images/logo-small.gif b/images/logo-small.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,5 @@
+---
+layout: default
+title: Sinatra
+id: home
+---