Fade in the brand heading

css/website.css

@@ -5067,6 +5067,22 @@ a.text-dark:hover, a.text-dark:focus {
 .invisible {
   visibility: hidden !important; }
 
+.fade-in {
+  opacity: 0;
+  /* make things invisible upon start */
+  -webkit-animation-name: fadein;
+  -moz-animation-name: fadein;
+  animation-name: fadein;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-timing-function: ease;
+  -moz-animation-timing-function: ease;
+  animation-timing-function: ease; }
+
 html {
   width: 100%;
   height: 100%; }
@@ -5118,14 +5134,6 @@ a {
 .hidden {
   display: none !important; }
 
-.indiechat {
-  font-size: 100px !important;
-  margin-bottom: 0 !important; }
-  .indiechat .subdued {
-    opacity: 0.15;
-    font-size: 95%;
-    word-spacing: 50px; }
-
 .byline {
   font-family: 'Muli', sans-serif;
   font-size: 28px;
@@ -5243,7 +5251,12 @@ section h4 {
   font-family: 'Baumans', cursive;
   font-size: 6em;
   margin-top: 1em;
+  margin-bottom: 0;
   color: white; }
+  .brand-heading .subdued {
+    opacity: 0.15;
+    font-size: 95%;
+    word-spacing: 50px; }
   .brand-heading .converse-svg-logo {
     height: 1.2em;
     margin-right: 0.25em; }

index.html

@@ -34,8 +34,6 @@
 		</button>
 		<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
 			<span class="page-scroll">
-
-
 				<a class="navbar-brand" href="#intro"><span class="converse-brand-heading">Converse</span></a>
 			</span>
 			<ul class="navbar-nav mt-2 mt-lg-0">
@@ -71,7 +69,7 @@
     <section id="intro" class="intro" class="container">
         <div class="row">
             <div class="col-md-12 col-md-offset-2">
-                <h1 class="brand-heading indiechat">
+                <h1 class="brand-heading fade-in">
                     <svg class="converse-svg-logo"
                         xmlns:svg="http://www.w3.org/2000/svg"
                         xmlns="http://www.w3.org/2000/svg"
@@ -94,7 +92,7 @@
                 converse<span class="subdued">.js</span></h1>
                 <p class="byline">messaging freedom</p>
                 <p class="intro-text">A free and open-source XMPP chat client in your browser</p>
-                <p>Try out the <a href="/fullscreen.html">fullpage</a> version</p>
+                <p>Try the <a href="/fullscreen.html">fullpage</a> version</p>
                 <p>
                 <a href="https://inverse.chat/#converse/room?jid=discuss@conference.conversejs.org"
                    target="_blank" rel="noopener"><img src="https://inverse.chat/badge.svg?room=discuss@conference.conversejs.org"/></a>

sass/website.scss

@@ -22,6 +22,19 @@
 @import "bootstrap/scss/close";
 @import "bootstrap/scss/utilities";
 
+@import "bourbon";
+@mixin fade-in {
+    opacity: 0;  /* make things invisible upon start */
+    @include animation-name(fadein);
+    @include animation-fill-mode(forwards);
+    @include animation-duration(1s);
+    @include animation-timing-function(ease);
+}
+
+.fade-in {
+    @include fade-in;
+}
+
 html {
     width: 100%;
     height: 100%;
@@ -84,15 +97,6 @@ a {
     display: none !important;
 }
 
-.indiechat {
-    font-size: 100px !important;
-    margin-bottom: 0 !important;
-    .subdued {
-        opacity: 0.15;
-        font-size: 95%;
-        word-spacing: 50px;
-    }
-}
 .byline {
     font-family: 'Muli', sans-serif;
     font-size: 28px;
@@ -236,8 +240,15 @@ section {
     font-family: 'Baumans', cursive;
     font-size: 6em;
     margin-top: 1em;
+    margin-bottom: 0;
     color: white;
 
+    .subdued {
+        opacity: 0.15;
+        font-size: 95%;
+        word-spacing: 50px;
+    }
+
     .converse-svg-logo {
         height: 1.2em;
         margin-right: 0.25em;