diff options
-rw-r--r-- | assets/css/components/_card.scss | 4 | ||||
-rw-r--r-- | assets/css/layouts/_card-list.scss | 1 | ||||
-rw-r--r-- | templates/partials/related.html | 24 |
3 files changed, 23 insertions, 6 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 1bd60de..ca23bf4 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss | |||
@@ -27,8 +27,10 @@ | |||
27 | ), 'colors'); | 27 | ), 'colors'); |
28 | 28 | ||
29 | @include iro.bem-component(iro.props-namespace()) { | 29 | @include iro.bem-component(iro.props-namespace()) { |
30 | display: block; | 30 | display: flex; |
31 | position: relative; | 31 | position: relative; |
32 | flex-direction: column; | ||
33 | justify-content: center; | ||
32 | transform: translateY(0); | 34 | transform: translateY(0); |
33 | transition: transform .2s, background-color .2s, color .2s, border-color .2s; | 35 | transition: transform .2s, background-color .2s, color .2s, border-color .2s; |
34 | background-color: fn.color(--bg); | 36 | background-color: fn.color(--bg); |
diff --git a/assets/css/layouts/_card-list.scss b/assets/css/layouts/_card-list.scss index b532cc1..d8e67ee 100644 --- a/assets/css/layouts/_card-list.scss +++ b/assets/css/layouts/_card-list.scss | |||
@@ -52,7 +52,6 @@ | |||
52 | @each $mode in 'grid-2' 'grid-3' 'gallery-2' 'gallery-3' { | 52 | @each $mode in 'grid-2' 'grid-3' 'gallery-2' 'gallery-3' { |
53 | @include iro.bem-modifier($mode) { | 53 | @include iro.bem-modifier($mode) { |
54 | display: grid; | 54 | display: grid; |
55 | align-items: start; | ||
56 | grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr)); | 55 | grid-template-columns: repeat(auto-fill, minmax(fn.dim('--#{$mode}' --col-width), 1fr)); |
57 | gap: fn.dim('--#{$mode}' --gap); | 56 | gap: fn.dim('--#{$mode}' --gap); |
58 | } | 57 | } |
diff --git a/templates/partials/related.html b/templates/partials/related.html index b6e2169..4c8384a 100644 --- a/templates/partials/related.html +++ b/templates/partials/related.html | |||
@@ -14,11 +14,27 @@ $if(related)$ | |||
14 | </header> | 14 | </header> |
15 | <div class="l-card-list__cards l-card-list__cards--$related.layout.id$"> | 15 | <div class="l-card-list__cards l-card-list__cards--$related.layout.id$"> |
16 | $if(related.layout.is_grid-2)$ | 16 | $if(related.layout.is_grid-2)$ |
17 | $related.prev:partials/grid_card()$ | 17 | $if(related.prev)$ |
18 | $related.next:partials/grid_card()$ | 18 | $related.prev:partials/grid_card()$ |
19 | $else$ | ||
20 | <div class="l-card-list__card c-card c-card--outline"></div> | ||
21 | $endif$ | ||
22 | $if(related.next)$ | ||
23 | $related.next:partials/grid_card()$ | ||
24 | $else$ | ||
25 | <div class="l-card-list__card c-card c-card--outline"></div> | ||
26 | $endif$ | ||
19 | $else$ | 27 | $else$ |
20 | $related.prev:partials/gallery_card()$ | 28 | $if(related.prev)$ |
21 | $related.next:partials/gallery_card()$ | 29 | $related.prev:partials/gallery_card()$ |
30 | $else$ | ||
31 | <div class="l-card-list__card c-card c-card--outline"></div> | ||
32 | $endif$ | ||
33 | $if(related.next)$ | ||
34 | $related.next:partials/gallery_card()$ | ||
35 | $else$ | ||
36 | <div class="l-card-list__card c-card c-card--outline"></div> | ||
37 | $endif$ | ||
22 | $endif$ | 38 | $endif$ |
23 | </div> | 39 | </div> |
24 | </div> | 40 | </div> |