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.

2 files changed, 37 insertions, 22 deletions

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}) => (
-    <span className={styles.date}><b>Last Updated: </b>{children}</span>
+    <span style={{ whiteSpace: 'nowrap', padding: '4px 0px' }} >Last Updated: {children}</span>
 )
 
 const DefaultPage : FC<DefaultPageProps> = ({className, lastUpdated, children, path, ...props}) => (
-    <Viewport
-        className={clsx(styles.viewportOverrides, className)}
+  <Viewport
+      className={clsx(styles.viewportOverrides, className)}
+      my={3}
+  >
+    <Box
+      style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}
+      el='header'
+      my={1}
     >
-        {path !== undefined ? <PathCrumbs path={path!} /> : undefined}
-        {lastUpdated ? <LastUpdatedDate>{lastUpdated}</LastUpdatedDate> : undefined}
-        {children}
-    </Viewport>
+      {path !== undefined ? <PathCrumbs style={{ padding: '4px 0px' }} path={path!} /> : undefined}
+      {lastUpdated ? <LastUpdatedDate>{lastUpdated}</LastUpdatedDate> : undefined}
+    </Box>
+    <main>
+      {children}
+    </main>
+  </Viewport>
 );
 
 export default DefaultPage;