aboutsummaryrefslogtreecommitdiff
path: root/templates/Default
diff options
context:
space:
mode:
authorflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
committerflu0r1ne <flu0r1ne@flu0r1ne.net>2023-09-07 21:28:37 -0500
commitd67f3514eff4f45ad1ca84cde6465e622acd4dcc (patch)
tree55f9c8e4f68f1269300b937fb14ae76e3446d621 /templates/Default
parentef4fb0a5277ee99bd0f1747b77e733ef7f02460d (diff)
downloadhomepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.tar.xz
homepage-d67f3514eff4f45ad1ca84cde6465e622acd4dcc.zip
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.
Diffstat (limited to 'templates/Default')
-rw-r--r--templates/Default/default.module.scss34
-rw-r--r--templates/Default/index.tsx25
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;