Improved 'items omitted' link

author: Volpeon <git@volpeon.ink> 2021-12-17 16:07:10 +0100
committer: Volpeon <git@volpeon.ink> 2021-12-17 16:07:10 +0100
commit: 6c12cebac99f331961a0c91b9808d03f090a21a2 (patch)
tree: af3537bb5f7fe7019ed4fb13a92a3b388136954e
parent: Use full image URLs in feeds (diff)
download: volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.gz
volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.bz2
volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.zip
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 @@
        display:          block;
        position:         relative;
        transform:        translateY(0);
-        transition:       transform .2s, background-color .2s, color .2s;
+        transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
        background-color: prop(--colors --bg);
        box-shadow:       prop(--dims --obj-shadow, $global: true) prop(--colors --obj-shadow, $global: true);
        color:            prop(--colors --fg);
@@ -93,6 +93,19 @@
            }
        }
+        @include modifier('outline') {
+            border:           1px solid prop(--colors --border);
+            background-color: transparent;
+            &:link,
+            &:visited {
+                &:hover,
+                &:focus {
+                    border-color: transparent;
+                }
+            }
+        }
        @include element('row') {
            display:     flex;
            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$
            $if(it.layout.is_grid)$
                <div class="l-card-list__cards l-card-list__cards--grid">
                    $it.items:partials/grid_card()$
+                    $if(it.omitted)$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
+                            <div class="c-card__row">
+                                <div class="c-card__block c-card__block--main">
+                                    $it.omitted$ more items
+                                </div>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                </div>
            $elseif(it.layout.is_gallery)$
                <div class="l-card-list__cards l-card-list__cards--gallery">
                    $it.items:partials/gallery_card()$
+                    $if(it.omitted)$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
+                            <div class="c-card__row">
+                                <div class="c-card__block c-card__block--main">
+                                    $it.omitted$ more items
+                                </div>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                </div>
            $else$
                <div class="l-card-list__cards">
                    $it.items:partials/list_card()$
-                </div>
+                    $if(it.omitted)$
-            $endif$
+                        <a href="$it.url.rel$" class="l-card-list__card c-card c-card--outline">
-            $if(it.omitted)$
+                            <div class="c-card__row">
-                <div class="s-small s-invisible-links">
+                                <div class="c-card__block c-card__block--main">
-                    <p>
+                                    $it.omitted$ more items
-                        <a href="$it.url.rel$">$it.omitted$ more items →</a>
+                                </div>
-                    </p>
+                                <svg class="c-card__block o-icon" width="1em" height="1em">
+                                    <use href="/symbols.svg#icon-arrow-right"></use>
+                                </svg>
+                            </div>
+                        </a>
+                    $endif$
                </div>
            $endif$
        </section>
author	Volpeon <git@volpeon.ink>	2021-12-17 16:07:10 +0100
committer	Volpeon <git@volpeon.ink>	2021-12-17 16:07:10 +0100
commit	6c12cebac99f331961a0c91b9808d03f090a21a2 (patch)
tree	af3537bb5f7fe7019ed4fb13a92a3b388136954e
parent	Use full image URLs in feeds (diff)
download	volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.gz volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.tar.bz2 volpeon.ink-6c12cebac99f331961a0c91b9808d03f090a21a2.zip

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>