updated the home page

src/components/Base.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import s from './styles/app.style';
+import s from '../styles/app.style';
 
 const language = "ENG";
 const bkgrnd = "05";
@@ -13,32 +13,6 @@ const propTypes = {
 };
 
 function App({ children, routes }) {
-  function generateMapMenu() {
-    let path = '';
-
-    function nextPath(route) {
-      path += (
-        (path.slice(-1) === '/' ? '' : '/') +
-        (route.path === '/' ? '' : route.path)
-      );
-      return path;
-    }
-
-    return (
-      routes.filter(route => route.mapMenuTitle)
-      .map((route, index, array) => (
-        <span key={index}>
-            <Interactive
-              as={Link}
-              {...s.link}
-              to={nextPath(route)}
-            >{route.mapMenuTitle}</Interactive>
-            {(index + 1) < array.length && ' / '}
-          </span>
-      ))
-    );
-  }
-
   return (
     <div>
       <div className="fix-pgBkgrnd-repeat-x">
@@ -63,7 +37,7 @@ function App({ children, routes }) {
                       <li id="unity-nav9" className={language}></li>
                     </ul>
                     <ul id="unityETC-sprite" className={language}>
-                      <li id="unity-nav10" className={language}><a href={`/EnterTheCode`}><span>Enter the Code</span></a></li>
+                      <li id="unity-nav10" className={language}><Link to={`/EnterTheCode`}><span>Enter the Code</span></Link></li>
                     </ul>
                   </div>
                 </div>
@@ -92,13 +66,6 @@ function App({ children, routes }) {
                         <div className="content-area-right-repeat-y">
                           <div style={{margin: "0 8px 0 10px"}}>
                             <div id="player" style={{textAlign: "center"}}>
-                              {/*
-                              <br />
-                              <h1 style={s.title}>Single Page Apps for GitHub Pages</h1>
-                              */}
-                              <nav style={s.mapMenu}>
-                                {generateMapMenu()}
-                              </nav>
                               {children}
                               <br />
                             </div>

src/components/Home.js

@@ -6,19 +6,12 @@ import s from '../styles/home.style';
 function Home() {
   return (
     <div>
-      <div style={s.pageLinkContainer}>
-        <Interactive
-          as={Link}
-          {...s.link}
-          to="/example"
-        >Example page</Interactive>
-      </div>
-      <div style={s.pageLinkContainer}>
-        <Interactive
-          as={Link}
-          {...s.link}
-          to="/example/two-deep?field1=foo&field2=bar#boom!"
-        >Example two deep with query and hash</Interactive>
+      <link rel="stylesheet" href="/src/css/with_love.css" />
+      <br />
+      Welcome to the Chaotic Backup Project.<br />
+      Built by fans for fans.<br /><br />
+      <div className="with-love">
+        Made with <span className="heart">♥</span> by <a href="https://github.com/chaoticbackup" className="name" target="_blank">Danude Sandstorm</a>
       </div>
     </div>
   );

src/components/example/ExampleComponent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import s from '../styles/exampleComponent.style';
+import s from '../../styles/exampleComponent.style';
 
 const propTypes = {
   children: PropTypes.element,

src/components/example/ExampleTwoDeepComponent.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Interactive from 'react-interactive';
 import { Link } from 'react-router';
-import s from '../styles/exampleTwoDeepComponent.style';
+import s from '../../styles/exampleTwoDeepComponent.style';
 
 const propTypes = {
   location: PropTypes.object.isRequired,

src/components/example/Home.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import s from '../../styles/home.style';
+
+function ExampleHome() {
+  return (
+    <div>
+      <div style={s.pageLinkContainer}>
+        <Interactive
+          as={Link}
+          {...s.link}
+          to="/example"
+        >Example page</Interactive>
+      </div>
+      <div style={s.pageLinkContainer}>
+        <Interactive
+          as={Link}
+          {...s.link}
+          to="/example/two-deep?field1=foo&field2=bar#boom!"
+        >Example two deep with query and hash</Interactive>
+      </div>
+    </div>
+  );
+}
+
+export default ExampleHome;

src/components/portal/Base.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Interactive from 'react-interactive';
+import { Link } from 'react-router';
+import s from '../../styles/app.style';
+
+const propTypes = {
+  children: PropTypes.element.isRequired,
+  routes: PropTypes.array.isRequired,
+};
+
+function PortalBase({ children, routes }) {
+
+  function generateMapMenu() {
+    let path = '';
+
+    function nextPath(route) {
+      path += (
+        (path.slice(-1) === '/' ? '' : '/') +
+        (route.path === '/' ? '' : route.path)
+      );
+      return path;
+    }
+
+    return (
+      routes.filter(route => route.mapMenuTitle)
+      .map((route, index, array) => (
+        <span key={index}>
+            <Interactive
+              as={Link}
+              {...s.link}
+              to={nextPath(route)}
+            >{route.mapMenuTitle}</Interactive>
+            {(index + 1) < array.length && ' / '}
+          </span>
+      ))
+    );
+  }
+
+  return (
+    <div>
+      <nav style={s.mapMenu}>
+        {generateMapMenu()}
+      </nav>
+      {children}
+    </div>
+  );
+}
+
+PortalBase.propTypes = propTypes;
+
+export default PortalBase;

src/css/legacy.css

@@ -56,7 +56,7 @@
 /*------------------------------------------------------*/
 .legacy p, .legacy div, .legacy li {
   font-family:Arial, Helvetica, sans-serif;
-  font-size: 10px; line-height: 14px; color: #FFFFFF;
+  font-size: 12px; line-height: 16px; color: #FFFFFF;
 }
 
 .content-wrap {
@@ -328,6 +328,10 @@
 /*-------------- Footer --------------*/
 /*------------------------------------------------------*/
 
+.footer-wrap p, .footer-wrap div, .footer-wrap li {
+  font-size: 10px !important;
+  line-height: 14px !important;
+}
 .footer-wrap {
   max-width: 943px; height:54px;
   margin: 0 auto;

src/css/with_love.css

@@ -0,0 +1,32 @@
+@-webkit-keyframes love {
+    to { -webkit-transform: scale(1.1); }
+}
+
+@-moz-keyframes love {
+    to { -moz-transform: scale(1.1); }
+}
+
+@keyframes love {
+    to { transform: scale(1.1); }
+}
+
+.with-love {
+    color: #333;
+    /*display: inline-block;*/
+}
+
+.with-love .heart {
+    font-size: 1.4em;
+    color: #ff79c6;
+    -webkit-transform: scale(.9);
+    -moz-transform: scale(.9);
+    transform: scale(.9);
+    -webkit-animation: love .5s infinite linear alternate-reverse;
+    -moz-animation: love .5s infinite linear alternate-reverse;
+    animation: love .5s infinite linear alternate-reverse;
+}
+
+a {
+    text-decoration: none;
+    border-bottom: 1px dotted;
+}

src/index.js

@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import { Router, Route, IndexRoute, browserHistory } from 'react-router';
 
 /* Common Components */
-import App from './Base';
+import App from './components/Base';
 import PageNotFound from './components/PageNotFound';
 import UnderConstruction from './components/UnderConstruction';
 
@@ -12,16 +12,15 @@ import Home from './components/Home';
 import EnterTheCode from './components/account/EnterTheCode';
 
 /* Test Components */
-import ExampleComponent from './components/ExampleComponent';
-import ExampleTwoDeepComponent from './components/ExampleTwoDeepComponent';
-
-/* SpreadsheetData */
-import API from './components/SpreadsheetData';
+import ExampleHome from './components/example/Home';
+import ExampleComponent from './components/example/ExampleComponent';
+import ExampleTwoDeepComponent from './components/example/ExampleTwoDeepComponent';
 
 /* Collection */
 import CollectionHome from './components/collection/Home';
 
 /* Portal */
+import PortalBase from './components/portal/Base';
 import PortalHome from './components/portal/Home';
 import Attacks from './components/portal/Category/Attacks';
 import SingleAttack from './components/portal/Category/Attacks';
@@ -37,7 +36,7 @@ import Tribes from './components/portal/Category/Tribes';
 
 
 const routes = (
-  <Route path="/" component={App}>
+  <Route path="/" component={App} >
     <IndexRoute component={Home} />
 
     {/* Test */}
@@ -59,7 +58,7 @@ const routes = (
     </Route>
 
     {/* Portal */}
-    <Route path="portal/" mapMenuTitle="Portal">
+    <Route path="portal/" component={PortalBase} mapMenuTitle="Portal">
       <IndexRoute component={PortalHome} />
 
       {/* Attacks */}