Propose a more precise tagline (#256)

* Move to a more precise tagline

* Apply some revisions based on feedback

* Adjust font size and tweak copy further

* Fix some design warts

_includes/hero.html

@@ -4,14 +4,16 @@
     {% include bash-window.html %}
 
     <section class="hero__copy">
-      <a href="https://medium.com/opentracing/february-2018-opentracing-monthly-newsletter-7700560e9b04" target="_blank">February 2018: OpenTracing Project Update</a>
-      <h1 class="bariol-thin">A vendor-neutral open standard for distributed tracing.</h1>
+      <h1 class="bariol-thin">Vendor-neutral APIs and instrumentation for distributed tracing</h1>
+      <div class="libraries">
       <h2 class="dark-blue">Libraries available in {{ site.data.language.array.size }} languages</h2>
       <p class="dark-blue">
       {% for language in site.data.language.array %}
         <a href="{{language.url}}">{{ language.name }}</a>{% if forloop.last == false %},{% endif %}
       {% endfor %}
       </p>
+      </div>
+      <a href="https://medium.com/opentracing/february-2018-opentracing-monthly-newsletter-7700560e9b04" target="_blank">February 2018: OpenTracing Project Update</a>
     </section>
   </div>
 

_sass/_components/_hero.scss

@@ -43,19 +43,26 @@ $hero-height: 75vh;
     max-width: 600px;
     flex: 1;
 
-    h2 {
-      font-family: 'bariolthin';
-      font-weight: 600;
-      display: inline-block;
-      border-top: 1px solid rgba(white, 0.25);
-      padding-top: 35px;
-      margin-top: 25px;
-      font-size: 1.74rem;
+    .libraries {
+      h2 {
+        font-family: 'bariolthin';
+        font-weight: 600;
+        display: inline-block;
+        border-top: 1px solid rgba(white, 0.25);
+        padding-top: 20px;
+        margin-top: 10px;
+        font-size: 1.74rem;
+      }
+      margin-bottom: 45px;
+
+      a {
+        font-size: 1.2rem;
+      }
     }
 
     a {
       text-decoration: underline;
-      font-size: 1.3rem;
+      font-size: 1.5rem;
     }
   }
 
@@ -72,7 +79,7 @@ $hero-height: 75vh;
     z-index: 1;
   }
 
-  @media (max-width: $small) {
+  @media (max-width: $medium) {
 
     &__content {
       //padding: 20vh 0;

_sass/_typography.scss

@@ -1,4 +1,4 @@
-$h1-font-size: 3rem;
+$h1-font-size: 2.5rem;
 $h2-font-size: 2rem;
 $h3-font-size: 1.75rem;
 $h4-font-size: 1.5rem;
@@ -76,4 +76,4 @@ big {
   html {
     font-size: 70%;
   }
-}
+}