Fall back to text logo on homepage

app/gabsocial/features/landing_page/index.js

@@ -19,13 +19,19 @@ class LandingPage extends ImmutablePureComponent {
 
     if (instance.isEmpty() || soapbox.isEmpty()) return null;
 
+    const siteLogo = soapbox.get('logo') ? (
+      <img alt={instance.get('title')} src={soapbox.get('logo')} />
+    ) : (
+      <h1>{instance.get('title')}</h1>
+    );
+
     return (
       <div className='public-layout'>
         <nav className='header'>
           <div className='header-container'>
             <div className='nav-left'>
               <Link className='brand' to='/'>
-                <img alt={instance.get('title')} src={soapbox.get('logo')} />
+                {siteLogo}
               </Link>
               <Link className='nav-link optional' to='/'>Home</Link>
               <Link className='nav-link' to='/about'>About</Link>
@@ -62,7 +68,7 @@ class LandingPage extends ImmutablePureComponent {
               <div className='landing-columns--left'>
                 <div className='landing__brand'>
                   <Link className='brand' to='/'>
-                    <img alt={instance.get('title')} src={soapbox.get('logo')} />
+                    {siteLogo}
                   </Link>
                   <div className='brand__tagline'>
                     <span>{instance.get('description')}</span>

app/styles/gabsocial/about.scss

@@ -663,7 +663,7 @@ $small-breakpoint: 960px;
 
   @media screen and (max-width: 767px) {
     background-image: none;
-    .brand__tagline { color: white; }
+    .brand__tagline, .brand h1 { color: white; }
     .header {
       .nav-link {
         color: white;
@@ -759,6 +759,10 @@ $small-breakpoint: 960px;
         display: none;
       }
     }
+
+    h1 {
+      font-size: 40px;
+    }
   }
 
   .directory {
@@ -926,6 +930,11 @@ $small-breakpoint: 960px;
   position: relative;
   text-decoration: none;
   margin-right: 15px;
+
+  h1 {
+    @include font-montserrat();
+    color: $gab-brand-default;
+  }
 }
 
 .brand__tagline {