summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2021-12-17 16:07:10 +0100
committerVolpeon <git@volpeon.ink>2021-12-17 16:07:10 +0100
commit6c12cebac99f331961a0c91b9808d03f090a21a2 (patch)
treeaf3537bb5f7fe7019ed4fb13a92a3b388136954e
parentUse full image URLs in feeds (diff)
downloadvolpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.gz
volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.bz2
volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.zip
Improved 'items omitted' link
-rw-r--r--assets/css/components/_card.scss15
-rw-r--r--templates/layouts/categorized_list.html43
2 files changed, 50 insertions, 8 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 5c2efa4..5d36e7e 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -33,7 +33,7 @@
33 display: block; 33 display: block;
34 position: relative; 34 position: relative;
35 transform: translateY(0); 35 transform: translateY(0);
36 transition: transform .2s, background-color .2s, color .2s; 36 transition: transform .2s, background-color .2s, color .2s, border-color .2s;
37 background-color: prop(--colors --bg); 37 background-color: prop(--colors --bg);
38 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true); 38 box-shadow: prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
39 color: prop(--colors --fg); 39 color: prop(--colors --fg);
@@ -93,6 +93,19 @@
93 } 93 }
94 } 94 }
95 95
96 @include modifier('outline') {
97 border: 1px solid prop(--colors --border);
98 background-color: transparent;
99
100 &:link,
101 &:visited {
102 &:hover,
103 &:focus {
104 border-color: transparent;
105 }
106 }
107 }
108
96 @include element('row') { 109 @include element('row') {
97 display: flex; 110 display: flex;
98 align-items: center; 111 align-items: center;
diff --git a/templates/layouts/categorized_list.html b/templates/layouts/categorized_list.html
index 2f61f18..50555f8 100644
--- a/templates/layouts/categorized_list.html
+++ b/templates/layouts/categorized_list.html
@@ -16,21 +16,50 @@ $body$
16 $if(it.layout.is_grid)$ 16 $if(it.layout.is_grid)$
17 <div class="l-card-list__cards l-card-list__cards--grid"> 17 <div class="l-card-list__cards l-card-list__cards--grid">
18 $it.items:partials/grid_card()$ 18 $it.items:partials/grid_card()$
19 $if(it.omitted)$
20 <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
21 <div class="c-card__row">
22 <div class="c-card__block c-card__block--main">
23 $it.omitted$ more items
24 </div>
25 <svg class="c-card__block o-icon" width="1em" height="1em">
26 <use href="/symbols.svg#icon-arrow-right"></use>
27 </svg>
28 </div>
29 </a>
30 $endif$
19 </div> 31 </div>
20 $elseif(it.layout.is_gallery)$ 32 $elseif(it.layout.is_gallery)$
21 <div class="l-card-list__cards l-card-list__cards--gallery"> 33 <div class="l-card-list__cards l-card-list__cards--gallery">
22 $it.items:partials/gallery_card()$ 34 $it.items:partials/gallery_card()$
35 $if(it.omitted)$
36 <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
37 <div class="c-card__row">
38 <div class="c-card__block c-card__block--main">
39 $it.omitted$ more items
40 </div>
41 <svg class="c-card__block o-icon" width="1em" height="1em">
42 <use href="/symbols.svg#icon-arrow-right"></use>
43 </svg>
44 </div>
45 </a>
46 $endif$
23 </div> 47 </div>
24 $else$ 48 $else$
25 <div class="l-card-list__cards"> 49 <div class="l-card-list__cards">
26 $it.items:partials/list_card()$ 50 $it.items:partials/list_card()$
27 </div> 51 $if(it.omitted)$
28 $endif$ 52 <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
29 $if(it.omitted)$ 53 <div class="c-card__row">
30 <div class="s-small s-invisible-links"> 54 <div class="c-card__block c-card__block--main">
31 <p> 55 $it.omitted$ more items
32 <a href="$it.url.rel$">$it.omitted$ more items →</a> 56 </div>
33 </p> 57 <svg class="c-card__block o-icon" width="1em" height="1em">
58 <use href="/symbols.svg#icon-arrow-right"></use>
59 </svg>
60 </div>
61 </a>
62 $endif$
34 </div> 63 </div>
35 $endif$ 64 $endif$
36 </section> 65 </section>