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,34 +1,43 @@
-<div .container>
+<div .wrap>
-    <div .navbar role=navigation>
-        <div .navbar-inner>
-            <a .brand href=@{HomeR}>
-                Stackage
-            <ul .nav>
-                <li>
-                    <a href=@{AllSnapshotsR}>
-                        All Snapshots
-                <li>
-                    <a href=@{UploadStackageR}>
-                        Upload
-            <ul .nav .pull-right>
-                $maybe Entity _ user <- muser
-                    <li>
-                        <a href=@{ProfileR}>
-                            <span .user-handle>
-                                #{userHandle user}
-                    <li>
-                        <a href=@{AuthR LogoutR}>Logout
-                $nothing
-                    <li>
-                        <a href=@{AuthR LoginR}>Login
-
-$maybe msg <- mmsg
     <div .container>
-        <div .alert .alter-info>#{msg}
+        <div .navbar role=navigation>
+            <div .navbar-inner>
+                <a .brand href=@{HomeR}>
+                    Stackage
+                <ul .nav>
+                    <li>
+                        <a href=@{AllSnapshotsR}>
+                            All Snapshots
+                    <li>
+                        <a href=@{UploadStackageR}>
+                            Upload
+                <ul .nav .pull-right>
+                    $maybe Entity _ user <- muser
+                        <li>
+                            <a href=@{ProfileR}>
+                                <span .user-handle>
+                                    #{userHandle user}
+                        <li>
+                            <a href=@{AuthR LogoutR}>Logout
+                    $nothing
+                        <li>
+                            <a href=@{AuthR LoginR}>Login
 
-$case cur
+    $maybe msg <- mmsg
-  $of Just (AuthR _)
+        <div .container>
-      <div .container>
+            <div .alert .alter-info>#{msg}
+
+    $case cur
+      $of Just (AuthR _)
+          <div .container>
+              ^{widget}
+      $of _
           ^{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;
@@ -37,7 +129,7 @@
   }
 }
 
-@media (max-width: 480px){
+@media (max-width: 480px) {
   .navbar .brand + .nav {
     float: none;
     display: block;

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”.
-    <h2>Recommended Snapshots
+    <div .recommended-snapshots>
-    <ul .snapshots>
+        <h2>Recommended Snapshots
-        $forall (E.Value ident, E.Value title, E.Value uploaded, E.Value display, E.Value handle) <- stackages
+        <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
+        <div .row .media-top>
+          <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>
-                <a href=@{StackageHomeR ident}>
+                Open the
-                    #{title}
+                <a href="https://github.com/fpco/stackage">
-    <h2>How Stackage Works
+                    Stackage project on Github.
-    <p .muted>
+            <li>Fork it.
-        Explanation here.
+            <li>
-    <h2>Contributing
+                <a href="https://github.com/fpco/stackage#get-your-package-included">
-
+                    Add a line to the
-    <p>The steps are simple:
+                    <code>
-
+                        Stackage.Config
-    <ul>
+                    module.
-        <li>Open the Stackage project on Github.
+            <li>Push to your fork.
-        <li>Fork it.
+            <li>Open a pull request.
-        <li>Add a line to the Stackage.Config module.
+        <p> Once you have submitted the pull request, a build will be
-        <li>Push to your fork.
+            started. There is a dedicated jenkins server at this location:
-        <li>Open a pull request.
+            <a href="http://jenkins.stackage.org/">
-
+                    jenkins.stackage.org.
-    <p> Once you have submitted the pull request, a build will be
+            From here you can track the progress, status and results
-        started. There is a dedicated jenkins server at this location:
+            of Stackage builds.
-        jenkins.stackage.org From here you can track the progress,
+    <div .businesses>
-        status and results of Stackage builds.
+        <h2>Stackage for businesses
-
+        <p> We're offering custom installations for businesses who want to
-    <h2>Stackage for businesses
+            build their development platform upon Stackage. If you're
-
+            considering this for your business and want to find out more,
-    <p> We're offering custom installations for businesses who want to
+            please email us at:
-        build their development platform upon Stackage. If you're
+            <a href="mailto:sales@fpcomplete.com">
-        considering this for your business and want to find out more,
+                sales@fpcomplete.com
-        please email us at: <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,8 +1,10 @@
-<hgroup>
+<div .container>
-    <h1>#{stackageTitle stackage}
+    <h1>Hello!
-    <h2>Uploaded by #{userDisplay user} (#{userHandle user}) on #{tshow $ stackageUploaded stackage}
+    <hgroup>
-<p>#{stackageDesc stackage}
+        <h1>#{stackageTitle stackage}
-<hr>
+        <h2>Uploaded by #{userDisplay user} (#{userHandle user}) on #{tshow $ stackageUploaded stackage}
-<p>To use, add a line like the following to ~/.cabal/config:
+    <p>#{stackageDesc stackage}
+    <hr>
+    <p>To use, add a line like the following to ~/.cabal/config:
 
-<pre>remote-repo: stackage:@{StackageHomeR ident}
+    <pre>remote-repo: stackage:@{StackageHomeR ident}

templates/upload-stackage.hamlet

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