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. --- templates/Default/default.module.scss | 34 +++++++++++++++++++--------------- templates/Default/index.tsx | 25 ++++++++++++++++++------- 2 files changed, 37 insertions(+), 22 deletions(-) (limited to 'templates/Default') diff --git a/templates/Default/default.module.scss b/templates/Default/default.module.scss index 7dd99c5..79760a7 100644 --- a/templates/Default/default.module.scss +++ b/templates/Default/default.module.scss @@ -1,17 +1,21 @@ -.viewportOverrides { - margin-top: 4em; - margin-bottom: 3em; -} +// .date { +// white-space: nowrap; +// } -.date { - margin-top: 0.5em; - padding: 0.1em 0.2em; - display: block; -} +// .viewportOverrides { +// margin-top: 4em; +// margin-bottom: 3em; +// } -@media screen and (min-width: 1000px) { - .date { - float: right; - padding: 0.1em 0.2em; - } -} \ No newline at end of file +// .date { +// margin-top: 0.5em; +// padding: 0.1em 0.2em; +// display: block; +// } + +// @media screen and (min-width: 1000px) { +// .date { +// float: right; +// padding: 0.1em 0.2em; +// } +// } diff --git a/templates/Default/index.tsx b/templates/Default/index.tsx index ccfde4a..1025703 100644 --- a/templates/Default/index.tsx +++ b/templates/Default/index.tsx @@ -3,6 +3,8 @@ import PathCrumbs from "../../components/PathCrumbs"; import Viewport from "../../components/ViewPort"; import styles from './default.module.scss'; import clsx from 'clsx'; +import Typ from '../../components/Typ'; +import Box from '../../components/Box'; export type DefaultPageProps = { className?: string; @@ -12,17 +14,26 @@ export type DefaultPageProps = { }; const LastUpdatedDate : FC<{ children: React.ReactNode }> = ({children}) => ( - Last Updated: {children} + Last Updated: {children} ) const DefaultPage : FC = ({className, lastUpdated, children, path, ...props}) => ( - + - {path !== undefined ? : undefined} - {lastUpdated ? {lastUpdated} : undefined} - {children} - + {path !== undefined ? : undefined} + {lastUpdated ? {lastUpdated} : undefined} + +
+ {children} +
+ ); export default DefaultPage; -- cgit v1.2.3