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() {
Janis
Meister
+
"DerTyp7"
);
}
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);
+ }
}
}