hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scale article cards down when pressed

Browse Source
This commit is contained in:
daudix
2024-10-06 07:17:21 +03:00
parent 636fad2fd5
commit 01e6609286
2 changed files with 73 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
sass/_article-list.scss
View File

@ -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;

124
templates/partials/articles.html
View File

@ -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>