2 files changed, 48 insertions, 42 deletions
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 7fa54e5..e1f92b0 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -127,6 +127,12 @@
                transition:       opacity .2s;
                opacity:          0;
                background-color: prop(--colors --hover --bg);
+                @media (hover: none) {
+                    position:         static;
+                    opacity:          1;
+                    background-color: transparent;
+                }
            }
        }
diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html
index 485af00..a2dbe5f 100644
--- a/templates/partials/gallery_card.html
+++ b/templates/partials/gallery_card.html
@@ -1,47 +1,47 @@
 $if(it.url)$
-    $if(it.thumbnail)$
+$if(it.thumbnail)$
-        <a href="$it.url.rel$" class="l-card-list__card c-card">
+    <a href="$it.url.rel$" class="l-card-list__card c-card">
-            <div class="c-card__row c-card__row--flush">
+        <div class="c-card__row c-card__row--flush">
-                <div class="c-card__thumbnail">
+            <div class="c-card__thumbnail">
-                    <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
+                <img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
-                </div>
            </div>
-            <div class="c-card__row c-card__row--hidden">
+        </div>
-                $if(it.indicator)$
+        <div class="c-card__row c-card__row--hidden">
-                    <div class="c-card__block c-card__block--indicator"></div>
+            $if(it.indicator)$
-                $endif$
+                <div class="c-card__block c-card__block--indicator"></div>
-                $if(it.icon)$
+            $endif$
-                    <svg class="c-card__block o-icon" width="1em" height="1em">
+            $if(it.icon)$
-                        <use href="/symbols.svg#icon-$it.icon$"></use>
+                <svg class="c-card__block o-icon" width="1em" height="1em">
-                    </svg>
+                    <use href="/symbols.svg#icon-$it.icon$"></use>
-                $endif$
+                </svg>
-                <div class="c-card__block c-card__block--main">
+            $endif$
-                    $if(it.subtitle)$
+            <div class="c-card__block c-card__block--main">
-                        <strong class="u-db u-elp">$it.title$</strong>
+                $if(it.subtitle)$
-                        <small class="u-db u-elp">$it.subtitle$</small>
+                    <strong class="u-db u-elp">$it.title$</strong>
-                    $elseif(it.category)$
+                    <small class="u-db u-elp">$it.subtitle$</small>
-                        <small class="u-db u-elp">$it.category$</small>
+                $elseif(it.category)$
-                        <strong class="u-db u-elp">$it.title$</strong>
+                    <small class="u-db u-elp">$it.category$</small>
-                    $elseif(it.date)$
+                    <strong class="u-db u-elp">$it.title$</strong>
-                        <time datetime="$it.date.yyyy_mm_dd$">
+                $elseif(it.date)$
-                            <small class="u-dn@sm-hi">
+                    <time datetime="$it.date.yyyy_mm_dd$">
-                                $it.date.short$
+                        <small class="u-dn@sm-hi">
-                            </small>
+                            $it.date.short$
-                            <small class="u-dn@sm-lo">
+                        </small>
-                                $it.date.long$
+                        <small class="u-dn@sm-lo">
-                            </small>
+                            $it.date.long$
-                        </time>
+                        </small>
-                        <strong class="u-db u-elp">$it.title$</strong>
+                    </time>
-                    $else$
+                    <strong class="u-db u-elp">$it.title$</strong>
-                        $it.title$
+                $else$
-                    $endif$
+                    $it.title$
-                </div>
-                $if(it.post_icon)$
-                    <svg class="c-card__block o-icon" width="1em" height="1em">
-                        <use href="/symbols.svg#icon-$it.post_icon$"></use>
-                    </svg>
                $endif$
            </div>
-        </a>
+            $if(it.post_icon)$
-    $endif$
+                <svg class="c-card__block o-icon" width="1em" height="1em">
+                    <use href="/symbols.svg#icon-$it.post_icon$"></use>
+                </svg>
+            $endif$
+        </div>
+    </a>
+$endif$
 $endif$

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss index 7fa54e5..e1f92b0 100644 --- a/assets/css/components/_card.scss +++ b/assets/css/components/_card.scss
@@ -127,6 +127,12 @@
127	transition: opacity .2s;	127	transition: opacity .2s;
128	opacity: 0;	128	opacity: 0;
129	background-color: prop(--colors --hover --bg);	129	background-color: prop(--colors --hover --bg);
		130
		131	@media (hover: none) {
		132	position: static;
		133	opacity: 1;
		134	background-color: transparent;
		135	}
