cortex-command-community · lejshi3 · Oct 20, 2020 · Nov 18, 2020 · Nov 18, 2020 · Nov 18, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -28,7 +28,7 @@
     <title>Cortex Command Community Project</title>
   </head>
   <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <noscript>You need to enable JavaScript to view this page.</noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.

diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,6 +1,6 @@
 body {
-  color: #111;
-  background-color: #eee
+  color: #EEE;
+  background-color: #202020
 }
 
 p {
@@ -9,7 +9,7 @@ p {
 }
 
 h1, h2, h3 {
-  color: #333;
+  color: #DDD;
   font-weight: normal;
   font-family: "Montserrat", sans-serif;
 }

diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -1,14 +1,15 @@
 .button-element {
     display: inline-block;
-    color: #333;
-    border: 1px solid #333;
-    padding: 6px 12px;
+    color: #DDD;
+    border: 1px solid #DDD;
+    padding: 6px 16px;
     border-radius: 4px;
     text-decoration: none;
+    margin-Right: 4px;
 }
 
 .button-content {
-    padding-right: 12px;
+    padding-right: 6px;
     font-family: "Montserrat", sans-serif;
 }
 

diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -5,15 +5,17 @@ function Card(props) {
     <div style={{ margin: '48px 0'}}>
       <div style={{
         marginTop: '12px',
-        border: '1px solid #333',
+        border: '1px solid #ddd',
         padding: '12px 18px',
         borderRadius: '6px',
       }}>
         <h2 style={{
           marginTop: '-28px',
-          padding: '0 4px',
-          width: 'fit-content',
-          background: '#eee',
+          paddingLeft: '8px',
+          paddingRight: '8px',
+          marginBottom: '-1px',
+          float: 'left',
+          background: '#202020',
         }}>{props.title}</h2>
         {props.children}
       </div>

diff --git a/src/components/Emoji/dunno.png b/src/components/Emoji/dunno.png
diff --git a/src/components/Emoji/dunno2.png b/src/components/Emoji/dunno2.png
diff --git a/src/components/Emoji/good.png b/src/components/Emoji/good.png
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -2,7 +2,7 @@
     min-height: 200px;
     height: 100%;
     width: 100%;
-    background-color: #242424;
+    background-color: rgba(46, 10, 0, 1);
     padding: 24px 12px;
     box-sizing: border-box;
     position: relative;

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -17,7 +17,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 10pt;
+    font-size: 12pt;
     color: #f9de8f;
     text-decoration: none;
     text-transform: uppercase;

diff --git a/src/components/Home/CortexCardContents/CortexCardContents.js b/src/components/Home/CortexCardContents/CortexCardContents.js
@@ -13,15 +13,18 @@ function CortexCardContents(props) {
                 }}>
                     <h1>{props.title}</h1>
                     <p>{props.body}</p>
+
                 </div>
             </div>
             {/* This is an image placeholder **Imagine an Image** */}
-            <div style={{
+        <img style={{
                 border: '2px solid black',
                 backgroundColor: 'black',
                 minHeight: '196px',
                 width: '196px',
-            }} />
+        }}
+        src={props.image} alt={props.alt}
+        />    
         </div>
     );
 }

diff --git a/src/components/Home/Home.js b/src/components/Home/Home.js
@@ -7,6 +7,11 @@ import CortexCardContainer from './CortexCardContainer/CortexCardContainer';
 import CortexCardContents from './CortexCardContents/CortexCardContents';
 import MagicArrow from './MagicArrow/MagicArrow';
 
