reduced globally applied styles

begin make styles use for mobile styles (home)

index.html

@@ -8,20 +8,9 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
     <style>
-      html, body, div, span, a, p, ul, li, h1 {
+      html, body {
         margin: 0;
-        border: 0;
         padding: 0;
-        /*box-sizing: inherit;*/
-/*        font: inherit;*/
-        /*text-decoration: inherit;*/
-        /*text-align: inherit;*/
-        /*color: inherit;*/
-        /*background: transparent;*/
-      }
-      a {
-        color: inherit;
-        text-decoration: inherit;
       }
       /*pass window height (w/o scroll bars) down to react app, note can't use vh because that includes scroll bars and mobile browser footer, etc so doesn't give viewable area*/
       html, body { height: 100%; }

src/components/create/index.js

@@ -5,8 +5,9 @@ import {observer, inject} from 'mobx-react';
 export default class Create extends React.Component {
 
   render() {
-    return (<div><span>This page is not yet available</span>
-        </div>);
+    return (<div>
+      <span>This page is not yet available. Visit <a href="https://untap.in">untap.in</a> to build and play.</span>
+    </div>);
   }
 
 }

src/components/home/home.scss

@@ -1,60 +1,44 @@
-@import '../base';
+@media only screen and (min-width: 975px) {
+    @import '../base';
+
+    @-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;*/
+
+        span, div {
+            font-size: 14px !important;
+            line-height: 18px !important;
+        }
+
+        div {
+            padding-bottom: 4px;
+        }
+
+        a {
+            text-decoration: none;
+            border-bottom: 1px dotted;
+        }
+    }
+
+    .welcome {
+        text-align: center;
+    }
 
-.lore {
-  text-align: left;
-  padding-left: 10%;
-  padding-right: 10%;
 }
 
-.lore .title {
-	margin-top: 6px;
-	text-align: center;
-	font-weight: bold;
-	font-size: 18px;
-}
-
-.lore div {
-	margin: 0 0 6px;
-	line-height: 22px !important;
-}
-
-.donate {
-	margin-bottom: 6px;
-}
-
-.donate form a {
-	border-bottom: none;
-}
-
-/* With Love */
-@-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 span,
-.with-love div {
-    font-size: 14px !important;
-    line-height: 18px !important;
-}
-
-.with-love div {
-    padding-bottom: 4px;
-}
-
-.with-love .heart {
+.heart {
     font-size: 1.4em;
     color: #ff79c6;
     -webkit-transform: scale(.9);
@@ -63,9 +47,4 @@
     -webkit-animation: love .5s infinite linear alternate-reverse;
     -moz-animation: love .5s infinite linear alternate-reverse;
     animation: love .5s infinite linear alternate-reverse;
-}
-
-.with-love a {
-    text-decoration: none;
-    border-bottom: 1px dotted;
-}
+}

src/components/home/index.js

@@ -1,68 +0,0 @@
-import React from 'react';
-import {Link} from 'react-router-dom';
-import {Donate} from '../Snippets';
-import "./home.scss";
-import {observable} from 'mobx';
-
-const GithubLink = () => (
-  <a 
-    href="https://github.com/chaoticbackup" className="name" 
-    rel='noreferrer noopener' target="_blank"
-  >
-    Chaotic Backup Project
-  </a>
-);
-
-const LoreEntry = ({block, text}) => {
-  return (
-    <div className="lore">
-      <div className="title">{block}</div>
-      {text.map((entry, i) => <div key={i}>{entry}</div>)}
-    </div>
-  );
-}
-
-export default class Home extends React.Component {
-  state = {lore: []};
-
-  componentDidMount() {
-    fetch("/src/json/starter_lore.json")
-    .then((response) => {
-      return response.json();
-    })
-    .then((lore) => {
-      this.setState({"lore": lore});
-      return;
-    })
-    .catch(() => {
-      this.setState({"lore": [{"block": "Unable to load lore...", "text": []}]})
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <br />
-        <div className="with-love">
-          <div>Welcome to the <GithubLink />.</div>
-          <span>Built by fans for fans.</span>
-          <br /><br />
-          <div>Made with <span className="heart">♥</span> by
-            <br />Danude Sandstorm (Project Lead)
-            <br />Chiodosin1 (Database Contributions)
-            <br />Afjak and Blitser (Art and Knowledge)
-          </div>
-          <div>Do you like the site? You can donate to support it!</div>
-          <div className="donate"><Donate /></div>
-          <div className="lore">We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations.  With an extensive lists of search options in the <Link to="/collection">collection</Link>, you'll find deck building mores streamlined than ever before.  Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the <Link to="/portal">Portal to Perim</Link> disapeared along with the site. You can again explore the official lore and information of Creatures!
-          </div>
-          <br />
-          {this.state.lore.length > 0
-            ? this.state.lore.map((entry, i) => <LoreEntry key={i} {...entry} />)
-            : "Loading lore entries..."
-          }
-        </div>
-      </div>
-    );
-  }
-}

src/components/home/index.jsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import {Link} from 'react-router-dom';
+import {Donate} from '../Snippets';
+import {makeStyles, useTheme} from '@material-ui/core/styles';
+import "./home.scss";
+
+export const desktop = '@media (min-width: 975px)';
+export const mobile = '@media (max-width: 975px)';
+
+const useStyles = makeStyles((theme) => ({
+  home: {
+    [desktop]: {
+      textAlign: "left",
+      paddingLeft: "10%",
+      paddingRight: "10%",
+      "& div": {
+        margin: "0 0 6px",
+        lineHeight: "22px !important",
+      },
+      "& .title": {
+        marginTop: "6px",
+        textAlign: "center",
+        fontWeight: "bold",
+        fontSize: "18px",
+      }
+    },
+    [mobile]: {
+      width: "80%",
+    },
+  },
+  donate: {
+    marginBottom: "6px",
+    "& form a": {
+      borderBottom: "none",
+    }
+  }
+}));
+
+const GithubLink = () => (
+  <a 
+    href="https://github.com/chaoticbackup" className="name" 
+    rel='noreferrer noopener' target="_blank"
+  >
+    Chaotic Backup Project
+  </a>
+);
+
+const LoreEntry = ({block, text}) => {
+  return (
+    <div className="lore">
+      <div className="title">{block}</div>
+      {text.map((entry, i) => <div key={i}>{entry}</div>)}
+    </div>
+  );
+}
+
+export default function(props) {
+  const [lore, setLore] = useState([]);
+  const classes = useStyles(useTheme());
+
+  useEffect(() => {
+    fetch("/src/json/starter_lore.json")
+    .then((response) => {
+      return response.json();
+    })
+    .then((lore) => {
+      setLore(lore);
+    })
+    .catch(() => {
+      setLore([{"block": "Unable to load lore...", "text": []}]);
+    });
+  }, []);
+
+  return (
+    <div className={classes.home}>
+      <br />
+      <div className="with-love">
+        <div className="welcome">
+          <div>Welcome to the <GithubLink />.</div>
+          <div>Made with <span className="heart">♥</span> by
+            <br />Danude Sandstorm (Project Lead)
+            <br />Chiodosin1 (Database Contributions)
+            <br />Afjak and Blitser (Art and Knowledge)
+          </div>
+          <div>Do you like the site? You can donate to support it!</div>
+          <div className={classes.donate}><Donate /></div>
+        </div>
+        <div className="lore">
+            We were unsatisfied with the options on how to search for cards. I took the design of the old Chaotic website and added my own modernizations.  With an extensive lists of search options in the <Link to="/collection">collection</Link>, you'll find deck building mores streamlined than ever before.  Chaotic is full of rich lore, but unfortunately the best database of official lore disapeared when the <Link to="/portal">Portal to Perim</Link> disapeared along with the site. You can again explore the official lore and information of Creatures!
+        </div>
+        {lore.length > 0
+          ? lore.map((entry, i) => <LoreEntry key={i} {...entry} />)
+          : "Loading lore entries..."
+        }
+      </div>
+    </div>
+  );
+}

src/components/mobile.tsx

@@ -1,6 +1,8 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, MouseEvent } from 'react';
+import {Link} from 'react-router-dom';
 import { makeStyles, useTheme, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
-import { Toolbar, IconButton, AppBar, Typography, Container, Box 
+import { Toolbar, IconButton, AppBar, Typography, Container, Box, Menu,
+  MenuItem
 } from '@material-ui/core';
 import {Menu as MenuIcon} from '@material-ui/icons';
 import { blue } from '@material-ui/core/colors';
@@ -33,6 +35,9 @@ const headerStyles = makeStyles(theme => ({
   },
   title: {
     flexGrow: 1,
+  },
+  menu: {
+    marginTop: theme.spacing(6),
   }
 }));
 
@@ -49,13 +54,33 @@ function Base(props: { routing: any; }) {
   const children = props.routing();
   const header = headerStyles(useTheme());
   const main = mainStyles(useTheme());
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
 
-  const handleClick = (event) => {
-    console.log("toggle");
-  }
+  const handleClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
 
   return (
     <Fragment>
+      <Menu
+        id="top-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+        className={header.menu}
+      >
+        <MenuItem onClick={handleClose}><Link to="/">Home</Link></MenuItem>
+        <MenuItem onClick={handleClose}><Link to={`/collection/`}>Collect</Link></MenuItem>
+        <MenuItem onClick={handleClose}><Link to="create">Build</Link></MenuItem>
+        <MenuItem onClick={handleClose}><a href="http://chaoticbackup.forumotion.com">Forums</a></MenuItem>
+        <MenuItem onClick={handleClose}><Link to={`/portal/`}>Portal</Link></MenuItem>
+        <MenuItem onClick={handleClose}><a href="https://untap.in">Play</a></MenuItem>
+      </Menu>
       <AppBar className={header.root} position="static">
         <Toolbar>
           <IconButton 
@@ -67,9 +92,7 @@ function Base(props: { routing: any; }) {
           >
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" className={header.title}>
-            Chaotic Backup
-          </Typography>
+          <Typography variant="h6" className={header.title}>Chaotic Backup</Typography>
         </Toolbar>
       </AppBar>
       <Container className={main.root}>

src/css/legacy.css

@@ -1,5 +1,14 @@
 @media only screen and (min-width: 975px) {
 
+html, body, div, a, p {
+  margin: 0;
+  padding: 0;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
 #player {
   width: calc(100% - 20px);
   margin: 0 10px;