Template:ZW Nav/Styles.css
Jump to navigation
Jump to search
/* [[Category:Template Styles]] */
.zw-nav {
display: grid;
background-color: #17568c;
border: 1px solid #426787;
margin-bottom: 1rem;
}
.zw-nav__section {
position: relative;
border: 2px solid #426787;
padding: 1rem;
text-align: center;
transition: 300ms;
}
.zw-nav__section:hover {
background-color: #214b71;
}
.zw-nav__section--active, .zw-nav__section--active:hover {
background-color: #1b3d5e;
}
.zw-nav__section-link a {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: none;
opacity: 0;
z-index: 2;
}
.zw-nav__section--header {
grid-column: 1/-1;
border: 2px solid #426787;
padding: 0.5rem;
text-align: center;
}
.zw-nav__section--header img {
max-width: 400px;
width: 100%;
height: auto;
}
.zw-nav__section-text {
color: #f4f26b;
font-weight: bold;
margin-top: 0.5rem;
}
.zw-nav__section:hover .zw-nav__section-text {
text-decoration: underline;
}
.zw-nav__section--active .zw-nav__section-text {
color: #e6e6e6;
}
.zw-nav__section--active:hover .zw-nav__section-text {
text-decoration: none;
}
@media (min-width: 30.625rem) {
.zw-nav {
grid-template-columns: repeat(2, 1fr)
}
}
@media (min-width: 53.125rem) {
.zw-nav {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 68.75rem) {
.zw-nav {
grid-template-columns: repeat(6, 1fr);
}
}