Added fixed some css and made new additions

Css was changed such that the list looks more standard.
Added Project Website button if the project has one.
Theater was added to page

src/components/Github.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import './css/Github.css';
 import {getRepos} from '../actions';
+import Theater from './Theater';
+import space from '../img/space.webp';
 
 class Github extends React.Component {
 
@@ -17,10 +19,17 @@ class Github extends React.Component {
         console.log(repo);
         return (
           
-          <a className="repo" href={repo.html_url}>
+          <div className="repo">
-            <div className="title">{repo.name}</div>
+            <a href={repo.html_url} target="_blank" rel="noreferrer" className="title">{repo.name}</a>
-            <p className="description">{repo.description ? repo.description : "No Description"}</p>
+            <div className="content">
-          </a>
+              <p className="description">{repo.description ? repo.description : "No Description"}</p>
+              { 
+                repo.homepage ?
+                  <a href={repo.homepage} target="_blank" rel="noreferrer" className="website"> Project Website </a>:
+                  ""
+              }
+            </div>
+          </div>
           
         );
       });
@@ -33,7 +42,15 @@ class Github extends React.Component {
   render() {
     return (
       <div className="Github">
-        <h1>Github</h1>
+        <Theater
+          title="Github"
+          description="This is a list of projects that I've uploaded to github. 
+            You can check them out, fork them, and maybe give them a 
+            star. Any projects that have a website will have a button 
+            that will bring you right to the site"
+          background={space}
+          peak
+        />
         <div>
           {this.renderRepos()}
         </div>

src/components/css/Github.css

@@ -1,14 +1,3 @@
-
-
-.repo {
-    display: flex;
-    flex-direction: column;
-    background-color: #DDDCDC;
-    border-radius: 10px;
-    align-items: center;
-    margin-top: 10px;
-}
-
 .repo-list {
     display:flex;
     flex-direction: column;
@@ -17,16 +6,50 @@
     margin-right: auto;
 }
 
+.repo {
+    border-top-style: solid;
+    border-top-color: #A4A4A1;
+    border-top-width:2px;
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    margin-top: 10px;
+}
+
 .repo .title {
-    background-color: gray;
+    margin-top: 10px;
-    width:100%;
+    color: #3A4ADC;
-    text-align:center;
+    font-weight:bold;
-    border-top-left-radius: 10px;
+    width:fit-content;
-    border-top-right-radius: 10px;
+    width:-moz-fit-content;
-    padding-top:5px;
+    text-align:start;
-    padding-bottom:5px;
+    padding:5px;
+    border-radius: 3px;
+}
+
+.repo .title:hover {
+    color: black;
+}
+
+.repo .content {
+    display:flex;
+    flex-direction: row;
+    align-items:center;
+}
+
+.repo .website {
+    height:fit-content;
+    height: -moz-fit-content;
+    background-color: #5A5A5C;
+    color: white;
+    border-radius: 10px;
+    padding:10px;
+    align-items:center;
+    text-align: center;
+    width: 58px;
 }
 
 .repo .description {
+    flex-grow: 1;
     padding:10px;
 }