diff options
Diffstat (limited to 'components/Markdown')
| -rw-r--r-- | components/Markdown/index.tsx | 27 | ||||
| -rw-r--r-- | components/Markdown/markdown.module.scss | 96 |
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%; + } +} |