Fix up homepage on small phones in landscape

src/assets/stylesheets/index.scss

@@ -54,6 +54,7 @@ body {
 .header-content {
   padding: 1.5em 2.5em 1.5em 2.5em;
   background-color: rgba(0, 0, 0, 0.85);
+  min-height: 90px;
   height: 90px;
   display: flex;
   border-bottom: 2px solid #242424;
@@ -194,7 +195,7 @@ body {
 .footer-content {
   padding: 1em 2.25em 1em 2.25em;
   background-color: rgba(0, 0, 0, 0.85);
-  min-height: 75px;
+  min-height: 100px;
   display: flex;
   border-top: 2px solid #242424;
   align-items: center;
@@ -218,7 +219,7 @@ body {
     }
 
     &__bottom {
-      margin-top: 4px;
+      margin-top: 8px;
 
       a {
 	color: $grey-text;

src/react-components/home-root.js

@@ -172,10 +172,8 @@ class HomeRoot extends Component {
                   </a>
                 </div>
                 <div className="footer-content__links__bottom">
-                  <FormattedMessage id="home.made_with_love" />
-                  <span style={{ fontWeight: "bold", color: "white" }}>moz://a</span>
-                  <span>
-                    &nbsp;&nbsp;|&nbsp;&nbsp;Medieval Fantasy Book by{" "}
+                  <div>
+                    Medieval Fantasy Book by{" "}
                     <a
                       target="_blank"
                       rel="noreferrer noopener"
@@ -183,7 +181,11 @@ class HomeRoot extends Component {
                     >
                       Pixel
                     </a>
-                  </span>
+                  </div>
+                  <div>
+                    <FormattedMessage id="home.made_with_love" />
+                    <span style={{ fontWeight: "bold", color: "white" }}>moz://a</span>
+                  </div>
                 </div>
               </div>
             </div>