diff --git a/src/components/Layout.module.css b/src/components/Layout.module.css index ba398cbff..90e741c73 100644 --- a/src/components/Layout.module.css +++ b/src/components/Layout.module.css @@ -14,7 +14,7 @@ } .main { - padding: calc(var(--spacer) * 2) 0; + padding: var(--spacer) 0 calc(var(--spacer) * 2) 0; /* sticky footer technique */ flex: 1; diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 6913169bb..4e6fd8ac2 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -5,6 +5,7 @@ import PageHeader from './molecules/PageHeader' import styles from './Layout.module.css' import Seo from './atoms/Seo' import Container from './atoms/Container' +import Alert from './atoms/Alert' export interface LayoutProps { children: ReactNode @@ -28,6 +29,12 @@ export default function Layout({
+ + +
{title && !noPageHeader && ( diff --git a/src/components/atoms/Alert.module.css b/src/components/atoms/Alert.module.css index f03ba01f0..dd9ebd27b 100644 --- a/src/components/atoms/Alert.module.css +++ b/src/components/atoms/Alert.module.css @@ -26,10 +26,13 @@ } .text { - margin-bottom: 0; font-size: var(--font-size-small); } +.text p:last-child { + margin-bottom: 0; +} + .action { margin-top: calc(var(--spacer) / 2); } diff --git a/src/components/atoms/Alert.tsx b/src/components/atoms/Alert.tsx index 996900c50..d313dfdb7 100644 --- a/src/components/atoms/Alert.tsx +++ b/src/components/atoms/Alert.tsx @@ -1,6 +1,7 @@ import React, { ReactElement, FormEvent } from 'react' import styles from './Alert.module.css' import Button from './Button' +import Markdown from './Markdown' export default function Alert({ title, @@ -19,7 +20,7 @@ export default function Alert({ return (
{title &&

{title}

} -

{text}

+ {action && (