changed header fixed to sticky

position sticky is more modern and widely supported, this will allow to remove the magic variables in the main and footer

Author: Stefterv

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;
-  }
-}
+}