summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--assets/css/components/_card.scss4
-rw-r--r--assets/css/layouts/_card-list.scss1
-rw-r--r--templates/partials/related.html24
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>