fix(Mobile): fix responsiveness bugs

Author: BenedictLang

src/components/Logo/Logo.module.scss

@@ -9,5 +9,8 @@
 	.logoImage {
 		width: auto;
 		height: auto;
+		.img {
+			height: $space;
+		}
 	}
 }

src/components/Logo/logo.js

@@ -6,7 +6,7 @@ const Logo = () => {
 	return (
 		<CustomLink href="/home" className={styles.logo}>
 			<div className={styles.logoImage}>
-				<Image src="/images/logos/Logo-BL.svg" alt="Logo" width={53} height={41} />
+				<Image className={styles.img} src="/images/logos/Logo-BL.svg" alt="Logo" width={53} height={41} />
 			</div>
 		</CustomLink>
 	);

src/components/Sections/Footer/Footer.js

@@ -57,6 +57,21 @@ const Footer = ({ minimal = false }) => {
 										</ul>
 									</li>
 								)}
+								{!minimal && (
+									<li>
+										<div className={styles.footerMenuTitle}>
+											<strong>Legal</strong>
+										</div>
+										<ul className={styles.footerMenuItems}>
+											<li>
+												<CustomLink href={'https://lang-familie.de/impressum/'}>Imprint</CustomLink>
+											</li>
+											<li>
+												<CustomLink href={'https://lang-familie.de/datenschutzerklaerung/'}>Privacy Policy</CustomLink>
+											</li>
+										</ul>
+									</li>
+								)}
 							</ul>
 						</Container>
 					</Section>

src/components/Sections/Footer/Footer.module.scss

@@ -29,6 +29,7 @@
 	display: flex;
 	justify-content: flex-start;
 	flex-wrap: wrap;
+	gap: $space;
 	margin: 0 -2em;
 
 	@media (min-width: 480px) {

src/components/Sections/Heros/Hero/Hero.module.scss

@@ -10,7 +10,7 @@
 		flex-direction: column-reverse;
 		gap: $space;
 		align-items: center;
-		min-height: 95vh;
+		min-height: 100dvh;
 		max-width: unset;
 
 		.socialLinks {
@@ -22,7 +22,7 @@
 			flex-direction: column;
 			align-items: start;
 			gap: $space-small;
-			padding-bottom: 15vh;
+			padding-bottom: 20vh;
 
 			hr {
 				width: 4rem;
@@ -35,11 +35,12 @@
 			}
 			p {
 				font-size: clamp(0.7em, calc(0.1em + 4vw), 1.5em);
-				max-width: 100%;
+				max-width: 90%;
 			}
 			.btn {
-				margin-top: $space-small;
+				margin-top: 2rem;
 				align-self: start;
+				font-size: $font-size-passive;
 			}
 		}
 		.image {
@@ -56,6 +57,11 @@
 @include up-to-tablet {
 	.hero {
 		.content {
+			.textBox {
+				.btn {
+					font-size: $font-size-btn;
+				}
+			}
 			.image {
 				display: block;
 				width: 45%;
@@ -97,6 +103,9 @@
 				p {
 					max-width: 60%;
 				}
+				.btn {
+					font-size: $font-size-btn;
+				}
 			}
 		}
 	}

src/styles/pages/Home.module.scss

@@ -28,7 +28,7 @@
 	width: 100%;
 	background: $color-bg-transparent;
 	backdrop-filter: blur(10em);
-	min-height: 100dvh;
+	min-height: 50dvh;
 
 	.aboutContent {
 		position: relative;
@@ -46,6 +46,7 @@
 				max-width: 100%;
 				height: auto;
 				object-fit: contain;
+				pointer-events: none;
 			}
 		}
 
@@ -98,6 +99,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
+	min-height: 50dvh;
 
 	.showWork {
 		margin: auto;

src/styles/settings/_display.scss

@@ -7,9 +7,9 @@ $border-width-small: 0.05em;
 $border-width-medium: 0.15em;
 
 $space-mini: 0.5em;
-$space-small: 1em;
-$space-medium: 2em;
-$space: calc(2rem + 4vw);
+$space-small: clamp(0.5em, 2vw, 1em);
+$space-medium: clamp(0.8em, 5vw, 2em);
+$space: clamp(0.8em, 1em + 3vw, 6em);
 
 $container-width: calc(60rem + 4vw);
 $content-width: 85rem;

src/styles/settings/_typography.scss

@@ -18,13 +18,13 @@ $font-family-default:
 	monospace;
 
 /* ================ FONT SIZE ================ */
-$font-size-h1: clamp(0.8em, 0.1em + 13vw, 6em);
+$font-size-h1: clamp(0.5em, 12vw, 6em);
 $font-size-h2: clamp(0.4em, 0.1em + 5vw, 1.5em);
 $font-size-h3: clamp(0.4em, 0.5em + 9vw, 2em);
 $font-size-h4: clamp(0.4em, 7vw, 1.3em);
 $font-size-h5: clamp(0.4em, 7vw, 1.2em);
 
 $font-size-p: clamp(0.7em, calc(0.5em + 3vw), 1.2em);
-$font-size-btn: clamp(0.7em, calc(0.5em + 3vw), 1.1em);
+$font-size-btn: clamp(0.7em, calc(0.6em + 3vw), 1.1em);
 
 $font-size-passive: clamp(0.6em, calc(0.1em + 3vw), 0.9em);