hacks-guide-minimal-mistake.../docs/_sass/minimal-mistakes/_sidebar.scss
Michael Rose 3e347970c7 Add vertical scrollbar to sidebars that extend outside the viewport
Viewing overflowing sidebar content requires scrolling the entire page which is annoying and causes the reader to lose their place.

Use CSS `calc` to approximate height of the sidebar (`100vh` - height of the masthead) and apply `overflow-y: auto` to add vertical scrollbars when needed.

Fixes #706
2017-07-12 12:03:14 -04:00

237 lines
No EOL
4.1 KiB
SCSS

/* ==========================================================================
SIDEBAR
========================================================================== */
/*
Default
========================================================================== */
.sidebar {
-webkit-transform: translate3d(0, 0 , 0);
transform: translate3d(0, 0 , 0);
@include clearfix();
margin-bottom: 1em;
@include breakpoint($large) {
@include span(2 of 12);
opacity: 0.75;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 1;
}
&.sticky {
overflow-y: auto;
/* calculate height of nav list */
height: calc(100vh - 90px - 2em); // viewport height - approx. masthead height - main content top margin
}
}
@include breakpoint($x-large) {
padding-right: 0;
}
h2, h3, h4, h5, h6 {
margin-bottom: 0;
font-family: $sans-serif-narrow;
}
p, li {
font-family: $sans-serif;
font-size: $type-size-6;
line-height: 1.5;
}
img {
width: 100%;
}
}
.sidebar__right {
margin-bottom: 1em;
@include breakpoint($large) {
position: relative;
float: right;
width: $right-sidebar-width-narrow;
margin-left: span(0.5 of 12);
z-index: 10;
}
@include breakpoint($x-large) {
width: $right-sidebar-width;
}
}
/*
Author profile and links
========================================================================== */
.author__avatar {
display: table-cell;
vertical-align: top;
width: 36px;
height: 36px;
@include breakpoint($large) {
display: block;
width: auto;
height: auto;
}
img {
max-width: 110px;
border-radius: 50%;
@include breakpoint($large) {
padding: 5px;
border: 1px solid $border-color;
}
}
}
.author__content {
display: table-cell;
vertical-align: top;
padding-left: 15px;
padding-right: 25px;
line-height: 1;
@include breakpoint($large) {
display: block;
width: 100%;
padding-left: 0;
padding-right: 0;
}
}
.author__name {
margin: 0;
@include breakpoint($large) {
margin-top: 10px;
margin-bottom: 10px;
}
}
.sidebar .author__name {
font-family: $sans-serif;
font-size: $type-size-5;
}
.author__bio {
margin: 0;
@include breakpoint($large) {
margin-top: 10px;
margin-bottom: 20px;
}
}
.author__urls-wrapper {
position: relative;
display: table-cell;
vertical-align: middle;
font-family: $sans-serif;
z-index: 10;
position: relative;
cursor: pointer;
li:last-child {
a {
margin-bottom: 0;
}
}
@include breakpoint($large) {
display: block;
}
button {
margin-bottom: 0;
@include breakpoint($large) {
display: none;
}
}
}
.author__urls {
display: none;
position: absolute;
right: 0;
margin-top: 15px;
padding: 10px;
list-style-type: none;
border: 1px solid $border-color;
border-radius: $border-radius;
background: #fff;
z-index: -1;
box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12);
cursor: default;
@include breakpoint($large) {
display: block;
position: relative;
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
&:before {
display: block;
content: "";
position: absolute;
top: -11px;
left: calc(50% - 10px);
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: $border-color transparent;
z-index: 0;
@include breakpoint($large) {
display: none;
}
}
&:after {
display: block;
content: "";
position: absolute;
top: -10px;
left: calc(50% - 10px);
width: 0;
border-style: solid;
border-width: 0 10px 10px;
border-color: #fff transparent;
z-index: 1;
@include breakpoint($large) {
display: none;
}
}
li {
white-space: nowrap;
}
a {
display: block;
margin-bottom: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
color: inherit;
font-size: $type-size-5;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}