From f1f25f4764dd8d297a59765b0df85f55da2b39ee Mon Sep 17 00:00:00 2001
From: flu0r1ne <flu0r1ne@flu0r1ne.net>
Date: Mon, 19 Jul 2021 21:08:50 -0500
Subject: Init

---
 components/Markdown/index.tsx            | 27 +++++++++
 components/Markdown/markdown.module.scss | 96 ++++++++++++++++++++++++++++++++
 2 files changed, 123 insertions(+)
 create mode 100644 components/Markdown/index.tsx
 create mode 100644 components/Markdown/markdown.module.scss

(limited to 'components/Markdown')

diff --git a/components/Markdown/index.tsx b/components/Markdown/index.tsx
new file mode 100644
index 0000000..4bb6c79
--- /dev/null
+++ b/components/Markdown/index.tsx
@@ -0,0 +1,27 @@
+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)}
+        
+        dangerouslySetInnerHTML={{
+            __html: md
+        }}
+
+        {...props}
+    />
+);
+
+export type {
+    MarkdownProps
+};
+
+export default Markdown;
\ No newline at end of file
diff --git a/components/Markdown/markdown.module.scss b/components/Markdown/markdown.module.scss
new file mode 100644
index 0000000..ebd372c
--- /dev/null
+++ b/components/Markdown/markdown.module.scss
@@ -0,0 +1,96 @@
+.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;
+    }
+
+    code, pre {
+        background-color: #f2f4f7;
+        border-radius: 5px;
+    }
+
+    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%;
+    }
+}
-- 
cgit v1.2.3