Shaping and cleanup

app/assets/images/airtable-icon.svg

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0.09468918918919078 -1 45.83829054054054 39.00004276878759" width="41.84" height="35"><defs><path d="M19.78 0.44C10.42 4.31 5.22 6.47 4.18 6.9C3.31 7.26 3.32 8.49 4.19 8.83C5.76 9.45 18.29 14.42 19.86 15.04C21.23 15.59 22.77 15.59 24.14 15.04C25.71 14.42 38.24 9.45 39.81 8.83C40.68 8.49 40.69 7.26 39.82 6.9C38.26 6.25 25.78 1.09 24.22 0.44C22.8 -0.15 21.2 -0.15 19.78 0.44" id="afxk2jVRR"></path><path d="M23.39 18.44C23.39 27.75 23.39 32.92 23.39 33.95C23.39 34.69 24.13 35.2 24.82 34.93C26.56 34.25 40.53 28.83 42.27 28.15C42.67 27.99 42.93 27.61 42.93 27.18C42.93 25.63 42.93 13.21 42.93 11.66C42.93 10.92 42.19 10.42 41.5 10.69C39.76 11.37 25.79 16.79 24.05 17.47C23.65 17.62 23.39 18.01 23.39 18.44" id="aJF2tNe0H"></path><path d="M19.31 19.24L14.13 21.74L13.61 21.99C7.05 25.14 3.4 26.88 2.67 27.23C1.98 27.57 1.09 27.06 1.09 26.29C1.09 24.83 1.09 13.18 1.09 11.73C1.09 11.45 1.24 11.21 1.43 11.03C1.51 10.95 1.6 10.88 1.69 10.83C1.96 10.67 2.33 10.63 2.64 10.76C4.3 11.41 17.57 16.67 19.23 17.32C20.07 17.66 20.14 18.84 19.31 19.24" id="b14YubYMIc"></path><path d="M19.31 19.24L14.13 21.74C6.51 15.31 2.28 11.74 1.43 11.03C1.51 10.95 1.6 10.88 1.69 10.83C1.96 10.67 2.33 10.63 2.64 10.76C4.3 11.41 17.57 16.67 19.23 17.32C20.07 17.66 20.14 18.84 19.31 19.24" id="a8kR7HrKS"></path></defs><g><g><use xlink:href="#afxk2jVRR" opacity="1" fill="#fcb400" fill-opacity="1"></use><g><use xlink:href="#afxk2jVRR" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#aJF2tNe0H" opacity="1" fill="#18bfff" fill-opacity="1"></use><g><use xlink:href="#aJF2tNe0H" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#b14YubYMIc" opacity="1" fill="#f82b60" fill-opacity="1"></use><g><use xlink:href="#b14YubYMIc" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g><g><use xlink:href="#a8kR7HrKS" opacity="1" fill="#000000" fill-opacity="0.25"></use><g><use xlink:href="#a8kR7HrKS" opacity="1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-opacity="0"></use></g></g></g></svg>

app/assets/stylesheets/application.css.scss

@@ -1,11 +1,9 @@
 @import "bulma/sass/utilities/initial-variables";
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
 @import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');
 
-$family-sans-serif: 'Roboto',
+@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Roboto:wght@100;400&display=swap');
-sans-serif;
+
-$family-secondary: 'Comfortaa',
+$family-sans-serif: 'Roboto', sans-serif;
-cursive;
 // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
 // $blue: #083d77;
 // $red: #dd1c1a;
@@ -28,8 +26,12 @@ $light: #fff;
 @import "checkmark-icon";
 @import './demo';
 
-.is-font-logo {
+.is-logo {
-  font-family: 'Lobster', cursive;
+  font-family: $family-sans-serif;
+  color: $grey;
+  a, a:visited {
+    color: $grey;
+  }
 }
 
 .card {
@@ -40,17 +42,17 @@ $light: #fff;
   height: 100vh;
 }
 
-.content {
-
-  &>h1 {
-    margin-bottom: 40px;
-  }
-}
 
 body {
   min-height: 100vh;
 }
 
+h1, h2, h3 {
+  font-family: 'Calistoga';
+  margin-bottom: 10px;
+}
+
+
 .button.google {
   background: rgb(225, 98, 89);
   color: white;
@@ -99,20 +101,6 @@ Colours
     }
 }
 
