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/Typography/index.tsx | 47 ------------------------- components/Typography/typo.module.scss | 64 ---------------------------------- 2 files changed, 111 deletions(-) delete mode 100644 components/Typography/index.tsx delete mode 100644 components/Typography/typo.module.scss (limited to 'components/Typography') diff --git a/components/Typography/index.tsx b/components/Typography/index.tsx deleted file mode 100644 index b9babc0..0000000 --- a/components/Typography/index.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import React from 'react'; -import styles from './typo.module.scss'; -import clsx from 'clsx'; - - -type Variant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body'; -type Align = 'inherit' | 'left' | 'center' | 'right'; - -interface TypographyProps extends React.HTMLAttributes { - variant?: Variant; - align?: Align; - gutter?: boolean; -} - -const variantTagMap: Record = { - h1: 'h1', - h2: 'h2', - h3: 'h3', - h4: 'h4', - h5: 'h5', - h6: 'h6', - body: 'p' -}; - -const Typography: React.FC = ({ - variant = 'body', - align = 'inherit', - gutter = false, - className, - ...props -}) => { - const Tag = variantTagMap[variant] as keyof React.ReactHTML; - - const typographyClassName = clsx( - styles[`typo-${variant}`], - { - [`align-${align}`]: align !== 'inherit', - [styles['typo-gutter']]: gutter - }, - className - ); - - return ; -}; - -export default Typography; - diff --git a/components/Typography/typo.module.scss b/components/Typography/typo.module.scss deleted file mode 100644 index 934333d..0000000 --- a/components/Typography/typo.module.scss +++ /dev/null @@ -1,64 +0,0 @@ -.typo-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); -} - -.typo-h2 { - font-size: 2.3rem; - font-weight: 300; - line-height: 1.2; - letter-spacing: -0.00833em; - - // margin-top: 1.6rem; - // margin-bottom: 0.8rem; -} - -.typo-h3 { - font-size: 1.3rem; - font-weight: 400; - line-height: 1.167; - letter-spacing: 0em; - - // margin-top: 1.3rem; - // margin-bottom: 0.5rem; -} - -.typo-h4 { - font-size: 1.25rem; -} - -.typo-h5 { - font-size: 1.15rem; -} - -.typo-h6 { - font-size: 1.10rem; -} - -.typo-h4, .typo-h5, .typo-h6 { - // margin-top: 0.8rem; - // margin-bottom: 0.6rem; -} - -.typo-p { - font-size: 1rem; - letter-spacing: 0.00938em; - font-weight: 300; -} - -.typo-p { - font-size: 1rem; - line-height: 1.5; - // margin-bottom: 1em; -} - -.typo-gutter { - margin-bottom: 0.35em; -} -- cgit v1.2.3