| /* ========================================================================== |
| SINGLE PAGE/POST |
| ========================================================================== */ |
| |
| #main { |
| @include container; |
| @include clearfix; |
| /*margin-top: 2em;*/ |
| margin-top: 65px; |
| margin-left: 10%; |
| margin-right: 10%; |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.35s; |
| animation-delay: 0.35s; |
| |
| @include breakpoint($x-large) { |
| max-width: $x-large; |
| } |
| } |
| |
| .page { |
| @include breakpoint($large) { |
| display: block; |
| float: left; |
| margin-left: 40px; |
| width: calc(100% - 260px); |
| } |
| |
| .page__inner-wrap { |
| @include full(); |
| |
| .page__content, |
| .page__meta, |
| .page__share { |
| @include full(); |
| } |
| } |
| } |
| |
| .page__title { |
| margin-top: 40px; |
| line-height: 45px; |
| margin-bottom: 20px; |
| font-weight: 300; |
| |
| & + .page__meta { |
| margin-top: -0.5em; |
| } |
| } |
| |
| .page__lead { |
| font-family: $global-font-family; |
| font-size: $base-font-size; |
| color: white; |
| } |
| |
| .page__content { |
| p, li, dl { |
| font-size: 14px; |
| } |
| |
| /* paragraph indents */ |
| p { |
| margin: 0 0 10px; |
| |
| /* sibling indentation*/ |
| @if $paragraph-indent == true { |
| & + p { |
| text-indent: $indent-var; |
| margin-top: -($indent-var); |
| } |
| } |
| } |
| |
| a { |
| text-decoration: none; |
| |
| &:hover { |
| text-decoration: underline; |
| |
| img { |
| box-shadow: 0 0 10px rgba(#000, 0.25); |
| } |
| } |
| } |
| |
| dt { |
| margin-top: 1em; |
| font-family: $sans-serif; |
| font-weight: bold; |
| } |
| |
| dd { |
| margin-left: 1em; |
| font-family: $sans-serif; |
| font-size: $type-size-6; |
| } |
| |
| .small { |
| font-size: $type-size-6; |
| } |
| |
| /* blockquote citations */ |
| blockquote + .small { |
| margin-top: -1.5em; |
| padding-left: 1.25rem; |
| } |
| } |
| |
| .page__hero { |
| position: relative; |
| margin-bottom: 2em; |
| @include clearfix; |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| |
| &--overlay { |
| position: relative; |
| padding-top: 130px; |
| @include clearfix; |
| height: 500px; |
| background-size: 1920px 500px; |
| background-repeat: no-repeat; |
| background-position: center; |
| -webkit-animation: intro 0.3s both; |
| animation: intro 0.3s both; |
| -webkit-animation-delay: 0.25s; |
| animation-delay: 0.25s; |
| |
| a { |
| color: white; |
| } |
| |
| @media (max-width: 400px) { |
| padding-top: 120px; |
| } |
| |
| .wrapper { |
| margin-left: 10%; |
| @media (max-width: 400px) { |
| .button-group { |
| a { |
| display: block; |
| width: 160px; |
| } |
| } |
| } |
| } |
| |
| .page__title, |
| .page__meta, |
| .page__lead, |
| .btn { |
| color: white; |
| opacity: 1.0; |
| } |
| |
| .excerpt-label { |
| font-size: 14px; |
| color: white; |
| opacity: 0.8; |
| margin-bottom: 10px; |
| } |
| |
| .page__lead { |
| max-width: 580px; |
| height: 110px; |
| margin-bottom: 40px; |
| |
| @include breakpoint(600px) { |
| height: auto; |
| } |
| } |
| |
| .page__title { |
| font-size: 44px; |
| font-weight: 500; |
| margin-bottom: 20px; |
| } |
| } |
| } |
| |
| .page__hero-image { |
| width: 100%; |
| height: auto; |
| -ms-interpolation-mode: bicubic; |
| } |
| |
| .page__hero-caption { |
| position: absolute; |
| bottom: 0; |
| right: 0; |
| margin: 0 auto; |
| padding: 2px 5px; |
| color: #525252; |
| font-family: $caption-font-family; |
| font-size: $type-size-7; |
| background: #000; |
| text-align: right; |
| z-index: 5; |
| opacity: 0.5; |
| border-radius: $border-radius 0 0 0; |
| |
| @include breakpoint($large) { |
| padding: 5px 10px; |
| } |
| |
| a { |
| color: #525252; |
| text-decoration: none; |
| } |
| } |
| |
| /* |
| Social sharing |
| ========================================================================== */ |
| |
| .page__share { |
| margin-top: 2em; |
| padding-top: 1em; |
| border-top: 1px solid $border-color; |
| |
| @include breakpoint(max-width $small) { |
| .btn span { |
| border: 0; |
| clip: rect(0 0 0 0); |
| height: 1px; |
| margin: -1px; |
| overflow: hidden; |
| padding: 0; |
| position: absolute; |
| width: 1px; |
| } |
| } |
| } |
| |
| .page__share-title { |
| margin-bottom: 10px; |
| font-size: $type-size-6; |
| text-transform: uppercase; |
| } |
| |
| |
| /* |
| Page meta |
| ========================================================================== */ |
| |
| .page__meta { |
| margin-top: 2em; |
| color: mix(#fff, $gray, 25%); |
| font-family: $sans-serif; |
| font-size: $type-size-6; |
| |
| p { |
| margin: 0; |
| } |
| |
| a { |
| color: inherit; |
| } |
| } |
| |
| .page__meta-title { |
| margin-bottom: 10px; |
| font-size: $type-size-6; |
| text-transform: uppercase; |
| } |
| |
| |
| /* |
| Page taxonomy |
| ========================================================================== */ |
| |
| .page__taxonomy { |
| .sep { |
| display: none; |
| } |
| |
| strong { |
| margin-right: 10px; |
| } |
| } |
| |
| .page__taxonomy-item { |
| display: inline-block; |
| margin-right: 5px; |
| margin-bottom: 8px; |
| padding: 5px 10px; |
| text-decoration: none; |
| border: 1px solid $light-gray; |
| border-radius: $border-radius; |
| |
| &:hover { |
| text-decoration: none; |
| color: $link-color-hover; |
| } |
| } |
| |
| |
| /* |
| Comments |
| ========================================================================== */ |
| |
| .page__comments { |
| @include full(); |
| } |
| |
| .page__comments-title { |
| margin-top: 2rem; |
| margin-bottom: 10px; |
| padding-top: 2rem; |
| font-size: $type-size-6; |
| border-top: 1px solid $border-color; |
| text-transform: uppercase; |
| } |
| |
| .page__comments-form { |
| padding: 1em; |
| background: $lighter-gray; |
| -webkit-transition: $global-transition; |
| transition: $global-transition; |
| |
| &.disabled { |
| input, |
| button, |
| textarea, |
| label { |
| pointer-events: none; |
| cursor: not-allowed; |
| filter: alpha(opacity=65); |
| box-shadow: none; |
| opacity: 0.65; |
| } |
| } |
| } |
| |
| .comment { |
| @include clearfix(); |
| margin: 1em 0; |
| |
| &:not(:last-child) { |
| border-bottom: 1px solid $border-color; |
| } |
| } |
| |
| .comment__avatar-wrapper { |
| float: left; |
| width: 60px; |
| height: 60px; |
| |
| @include breakpoint($large) { |
| width: 100px; |
| height: 100px; |
| } |
| } |
| |
| .comment__avatar { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| |
| @include breakpoint($large) { |
| width: 80px; |
| height: 80px; |
| padding: 5px; |
| border: 1px solid $border-color; |
| } |
| } |
| |
| .comment__content-wrapper { |
| float: right; |
| width: calc(100% - 60px); |
| |
| @include breakpoint($large) { |
| width: calc(100% - 100px); |
| } |
| } |
| |
| .comment__author { |
| margin: 0; |
| |
| a { |
| text-decoration: none; |
| } |
| } |
| |
| .comment__date { |
| @extend .page__meta; |
| margin: 0; |
| |
| a { |
| text-decoration: none; |
| } |
| } |
| |
| |
| /* |
| Related |
| ========================================================================== */ |
| |
| .page__related { |
| margin-top: 2em; |
| padding-top: 1em; |
| border-top: 1px solid $border-color; |
| @include clearfix(); |
| float: left; |
| |
| @include breakpoint($large) { |
| @include pre(2.5 of 12); |
| } |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| } |
| |
| .page__related-title { |
| margin-bottom: 10px; |
| font-size: $type-size-6; |
| text-transform: uppercase; |
| } |
| |
| |
| /* Others |
| ========================================================================== */ |
| .nav-tabs { |
| margin-top: 0; |
| a { |
| padding: 7px; |
| line-height: 30px; |
| } |
| li { |
| margin-right: 2px; |
| margin-bottom: 0; |
| } |
| |
| .active { |
| border: 1px solid #ddd; |
| border-bottom: transparent; |
| |
| a { |
| color: #555; |
| cursor: default; |
| pointer-events: none; |
| |
| &:hover { |
| text-decoration: none; |
| } |
| } |
| } |
| .title { |
| font-size: 20px; |
| a { |
| line-height: auto; |
| } |
| } |
| .active.title { |
| background-color: #f7f7f7; |
| } |
| } |