Removed duplicated markdown pages, improved NotFound page

src/app.jsx

@@ -6,11 +6,9 @@ import { Header, Container, Divider } from "semantic-ui-react";
 import "./styles/shared.css";
 
 //include other pages
-import Landing from "./pages/landing.jsx";
-import Rules from "./pages/rules.jsx";
+import MarkdownPage from "./pages/markdown_page.jsx";
 import CardList from "./pages/card_list.jsx";
 import Concepts from "./pages/concepts.jsx";
-import About from "./pages/about.jsx";
 import NotFound from "./pages/not_found.jsx";
 
 //include panels
@@ -23,10 +21,11 @@ class App extends React.Component {
 	}
 
 	render() {
+		//NOTE: display: flex is set for the container to fix a centering issue in NotFound
 		return (
 			<div className="central">
 				<BrowserRouter>
-					<Container className="panel">
+					<Container className="panel" style={{ display: "flex" }}>
 						<Link to="/"><Header as="h1" textAlign="center">Mecha: Immense Warfare</Header></Link>
 						<LinkButton.Group widths="4">
 							<LinkButton to="/rules" className="noPadding">Rules</LinkButton>
@@ -36,11 +35,11 @@ class App extends React.Component {
 						</LinkButton.Group>
 						<Divider hidden />
 						<Switch>
-							<Route exact path="/" component={ Landing } />
-							<Route exact path="/rules" component={ Rules } />
+							<Route exact path="/" component={() => <MarkdownPage source={"content/landing.md"} /> } />
+							<Route exact path="/rules" component={() => <MarkdownPage source={"content/rules.md"} /> } />
 							<Route exact path="/cardlist" component={ CardList } />
 							<Route exact path="/concepts" component={ Concepts } />
-							<Route exact path="/about" component={ About } />
+							<Route exact path="/about" component={() => <MarkdownPage source={"content/about.md"} /> } />
 							<Route path="*" component={ NotFound } />
 						</Switch>
 					</Container>