aboutsummaryrefslogtreecommitdiff
path: root/components/Markdown
diff options
context:
space:
mode:
Diffstat (limited to 'components/Markdown')
-rw-r--r--components/Markdown/index.tsx27
-rw-r--r--components/Markdown/markdown.module.scss96
2 files changed, 123 insertions, 0 deletions
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%;
+ }
+}