mirror of
https://github.com/DerTyp7/dertyp7.github.io.git
synced 2025-10-29 21:02:09 +01:00
109 lines
1.6 KiB
SCSS
109 lines
1.6 KiB
SCSS
.header {
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 5rem;
|
|
flex-direction: row;
|
|
|
|
.logo {
|
|
flex: 0.5;
|
|
|
|
p {
|
|
font-size: 2rem;
|
|
line-height: 0.8;
|
|
}
|
|
|
|
p:nth-child(2) {
|
|
padding-left: 20px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|