umami/components/layout/Header.module.css

140 lines
2.1 KiB
CSS
Raw Normal View History

.navbar {
align-items: stretch;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
.burger {
display: none;
}
2020-08-05 07:45:05 +02:00
.header {
display: flex;
2020-08-18 01:46:13 +02:00
min-height: 100px;
width: 100%;
2020-08-05 07:45:05 +02:00
}
.title {
2020-08-06 04:04:02 +02:00
font-size: var(--font-size-large);
2020-09-27 07:02:10 +02:00
display: flex;
align-items: center;
line-height: 1.4;
2020-08-05 07:45:05 +02:00
}
2020-08-18 01:46:13 +02:00
.logo {
margin-right: 12px;
}
2020-08-05 07:45:05 +02:00
.nav {
display: flex;
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
width: 100%;
justify-content: space-between;
}
.items {
2020-08-05 07:45:05 +02:00
display: flex;
justify-content: center;
2020-08-05 07:45:05 +02:00
align-items: center;
font-size: var(--font-size-normal);
font-weight: 600;
2020-08-05 07:45:05 +02:00
}
.nav a + a {
margin-left: 40px;
2020-08-05 07:45:05 +02:00
}
2020-08-07 07:03:02 +02:00
.buttons {
display: flex;
justify-content: flex-end;
2020-09-27 07:02:10 +02:00
align-items: center;
}
@media only screen and (max-width: 992px) {
.nav {
font-size: var(--font-size-large);
justify-content: space-between;
margin: 20px 0;
}
.items {
flex-wrap: wrap;
}
2021-01-03 12:32:25 +01:00
}
@media only screen and (max-width: 768px) {
2021-01-03 12:32:25 +01:00
.header {
padding: 0 15px;
}
.title {
padding: 0.5rem;
margin-bottom: 0.5rem;
}
.nav {
font-size: var(--font-size-normal);
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
position: relative;
}
.items {
display: flex;
justify-content: unset;
align-items: left;
font-size: var(--font-size-normal);
font-weight: 600;
}
.items > div {
display: none;
}
.header .active {
display: inherit;
width: 100%;
}
.items a {
width: 100%;
}
.burger {
display: block;
/* color: #4a4a4a; */
background: none;
border: 1px solid var(--gray900);
border-radius: 4px;
cursor: pointer;
height: 3.25rem;
width: 3.25rem;
margin-left: auto;
position: absolute;
right: 0;
top: 0;
}
.burger span {
transform: translateX(25%);
padding: 1px 0px;
margin: 6px 0;
width: 65%;
display: block;
background-color: var(--gray900);
}
.burger div {
/* height: 100%; */
color: var(--gray900);
text-align: center;
margin: auto;
font-size: 1.5rem;
/* transform: translateX(-50%); */
}
2020-08-07 07:03:02 +02:00
}