Merge pull request #534 from Stefterv/404-layout

404 layout fixes

Author: SableRaf

src/components/Footer.module.css

@@ -1,6 +1,5 @@
 .root {
   position: relative;
-  top: 150px;
   z-index: 600;
   width: 100%;
   padding-top: var(--margin);
@@ -27,10 +26,12 @@
 .contactWrapper {
   flex-basis: var(--col2);
   font-size: var(--text-small);
+
   & p {
     margin-bottom: 0;
     font-size: inherit;
   }
+
   & a {
     font-size: inherit;
   }
@@ -39,7 +40,7 @@
 .socialmediaWrapper {
   flex-basis: var(--col6);
 
-  & > ul {
+  &>ul {
     display: flex;
     font-size: inherit;
 
@@ -88,4 +89,4 @@
       text-align: center;
     }
   }
-}
+}

src/components/Header.module.css

@@ -1,6 +1,6 @@
 .root {
   width: 100%;
-  position: fixed;
+  position: sticky;
   top: 0;
   z-index: 800;
   background-color: white;
@@ -17,4 +17,4 @@
   &:focus {
     color: var(--processing-blue-dark);
   }
-}
+}

src/components/Layout.module.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  min-height: 100%;
+  min-height: 100vh;
 
   & h2 {
     scroll-margin-top: 150px;
@@ -14,7 +14,6 @@
 }
 
 .main {
-  top: 145px;
   position: relative;
   flex: 1;
   padding-top: var(--vertical-margin-large);
@@ -23,10 +22,4 @@
 
 .withBreadcrumbs {
   padding-top: var(--vertical-margin-xsmall);
-}
-
-@media (--reduced) {
-  .main {
-    top: 95px;
-  }
-}
+}

src/pages/404.js

@@ -3,6 +3,7 @@ import { Helmet } from 'react-helmet';
 import { useIntl } from 'react-intl';
 
 import Layout from '../components/Layout';
+import * as css from '../styles/pages/404.module.css';
 
 const NotFoundPage = () => {
   const intl = useIntl();
@@ -12,8 +13,10 @@ const NotFoundPage = () => {
       <Helmet>
         <title>{intl.formatMessage({ id: 'pageNotFound' })}</title>
       </Helmet>
-      <h1>{intl.formatMessage({ id: 'notFound' })}</h1>
-      <p>{intl.formatMessage({ id: 'notFoundText' })}</p>
+      <div className={css.notfound}>
+        <h1>{intl.formatMessage({ id: 'notFound' })}</h1>
+        <p>{intl.formatMessage({ id: 'notFoundText' })}</p>
+      </div>
     </Layout>
   );
 };

src/styles/pages/404.module.css

@@ -0,0 +1,3 @@
+.notfound {
+  padding: var(--margin);
+}