feat(website): logo in place

lifenautjoe · Nov 8, 2017 · 60c3a19 · 60c3a19
1 parent 5dec343
commit 60c3a19
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 19 deletions.
diff --git a/website/index.html b/website/index.html
@@ -35,7 +35,7 @@ <h1 class="noel-title">
             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?
 
-            <strong>Noel is that way.</strong>
+            <strong>Noel is the way.</strong>
         </p>
         <p>
             <mark>By being able to replay events we can design reactive systems that can handle events
@@ -56,9 +56,9 @@ <h1 class="noel-title">
 sessionService.listenUserChanged(updateAvatarPhoto);
             </code>
         </pre>
-        <p>
-            becomes
-        </p>
+        <span>
+            can become
+        </span>
         <pre>
             <code class="typescript">sessionService.listenUserChanged(doSomethingWithUser).replay();</code>
         </pre>

diff --git a/website/src/assets/noel-text.svg b/website/src/assets/noel-text.svg
diff --git a/website/src/styles/index.scss b/website/src/styles/index.scss
@@ -18,6 +18,11 @@ a{
     color: inherit;
 }
 
+pre{
+    margin: 0;
+    padding: 0;
+}
+
 code{
     font-size: 70%;
     text-align: left;
@@ -77,27 +82,31 @@ mark{
         top: 8%;
     }
 
+    $ratio: 1.5;
+
     .noel-logo{
-        padding: 1.5rem;
-        min-height: 220px;
-        height: 25%;
-        width: auto;
-        display: flex;
-        align-items: center;
+        margin-top: 4rem;
+        margin-bottom: 2rem;
         position: relative;
-        justify-content: center;
+        margin-right: -1.5rem * $ratio;
+        z-index: 1;
+        @media only screen and (min-width : 992px) {
+            margin-top: 7rem;
+        }
     }
 
         .noel-logo__circle{
-            height: 75%;
-            width: auto;
+            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: absolute;
-            left: 40%;
-            top: 40%;
-            height: 30%;
-            width: auto;
+            position: relative;
+            z-index: 2;
+            height: 25%;
+            min-height: 2.5rem * $ratio;
         }