/* ==========================================================================
SIDEBAR ========================================================================== */
/*
Default ========================================================================== */
.sidebar {
@include clearfix(); margin-bottom: 1em; @include breakpoint(max-width $large) { /* fix z-index order of follow links */ position: relative; z-index: 10; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } @include breakpoint($large) { float: left; width: calc(#{$right-sidebar-width-narrow} - 1em); 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) { width: calc(#{$right-sidebar-width} - 1em); } 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: absolute; top: 0; right: 0; width: $right-sidebar-width-narrow; margin-right: -1 * $right-sidebar-width-narrow; padding-left: 1em; z-index: 10; &.sticky { @include clearfix(); position: -webkit-sticky; position: sticky; top: 2em; float: right; } } @include breakpoint($x-large) { width: $right-sidebar-width; margin-right: -1 * $right-sidebar-width; }
}
.splash .sidebar__right {
@include breakpoint($large) { position: relative; float: right; margin-right: 0; } @include breakpoint($x-large) { margin-right: 0; }
}
/*
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; } a { color: inherit; text-decoration: none; }
}
.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: $background-color; z-index: -1; box-shadow: 0 2px 4px 0 rgba(#000, 0.16), 0 2px 10px 0 rgba(#000, 0.12); cursor: default; &.is--visible { display: block; } @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: $background-color 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; } }
}
/*
Wide Pages ========================================================================== */
.wide .sidebar__right {
margin-bottom: 1em; @include breakpoint($large) { position: initial; top: initial; right: initial; width: initial; margin-right: initial; padding-left: initial; z-index: initial; &.sticky { float: none; } } @include breakpoint($x-large) { width: initial; margin-right: initial; }
}