| /* ====================m====================================================== |
| ARCHIVE |
| ========================================================================== */ |
| |
| .archive { |
| margin-bottom: 60px; |
| @include breakpoint($medium) { |
| @include span(12 of 12); |
| } |
| |
| @include breakpoint($large) { |
| display: block; |
| float: left; |
| margin-left: 40px; |
| width: calc(100% - 260px); |
| } |
| |
| 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; |
| } |
| } |
| |
| /* remove border*/ |
| .page__content { |
| .archive__item-title { |
| border-bottom: none; |
| } |
| } |
| |
| |
| .archive__item-teaser { |
| border-radius: $border-radius; |
| overflow: hidden; |
| img { |
| margin-left: 8%; |
| margin-right: 8%; |
| width: 200px; |
| height: 160px; |
| margin: auto; |
| display: block; |
| } |
| } |
| |
| /* |
| 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; |
| } |
| } |
| } |
| |
| .normal-feature-row { |
| padding-left: 8%; |
| padding-right: 8%; |
| padding-top: 80px; |
| padding-bottom: 80px; |
| background-color: #f7f7f7; |
| } |
| |
| /* |
| Features |
| ========================================================================== */ |
| |
| .feature__wrapper { |
| @include clearfix(); |
| 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(); |
| margin-bottom: 60px; |
| padding-left: 8%; |
| padding-right: 8%; |
| |
| // @include breakpoint($small) { |
| // text-align: center; |
| |
| // .archive__item-teaser { |
| // margin: 0 auto; |
| // width: span(3 of 12); |
| // } |
| |
| // .archive__item-body { |
| // margin: 0 auto; |
| // width: span(9 of 12); |
| // } |
| // } |
| |
| .archive__item-excerpt { |
| margin: 0; |
| font-size: 14px; |
| color: #999999; |
| |
| .excerpt-title { |
| margin-top: 60px; |
| margin-bottom: 60px; |
| color: #333333; |
| text-align: center; |
| font-size: 24px; |
| font-weight: 500; |
| line-height: 100%; |
| } |
| |
| ul { |
| width: 49%; |
| float: left; |
| li { |
| padding-left: 16px; |
| @media (max-width: 600px) { |
| width: 100%; |
| margin-right: 0; |
| margin-bottom: 10px; |
| a { |
| height: auto; |
| margin-bottom: 5px; |
| } |
| } |
| @media (min-width: 601px) { |
| margin-right: 10%; |
| margin-bottom: 0; |
| a { |
| height: 63px; |
| margin-bottom: 0; |
| } |
| } |
| float: left; |
| text-align: left; |
| overflow-y: auto; |
| a { |
| font-size: 16px; |
| } |
| } |
| li::before { |
| content: "\25E6"; |
| color: #333333; |
| margin-left: -16px; |
| float: left; |
| } |
| .line-end { |
| margin-right: 0; |
| } |
| } |
| } |
| } |
| |
| .archive__item-body { |
| text-align: center; |
| .archive__item-title { |
| color: #333333; |
| font-weight: 500; |
| font-size: 18px; |
| &:hover { |
| color: $info-color; |
| } |
| } |
| .archive__item-excerpt { |
| width: 200px; |
| margin-top: 0; |
| font-size: 14px; |
| color: #999999; |
| margin: auto; |
| } |
| } |
| } |