Made intro page more mobile-friendly (#5)

src/index.css

@@ -122,3 +122,7 @@ div.ui.card.intro {
   bottom: 0px;
   left: 25px;
 }
+
+.content .ui.image.blockImage {
+  display: block;
+}

src/intro.tsx

@@ -1,7 +1,7 @@
 import * as queryString from 'query-string';
 import * as React from 'react';
 import logo from './topola.jpg';
-import {Card, Grid, Image} from 'semantic-ui-react';
+import {Card, Grid, Image, Responsive} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 
@@ -22,25 +22,8 @@ function formatBuildDate(dateString: string) {
 
 /** The intro page. */
 export function Intro() {
-  return (
-    <div id="content">
-      <div className="backgroundImage" />
-      <Card className="intro">
-        <Card.Content>
-          <Card.Header>
-            <FormattedMessage
-              id="intro.title"
-              defaultMessage="Topola Genealogy Viewer"
-            />
-          </Card.Header>
-        </Card.Content>
-        <Card.Content>
-          <Grid>
-            <Grid.Row>
-              <Grid.Column width={5}>
-                <Image src={logo} alt="Topola logo" />
-              </Grid.Column>
-              <Grid.Column width={11}>
+  const contents = (
+    <>
       <p>
         <FormattedMessage
           id="intro.description"
@@ -105,10 +88,7 @@ export function Intro() {
       </ul>
       <p>
         <b>
-                    <FormattedMessage
-                      id="intro.privacy"
-                      defaultMessage="Privacy"
-                    />
+          <FormattedMessage id="intro.privacy" defaultMessage="Privacy" />
         </b>
         {': '}
         <FormattedMessage
@@ -122,9 +102,7 @@ export function Intro() {
           }
           values={{
             link: (
-                        <a href="https://cors-anywhere.herokuapp.com/">
-                          cors-anywhere
-                        </a>
+              <a href="https://cors-anywhere.herokuapp.com/">cors-anywhere</a>
             ),
           }}
         />
@@ -140,9 +118,40 @@ export function Intro() {
         </a>
         )
       </p>
-              </Grid.Column>{' '}
-            </Grid.Row>{' '}
-          </Grid>
+    </>
+  );
+
+  return (
+    <div id="content">
+      <div className="backgroundImage" />
+      <Card className="intro">
+        <Responsive as={Card.Content} minWidth={768}>
+          <Card.Header>
+            <FormattedMessage
+              id="intro.title"
+              defaultMessage="Topola Genealogy Viewer"
+            />
+          </Card.Header>
+        </Responsive>
+        <Card.Content>
+          <Responsive as={Grid} minWidth={768}>
+            <Grid.Row>
+              <Grid.Column width={5}>
+                <Image src={logo} alt="Topola logo" />
+              </Grid.Column>
+              <Grid.Column width={11}>{contents}</Grid.Column>
+            </Grid.Row>
+          </Responsive>
+          <Responsive maxWidth={767}>
+            <Image
+              src={logo}
+              alt="Topola logo"
+              centered={true}
+              size="tiny"
+              className="blockImage"
+            />
+            {contents}
+          </Responsive>
         </Card.Content>
       </Card>
     </div>