Basic first (very plain) style up

templates/all-snapshots.hamlet

@@ -1,4 +1,5 @@
 <div .container>
+    <h1>All Snapshots
     <ul>
         $forall (E.Value ident, E.Value title, E.Value uploaded, E.Value display, E.Value handle) <- stackages
             <li>

templates/default-layout-wrapper.hamlet

@@ -16,6 +16,7 @@ $newline never
         <meta name="author" content="">
 
         <meta name="viewport" content="width=device-width,initial-scale=1">
+        <link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
 
         ^{pageHead pc}
 

templates/default-layout.hamlet

@@ -1,3 +1,4 @@
+<div .wrap>
     <div .container>
         <div .navbar role=navigation>
             <div .navbar-inner>
@@ -32,3 +33,11 @@ $case cur
               ^{widget}
       $of _
           ^{widget}
+
+<div .footer>
+  <div .container>
+      <div .row>
+          <div .span12>
+              A service provided by
+              <a href="http://www.fpcomplete.com/">
+                  FP Complete

templates/default-layout.lucius

@@ -1,4 +1,64 @@
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Global styles
+   */
+
+html {
+  position:relative;
+  min-height:100%;
+}
+
+body {
+  background: #fff;
+  margin:0 0 4em;
+  padding:0;
+  font-family: 'Open Sans';
+}
+
+.wrap {
+  background:#fff;
+  padding-bottom:2em;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+h1 {
+  font-size: 30px;
+  line-height: 40px;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 25px;
+  margin-top: 15px;
+}
+
+.media-top {
+  margin-top: 20px;
+}
+
+h3 {
+  font-size: 15px;
+}
+
+code {
+  color: #9f1ec0;
+}
+
+a code {
+  color: inherit;
+  background: 0;
+  padding: 0;
+  border: 0;
+}
+
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Navigation
+   */
+
 .navbar {
+  margin-top: 10px;
+  margin-bottom: 0;
   .brand {
     color: #0088cc;
     padding-left: 0;
@@ -22,6 +82,38 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Footer
+   */
+
+.footer {
+  border-top: 1px solid #ddd;
+  background-color: #eee;
+  color: #777;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 4em;
+  line-height: 2em;
+
+  .span12 {
+    padding: 0px 15px 0 0;
+    line-height: 4em;
+  }
+}
+
+/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+   Responsiveness
+   */
+
+.container {
+  max-width: 724px;
+}
+
+.span12 {
+  width: auto;
+}
+
 @media (max-width: 979px) {
   .navbar-inner {
     padding-left: 0;

templates/homepage.hamlet

@@ -1,35 +1,87 @@
 <div .container>
-    <p>
+    <h1>
         Stackage is an infrastructure to create stable builds of complete package sets. Think “stable Hackage”.
+    <div .recommended-snapshots>
         <h2>Recommended Snapshots
         <ul .snapshots>
             $forall (E.Value ident, E.Value title, E.Value uploaded, E.Value display, E.Value handle) <- stackages
                 <li>
                     <a href=@{StackageHomeR ident}>
                         #{title}
+    <div .how-it-works>
         <h2>How Stackage Works
-    <p .muted>
+        <div .row .media-top>
-        Explanation here.
+          <div .span12>
+            <div .media>
+              <a .pull-left>
+                <img .media-object src=@{StaticR img_open_pr_png}>
+              <div .media-body>
+                <h4 .media-heading>
+                  Submission
+                <div .media>
+                  A contributor (either an author of a package, or a kind
+                  soul) submits a patch to the Github repository. The pack
+                  will be checked and then be merged in.
+            <div .media>
+              <a .pull-left>
+                <img .media-object src=@{StaticR img_jenkins_png}>
+              <div .media-body>
+                <h4 .media-heading>
+                  Testing
+                <div .media>
+                  The update is sent to a Jenkins build system at
+                  <a href="http://jenkins.stackage.org/">
+                    jenkins.stackage.org
+                  in the cloud. There is a daily build which takes
+                  about 8 hours.
+            <div .media>
+              <a .pull-left>
+                <img .media-object src=@{StaticR img_bump_png}>
+              <div .media-body>
+                <h4 .media-heading>
+                  Notification
+                <div .media>
+                  If a build failure occurs, the submitter is notified
+                   via a Github issue and pinged via their
+                   <code>@name</code>. Also, any authors of packages
+                   which now fail to build will be notified.
+            <div .media>
+              <a .pull-left>
+                <img .media-object src=@{StaticR img_stackage_png}>
+              <div .media-body>
+                <h4 .media-heading>
+                  Snapshot
+                <div .media>
+                  If the build succeeds, a new snapshot is created. The new
+                   snapshot is used by the community.
+    <div .contributing>
         <h2>Contributing
-
         <p>The steps are simple:
-
         <ul>
-        <li>Open the Stackage project on Github.
+            <li>
+                Open the
+                <a href="https://github.com/fpco/stackage">
+                    Stackage project on Github.
             <li>Fork it.
-        <li>Add a line to the Stackage.Config module.
+            <li>
+                <a href="https://github.com/fpco/stackage#get-your-package-included">
+                    Add a line to the
+                    <code>
+                        Stackage.Config
+                    module.
             <li>Push to your fork.
             <li>Open a pull request.
-
         <p> Once you have submitted the pull request, a build will be
             started. There is a dedicated jenkins server at this location:
-        jenkins.stackage.org From here you can track the progress,
+            <a href="http://jenkins.stackage.org/">
-        status and results of Stackage builds.
+                    jenkins.stackage.org.
-
+            From here you can track the progress, status and results
+            of Stackage builds.
+    <div .businesses>
         <h2>Stackage for businesses
-
         <p> We're offering custom installations for businesses who want to
             build their development platform upon Stackage. If you're
             considering this for your business and want to find out more,
-        please email us at: <a
+            please email us at:
-        href="mailto:sales@fpcomplete.com">sales@fpcomplete.com
+            <a href="mailto:sales@fpcomplete.com">
+                sales@fpcomplete.com

templates/homepage.lucius

@@ -8,3 +8,12 @@
     margin-top: 0.5em;
   }
 }
+
+.how-it-works {
+  .media .pull-left {
+    width: 100px;
+    height: 100px;
+    background: #eee;
+    border: 2px solid #eee;
+  }
+}

templates/profile.hamlet

@@ -1,4 +1,6 @@
 <div .container>
+    <h1>
+        Profile
     <div .row>
         <div .span12>
             <h2>Email addresses

templates/stackage-home.hamlet

@@ -1,3 +1,5 @@
+<div .container>
+    <h1>Hello!
     <hgroup>
         <h1>#{stackageTitle stackage}
         <h2>Uploaded by #{userDisplay user} (#{userHandle user}) on #{tshow $ stackageUploaded stackage}

templates/upload-stackage.hamlet

@@ -1,4 +1,7 @@
 <div .container>
+    <h1>Upload Snapshot
+    <div .row>
+        <div .span12>
             <form method=post action=@{UploadStackageR}?_method=PUT enctype=multipart/form-data>
                 Stackage file:
                 <input type=file name=#{fileKey}>