diff options
Diffstat (limited to '_sass/minimal-mistakes/_archive.scss')
| -rw-r--r-- | _sass/minimal-mistakes/_archive.scss | 447 |
1 files changed, 447 insertions, 0 deletions
diff --git a/_sass/minimal-mistakes/_archive.scss b/_sass/minimal-mistakes/_archive.scss new file mode 100644 index 0000000..0947265 --- /dev/null +++ b/_sass/minimal-mistakes/_archive.scss @@ -0,0 +1,447 @@ +/* ========================================================================== + ARCHIVE + ========================================================================== */ + +.archive { + margin-top: 1em; + margin-bottom: 2em; + + @include breakpoint($large) { + float: right; + width: calc(100% - #{$right-sidebar-width-narrow}); + padding-right: $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + width: calc(100% - #{$right-sidebar-width}); + padding-right: $right-sidebar-width; + } +} + +.archive__item { + position: relative; + + a { + position: relative; + z-index: 10; + } + + a[rel="permalink"] { + position: static; + } +} + +.archive__subtitle { + margin: 1.414em 0 0; + padding-bottom: 0.5em; + font-size: $type-size-5; + color: $muted-text-color; + 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; + line-height: initial; + overflow: hidden; + text-overflow: ellipsis; + + a[rel="permalink"]::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + 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; + } + + a { + position: relative; + } +} + +.archive__item-teaser { + position: relative; + border-radius: $border-radius; + overflow: hidden; + + img { + width: 100%; + } +} + +.archive__item-caption { + position: absolute; + bottom: 0; + right: 0; + margin: 0 auto; + padding: 2px 5px; + color: #fff; + font-family: $caption-font-family; + font-size: $type-size-8; + 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: #fff; + text-decoration: none; + } +} + +/* + List view + ========================================================================== */ + +.list__item { + .page__meta { + margin: 0 0 4px; + font-size: 0.6em; + } +} + +/* + Grid view + ========================================================================== */ + +.archive { + .grid__wrapper { + /* extend grid elements to the right */ + + @include breakpoint($large) { + margin-right: -1 * $right-sidebar-width-narrow; + } + + @include breakpoint($x-large) { + margin-right: -1 * $right-sidebar-width; + } + } +} + +.grid__item { + margin-bottom: 2em; + + @include breakpoint($small) { + float: left; + width: span(5 of 10); + + &:nth-child(2n + 1) { + clear: both; + margin-left: 0; + } + + &:nth-child(2n + 2) { + clear: none; + margin-left: gutter(of 10); + } + } + + @include breakpoint($medium) { + margin-left: 0; /* override margin*/ + margin-right: 0; /* override margin*/ + width: span(3 of 12); + + &:nth-child(2n + 1) { + clear: none; + } + + &:nth-child(4n + 1) { + clear: both; + } + + &:nth-child(4n + 2) { + clear: none; + margin-left: gutter(1 of 12); + } + + &:nth-child(4n + 3) { + clear: none; + margin-left: gutter(1 of 12); + } + + &:nth-child(4n + 4) { + clear: none; + margin-left: gutter(1 of 12); + } + } + + .page__meta { + margin: 0 0 4px; + font-size: 0.6em; + } + + .archive__item-title { + margin-top: 0.5em; + font-size: $type-size-5; + } + + .archive__item-excerpt { + display: none; + + @include breakpoint($medium) { + display: block; + font-size: $type-size-6; + } + } + + .archive__item-teaser { + @include breakpoint($small) { + max-height: 200px; + } + + @include breakpoint($medium) { + max-height: 120px; + } + } +} + +/* + Features + ========================================================================== */ + +.feature__wrapper { + @include clearfix(); + margin-bottom: 2em; + border-bottom: 1px solid $border-color; + + .archive__item-title { + margin-bottom: 0; + } +} + +.feature__item { + position: relative; + margin-bottom: 2em; + font-size: 1.125em; + + @include breakpoint($small) { + float: left; + margin-bottom: 0; + width: span(4 of 12); + + &:nth-child(3n + 1) { + clear: both; + margin-left: 0; + } + + &:nth-child(3n + 2) { + clear: none; + margin-left: gutter(of 12); + } + + &:nth-child(3n + 3) { + clear: none; + margin-left: gutter(of 12); + } + + .feature__item-teaser { + max-height: 200px; + overflow: hidden; + } + } + + .archive__item-body { + padding-left: gutter(1 of 12); + padding-right: gutter(1 of 12); + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + &--left { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include breakpoint($small) { + .archive__item-teaser { + float: left; + width: span(5 of 12); + } + + .archive__item-body { + float: right; + padding-left: gutter(0.5 of 12); + padding-right: gutter(1 of 12); + width: span(7 of 12); + } + } + } + + &--right { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @include breakpoint($small) { + text-align: right; + + .archive__item-teaser { + float: right; + width: span(5 of 12); + } + + .archive__item-body { + float: left; + width: span(7 of 12); + padding-left: gutter(0.5 of 12); + padding-right: gutter(1 of 12); + } + } + } + + &--center { + position: relative; + float: left; + margin-left: 0; + margin-right: 0; + width: 100%; + clear: both; + font-size: 1.125em; + + .archive__item { + float: left; + width: 100%; + } + + .archive__item-teaser { + margin-bottom: 2em; + } + + a.btn::before { + content: ''; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + } + + @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); + } + } + } +} + +/* Place inside an archive layout */ + +.archive { + .feature__wrapper { + .archive__item-title { + margin-top: 0.25em; + font-size: 1em; + } + } + + .feature__item, + .feature__item--left, + .feature__item--center, + .feature__item--right { + font-size: 1em; + } +} + +/* + Wide Pages + ========================================================================== */ + + .wide { + .archive { + @include breakpoint($large) { + padding-right: 0; + } + + @include breakpoint($x-large) { + padding-right: 0; + } + } +}
\ No newline at end of file |