Files
personal-website/assets/css/partials/header.css
T
2023-11-02 15:49:57 +01:00

86 lines
1.3 KiB
CSS

:root {
--header-light-background: var(--white);
--header-dark-background: #676666;
}
header {
width: 85%;
margin: 2.5rem auto;
padding: 0.938rem 2.188rem;
border-radius: 0.75rem;
box-shadow: var(--header-shadow);
background-color: var(--header-background);
color: var(--text);
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
}
header #header-face {
display: flex;
align-items: center;
column-gap: 0.625rem;
}
header #header-face h3 {
font-weight: 600;
}
header #menus {
display: flex;
align-items: center;
column-gap: 1.563rem;
}
header #menus a {
text-decoration: none;
font-weight: 600;
font-size: 15px;
}
header #links {
display: flex;
align-items: center;
column-gap: 1.5rem;
}
header #links .linkedin,
header #links .github,
header #links .cv-paper-flip,
header #burger svg path {
stroke: var(--text);
}
header #links .twitter,
header #links .rss,
header #links .cv,
header #links .moon {
fill: var(--text);
}
header #burger {
display: none;
}
header #links #theme-toggle, header #burger {
cursor: pointer;
}
@media only screen and (max-width: 768px) {
header {
padding: 0.938rem 1.25rem;
}
header #menus, header #links {
display: none;
}
header #burger {
display: initial;
}
}