.site-header {
height: 60px; background: $primary; color: $primary-text; margin: 0; display: flex; align-items: center;
}
.site-name {
font-size: 28px; margin: 0; font-family: $header-font;
}
.site-logo {
height: 54px; width: 54px; padding: 3px 5%;
}
.site-logo:hover {
background: $primary-light;
}
.site-menu {
font-family: $header-font; color: $primary-text; font-size: 18px; line-height: 60px; padding: 0 5%;
} .site-menu-list {
list-style-type: none; margin: 0; padding: 0 5%; display: flex; flex-direction: row; width: 100%;
}
.site-menu-item {
box-sizing: border-box; white-space: nowrap; padding: 0 15px;
}
.site-menu-link {
text-decoration: none; color: $primary-text; display: block;
}
@media screen
and (min-device-width: 1020px) and (orientation: landscape) { .site-menu-link:hover { color: whitesmoke; transition: 1s; } .site-menu-item:hover { background: $primary-light; transition: 1s; } }
@media screen
and (min-device-width: 320px) and (max-device-width: 640px) and (orientation: portrait) { .site-header { flex-direction: column; align-items: center; height: auto; } .site-menu { margin: 0; padding: 0; width: 100%; } .site-menu-list { list-style-type: none; margin: 0; padding: 0; display: flex; width: 100%; flex-direction: row; } .site-menu-item { border-top: 1pt solid $primary-light; width: 100%; height: 50px; background: $primary; display: flex; align-items: center; align-content: center; justify-content: center; } .site-logo { height: 44px; width: 44px; padding: 3px 5%; position: relative; } .site-name { width: 100%; font-weight: 500; } .menu-link { display: flex; align-self: center; align-items: center; text-decoration: none; } .menu-link::after { content: "Kot Źródłowy"; display: inline; color: $primary-text; text-decoration: none; }
}
/* Landscape */ @media screen
and (device-width: 320px) and (device-height: 640px) and (orientation: landscape) {
}