feat(website): finish

lifenautjoe · Nov 8, 2017 · 9bb1f85 · 9bb1f85
1 parent 60c3a19
commit 9bb1f85
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 59 deletions.
diff --git a/website/index.html b/website/index.html
@@ -28,9 +28,22 @@
 </div>
 <div class="noel-content">
     <h1 class="noel-title">
-        A universal, human-centric, replayable event emitter.
+        A universal, human-centric, replayable javascript event emitter.
     </h1>
+
+    <div class="noel-read-more">
+        <div class="github-button-container">
+            <a class="github-button" href="https://github.com/lifenautjoe/noel" data-show-count="true"
+               aria-label="Star lifenautjoe/webpack3-starter on GitHub">Star</a>
+        </div>
+    </div>
+
+    <div class="noel-read-more">
+        <h2>Installation</h2>
+        <pre><code>$ npm install noel</code></pre>
+    </div>
     <div class="noel-description">
+        <h2>Motivation</h2>
         <p>
             The world just like software is full of events. Sometimes these events while we are busy doing other things.
             Wouldn't it be nice to have a way to replay events?
@@ -46,33 +59,28 @@ <h1 class="noel-title">
         <p>
             For example, code like
         </p>
-        <pre>
-            <code class="typescript">
-// Check if there is a user in case we missed the userChanged event
+        <pre><code class="typescript">// Check if there is a user in case we missed the userChanged event
 const user = sessionService.getUser();
 if(user) updateAvatarPhoto(user)
 
 // Listen for further changes
-sessionService.listenUserChanged(updateAvatarPhoto);
-            </code>
-        </pre>
-        <span>
+sessionService.listenUserChanged(updateAvatarPhoto);</code></pre>
+        <p>
             can become
-        </span>
-        <pre>
-            <code class="typescript">sessionService.listenUserChanged(doSomethingWithUser).replay();</code>
-        </pre>
+        </p>
+        <pre><code class="typescript">sessionService.listenUserChanged(doSomethingWithUser).replay();</code></pre>
     </div>
+    <br>
     <div class="noel-read-more">
-        Interested?
-        <button>
-            Read more on GitHub
-        </button>
+        <a href="asdas" class="btn">
+            Read more @ Github
+        </a>
     </div>
     <div class="noel-author">
-        Joel Hernandez
+        A project of <a href="https://lifenautjoe.com">@lifenautjoe</a>
     </div>
 </div>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
         integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/typescript.min.js"></script>

diff --git a/website/src/styles/index.scss b/website/src/styles/index.scss
@@ -14,6 +14,11 @@ h1 {
     font-size: 140%;
 }
 
+h2{
+    font-size: 120%;
+    margin-top: 2.1rem;
+}
+
 a{
     color: inherit;
 }
@@ -29,24 +34,28 @@ code{
     padding: 1rem !important;
 }
 
-button{
+$button-color: #fb153d;
+
+.github-button-container{
+    margin-top:1rem;
+}
+
+.btn{
+    margin: 1rem;
+    display: block;
     cursor: pointer;
     outline:none;
     font-weight: 300;
-    background-color: #1dce94;
-    border: none;
-    border-radius: 500px;
     color: white;
-    padding:0.5rem 1rem;
+    background: $button-color;
+    border-radius: 500px;
+    text-decoration: none;
+    padding:0.8rem 2rem;
     transition: all 0.3s;
+    font-size: 80%;
 
-    &:hover{
-        color: #1dce94;
-        background-color: white;
-    }
-
-    &:active{
-        background-color: #cbcbcb;
+    &:hover, &:active{
+        background-color: #CE1236;
     }
 }
 
@@ -76,37 +85,66 @@ mark{
     overflow: auto;
 }
 
-    .noel-content{
-        width: 90%;
-        max-width: 700px;
-        top: 8%;
+.noel-content{
+    width: 90%;
+    max-width: 700px;
+    top: 8%;
+}
+
+$ratio: 1.5;
+
+.noel-logo{
+    margin-top: 4rem;
+    margin-bottom: 2rem;
+    position: relative;
+    margin-right: -1.5rem * $ratio;
+    z-index: 1;
+    @media only screen and (min-width : 992px) {
+        margin-top: 7rem;
     }
+}
+
+.noel-logo__circle{
+    z-index: 1;
+    position: absolute;
+    left: -1.5rem * $ratio;
+    height: 5rem * $ratio;
+    animation: rotating 7s linear infinite;
+    top: -1.3rem * $ratio;
+}
 
-    $ratio: 1.5;
-
-    .noel-logo{
-        margin-top: 4rem;
-        margin-bottom: 2rem;
-        position: relative;
-        margin-right: -1.5rem * $ratio;
-        z-index: 1;
-        @media only screen and (min-width : 992px) {
-            margin-top: 7rem;
-        }
+.noel-logo__text{
+    position: relative;
+    z-index: 2;
+    height: 25%;
+    min-height: 2.5rem * $ratio;
+}
+
+code{
+    display: block;
+}
+
+.code{
+    margin: 1rem 0;
+    background: #002b36;
+    color: #839496;
+}
+
+    .code-highlight{
+        color: #00cc06;
     }
 
-        .noel-logo__circle{
-            z-index: 1;
-            position: absolute;
-            left: -1.5rem * $ratio;
-            height: 5rem * $ratio;
-            animation: rotating 7s linear infinite;
-            top: -1.3rem * $ratio;
-        }
-
-        .noel-logo__text{
-            position: relative;
-            z-index: 2;
-            height: 25%;
-            min-height: 2.5rem * $ratio;
-        }
+.noel-read-more{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.noel-author{
+    padding: 2rem;
+    font-size: 80%;
+}
+
+.hljs{
+    border-radius: 3px;
+}