Adjust heroHeader size

aliebald · aliebald · commit dda1314b579f · 2022-09-15T14:58:52.000+02:00
diff --git a/components/Organisms/Header/Header.tsx b/components/Organisms/Header/Header.tsx
@@ -78,7 +78,7 @@ export default function Header({ links }: { links: { label: string; href: string
 	const iconStroke = 1.5;
 
 	return (
-		<MantineHeader height={56} pb="md">
+		<MantineHeader height="var(--header-height)" pb="md">
 			<Container className={classes.inner}>
 				<SideNav>{linkElements}</SideNav>
 				<Group className={classes.links} spacing={5}>
diff --git a/styles/Home.module.css b/styles/Home.module.css
@@ -1,4 +1,4 @@
 .heroHeader {
-	min-height: 65vh;
+	min-height: calc(100vh - var(--header-height) - var(--waves-section-spacer-height) + min(5vh, 30px));
 	margin: auto;
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -41,7 +41,9 @@ a {
  * =============================== */
 
 :root {
-  --btn-transition: .35s ease
+  --header-height: 56px;
+  --waves-section-spacer-height: 300px;
+  --btn-transition: .35s ease;
 }
 
 

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`	`1`	`.heroHeader {`
`2`		`- min-height: 65vh;`
	`2`	`+ min-height: calc(100vh - var(--header-height) - var(--waves-section-spacer-height) + min(5vh, 30px));`
`3`	`3`	`margin: auto;`
`4`	`4`	`}`
Original file line number	Diff line number	Diff line change
`@@ -41,7 +41,9 @@ a {`
`41`	`41`	`* =============================== */`
`42`	`42`
`43`	`43`	`:root {`
`44`		`- --btn-transition: .35s ease`
	`44`	`+ --header-height: 56px;`
	`45`	`+ --waves-section-spacer-height: 300px;`
	`46`	`+ --btn-transition: .35s ease;`
`45`	`47`	`}`
`46`	`48`
`47`	`49`