Centralize logo; Add footer links

src/pages/index.html

@@ -10,10 +10,10 @@
   <p>Userbase is a database and backend service, purpose-built for web apps. It is accessible directly from the browser through a very simple JavaScript SDK.</p>
 
   <h3 id="zero-management-database">Zero-management database</h3>
-  <p>Unlike a regular database, all Userbase queries run in the browser. The server-side is just a dumb data store, and there's no database to manage or worry about.</p>
+  <p>Unlike a regular database, all Userbase queries run in the browser. The server-side is just a dumb data store, and there's nothing on the backend to manage or worry about.</p>
 
   <h3 id="user-accounts">Built-in user accounts</h3>
-  <p>Userbase takes care of your user accounts. It comes with built-in APIs for user signups, logins, password resets, and access control.</p>
+  <p>Userbase takes care of your user accounts. It comes with built-in APIs for user signups, logins, and access control.</p>
 
   <h3 id="e2ee">End-to-end encryption</h3>
   <p>Userbase won't show you what your users store in your web app. It spares you from the liability of handling user data by encrypting everything in the browser, using keys that always stay with the user.</p>
@@ -44,7 +44,7 @@
   <form method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" class="validate text-center" action="https://danielvassallo.us20.list-manage.com/subscribe/post?u=e3b0fd293a0e6d7ea0080fafe&amp;id=d0aae9dd3e">
     <input type="email" value="" name="EMAIL" id="mce-EMAIL" required autocorrect="off" spellcheck="false" placeholder="Email address" class="font-light text-sm h-10 p-2 border border-gray-500 outline-none w-64 rounded my-4 inline-block">
 
-    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
+    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button hover:text-orange-700">
 
     <div class="mc-status" class="hidden"></div>
     <div style="position: absolute; left: -5000px;" aria-hidden="true">

src/pages/mailing-list.html

@@ -6,7 +6,7 @@
 
     <input type="email" value="" name="EMAIL" id="mce-EMAIL" required autocorrect="off" spellcheck="false" placeholder="Email address" class="font-light text-sm h-10 p-2 border border-gray-500 outline-none w-64 rounded my-4 inline-block">
 
-    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
+    <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button hover:text-orange-700">
 
     <div class="mc-status" class="hidden"></div>
     <div style="position: absolute; left: -5000px;" aria-hidden="true">

src/partials/footer.html

@@ -1 +1,14 @@
-<div class="font-sans tracking-tight my-10 text-xs text-center">Copyright © 2019 Encrypted Development LLC</div>
+<footer class="sm:flex sm:justify-between sm:items-center p-4 tracking-tight text-xs">
+  <div class="flex items-center justify-center sm:justify-between">
+    <div class="flex-shrink-0">
+      <div class="flex items-center justify-between">Copyright © 2019 Encrypted Development LLC</div>
+    </div>
+  </div>
+  <nav class="pt-2 pb-4 sm:flex sm:p-0 text-center sm:text-right menu">
+    <a href="#" class="block py-2 leading-none sm:px-4">Policies</a>
+    <a href="#" class="block py-2 leading-none sm:px-2">Status</a>
+    <a href="http://github.com/encrypted-dev/userbase" class="block py-2 leading-none sm:px-2">GitHub</a>
+    <a href="https://twitter.com/UserbaseHQ" class="block py-2 leading-none sm:px-2">Twitter</a>
+    <a href="#" class="block py-2 leading-none sm:px-2">About</a>
+  </nav>
+</footer>

src/partials/header.html

@@ -1,19 +1,22 @@
-<header class="sm:flex sm:justify-between sm:items-center p-4">
-  <div class="flex items-center justify-between">
-    <div class="flex-shrink-0">
-      <a href="/"><img alt="Userbase" class="h-8 sm:h-12" src="../img/logo.png"></a>
-    </div>
-    <div class="sm:hidden">
-      <button onclick="toggleMenu()" type="button" class="block text-blackish hover:text-orange-700 focus:text-orange-700 focus:outline-none">
-        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
-          <path class="hidden menu-close" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
-          <path class="menu-open" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
-        </svg>
-      </button>
+<header class="pb-4">
+  <div class="sm:flex sm:justify-end sm:items-center p-4">
+    <div class="flex items-center justify-end">
+      <div class="sm:hidden">
+        <button onclick="toggleMenu()" type="button" class="block text-blackish hover:text-orange-700 focus:text-orange-700 focus:outline-none">
+          <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
+            <path class="hidden menu-close" fill-rule="evenodd" d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
+            <path class="menu-open" fill-rule="evenodd" d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
+          </svg>
+        </button>
+      </div>
     </div>
+    <nav class="pt-2 pb-4 hidden sm:flex sm:p-0 text-lg text-center menu">
+      <a href="#" class="menu-item">Docs</a>
+      <a href="#" class="menu-item">Pricing</a>
+      <input type="button" value="Log in / Sign up" class="rounded-lg w-48 h-10 bg-yellowish font-black cursor-pointer text-gray-900 inline-block hover:text-orange-700 relative mt-2 ml-0 sm:ml-2 sm:mt-0" style="bottom: 3px;">
+    </nav>
+  </div>
+  <div class="flex justify-center mb-2">
+    <a href="/"><img alt="Userbase" id="logo" src="../img/logo.png"></a>
   </div>
-  <nav class="pt-2 pb-4 hidden sm:flex sm:p-0 text-lg text-right menu">
-    <a href="/mailing-list.html" class="block font-extrabold py-2 leading-none sm:px-4">Mailing list</a>
-    <a href="mailto:daniel@encrypted.dev" class="block font-extrabold py-2 leading-none sm:px-4">Contact</a>
-  </nav>
 </header>

src/style.css

@@ -20,12 +20,32 @@ a:hover {
   @apply text-orange-700;
 }
 
+a.menu-item {
+  @apply block font-black py-2 leading-none no-underline
+}
+
+@screen sm {
+  a.menu-item {
+    @apply px-3
+  }
+}
+
+#logo {
+  @apply w-84
+}
+
+@screen sm {
+  #logo {
+    width: 441px;
+  }
+}
+
 p {
   @apply mb-4;
 }
 
 h1 {
-  @apply text-center text-2xl font-black leading-tight tracking-tight;
+  @apply text-center text-2xl font-extrabold leading-tight tracking-tight;
 }
 
 h2 {
@@ -38,7 +58,7 @@ h3 {
 
 @screen sm {
   h1 {
-    @apply text-4xl;
+    @apply text-3xl;
   }
 
   h2 {