remove old design

This commit is contained in:
dertyp7
2024-01-13 15:44:41 +01:00
parent 7dac58b070
commit 15a866bbe6
8 changed files with 3 additions and 391 deletions

View File

@@ -1,139 +0,0 @@
.header {
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 5rem;
flex-direction: row;
.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;
}
}
&: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);
}
}
}
.links {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
a {
margin-left: 1rem;
text-decoration: none;
color: var(--color-font-link-header);
font-weight: 600;
font-size: 1.2rem;
transition: all 0.15s ease-in-out;
border-bottom: 3px solid var(--color-border-link-header);
&:hover {
color: var(--color-font-link-header-hover);
border-color: var(--color-border-link-header-hover);
}
}
}
.control {
display: flex;
justify-content: space-around;
align-items: center;
flex: 0.5;
}
.header-mobile {
display: none; // will be set to flex on mobile/small screens
justify-content: space-between;
flex: 1;
width: 100%;
flex-direction: row;
.logo {
display: block;
}
.control {
display: flex;
justify-content: flex-end;
gap: 1rem;
}
}
@media (max-width: 768px) {
flex-direction: column;
gap: 1rem;
.logo {
display: none;
}
.control {
display: none;
}
.header-mobile {
display: flex;
}
}
@media (max-width: 300px) {
.header-mobile {
flex-direction: column;
.logo {
justify-content: center;
display: flex;
margin-bottom: 10px;
}
.control {
justify-content: center;
}
}
.links {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
}
}
}