feat: update website with new header (twilio-labs#19)

* feat: update website with new header * chore(logo): update better twilio logo * chore(logo): undo logo rasterization
jesuslerma · Oct 1, 2019 · be3819d · be3819d
1 parent c5e92d9
commit be3819d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/assets/open-pixel-art-logo.svg b/assets/open-pixel-art-logo.svg
diff --git a/assets/twilioBug.svg b/assets/twilioBug.svg
diff --git a/index.njk b/index.njk
@@ -14,10 +14,7 @@
   <body>
     <header>
       <hgroup>
-        <h1>Open Pixel Art</h1>
-        <h2>by
-          <a class="twilio-link" href="https://www.twilio.com/">Twilio</a>
-        </h2>
+        <h1><img class="logo" src="/assets/open-pixel-art-logo.svg" alt="Open Pixel Art by Twilio"/></h1>
       </hgroup>
       <nav>
         <ul class="nav-list">
@@ -127,14 +124,18 @@
       </section>
     </main>
     <footer class="text-center">
-      <a href="https://github.com/twilio-labs/open-pixel-art">
-        <i class="nes-icon github" aria-hidden="true"></i>
-        <span class="screenreader-only">View on GitHub</span>
-      </a>
-    </p>
-    <p>Created by
-      <a href="https://www.twilio.com/" class="twilio-link">Twilio</a>
-      with and for the community.</a>
-    <p></footer>
-  </body>
-</html>
+      <p class="footer-icons">
+        <a href="https://github.com/twilio-labs/open-pixel-art">
+          <i class="nes-icon github" aria-hidden="true"></i>
+          <span class="screenreader-only">View on GitHub</span>
+        </a>
+        <a href="https://www.twilio.com/labs?utm_source=hacktoberfest19&utm_campaign=hacktoberfest19">
+          <img src="/assets/twilioBug.svg" alt="pixelated Twilio logo" class="twilio-pixel"/>
+        </a>
+      </p>
+      <p>Created by
+        <a href="https://www.twilio.com/" class="twilio-link">Twilio</a>
+        with and for the community.</a>
+      <p></footer>
+    </body>
+  </html>
diff --git a/styles/main.css b/styles/main.css
@@ -18,6 +18,11 @@ header {
   padding-right: 20px;
 }
 
+.logo {
+  max-width: 800px;
+  max-height: 250px;
+}
+
 .nav-list {
   list-style: none;
   padding-left: 0;
@@ -66,6 +71,10 @@ main > section {
   margin-bottom: 20px;
 }
 
+footer {
+  margin-bottom: 60px;
+}
+
 footer p {
   font-family: 'Press Start 2P', cursive;
   font-size: 0.8em;
@@ -98,3 +107,19 @@ p code {
 .screenreader-only {
   display: none;
 }
+
+.twilio-pixel {
+  width: 32px;
+  height: 32px;
+}
+
+.footer-icons {
+  display: flex;
+  justify-content: center;
+}
+
+.footer-icons > a {
+  display: block;
+  margin-left: 10px;
+  margin-right: 10px;
+}