navbar {
border-bottom: 1px solid lightgrey;
}
navbar-navigation {
grid-area: navigation; display: grid; height: 100%; background: white;
}
logo {
grid-area: logo; height: 100%; display: none;
}
@media only screen and (min-width: 600px) {
#navbar { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "logo navigation"; } #navbar-navigation { display: flex; justify-content: flex-end; } #logo { display: flex; } .nav-button { min-width: 88px; }
}
navbar-navigation a {
text-decoration: none; color: #505050;
}
.nav-item {
grid-row: 1;
}
.nav-button {
height: 100%; width: 100%; color: rgba(0, 0, 0, 0.87); font-size: 0.875rem; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; font-weight: 500; font-family: "Roboto", "Helvetica", "Arial", sans-serif; border: 0; cursor: pointer; outline: none; position: relative; align-items: center; user-select: none; vertical-align: middle; justify-content: center; -moz-appearance: none; text-decoration: none; background-color: transparent; -webkit-appearance: none; -webkit-tap-highlight-color: transparent;
}
.nav-button:hover {
text-decoration: none; background-color: rgba(0, 0, 0, 0.12);
}