| /* ========================================================================== |
| ARCHIVE |
| ========================================================================== */ |
| |
| .archive { |
| margin-bottom: 2em; |
| |
| @include breakpoint($medium) { |
| @include span(12 of 12); |
| } |
| |
| @include breakpoint($large) { |
| @include span(10 of 12 last); |
| @include prefix(0.5 of 12); |
| } |
| |
| a { |
| color: inherit; |
| text-decoration: none; |
| } |
| } |
| |
| .archive__subtitle { |
| margin: 1.414em 0 0; |
| padding-bottom: 0.5em; |
| font-size: $type-size-5; |
| color: mix(#fff, $gray, 25%); |
| border-bottom: 1px solid $border-color; |
| |
| + .list__item .archive__item-title { |
| margin-top: 0.5em; |
| } |
| } |
| |
| .archive__item-title { |
| margin-bottom: 0.25em; |
| font-family: $sans-serif-narrow; |
| |
| a + a { |
| opacity: 0.5; |
| } |
| } |
| |
| /* remove border*/ |
| .page__content { |
| |
| .archive__item-title { |
| margin-top: 1em; |
| border-bottom: none; |
| } |
| } |
| |
| .archive__item-excerpt { |
| margin-top: 0; |
| font-size: $type-size-6; |
| |
| & + p { |
| text-indent: 0; |
| } |
| } |
| |
| .archive__item-teaser { |
| border-radius: $border-radius; |
| overflow: hidden; |
| img { |
| max-width: 100%; |
| } |
| } |
| |
| .archive__item:hover { |
| .archive__item-teaser { |
| box-shadow: 0 0 10px rgba(#000, 0.25); |
| } |
| |
| .archive__item-title { |
| text-decoration: underline; |
| } |
| } |
| |
| |
| /* |
| List view |
| ========================================================================== */ |
| |
| .list__item { |
| @include breakpoint($medium) { |
| padding-right: $right-sidebar-width-narrow; |
| } |
| |
| @include breakpoint($large) { |
| padding-right: $right-sidebar-width; |
| } |
| |
| @include breakpoint($x-large) { |
| padding-right: $right-sidebar-width-wide; |
| } |
| |
| .page__meta { |
| margin: 0 0 4px; |
| } |
| } |
| |
| |
| /* |
| Grid view |
| ========================================================================== */ |
| |
| .grid__item { |
| margin-bottom: 2em; |
| |
| .page__meta { |
| margin: 0 0 4px; |
| } |
| |
| .archive__item-title { |
| margin-top: 0.5em; |
| font-size: $type-size-5; |
| } |
| |
| .archive__item-excerpt { |
| display: none; |
| } |
| |
| @include breakpoint($small) { |
| @include gallery(5 of 10); |
| .archive__item-teaser { |
| max-height: 200px; |
| } |
| } |
| |
| @include breakpoint($medium) { |
| margin-left: 0; /* reset before mixin does its thing*/ |
| margin-right: 0; /* reset before mixin does its thing*/ |
| @include gallery(2.5 of 10); |
| |
| .archive__item-teaser { |
| max-height: 120px; |
| } |
| |
| .archive__item-excerpt { |
| display: block; |
| font-size: $type-size-6; |
| } |
| } |
| } |
| |
| |
| /* |
| Features |
| ========================================================================== */ |
| |
| .feature__wrapper { |
| @include clearfix(); |
| margin-bottom: 2em; |
| border-bottom: 1px solid $border-color; |
| } |
| |
| .feature__item { |
| margin-bottom: 2em; |
| font-size: 1.25rem; |
| |
| @include breakpoint($small) { |
| margin-bottom: 0; |
| @include gallery(4 of 12); |
| |
| .feature__item-teaser { |
| max-height: 200px; |
| overflow: hidden; |
| } |
| } |
| |
| &--left { |
| @include full(); |
| font-size: 1.25rem; |
| |
| .archive__item-teaser { |
| margin-bottom: 2em; |
| } |
| |
| @include breakpoint($small) { |
| .archive__item-teaser { |
| @include span(5 of 12); |
| } |
| |
| .archive__item-body { |
| @include span(7 of 12 last); |
| @include prefix(0.5 of 12); |
| @include suffix(1 of 12); |
| } |
| } |
| } |
| |
| &--right { |
| @include full(); |
| font-size: 1.25rem; |
| |
| .archive__item-teaser { |
| margin-bottom: 2em; |
| } |
| |
| @include breakpoint($small) { |
| text-align: right; |
| |
| .archive__item-teaser { |
| @include span(5 of 12 rtl); |
| } |
| |
| .archive__item-body { |
| @include span(7 of 12 last rtl); |
| @include prefix(0.5 of 12); |
| @include suffix(1 of 12); |
| } |
| } |
| } |
| |
| &--center { |
| @include full(); |
| font-size: 1.25rem; |
| |
| .archive__item-teaser { |
| margin-bottom: 2em; |
| } |
| |
| @include breakpoint($small) { |
| text-align: center; |
| |
| .archive__item-teaser { |
| margin: 0 auto; |
| width: span(5 of 12); |
| } |
| |
| .archive__item-body { |
| margin: 0 auto; |
| width: span(7 of 12); |
| } |
| } |
| } |
| } |