From d67f3514eff4f45ad1ca84cde6465e622acd4dcc Mon Sep 17 00:00:00 2001 From: flu0r1ne Date: Thu, 7 Sep 2023 21:28:37 -0500 Subject: 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. --- components/Markdown/index.tsx | 16 +- components/Markdown/markdown.module.scss | 111 -------- components/Markdown/markdown.scss | 418 +++++++++++++++++++++++++++++++ 3 files changed, 426 insertions(+), 119 deletions(-) delete mode 100644 components/Markdown/markdown.module.scss create mode 100644 components/Markdown/markdown.scss (limited to 'components/Markdown') 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 = ({md, className, ...props}) => ( -
= ({md, className}) => { + const prerendered = ( +
-); + ); + + 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%; + } +} -- cgit v1.2.3