From 01e6609286a1d10dc7190641082ea6a06f929119 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Sun, 6 Oct 2024 07:17:21 +0300
Subject: [PATCH] Scale article cards down when pressed

---
 sass/_article-list.scss          |  13 +++-
 templates/partials/articles.html | 124 ++++++++++++++++---------------
 2 files changed, 73 insertions(+), 64 deletions(-)

diff --git a/sass/_article-list.scss b/sass/_article-list.scss
index 4c09901..05bc0ea 100644
--- a/sass/_article-list.scss
+++ b/sass/_article-list.scss
@@ -4,9 +4,16 @@
 	gap: 1rem;
 	margin-block-start: 2rem;
 
+	.article-wrapper {
+		transition: var(--transition);
+
+		&:active {
+			transform: var(--active);
+		}
+	}
+
 	article {
 		position: relative;
-		transition: var(--transition-longer);
 		box-shadow: var(--edge-highlight), var(--shadow-glass);
 		border-radius: var(--rounded-corner);
 		border-start-end-radius: 2.125rem;
@@ -39,7 +46,6 @@
 		}
 
 		h3 {
-			display: inline-block;
 			margin: 0;
 			color: var(--accent-color);
 			font-weight: bold;
@@ -50,9 +56,10 @@
 				--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='m5.707 1.293 6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 1 1-1.414-1.414L9.586 8 4.293 2.707a1 1 0 1 1 1.414-1.414m0 0'/%3E%3C/svg%3E");
 				-webkit-mask-image: var(--icon);
 				display: inline-block;
-				vertical-align: -0.0625em;
+				position: relative;
 				transform: translateX(-0.25rem);
 				opacity: 0;
+				z-index: -1;
 				mask-image: var(--icon);
 				transition: var(--transition);
 				margin-inline-start: 0.25rem;
diff --git a/templates/partials/articles.html b/templates/partials/articles.html
index c31dc03..f5e305b 100644
--- a/templates/partials/articles.html
+++ b/templates/partials/articles.html
@@ -8,66 +8,68 @@
 
 <div id="article-list">
 	{%- for page in pages %}
-		<article {% include "partials/article_type.html" %}>
-			<a href="{{ page.permalink | safe }}"></a>
-			{%- if page.draft %}
-				<span class="draft-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
-				</span>
-			{%- elif page.extra.archive %}
-				<span class="archive-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
-				</span>
-			{%- elif page.extra.featured %}
-				<span class="featured-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
-				</span>
-			{%- elif page.extra.hot %}
-				<span class="hot-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}}
-				</span>
-			{%- elif page.extra.poor %}
-				<span class="poor-badge">
-					<i class="icon"></i>
-					{{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}}
-				</span>
-			{%- endif %}
-			<h3>{{ page.title }}</h3>
-			{%- if page.description %}
-				{{ page.description | markdown | safe }}
-			{%- endif %}
-			{%- if page.date -%}
-				<div class="details">
-					<small>
-						<time datetime="{{ page.date | date(format='%+') }}" pubdate>
-							{{- page.date | date(format=date_format, locale=date_locale) -}}
-						</time>
-						{%- if page.authors -%}
-							<span> • {% include "partials/authors.html" -%}</span>
-						{%- endif -%}
-					</small>
-					{%- if page.taxonomies -%}
-						{%- for name, taxon in page.taxonomies %}
-							<small>
-								<ul class="tags">
-									{%-for item in taxon -%}
-										<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
-									{%- endfor %}
-								</ul>
-							</small>
-						{%- endfor -%}
-					{%- endif %}
-					</small>
-				</div>
-			{%- endif -%}
-			{%- if page.extra.banner -%}
-				{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
-				<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
-			{%- endif -%}
-		</article>
+		<div class="article-wrapper">
+			<article {% include "partials/article_type.html" %}>
+				<a href="{{ page.permalink | safe }}"></a>
+				{%- if page.draft %}
+					<span class="draft-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
+					</span>
+				{%- elif page.extra.archive %}
+					<span class="archive-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
+					</span>
+				{%- elif page.extra.featured %}
+					<span class="featured-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
+					</span>
+				{%- elif page.extra.hot %}
+					<span class="hot-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}}
+					</span>
+				{%- elif page.extra.poor %}
+					<span class="poor-badge">
+						<i class="icon"></i>
+						{{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}}
+					</span>
+				{%- endif %}
+				<h3>{{ page.title }}</h3>
+				{%- if page.description %}
+					{{ page.description | markdown | safe }}
+				{%- endif %}
+				{%- if page.date -%}
+					<div class="details">
+						<small>
+							<time datetime="{{ page.date | date(format='%+') }}" pubdate>
+								{{- page.date | date(format=date_format, locale=date_locale) -}}
+							</time>
+							{%- if page.authors -%}
+								<span> • {% include "partials/authors.html" -%}</span>
+							{%- endif -%}
+						</small>
+						{%- if page.taxonomies -%}
+							{%- for name, taxon in page.taxonomies %}
+								<small>
+									<ul class="tags">
+										{%-for item in taxon -%}
+											<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
+										{%- endfor %}
+									</ul>
+								</small>
+							{%- endfor -%}
+						{%- endif %}
+						</small>
+					</div>
+				{%- endif -%}
+				{%- if page.extra.banner -%}
+					{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
+					<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
+				{%- endif -%}
+			</article>
+		</div>
 	{%- endfor %}
 </div>