From 1d4d1ba17620ee0724738103f6e13f854d70ee0d Mon Sep 17 00:00:00 2001
From: DerTyp7 <janis@tealfire.de>
Date: Tue, 10 Oct 2023 17:10:01 +0200
Subject: [PATCH] add logo tooltip

---
 src/components/Header.tsx |  1 +
 src/styles/Header.scss    | 37 ++++++++++++++++++++++++++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index b1923b0..a1f21e0 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,6 +6,7 @@ function Logo() {
 		<div className="logo">
 			<p>Janis</p>
 			<p>Meister</p>
+			<p className="tooltip">"DerTyp7"</p>
 		</div>
 	);
 }
diff --git a/src/styles/Header.scss b/src/styles/Header.scss
index 3da26e7..59270b9 100644
--- a/src/styles/Header.scss
+++ b/src/styles/Header.scss
@@ -8,15 +8,46 @@
 
 	.logo {
 		flex: 0.5;
+		cursor: text;
 
 		p {
 			font-size: 2rem;
 			line-height: 0.8;
+
+			&:nth-child(2) {
+				padding-left: 20px;
+				font-weight: bold;
+			}
+
+			&.tooltip {
+				display: none;
+				background-color: var(--color-accent);
+				color: #000;
+				animation: moveFromTop 0.05s ease-in-out;
+				font-size: 1.5rem;
+			}
 		}
 
-		p:nth-child(2) {
-			padding-left: 20px;
-			font-weight: bold;
+		&:hover {
+			.tooltip {
+				display: block;
+				position: absolute;
+				margin-top: 10px;
+				padding: 10px;
+				border-radius: 5px;
+				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+				z-index: 1;
+				font-weight: bold;
+			}
+		}
+
+		@keyframes moveFromTop {
+			0% {
+				transform: translateY(-30px);
+			}
+			100% {
+				transform: translateY(-10px);
+			}
 		}
 	}