Testing

blog/fifth-post/index.mdx

@@ -0,0 +1,14 @@
+---
+  title: "My Fifth Blog Post"
+  datePublished: "2021-07-30"
+  author: "Quinnten S.C."
+  hero_image: "./albany-capture-IktcN3p3nv0-unsplash.jpg"
+---
+
+# Intro
+
+This is my _fifth_ blog post. It's about the foods I eat.
+
+## My diet
+
+I like meat, milk, and bread and that's about it.

blog/forth-post/index.mdx

@@ -0,0 +1,14 @@
+---
+  title: "My Fourth Blog Post"
+  datePublished: "2022-07-29"
+  author: "Quinnten S.C."
+  hero_image: "./lou-lou-b-photo-JC4V-sSpxGA-unsplash.jpg"
+---
+
+# Intro
+
+This is my _fourth_ post. It is about Computer Science.
+
+## How do I manage to CS
+
+I don't do it and then complain about it.

gatsby-config.js

@@ -1,6 +1,7 @@
 module.exports = {
   siteMetadata: {
     title: `Color Theory`,
+    domain: "https://colortheory.blog",
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
     author: `@gatsbyjs`,
     siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,

package.json

@@ -5,6 +5,10 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-brands-svg-icons": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "gatsby": "^4.19.0",

src/components/blogCard.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { Link } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import * as styles from "./card.module.css";
+
+const Card = ({ link, date, title, id, image }) => {
+  return (
+    <Link to={link} className={styles.card} key={id}>
+      <GatsbyImage image={image} alt="image" className={styles.cardPhoto} />
+      <h3 className={styles.cardLink}>{title}</h3>
+      <p className={styles.cardDate}>Posted: {date}</p>
+    </Link>
+  );
+};
+
+export default Card;

src/components/card.module.css

@@ -0,0 +1,67 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
+body{
+  line-height: 1.5;
+}
+
+*{
+  margin: 0;
+  padding: 0;
+  font-family: 'Poppins', sans-serif;
+}
+
+.flex-list {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+/*
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 20rem));
+  gap: 1rem;
+  justify-content: space-between;
+*/
+/*
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+*/
+.card {
+  background-color:rgb(252, 252, 252);
+  border-bottom: 2px solid lightgrey;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  cursor: ponter;
+  display:flex;
+  flex-direction: column;
+  margin-top: 4em;
+  width: 20em;
+  overflow: hidden;
+  padding: .5em;
+  text-decoration: none;
+  transition: transform 200ms ease-in;
+}
+
+.card:hover{
+  transform: scale(1.02);
+  background-color: rgb(245, 245, 245);
+}
+/* box-shadow: 0 10px 10px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */
+
+.card-photo {
+  border: 2px solid black;
+  height: 16em;
+  width:100%;
+  object-fit: cover;
+}
+.card-link {
+  margin: 1em;
+  text-align: center;
+  color: black;
+}
+.card-date {
+  margin: 1em;
+  font-size: .75rem;
+  text-align: end;
+  color: black;
+}

src/components/footer.js

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Link } from "gatsby";
+import * as styles from "./footer.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "../utils/font-awesome";
+
+const Footer = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.container}>
+        <div className={styles.row}>
+          <div className={styles.footerCol}>
+            <h4>Company</h4>
+            <ul>
+              <li>
+                <Link to="/footer-pages/about">About Us</Link>
+              </li>
+              <li>
+                <Link to="/footer-pages/contact">Contact Information</Link>
+              </li>
+            </ul>
+          </div>
+          <div className={styles.footerCol}>
+            <h4>Online Shop</h4>
+            <ul>
+              <li>
+                <Link to="/footer-pages/store">Store</Link>
+              </li>
+            </ul>
+          </div>
+          <div className={styles.footerCol}>
+            <h4>Get Help</h4>
+            <ul>
+              <li>
+                <Link to="/footer-pages/privacy-policy">Privacy Policy</Link>
+              </li>
+            </ul>
+          </div>
+          <div className={styles.footerCol}>
+            <h4>Social Media</h4>
+            <div className={styles.socialLinks}>
+              <Link to="https://www.youtube.com/channel/UCllUWKkOi3OvNPCdEj7UMOg">
+                <FontAwesomeIcon icon={"fa-brands fa-youtube"} />
+              </Link>
+              <Link to="https://www.youtube.com/channel/UCllUWKkOi3OvNPCdEj7UMOg">
+                <FontAwesomeIcon icon={"fa-brands fa-twitter"} />
+              </Link>
+              <Link to="https://www.youtube.com/channel/UCllUWKkOi3OvNPCdEj7UMOg">
+                <FontAwesomeIcon icon={"fa-brands fa-facebook"} />
+              </Link>
+              <Link to="https://www.youtube.com/channel/UCllUWKkOi3OvNPCdEj7UMOg">
+                <FontAwesomeIcon icon={"fa-brands fa-instagram"} />
+              </Link>
+              <Link to="https://www.youtube.com/channel/UCllUWKkOi3OvNPCdEj7UMOg">
+                <FontAwesomeIcon icon={"fa-brands fa-linkedin"} />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/footer.module.css

@@ -0,0 +1,81 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+body{
+	line-height: 1.5;
+	font-family: 'Poppins', sans-serif;
+}
+*{
+	margin:0;
+	padding:0;
+	box-sizing: border-box;
+}
+.container{
+	max-width: 75em;
+	margin:auto;
+}
+.row{
+	display: flex;
+	flex-wrap: wrap;
+}
+ul{
+	list-style: none;
+}
+.footer{
+	background-color: black;
+    padding: 5rem 0;
+}
+.footer-col{
+   width: 25%;
+   padding: 0 1rem;
+}
+.footer-col h4{
+	font-size: 1.125rem;
+	color: #ffffff;
+	text-transform: capitalize;
+	margin-bottom: 2rem;
+	font-weight: 500;
+	position: relative;
+}
+.footer-col h4::before{
+	content: '';
+	position: absolute;
+	left:0;
+	bottom: -.75rem;
+	background-color: rgb(92, 0, 0);
+	height: 2px;
+	box-sizing: border-box;
+	width: 3rem;
+}
+.footer-col ul li:not(:last-child){
+	margin-bottom: .75rem;
+}
+.footer-col ul li a{
+	font-size: 1rem;
+	text-transform: capitalize;
+	text-decoration: none;
+	font-weight: 300;
+	color: #bbbbbb;
+	display: block;
+	transition: all 0.3s ease;
+}
+.footer-col ul li a:hover{
+	color: #ffffff;
+	padding-left: 8px;
+}
+.footer-col .social-links a{
+	display: inline-block;
+	height: 2.5em;
+	width: 2.5em;
+	background-color: rgba(255,255,255,0.2);
+	margin:0 10px 10px 0;
+	text-align: center;
+	line-height: 2.5em;
+	border-radius: 50%;
+	color: #ffffff;
+	transition: all 0.5s ease;
+}
+.footer-col .social-links a:hover{
+	color: black;
+	background-color: #ffffff;
+}
+
+