.sidebar {
color: var(--sidebar-color); background: center / cover;
}
.sidebar-shield {
width: 100%; height: 100%; background-color: rgba(0,0,0,0.1);
}
.header {
width: 100%; text-align: center; text-shadow: 1px 1px 3px var(--oc-black); padding: 2em; a { color: var(--oc-white); }
}
.brand-title {
font-family: var(--brand-title-font); font-size: 3.25em; font-weight: bold; line-height: 1.2; letter-spacing: -1px; word-wrap: break-word;
}
.brand-tagline {
font-size: 1.25em; line-height: 1.2; letter-spacing: -1px;
}
.nav {
margin: 1em 0;
}
.nav-item {
a:hover { background-color: transparent; } .current { font-weight: bold; }
}
.social-list {
white-space: normal;
}
.social-item {
a { background-color: transparent; &:focus, &:hover { color: var(--link-color); background-color: transparent; background-image: none; } }
}
@media (min-width: $md-screen) {
.header { font-size: 80%; text-align: left; position: absolute; bottom: 0; } .nav-item a { padding-left: 0; } .social-item { a { padding-left: 0; } }
}
@media (min-width: $lg-screen) {
.header { font-size: 100%; }
}