Added metadata

marc-ed-raffalli · Oct 27, 2017 · a8b695b · a8b695b
1 parent 3c13606
commit a8b695b
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,7 @@
-# Geo Game
+# World Geography Game
+
+Geography game to discover or refresh your geography in an easy and interactive way. 
+Find the countries by name, capital or flag and learn much more about each country.
 
 ## References / Credits
 
@@ -9,3 +12,4 @@
 - https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3
 - https://www.codementor.io/vkarpov/beginner-s-guide-to-redux-middleware-du107uyud
 - https://commons.wikimedia.org/wiki/File:Continents.svg
+- https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#github-pages
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,18 +1,26 @@
 <!doctype html>
 <html lang="en">
 <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <meta name="author" content="Marc Ed Raffalli">
+  <meta name="description"
+        content="Geography game to discover or refresh your geography in an easy and interactive way. Find the countries by name, capital or flag and learn much more about each country.">
 
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <meta property="og:title" content="World Geography Game">
+  <meta property="og:description"
+        content="Geography game to discover or refresh your geography in an easy and interactive way. Find the countries by name, capital or flag and learn much more about each country.">
+  <meta property="og:locale" content="en_US">
 
-    <title>Geo App</title>
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+
+  <title>World Geography Game</title>
 </head>
 <body>
 <noscript>
-    You need to enable JavaScript to run this app.
+  You need to enable JavaScript to run this app.
 </noscript>
 
 <div id="root" class="h-100"></div>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "World Geo Game",
+  "name": "World Geography Game",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/components/start-screen/header/Header.js b/src/components/start-screen/header/Header.js
@@ -1,10 +1,12 @@
 import React from 'react';
 
+import './_header.css';
+
 export default () => (
   <div className="jumbotron">
-    <h1 className="display-3">Geo Game</h1>
+    <h1 className="gg-header-title mb-3">World Geography Game</h1>
     <p className="lead">Learn about or rediscover over 200 countries all over the globe!</p>
-    <hr className="my-4"/>
+    <hr className="my-2 my-md-4"/>
     <p>Find countries from their name, capital city or flag. Learn or review your geography in a simple way.</p>
   </div>
 );
diff --git a/src/components/start-screen/header/_header.css b/src/components/start-screen/header/_header.css
@@ -0,0 +1,10 @@
+.gg-header-title {
+  font-size: 2rem;
+  font-weight: 300;
+}
+
+@media (min-width: 768px) {
+  .gg-header-title {
+    font-size: 3.2rem;
+  }
+}