From c768b92cadd974444e258e548d41fa90909c7cda Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Sat, 6 Jun 2015 16:38:58 +0200
Subject: [PATCH] Add a few project links, improve for small screens (closes
 #4)

---
 src/render/index.html.eco        |  7 +++++
 src/render/styles/style.css.scss | 50 ++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+)

diff --git a/src/render/index.html.eco b/src/render/index.html.eco
index 9de81af..8ec6a56 100644
--- a/src/render/index.html.eco
+++ b/src/render/index.html.eco
@@ -7,6 +7,13 @@ isPage: true
 <section id="teaser">
   <h1><%= @document.title %></h1>
   <h2>Open-source group communication for the 21st century</h2>
+  <nav>
+    <ul>
+      <li><a href="https://wiki.67p.io">Wiki</a></li>
+      <li><a href="https://github.com/67P">GitHub</a></li>
+      <li><a href="https://twitter.com/KosmosHQ">Twitter</a></li>
+    </ul>
+  </nav>
 <!--
   <p>
     Kosmos is a new kind of team communication service. All of it is based on
diff --git a/src/render/styles/style.css.scss b/src/render/styles/style.css.scss
index c93abbe..e0966bf 100644
--- a/src/render/styles/style.css.scss
+++ b/src/render/styles/style.css.scss
@@ -57,6 +57,48 @@ section#teaser {
   p {
     margin-bottom: 2rem;
   }
+
+  nav {
+    display: block;
+    width: 100%;
+    ul {
+      display: block;
+      width: 100%;
+      list-style: none;
+
+      @include display(flex);
+      @include flex-direction(row);
+      @include flex-wrap(nowrap);
+      @include align-items(center);
+      @include align-content(center);
+      @include justify-content(center);
+      @include flex-grow(1);
+
+      li {
+        @include flex(1);
+        height: 48px;
+
+        a {
+          display: block;
+          margin: 0 8px;
+          height: 48px;
+          line-height: 48px;
+          font-size: 24px;
+          font-weight: 300;
+          text-decoration: none;
+          color: #fff;
+          border: 1px solid #fff;
+          border-radius: 24px;
+          @include transition(all linear 150ms);
+
+          &:hover {
+            background: rgba(255,255,255,0.2);
+            @include transition(all linear 150ms);
+          }
+        }
+      }
+    }
+  }
 }
 
 footer {
@@ -69,3 +111,11 @@ footer {
     opacity: 0.7;
   }
 }
+
+@media screen and (max-width: 600px) {
+  section#teaser {
+    h1 {
+      font-size: 72px;
+    }
+  }
+}