| /* ========================================================================== |
| 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; |
| } |
| } |
| |
| @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 0 10px rgba(#000, 0.25); |
| 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; |
| } |
| } |
| } |