Merge pull request #25 from cortex-command-community/vimevi-contributes

Added gifs and so on
cortex-command-community · Mar 4, 2024 · c3f2574 · c3f2574
2 parents 9371a8f + c9ca00f
commit c3f2574
Show file tree

Hide file tree

Showing 27 changed files with 528 additions and 324 deletions.
diff --git a/src/components/App/App.css b/src/components/App/App.css
@@ -1,23 +1,44 @@
+*::after,
+*::before,
+* {
+	box-sizing: border-box;
+}
+
+.wrapper {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
+}
+
 body {
-  color: #111;
-  background-color: #eee
+	color: #111;
+	background-color: #eee;
 }
 
 p {
-  padding: 0;
-  margin: 0;
+	padding: 0;
+	margin: 0;
 }
 
-h1, h2, h3 {
-  color: #284673;
-  font-weight: normal;
-  font-family: "Montserrat", sans-serif;
+h1,
+h2,
+h3 {
+	color: #284673;
+	font-weight: normal;
+	font-family: 'Montserrat', sans-serif;
 }
 
 ul {
-  margin: 0;
+	margin: 0;
+	padding: 0; /* added this line */
 }
 
-h1, h2, h3, h4, h5 {
-  margin-top: 0;
-}
+h1,
+h2,
+h3,
+h4,
+h5 {
+	margin-top: 0;
+}
diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -3,28 +3,34 @@ import './App.css';
 import Home from '../Home/Home';
 import Downloads from '../Static/Downloads/Downloads';
 import NotFound from '../Static/NotFound/NotFound';
-import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import { GetInvolved } from '../Static/GetInvolved/GetInvolved';
+import Header from '../Header/Header';
+import Footer from '../Footer/Footer';
 
 function App() {
-  return (
-    <Router>
-      <Switch>
-        <Route exact path="/">
-          <Home />
-        </Route>
-        <Route path="/downloads">
-          <Downloads />
-        </Route>
-        <Route path="/get-involved">
-          <GetInvolved />
-        </Route>
-        <Route>
-          <NotFound />
-        </Route>
-      </Switch>
-    </Router>
-  );
+	return (
+		<Router>
+			<div className="wrapper">
+				<Header />
+				<Switch>
+					<Route exact path="/">
+						<Home />
+					</Route>
+					<Route path="/downloads">
+						<Downloads />
+					</Route>
+					<Route path="/get-involved">
+						<GetInvolved />
+					</Route>
+					<Route>
+						<NotFound />
+					</Route>
+				</Switch>
+				<Footer />
+			</div>
+		</Router>
+	);
 }
 
 export default App;
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
@@ -1,20 +1,20 @@
 .button-element {
-    display: inline-block;
-    color: #333;
-    border: 1px solid #333;
-    padding: 6px 12px;
-    border-radius: 4px;
-    text-decoration: none;
+	display: inline-block;
+	color: #333;
+	border: 1px solid #333;
+	padding: 6px 12px;
+	border-radius: 4px;
+	text-decoration: none;
 }
 
 .button-content {
-    padding-right: 12px;
-    font-family: "Montserrat", sans-serif;
+	padding-right: 12px;
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 700;
 }
 
 .button-element:hover {
-    transition: all 0.2s ease-out;
-    color: #eee;
-    background-color: #284673;
-    border-color: #284673;
+	transition: all 0.2s ease-out;
+	color: #333;
+	background-color: #ffa500;
 }
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -1,20 +1,17 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import './Button.css';
 
-function Button(props) {
-  const Tag = props.link ? 'a' : 'button';
+function Button({ link, to, children }) {
+	const Tag = link ? 'a' : 'button';
 
-  return (
-    <Tag className='button-element'
-      href={props.to}
-      target='_blank'
-    >
-      <span className='button-content'>{props.children}</span>
-      { props.link && <FontAwesomeIcon icon={faExternalLinkAlt} /> }
-    </Tag>
-  );
+	return (
+		<Tag className="button-element" href={to} target="_blank">
+			<span className="button-content">{children}</span>
+			{link && <FontAwesomeIcon icon={faExternalLinkAlt} />}
+		</Tag>
+	);
 }
 
 export default Button;
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -1,24 +1,15 @@
 import React from 'react';
+import './card.css'
 
-function Card(props) {
-  return (
-    <div style={{ margin: '48px 0'}}>
-      <div style={{
-        marginTop: '12px',
-        border: '1px solid #333',
-        padding: '12px 18px',
-        borderRadius: '6px',
-      }}>
-        <h2 style={{
-          marginTop: '-28px',
-          padding: '0 4px',
-          width: 'fit-content',
-          background: '#eee',
-        }}>{props.title}</h2>
-        {props.children}
-      </div>
-    </div>
-  );
+function Card({ title, children }) {
+	return (
+		<div className='card-element'>
+			<div className="card-content">
+				<h2 className="card-name">{title}</h2>
+				{children}
+			</div>
+		</div>
+	);
 }
 
 export default Card;
diff --git a/src/components/Card/card.css b/src/components/Card/card.css
@@ -0,0 +1,20 @@
+.card-element {
+	margin: 48px 0;
+}
+
+.card-element:last-of-type {
+	margin: 0;
+}
+
+.card-content {
+	margin-top: 12px;
+	border: 1px solid #333;
+	padding: 12px 18px;
+	border-radius: 6px;
+}
+.card-name {
+	margin-top: -28px;
+	padding: 0 4px;
+	width: fit-content;
+	background: #eee;
+}
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
@@ -1,59 +1,81 @@
 .footer {
-    min-height: 200px;
-    height: 100%;
-    width: 100%;
-    padding: 24px 12px;
-    box-sizing: border-box;
-    position: relative;
-    overflow: hidden;
-    background-color: #242424
+	min-height: 200px;
+	height: 100%;
+	width: 100%;
+	padding: 24px 16px;
+	box-sizing: border-box;
+	position: relative;
+	overflow: hidden;
+	background-color: #242424;
 }
 
 .footer .footer-background {
-    opacity: .5;
-    background-color: #181E28;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+	opacity: 0.5;
+	background-color: #181e28;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
 }
 
 .footer ul {
-    margin: 0 24px 24px 0;
-    padding: 12px;
+	/* margin: 0 24px 24px 0; */
+	/* padding: 12px; */
 }
 
 .footer li {
-    flex-grow: 1;
-    list-style-type: none;
+	flex-grow: 1;
+	list-style-type: none;
 }
 
 .footer a {
-    color: #f9de8f;
-    font-size: 10pt;
-    text-decoration: none;
+	color: #f9de8f;
+	font-size: 10pt;
+	text-decoration: none;
 }
 
 .footer a:hover {
-    text-decoration: underline;
+	text-decoration: underline;
 }
 
 .footer li h1 {
-    color: #eee;
-    font-size: 12pt;
+	color: #eee;
+	font-size: 12pt;
 }
 
 .footer .footer-dirt {
-    margin: auto;
-    display: block;
-    top: 24px;
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 330px;
-    background-image: url('./near.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    image-rendering: pixelated;
+	margin: auto;
+	display: block;
+	top: 24px;
+	position: absolute;
+	left: 0;
+	right: 0;
+	height: 330px;
+	background-image: url('./near.png');
+	background-position: center;
+	background-repeat: no-repeat;
+	image-rendering: pixelated;
+}
+
+.footer-content {
+	display: flex;
+	flex-wrap: wrap;
+	margin: auto;
+	padding: 0;
+	max-width: 800px;
+	height: 100%;
+	position: relative;
+	z-index: 1;
+	justify-content: space-between;
+	gap: 36px;
+}
+
+@media (max-width: 518px) {
+	.footer-content {
+		justify-content: center;
+	}
+	.footer-content ul {
+		width: 166px;
+	}
 }
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
@@ -3,20 +3,11 @@ import './Footer.css';
 
 function Footer() {
     return (
-        <div className='footer'>
+        <footer className='footer scroll-anchor'>
             <div className='footer-background'>
                 <div className='footer-dirt' />
             </div>
-            <div style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                margin: 'auto',
-                padding: '0',
-                maxWidth: '800px',
-                height: '100%',
-                position: 'relative',
-                zIndex: '1',
-            }}>
+            <div className='footer-content'>
                 <ul>
                     <li><h1>Community</h1></li>
                     <li><a href='https://discord.gg/invite/TSU6StNQUG'>Our Discord</a></li>
@@ -35,7 +26,7 @@ function Footer() {
                     <li><a href='https://github.com/cortex-command-community/Cortex-Command-Community-Project-Source/blob/development/CHANGELOG.md'><span>CCCP Changelog</span></a></li>
                 </ul>
             </div>
-        </div >
+        </footer >
     );
 }