@import “constants”; @import “fonts”;
.sidebar-text, .sidebar-links {
h1 { margin: 0; :hover { color: lighten($primary-highlight, 14%); } } h6 { text-transform: uppercase; color: $text-colour-light; } a { text-decoration: none; color: $primary-highlight; &:hover, &:focus { color: lighten($primary-highlight, 14%); } }
}
.sidebar-tagline {
max-width: 250px; margin: auto; color: $hover-colour;
}
.github-image {
width: 1rem; margin-right: .5rem; vertical-align: middle;
}
sidebar {
display: flex; top: 0; position: fixed; z-index: 9999; background: $sidebar-colour; color: $text-colour-light; transition: all .35s ease;
}
.content {
display: flex; flex: 1; flex-direction: column; align-items: center;
}
content-fader {
position: fixed; right: 0; z-index: 9999; pointer-events: none; background: white; opacity: 1; animation-duration: .35s; animation-timing-function: ease;
}
sidebar-fader {
position: fixed; left: 0; z-index: 9999; pointer-events: none; background: $sidebar-colour; opacity: 1; animation-duration: .35s; animation-timing-function: ease;
}
@media only screen and (orientation: portrait) {
.sidebar { width: 100%; height: $sidebar-height; } .sidebar-minimised { width: 100%; height: $sidebar-height-min; } .sidebar-text { h6 { margin: 0; } } .content { max-width: 100%; margin: calc(#{$sidebar-height} + 1em) 1em 1em 1em; } #content-fader { bottom: 0; height: calc(100% - #{$sidebar-height}); width: 100%; } #sidebar-fader { top: 0; height: $sidebar-height; width: 100%; } @media (min-width: 450px) { #sidebar { flex-direction: row; justify-content: space-between; align-items: center; text-align: center; } .sidebar-header { display: flex; margin-left: 1em; } .sidebar-image-container { margin-right: 1em; } .sidebar-image { width: 80px; height: 80px; border-radius: 50%; } .sidebar-text { text-align: start; h1 { margin-top: -0.2em; } } .sidebar-links { margin-right: 1em; text-align: end; } .post-buttons { margin: 3em 0; } } @media (max-width: 450px) { #sidebar { flex-direction: column; text-align: center; justify-content: center; } .sidebar-image-container { display: none; } .sidebar-text { h1 { margin-top: -0.3em; } } .sidebar-links { margin-top: 1em; } .post-buttons { margin: 0; display: flex; flex-direction: column; a { margin: .5em; } } }
}
@media only screen and (orientation: landscape) {
#sidebar { flex-direction: column; text-align: center; justify-content: center; } .sidebar, .sidebar-minimised { width: $sidebar-width; height: 100%; } .sidebar-image { width: 200px; height: 200px; border-radius: 50%; } .content { justify-content: space-between; margin: 1em 1em 1em calc(1em + #{$sidebar-width}); } .sidebar-links { margin-top: 1em; } #content-fader { top: 0; width: calc(100% - #{$sidebar-width}); height: 100%; background: white; } #sidebar-fader { bottom: 0; height: 100%; width: $sidebar-width; } .post-buttons { margin: 3em 0; }
}
@keyframes fade-out {
from { opacity: 1 } to { opacity: 0 }
}
@keyframes fade-in {
from { opacity: 0 } to { opacity: 1 }
}
content-fader.fade-out {
opacity: 0; animation-name: fade-out;
}
content-fader.fade-in {
opacity: 1; animation-name: fade-in;
}
sidebar-fader.fade-out {
opacity: 0; animation-name: fade-out;
}
sidebar-fader.fade-in {
opacity: 1; animation-name: fade-in;
}