Scoped global styling to all markdown

Make React compatible with markdown-style HTML by added components
with identical styling to markdown. This is done while CSS scoping
is maintained. Additional style is loaded through the markdown loader
by injecting default-styling tags into the components. This allows
default-margin to be added to these elements in addition to the styling
found in the React elements. The homepage reflects the domain, as defined
by an environmental variable.

3 files changed, 426 insertions, 119 deletions

diff --git a/components/Markdown/index.tsx b/components/Markdown/index.tsx
index 1a71330..b6def4f 100644
--- a/components/Markdown/index.tsx
+++ b/components/Markdown/index.tsx
@@ -1,24 +1,24 @@
 import React, { FC } from 'react';
-import styles from './markdown.module.scss';
+
 import clsx from 'clsx';
 
 interface MarkdownProps {
     md: string;
     className?: string;
-    props?: object;
 }
 
-const Markdown : FC<MarkdownProps> = ({md, className, ...props}) => (
-    <div
-        className={clsx(styles.markdownContainer, className)}
+const Markdown : FC<MarkdownProps> = ({md, className}) => {
 
+  const prerendered = (
+    <div
         dangerouslySetInnerHTML={{
             __html: md
         }}
-
-        {...props}
     />
-);
+  );
+
+  return prerendered;
+};
 
 export type {
     MarkdownProps
diff --git a/components/Markdown/markdown.module.scss b/components/Markdown/markdown.module.scss
deleted file mode 100644
index e1debd1..0000000
--- a/components/Markdown/markdown.module.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.markdownContainer {
-    strong {
-        font-weight: 600;
-    }
-
-    h1 {
-        font-size: 2.8rem;
-        font-weight: 300;
-        line-height: 1.167;
-        letter-spacing: -0.01562em;
-        margin-top: 1.0rem;
-        margin-bottom: 1rem;
-
-        padding-bottom: 0.4rem;
-        border-bottom: 0.12rem solid rgb(53, 53, 53);
-    }
-
-    h2 {
-        font-size: 2.3rem;
-        font-weight: 300;
-        line-height: 1.2;
-        letter-spacing: -0.00833em;
-
-        margin-top: 1.6rem;
-        margin-bottom: 0.8rem;
-    }
-
-    h3 {
-        font-size: 1.3rem;
-        font-weight: 400;
-        line-height: 1.167;
-        letter-spacing: 0em;
-
-        margin-top: 1.3rem;
-        margin-bottom: 0.5rem;
-    }
-
-    h4 {
-        font-size: 1.25rem;
-    }
-
-    h5 {
-        font-size: 1.15rem;
-    }
-
-    h6 {
-        font-size: 1.10rem;
-    }
-
-    h4, h5, h6 {
-        margin-top: 0.8rem;
-        margin-bottom: 0.6rem;
-    }
-
-    p, li {
-        font-size: 1rem;
-        letter-spacing: 0.00938em;
-        font-weight: 300;
-    }
-
-    p {
-        font-size: 1rem;
-        line-height: 1.5;
-        margin-bottom: 1em;
-    }
-
-    code {
-        font-size: 1rem;
-        line-height: 1.5;
-        padding: 0.05rem 0.2rem;
-    }
-
-    pre {
-        padding: 0.5rem 1.0rem;
-        margin: 0.5rem 0;
-        box-sizing: border-box;
-    }
-    pre > code {
-        padding: 0;
-    }
-
-    code, pre {
-        background-color: #f2f4f7;
-        border-radius: 5px;
-    }
-
-    pre {
-        overflow: auto;
-        box-sizing: border-box;
-    }
-
-    @media screen and (max-width: 700px) {
-        pre {
-            padding-bottom: 0.7rem;
-        }
-    }
-
-    li {
-        line-height: 1.15;
-        margin-left: 1em;
-        margin-top: 0.3em;
-        list-style-image: none;
-        list-style-position: outside;
-        list-style-type: circle;
-    }
-
-    img {
-      max-width: 95%;
-      margin: 2em 2.5%;
-    }
-}
diff --git a/components/Markdown/markdown.scss b/components/Markdown/markdown.scss
new file mode 100644
index 0000000..e529e66
--- /dev/null
+++ b/components/Markdown/markdown.scss
@@ -0,0 +1,418 @@
+/* AUTOMATIC MARGIN APPLIED WHEN md-dl */
+
+.md-dl.md-h1, .md-dl.md-h2, .md-dl.md-h3, .md-dl.md-h4, .md-dl.md-h5, .md-dl.md-h6 {
+	margin-top: 20px;
+	margin-bottom: 14px;
+}
+
+.md-dl.md-list, .md-dl.md-pre, .md-dl.md-p, .md-dl.md-table, .md-dl.md-blockquote {
+	margin-bottom: 14px;
+}
+
+.md-dl.md-list .md-list {
+	margin-bottom: 0;
+}
+
+.md-dl.md-blockquote > :last-child {
+	margin-bottom: 0;
+}
+
+.md-dl.md-wrapper > :first-child {
+	margin-top: 0;
+}
+
+/* LINKS */
+
+.md-a {
+	text-decoration: none;
+}
+
+.md-a:hover {
+	text-decoration: underline;
+}
+
+.md-a, .md-a:visited, .md-a:active, .md-a:hover {
+	color: #0716ea;
+}
+
+/* TEXT */
+
+.md-blockquote, .md-p, .md-li {
+	font-size: 1rem;
+	letter-spacing: 0.00938em;
+	line-height: 1.5;
+}
+
+.md-code {
+	font-size: 1rem;
+	line-height: 1.25;
+}
+
+.md-strong {
+	font-weight: bold;
+}
+
+.md-em {
+	font-style: italic;
+}
+
+/* LISTS */
+
+.md-li {
+	line-height: 1.25;
+	margin-left: 1em;
+
+	list-style-image: none;
+	list-style-position: inside;
+	list-style-type: none;
+}
+
+// allow wrapping with inside list-style-position elements
+.md-li > p {
+	display: inline;
+}
+
+.md-dl.md-li > p {
+	margin-bottom: 0;
+
+	&::after {
+		content: "";
+		display: block;
+		margin-bottom: 14px;
+	}
+}
+
+.md-li-checkbox {
+	list-style-type: none !important;
+}
+
+.md-checkbox {
+	margin: 0;
+	margin-right: 0.5em;
+}
+
+// UP TO FOUR LEVELS OF DECORATORS
+
+.md-ol > li {
+	list-style-type: decimal;
+}
+
+.md-ul > li {
+	list-style-type: disc;
+}
+
+.md-list .md-ul > li {
+	list-style-type: circle;
+}
+
+.md-list .md-list .md-ul > li {
+	list-style-type: square;
+}
+
+.md-list .md-list .md-list .md-ul > li {
+	list-style-type: disc;
+}
+
+// ADD SLIGHT MARGIN TO SPACE ELEMENTS EXCEPT THE FIRST
+
+.md-list > li:not(:first-child) {
+	margin-top: 0.15rem;
+}
+
+.md-list .md-list > li:first-child {
+	margin-top: 0.15rem;
+}
+
+/* HEADINGS */
+
+.md-h1 {
+	font-size: 3rem;
+	font-weight: 300;
+	line-height: 1.167;
+	letter-spacing: -0.01562em;
+
+	padding-bottom: 0.4rem;
+	border-bottom: 0.12rem solid rgb(53, 53, 53);
+}
+
+.md-h2 {
+	font-size: 2.5rem;
+	font-weight: 300;
+	line-height: 1.2;
+	letter-spacing: -0.00833em;
+}
+
+.md-h3 {
+	font-size: 1.4rem;
+	font-weight: 400;
+	line-height: 1.167;
+	letter-spacing: 0em;
+}
+
+.md-h4 {
+	font-size: 1.38rem;
+}
+
+.md-h5 {
+	font-size: 1.26rem;
+}
+
+.md-h6 {
+	font-size: 1.2rem;
+}
+
+
+/* CODE */
+
+.md-codespan {
+	background-color: #f2f4f7;
+	border-radius: 5px;
+	padding: 0.05rem 0.2rem;
+}
+
+/* BLOCKQUOTE */
+
+.md-blockquote {
+	box-sizing: border-box;
+
+	position: relative;
+	padding-left: 1.2rem;
+	padding-top: 0.05rem;
+	padding-bottom: 0.05rem;
+
+	&::before {
+		content: "";
+		position: absolute;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 3px;
+		background-color: grey;
+	}
+}
+
+/* CODE */
+
+.md-pre {
+	background-color: #f2f4f7;
+	border-radius: 5px;
+	padding: 12px;
+	overflow: scroll;
+}
+
+/* MD LINE / SEP */
+
+.md-hr {
+	font-size: 300;
+}
+
+/* TABLES */
+
+.md-table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 1rem 0;
+}
+
+.md-thead {
+	background-color: #f2f4f7;
+	font-size: 1.10rem;
+
+	.md-th {
+		padding: 0.5rem 0.75rem;
+		text-align: left;
+		border-bottom: 2px solid #545454;
+	}
+}
+
+
+.md-tbody {
+	.md-tr {
+		&:nth-child(even) {
+			background-color: #f8f8f8;
+		}
+
+		&:nth-child(odd) {
+			background-color: #ffffff;
+		}
+	}
+
+	.md-td {
+		padding: 0.5rem 0.75rem;
+		border-bottom: 1px solid #ddd;
+	}
+}
+
+/* IMAGE */
+
+.md-img {
+	max-width: 95%;
+	margin: 2em 2.5%;
+}
+
+/* DEL */
+
+.md-del { }
+
+.markdownContainer {
+	/* Strong */
+
+	strong {
+		font-weight: 600;
+	}
+
+	/* Headings */
+
+	h1 {
+		font-size: 2.8rem;
+		font-weight: 300;
+		line-height: 1.167;
+		letter-spacing: -0.01562em;
+		margin-top: 1.0rem;
+		margin-bottom: 1rem;
+
+		padding-bottom: 0.4rem;
+		border-bottom: 0.12rem solid rgb(53, 53, 53);
+	}
+
+	h2 {
+		font-size: 2.3rem;
+		font-weight: 300;
+		line-height: 1.2;
+		letter-spacing: -0.00833em;
+
+		margin-top: 1.6rem;
+		margin-bottom: 0.8rem;
+	}
+
+	h3 {
+		font-size: 1.3rem;
+		font-weight: 400;
+		line-height: 1.167;
+		letter-spacing: 0em;
+
+		margin-top: 1.3rem;
+		margin-bottom: 0.5rem;
+	}
+
+	h4 {
+		font-size: 1.25rem;
+	}
+
+	h5 {
+		font-size: 1.15rem;
+	}
+
+	h6 {
+		font-size: 1.10rem;
+	}
+
+	h4, h5, h6 {
+		margin-top: 0.8rem;
+		margin-bottom: 0.6rem;
+	}
+
+	p, li {
+		font-size: 1rem;
+		letter-spacing: 0.00938em;
+	}
+
+	p {
+		font-size: 1rem;
+		line-height: 1.5;
+		margin-bottom: 1em;
+	}
+
+	code {
+		font-size: 1rem;
+		line-height: 1.5;
+		padding: 0.05rem 0.2rem;
+	}
+
+	pre {
+		padding: 0.5rem 1.0rem;
+		margin: 0.5rem 0;
+		box-sizing: border-box;
+	}
+	pre > code {
+		padding: 0;
+	}
+
+	code, pre {
+		background-color: #f2f4f7;
+		border-radius: 5px;
+	}
+
+	pre {
+		overflow: auto;
+		box-sizing: border-box;
+	}
+
+	@media screen and (max-width: 700px) {
+		pre {
+			padding-bottom: 0.7rem;
+		}
+	}
+
+	/* LISTS */
+
+	// li {
+	// 	font-size: 1rem;
+	// 	letter-spacing: 0.00938em;
+
+	// 	line-height: 1.4;
+	// 	margin-left: 1em;
+
+	// 	list-style-image: none;
+	// 	list-style-position: inside;
+	// 	list-style-type: none;
+
+	// 	box-sizing: border-box;
+
+	// 	font-size: 1rem;
+	// }
+
+	// ul, ol {
+	// 	li:not(:first-child) {
+	// 		margin-top: 0.15rem;
+	// 	}
+	// }
+
+	// ul ol li, ol li {
+	// 	list-style-type: decimal;
+	// }
+
+	// ul li {
+	// 	list-style-type: disc;
+	// }
+
+	// ul, ol {
+	// 	ul li:first-child, ol li:first-child {
+	// 		margin-top: 0.15rem !important;
+	// 	}
+
+	// 	ul li {
+	// 		list-style-type: circle;
+	// 	}
+
+	// 	ul, ol {
+	// 		ul li {
+	// 			list-style-type: square;
+	// 		}
+	// 	}
+	// }
+
+	// li {
+	// 	line-height: 1.15;
+	// 	margin-left: 1em;
+	// 	margin-bottom: 0.3em;
+	// 	list-style-image: none;
+	// 	list-style-position: outside;
+	// 	list-style-type: circle;
+	// }
+
+	img {
+	  max-width: 95%;
+	  margin: 2em 2.5%;
+	}
+}