add new logo

src/components/Header.tsx

@@ -1,24 +1,35 @@
 import "@styles/Header.scss";
 import ThemeSwitch from "@components/ThemeSwitch";
 
+function Logo() {
+	return (
+		<div className="logo">
+			<p>Janis</p>
+			<p>Meister</p>
+		</div>
+	);
+}
+
+function Control() {
+	return (
+		<div className="control">
+			<ThemeSwitch />
+			<div>Language</div>
+		</div>
+	);
+}
+
 export default function Header() {
 	return (
 		<header className="header">
 			{/* Mobile Top Row Header */}
 			<div className="header-mobile">
-				<div className="logo">
+				<Logo />
-					<h1>Meister</h1>
+				<Control />
-				</div>
-				<div className="control">
-					<ThemeSwitch />
-					<div>Language</div>
-				</div>
 			</div>
 			{/* END: Mobile Top Row Header */}
 
-			<div className="logo">
+			<Logo />
-				<h1>Meister</h1>
-			</div>
 
 			<div className="links">
 				<a href="">About</a>
@@ -26,10 +37,7 @@ export default function Header() {
 				<a href="">Projects</a>
 				<a href="">Contact</a>
 			</div>
-			<div className="control">
+			<Control />
-				<ThemeSwitch />
-				<div>Language</div>
-			</div>
 		</header>
 	);
 }

src/styles/Header.scss

@@ -8,6 +8,16 @@
 
 	.logo {
 		flex: 0.5;
+
+		p {
+			font-size: 2rem;
+			line-height: 0.8;
+		}
+
+		p:nth-child(2) {
+			padding-left: 20px;
+			font-weight: bold;
+		}
 	}
 
 	.links {
@@ -48,7 +58,7 @@
 		flex-direction: row;
 
 		.logo {
-			display: flex;
+			display: block;
 		}
 
 		.control {
@@ -78,6 +88,9 @@
 			flex-direction: column;
 			.logo {
 				justify-content: center;
+				display: flex;
+
+				margin-bottom: 10px;
 			}
 
 			.control {