Fixing examples

praneshr · praneshr · commit 57e73480aaf9 · 2019-07-15T18:55:06.000+05:30
diff --git a/examples/src/index.ejs b/examples/src/index.ejs
@@ -5,23 +5,23 @@
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
     <title>React Diff Viewer</title>
     <meta name="author" content="Pranesh Ravi" />
-    <meta name="description" content="A simple and beautiful text diff viewer made with Diff and React." />
+    <meta name="description" content="A simple and beautiful text diff viewer component made with diff and React" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="theme-color" content="#704DFF" />
 
-    <meta content="https://image.ibb.co/hGUuTL/react-diff-viewer.png" property="og:image"/>
+    <meta content="https://i.ibb.co/ChNkdjs/Banner.png" property="og:image"/>
     <meta content="React Diff Viewer" property="og:site_name" />
     <meta content="object" property="og:type" />
     <meta content="React Diff Viewer" property="og:title" />
     <meta content="https://github.com/praneshr/react-diff-viewer" property="og:url" />
-    <meta content="A simple and beautiful text diff viewer made with Diff and React." property="og:description" />
+    <meta content="A simple and beautiful text diff viewer component made with diff and React" property="og:description" />
 
     <meta name="twitter:card" value="summary_large_image"/>
     <meta name="twitter:site" value="@pranesh_ravi" />
     <meta name="twitter:creator" value="@pranesh_ravi" />
     <meta name="twitter:title" content="React Diff Viewer" />
-    <meta name="twitter:description" content="A simple and beautiful text diff viewer made with Diff and React." />
-    <meta name="twitter:image" content="https://image.ibb.co/hGUuTL/react-diff-viewer.png" />
+    <meta name="twitter:description" content="A simple and beautiful text diff viewer component made with diff and React" />
+    <meta name="twitter:image" content="https://i.ibb.co/ChNkdjs/Banner.png" />
   </head>
   <body>
     <div id="app"></div>
diff --git a/examples/src/index.tsx b/examples/src/index.tsx
@@ -11,7 +11,8 @@ const newXml = require('./diff/xml/new.xml').default;
 const oldJs = require('./diff/javascript/old.rjs').default;
 const newJs = require('./diff/javascript/new.rjs').default;
 
-const logo = require('../../logo-standalone.png');
+const logo = require('../../logo.png');
+const logoStandalone = require('../../logo-standalone.png');
 
 interface ExampleState {
   splitView?: boolean;
@@ -127,6 +128,7 @@ class Example extends React.Component<{}, ExampleState> {
         <div className="banner">
           <div className="img-container">
             <img src={logo} alt="React Diff Viewer Logo" />
+            <img src={logoStandalone} alt="React Diff Viewer Logo" className="mobile" />
           </div>
           <p>
             A simple and beautiful text diff viewer made with{' '}
diff --git a/examples/src/style.scss b/examples/src/style.scss
@@ -144,11 +144,14 @@ body {
     .img-container {
       text-align: center;
       margin: 0 auto;
-      margin-bottom: 40px;
       max-width: 700px;
 
       img {
         width: 100%;
+
+        &.mobile {
+          display: none;
+        }
       }
     }
 
@@ -178,7 +181,7 @@ body {
 
     p {
       max-width: 700px;
-      font-size: 16px;
+      font-size: 18px;
       margin: 0 auto;
       color: grey;
     }
@@ -209,6 +212,10 @@ body {
     overflow-y: hidden;
     white-space: nowrap;
     border: 1px solid #eee;
+
+    a {
+      color: inherit;
+    }
   }
 
   footer {
@@ -221,8 +228,20 @@ body {
   .react-diff-viewer-example {
     .banner {
       .img-container {
-        max-width: 300px;
+        img {
+          display: none;
+
+          &.mobile {
+            display: block;
+            width: 100px;
+            margin: 0 auto 30px;
+          }
+        }
       }
     }
+
+    p {
+      font-size: 16px;
+    }
   }
 }
diff --git a/logo-standalone.png b/logo-standalone.png
