$sidebar-color: rgb(245, 245, 245);
.sidebar-navigation–logo {
background-color: $dark-gray; padding: 1em; width: $sidebar-width; @media (max-width: $tablet-width) { width: 100%; }
}
.turing-logo {
margin: 0; max-width: 97%; display: block; @media (max-width: $tablet-width) { max-width: 200px; margin: 0 auto; }
}
.sidebar {
min-width: $sidebar-width; max-width: $sidebar-width; background-color: $sidebar-color; color: invert($sidebar-color); border-right: 1px solid darken($sidebar-color, 20); box-shadow: 1px 1px 2px #eee; @media (max-width: $tablet-width) { font-size: 0.85em; min-width: 100%; max-width: 100%; padding-top: 0; border-right: none; border-top: 1px solid darken($sidebar-color, 20); border-bottom: 1px solid darken($sidebar-color, 20); } h1 { padding-left: 1em; padding-top: 0.75em; padding-bottom: 0.75em; background-color: lighten($sidebar-color, 5); border-bottom: 1px solid $teal; font-size: 1.1em; margin: 0; @media (max-width: $tablet-width) { text-align: center; } } ul, ol { list-style: none; padding-left: 0; @media (max-width: $tablet-width) { display: flex; flex-wrap: wrap; justify-content: center; } } li { margin-bottom: 0; line-height: 1.8em; }
}
.sidebar-navigation–links {
a { display: block; padding: 0.5em 1.1em; border-bottom: none; color: invert($sidebar-color); &:hover { background-color: darken($sidebar-color, 10); } &:active { background-color: $teal; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } } @media (max-width: $tablet-width) { display: flex; flex-wrap: wrap; section { min-width: 300px; width: 50%; @media (max-width: $tablet-width - 50px) { width: auto; } } } @media (max-width: $tablet-width - 50px) { flex-direction: column; }
}
.active-link {
background-color: lighten(#98a1a2, 20);
}