aboutsummaryrefslogtreecommitdiff
path: root/components/Markdown
diff options
context:
space:
mode:
Diffstat (limited to 'components/Markdown')
-rw-r--r--components/Markdown/index.tsx16
-rw-r--r--components/Markdown/markdown.module.scss111
-rw-r--r--components/Markdown/markdown.scss418
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%;
+ }
+}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 08:36:07 +0000