130	}	136	}
131	}	137	}
132		138


diff --git a/templates/partials/gallery_card.html b/templates/partials/gallery_card.html index 485af00..a2dbe5f 100644 --- a/templates/partials/gallery_card.html +++ b/templates/partials/gallery_card.html
@@ -1,47 +1,47 @@
1	$if(it.url)$	1	$if(it.url)$
2	$if(it.thumbnail)$	2	$if(it.thumbnail)$
3	<a href="$it.url.rel$" class="l-card-list__card c-card">	3	<a href="$it.url.rel$" class="l-card-list__card c-card">
4	<div class="c-card__row c-card__row--flush">	4	<div class="c-card__row c-card__row--flush">
5	<div class="c-card__thumbnail">	5	<div class="c-card__thumbnail">
6	<img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />	6	<img class="c-card__thumbnail-img" src="$it.thumbnail.rel$" />
7	</div>
8	</div>	7	</div>
9	<div class="c-card__row c-card__row--hidden">	8	</div>
10	$if(it.indicator)$	9	<div class="c-card__row c-card__row--hidden">
11	<div class="c-card__block c-card__block--indicator"></div>	10	$if(it.indicator)$
12	$endif$	11	<div class="c-card__block c-card__block--indicator"></div>
13	$if(it.icon)$	12	$endif$
14	<svg class="c-card__block o-icon" width="1em" height="1em">	13	$if(it.icon)$
15	<use href="/symbols.svg#icon-$it.icon$"></use>	14	<svg class="c-card__block o-icon" width="1em" height="1em">
16	</svg>	15	<use href="/symbols.svg#icon-$it.icon$"></use>
17	$endif$	16	</svg>
18	<div class="c-card__block c-card__block--main">	17	$endif$
19	$if(it.subtitle)$	18	<div class="c-card__block c-card__block--main">
20	<strong class="u-db u-elp">$it.title$</strong>	19	$if(it.subtitle)$
21	<small class="u-db u-elp">$it.subtitle$</small>	20	<strong class="u-db u-elp">$it.title$</strong>
22	$elseif(it.category)$	21	<small class="u-db u-elp">$it.subtitle$</small>
23	<small class="u-db u-elp">$it.category$</small>	22	$elseif(it.category)$
24	<strong class="u-db u-elp">$it.title$</strong>	23	<small class="u-db u-elp">$it.category$</small>
25	$elseif(it.date)$	24	<strong class="u-db u-elp">$it.title$</strong>
26	<time datetime="$it.date.yyyy_mm_dd$">	25	$elseif(it.date)$
27	<small class="u-dn@sm-hi">	26	<time datetime="$it.date.yyyy_mm_dd$">
28	$it.date.short$	27	<small class="u-dn@sm-hi">
29	</small>	28	$it.date.short$
30	<small class="u-dn@sm-lo">	29	</small>
31	$it.date.long$	30	<small class="u-dn@sm-lo">
32	</small>	31	$it.date.long$
33	</time>	32	</small>
34	<strong class="u-db u-elp">$it.title$</strong>	33	</time>
35	$else$	34	<strong class="u-db u-elp">$it.title$</strong>
36	$it.title$	35	$else$
37	$endif$	36	$it.title$
38	</div>
39	$if(it.post_icon)$
40	<svg class="c-card__block o-icon" width="1em" height="1em">
41	<use href="/symbols.svg#icon-$it.post_icon$"></use>
42	</svg>
43	$endif$	37	$endif$
44	</div>	38	</div>
45	</a>	39	$if(it.post_icon)$
46	$endif$	40	<svg class="c-card__block o-icon" width="1em" height="1em">
		41	<use href="/symbols.svg#icon-$it.post_icon$"></use>
		42	</svg>
		43	$endif$
		44	</div>
		45	</a>
		46	$endif$
47	$endif$	47	$endif$