-@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
-
-h1,
-h2,
-h3 {
-    font-family: 'Calistoga';
-    margin-bottom: 10px;
-}
-p,
-a,
-span {
-    font-family: 'Open Sans', sans-serif;
-    font-weight: 400;
-}
 
 .features .columns {
   margin-bottom: 3em;
@@ -124,6 +112,13 @@ span {
 .contact-form {
   margin-top: 3em;
 }
+
+.tag-line {
+  img {
+    height: 30px;
+    vertical-align: text-bottom;
+  }
+}
 /*
 Links
 */
@@ -161,23 +156,11 @@ Hero
     top: 0;
     right: 0;
 }
-@media(min-width: 1024px) {
-    .hero-body {
-        background-image: url(../img/hero.png);
-        background-size: 30%;
-        background-position: 80% 50%;
-        background-repeat: no-repeat;
-    }
-}
 
 .call-to-action {
   margin-top: 2em;
 }
 
-@media(max-width: 1024px) {
-    margin: 0px 10px;
-}
-
 .box {
     padding-top: 30px;
     padding-bottom: 30px;

app/views/home/index.html.erb

@@ -1,17 +1,16 @@
 <div id="wrapper" class="has-text-centered">
 
-  <!-- Hero -->
   <section id="hero" class="hero is-medium">
       <div class="hero-body">
           <div class="container">
               <h1 class="is-size-1 is-size-3-mobile">
-                the form backend for designers and developers
+                The form backend for designers and developers
               </h1>
-              <p class="">
+              <p class="tag-line is-size-5">
-                Link your online forms to <span class="google-sheets">Google Sheets</span> or <span class="airtable">Airtable</span> and receive form submissions in your favorite spreadsheet tool.
+                Link your online forms to <span class="google-sheets"><%= image_tag 'google-sheets-icon.svg' %> Google Sheets</span> or <span class="airtable"><%= image_tag 'airtable-icon.svg' %> Airtable</span> and receive form submissions in your favorite spreadsheet tool.
               </p>
               <p class="call-to-action">
-                <%= link_to "Signup", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
+                <%= link_to "Get started", signup_url, class: 'button is-rounded is-primary has-text-white a-menu' %>
                 or try our <%= link_to "Live demo", demo_url %>
               </p>
           </div>
@@ -26,16 +25,14 @@
           <div class="box">
             <article class="media">
               <div class="media-left">
-                <h1 class="title">1.</h1>
+                <h3 class="title">1.</h3>
               </div>
               <div class="media-content">
-                <div class="content">
+                <h3 class="title is-size-4">Create a new form</h3>
-                  <h3 class="subtitle">Create a new form</h3>
                 <p>
                   tinyforms will automatically create and link a connected Google Sheets document for you.
                 </p>
               </div>
-              </div>
             </article>
           </div>
         </div>
@@ -44,16 +41,14 @@
           <div class="box">
             <article class="media">
               <div class="media-left">
-                <h1 class="title">2.</h1>
+                <h3 class="title">2.</h3>
               </div>
               <div class="media-content">
-                <div class="content">
+                <h3 class="title is-size-4">Point your form to our server</h3>
-                  <h3 class="subtitle">Point your online form to our server</h3>
                 <p>
                   Simply configure your form to POST to your tinyforms URL.
                 </p>
               </div>
-              </div>
             </article>
           </div>
         </div>
@@ -62,16 +57,14 @@
           <div class="box">
             <article class="media">
               <div class="media-left">
-                <h1 class="title">3.</h1>
+                <h3 class="title">3.</h3>
               </div>
               <div class="media-content">
-                <div class="content">
+                <h3 class="title is-size-4">Done!</h3>
-                  <h3 class="subtitle">Done!</h3>
                 <p>
                   tinyforms will automatically append each submission to your Google Sheets or Airtable document.
                 </p>
               </div>
-              </div>
             </article>
           </div>
         </div>

app/views/layouts/_header.html.erb

@@ -1,9 +1,9 @@
 <nav class="navbar" role="navigation" aria-label="main navigation">
   <div class="container">
     <div class="navbar-brand">
-       <a class="navbar-item is-size-4 has-text-black has-text-weight-bold is-font-logo" href="/">
+      <h1 class="navbar-item is-size-4 is-logo">
-          TinyForms
+        <a href="/">tinyfor.ms</a>
-        </a>
+      </h1>
 
       <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
         data-target="navbar-menu">