+/*image imports*/
+import DummySquadImg from './img/Team.png'
+import JoystickImg from './img/Joystick.png'
+import BuymenuImg from './img/BuyMenu.png'
+
 function Home() {
     return (
         <div style={{ backgroundColor: '#111'}}>
@@ -27,19 +32,25 @@ function Home() {
                         <CortexCardContents
                             title='Upgraded Engine'
                             body='The source code has been enhanced to improve performance.'
+                            image={DummySquadImg}
+                            alt='A Handdrawn/Pixelart Image of a Dummy Squad from Cortex Command.'
                         />
                     </CortexCard>
                     <CortexCard right>
                         <CortexCardContents
                             right
                             title='New Content'
                             body='New weapons, characters, and scenes.'
+                            image={BuymenuImg}
+                            alt='A Handdrawn/Pixelart Image of the Buy Menu from Cortex Command.'
                         />
                     </CortexCard>
                     <CortexCard>
                         <CortexCardContents
                             title='Improved Strategic Gameplay'
                             body='The team has focused on accentuating the most satisfying gameplay elements.'
+                            image={JoystickImg}
+                            alt='A Handdrawn/Pixelart Image of a Joystick, an input method that can be used to (ineffiecently) play Cortex Command.'
                         />
                     </CortexCard>
                 </CortexCardContainer>
@@ -50,4 +61,4 @@ function Home() {
     )
 }
 
-export default Home;
+export default Home;
diff --git a/src/components/Home/img/BuyMenu.png b/src/components/Home/img/BuyMenu.png
diff --git a/src/components/Home/img/Joystick.png b/src/components/Home/img/Joystick.png
diff --git a/src/components/Home/img/Team.png b/src/components/Home/img/Team.png
diff --git a/src/components/Static/Downloads/Downloads.js b/src/components/Static/Downloads/Downloads.js
@@ -3,27 +3,45 @@ import Template from '../../Template/Template';
 import Card from '../../Card/Card';
 import Button from '../../Button/Button';
 
+
+import EmojiGood from '../../Emoji/good.png';
+
 function Downloads() {
   return (
     <Template>
       <h1 style={{ marginTop: '48px' }}>Downloads</h1>
       <h2>Project Releases</h2>
       <Card title={'Cortex Command Community Project'}>
         <p style={{
-          marginBottom: '18px',
-        }}>This is where you can find the community's plans for Cortex Command's future. There'll be rebalancing, new weapons and units, and much more.</p>
+          marginTop: '8px', marginBottom: '18px',
+        }}>This is where you can find the community's plans for Cortex Command's future. There'll be rebalancing, new weapons, units, and much <i>much</i> more.</p>
+
         <Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Data/releases'>Releases</Button>
+
+        <Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Data/releases/download/v0.1.0-pre2/CCCP.v0.1.0-pre2.zip'>Pre 2 <img width='14px' height='14px' marginBottom='-12px' src={EmojiGood}/> (latest)</Button>
+
+      </Card>
+      <h2>Mods</h2>
+      <Card title={'Get Mods'}>
+        <p style={{
+          marginTop: '8px', marginBottom: '18px',
+        }}>What is Cortex Command without <strong>MODS</strong>? Luckily, we've got you covered. There are 2 great ways to get mods and if neither of them suit your fancy, you can use the Legacy Mod Converter to convert mods from the Data Realms Fan Forums or the Steam Workshop!</p>
+
+        <Button link to='https://discord.gg/yuZvazK'>Discord</Button>
+
+        <Button link to='https://cccp.mod.io/'>Mod.io (Coming Soon)</Button>    
+
       </Card>
       <h2>Modding Tools</h2>
       <Card title={'Legacy Mod Converter'}>
         <p style={{
-          marginBottom: '18px',
+          marginTop: '8px', marginBottom: '18px',
         }}>This project automates most of the conversion work required to convert the legacy Cortex Command mods into Cortex Command Community Project compatible mods.</p>
         <Button link to='https://github.com/cortex-command-community/Cortex-Command-Legacy-Mod-Converter'>Get source</Button>
       </Card>
       <Card title={'Bender'}>
         <p style={{
-          marginBottom: '18px',
+          marginTop: '8px', marginBottom: '18px',
         }}>The purpose of this tool is to make the life of modders easier by automagically generating bent limb sprites from limb parts.</p>
         <Button link to='https://github.com/cortex-command-community/Cortex-Command-Community-Bender/releases'>Releases</Button>
       </Card>

diff --git a/src/components/Static/NotFound/NotFound.js b/src/components/Static/NotFound/NotFound.js
@@ -1,12 +1,20 @@
 import React from 'react';
 import Template from '../../Template/Template';
 
+import EmojiDunno from '../../Emoji/dunno.png';
+
 function NotFound() {
     return (
         <Template>
+            <div style={{textAlign: 'center'}}>
             <h1 style={{ marginTop: '48px' }}>Page Not Found</h1>
             <p>Sorry, but the page you were trying to view does not exist.</p>
+            <br />
+            <br />
+            <a href='https://www.youtube.com/watch?v=t0s9dRNjhfg?autoplay=1'><img style={{postion: 'absolute', width: '25%'}} src={EmojiDunno}/></a>
+            </div>
         </Template>
+
     );
 }
 

diff --git a/src/components/Template/Template.js b/src/components/Template/Template.js
@@ -12,8 +12,10 @@ function Template(props) {
       <Header />
       <div style={{
         margin: 'auto',
+        marginBottom: '0px',
         maxWidth: '800px',
         width: '100%',
+        height: '100%',
         flex: '1',
       }}>
         <div style={{ padding: '0 8px', }}>