Prettied up the page.

metajack · Apr 10, 2011 · 3a04aef · 3a04aef
1 parent c45743d
commit 3a04aef
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 30 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 _site/
+.sass-cache
diff --git a/_layouts/base.html b/_layouts/base.html
@@ -1,19 +1,23 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>{{ page.title }}</title>
+    <title>{{ page.title }}{% if page.subtitle %} - {{ page.subtitle }}{% endif %}</title>
 
-    <link rel='stylesheet' href='styles/base.css'>
+    <link href='styles/base.css' rel='stylesheet'>
   </head>
+
   <body>
-    <div id='header'>
-      <a href='/'>
-        <img src='images/logo.png' width='240' height='39'
-             alt='strophe logo'>
-      </a>
-    </div>
+    <div id='container'>
+      <div id='header'>
+        <h1>{{ page.title }}</h1>
+        {% if page.subtitle %}
+        <p class='subtitle'>{{ page.subtitle }}</p>
+        {% endif %}
+      </div>
 
-    <div id='body'>
-      {{ content }}
+      <div id='content'>
+        {{ content }}
+      </div>
     </div>
+  </body>
 </html>
diff --git a/images/logo.png b/images/logo.png
diff --git a/index.markdown b/index.markdown
@@ -1,17 +1,34 @@
 ---
-title: Strophe - libraries for XMPP poets
+title: Strophe
+subtitle: libraries for XMPP poets
 layout: base
 ---
 
-# Introduction
+Strophe is a collection of libraries for speaking the
+[XMPP](http://xmpp.org) protocol. While most XMPP libraries and
+implementations are focused on chat-based applications, Strophe takes
+a grander view. It has been used to implement real-time games,
+notification systems, search engines, as well as traditional instant
+messaging.
 
-Strophe is a collection of libraries for speaking XMPP.
+The implementations are production ready, well documented, easy to
+use, and easy to extend.
 
 # The Strophe Family
 
-* [Strophe.js](http://strophe.im/strophejs) is a JavaScript
-  implementation targetting browser-based clients.
-* [libstrophe](http://strophe.im/libstrophe) is a C library for XMPP
-  clients and components. It has very minimal dependencies and was
-  designed with both POSIX and Windows systems in mind.
+There are currently two members of the Strophe family of libraries.
+
+## Strophe.js
+
+[Strophe.js](http://strophe.im/strophejs) is a JavaScript
+implementation targeting browser-based clients. It uses
+[BOSH](http://xmpp.org/about-xmpp/technology-overview/bosh/), a
+binding of XMPP to HTTP using long polling. Strophe.js makes creating
+real-time web applications easy.
+
+## libstrophe
+
+[libstrophe](http://strophe.im/libstrophe) is a C library for XMPP
+clients and components. It has very minimal dependencies and was
+designed with both POSIX and Windows systems in mind.
 
diff --git a/styles/base.css b/styles/base.css
@@ -1,15 +1,37 @@
 body {
-    padding: 0;
-    margin: 0;
-}
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  line-height: 1.5; }
+
+a, a:visited {
+  color: #44839c;
+  text-decoration: none;
+  border-bottom: 1px solid #b4b4b4; }
+
+a:hover, a:active {
+  color: #58a9c9; }
+
+#container {
+  width: 720px;
+  margin: 0 auto 0 auto; }
 
 #header {
-    height: 39px;
-    background-color: #444;
-    padding: 15px 15px 15px 40px;
-}
-
-#body {
-    padding: 20px;
-    margin: 20px;
-}
+  border-bottom: solid 4px #000; }
+  #header h1 {
+    font-size: 72px;
+    line-height: 81px; }
+  #header p.subtitle {
+    font-size: 27px;
+    line-height: 1; }
+
+#content {
+  margin-top: 2em; }
+  #content h1 {
+    font-size: 27px;
+    line-height: 1; }
+  #content h2 {
+    font-size: 24px;
+    line-height: 1.125; }
+  #content h3 {
+    font-size: 21px;
+    line-height: 1.286; }
diff --git a/styles/base.scss b/styles/base.scss
@@ -0,0 +1,61 @@
+$base-size: 18px;
+$rhythm: 27px;
+
+body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: $base-size;
+    line-height: $rhythm / $base-size;
+}
+
+a, a:visited {
+    color: #44839c;
+    text-decoration: none;
+    border-bottom: 1px solid #b4b4b4;
+}
+
+a:hover, a:active {
+    color: #58a9c9;
+}
+
+#container {
+    width: 720px;
+    margin: 0 auto 0 auto;
+}
+
+#header {
+    border-bottom: solid 4px #000;
+
+    h1 {
+        $size: 4 * $base-size;
+        font-size: $size;
+        line-height: 3 * $rhythm;
+    }
+
+    p.subtitle {
+        $size: 1.5 * $base-size;
+        font-size: $size;
+        line-height: $rhythm / $size;
+    }
+}
+
+#content {
+    margin-top: 2em;
+
+    h1 {
+        $size: 1.5 * $base-size;
+        font-size: $size;
+        line-height: $rhythm / $size;
+    }
+
+    h2 {
+        $size: 24px;
+        font-size: $size;
+        line-height: $rhythm / $size;
+    }
+
+    h3 {
+        $size: 21px;
+        font-size: $size;
+        line-height: $rhythm / $size;
+    }
+}