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; gap: 1rem;
margin-block-start: 2rem; margin-block-start: 2rem;
.article-wrapper {
transition: var(--transition);
&:active {
transform: var(--active);
}
}
article { article {
position: relative; position: relative;
transition: var(--transition-longer);
box-shadow: var(--edge-highlight), var(--shadow-glass); box-shadow: var(--edge-highlight), var(--shadow-glass);
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
border-start-end-radius: 2.125rem; border-start-end-radius: 2.125rem;
@ -39,7 +46,6 @@
} }
h3 { h3 {
display: inline-block;
margin: 0; margin: 0;
color: var(--accent-color); color: var(--accent-color);
font-weight: bold; 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"); --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); -webkit-mask-image: var(--icon);
display: inline-block; display: inline-block;
vertical-align: -0.0625em; position: relative;
transform: translateX(-0.25rem); transform: translateX(-0.25rem);
opacity: 0; opacity: 0;
z-index: -1;
mask-image: var(--icon); mask-image: var(--icon);
transition: var(--transition); transition: var(--transition);
margin-inline-start: 0.25rem; margin-inline-start: 0.25rem;

124
templates/partials/articles.html
View File

@ -8,66 +8,68 @@
<div id="article-list"> <div id="article-list">
{%- for page in pages %} {%- for page in pages %}
<article {% include "partials/article_type.html" %}> <div class="article-wrapper">
<a href="{{ page.permalink | safe }}"></a> <article {% include "partials/article_type.html" %}>
{%- if page.draft %} <a href="{{ page.permalink | safe }}"></a>
<span class="draft-badge"> {%- if page.draft %}
<i class="icon"></i> <span class="draft-badge">
{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}} <i class="icon"></i>
</span> {{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}}
{%- elif page.extra.archive %} </span>
<span class="archive-badge"> {%- elif page.extra.archive %}
<i class="icon"></i> <span class="archive-badge">
{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}} <i class="icon"></i>
</span> {{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}}
{%- elif page.extra.featured %} </span>
<span class="featured-badge"> {%- elif page.extra.featured %}
<i class="icon"></i> <span class="featured-badge">
{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}} <i class="icon"></i>
</span> {{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}}
{%- elif page.extra.hot %} </span>
<span class="hot-badge"> {%- elif page.extra.hot %}
<i class="icon"></i> <span class="hot-badge">
{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}} <i class="icon"></i>
</span> {{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}}
{%- elif page.extra.poor %} </span>
<span class="poor-badge"> {%- elif page.extra.poor %}
<i class="icon"></i> <span class="poor-badge">
{{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}} <i class="icon"></i>
</span> {{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}}
{%- endif %} </span>
<h3>{{ page.title }}</h3> {%- endif %}
{%- if page.description %} <h3>{{ page.title }}</h3>
{{ page.description | markdown | safe }} {%- if page.description %}
{%- endif %} {{ page.description | markdown | safe }}
{%- if page.date -%} {%- endif %}
<div class="details"> {%- if page.date -%}
<small> <div class="details">
<time datetime="{{ page.date | date(format='%+') }}" pubdate> <small>
{{- page.date | date(format=date_format, locale=date_locale) -}} <time datetime="{{ page.date | date(format='%+') }}" pubdate>
</time> {{- page.date | date(format=date_format, locale=date_locale) -}}
{%- if page.authors -%} </time>
<span> • {% include "partials/authors.html" -%}</span> {%- if page.authors -%}
{%- endif -%} <span> • {% include "partials/authors.html" -%}</span>
</small> {%- endif -%}
{%- if page.taxonomies -%} </small>
{%- for name, taxon in page.taxonomies %} {%- if page.taxonomies -%}
<small> {%- for name, taxon in page.taxonomies %}
<ul class="tags"> <small>
{%-for item in taxon -%} <ul class="tags">
<li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li> {%-for item in taxon -%}
{%- endfor %} <li><a class="tag" href="{{ get_taxonomy_url(kind=name, name=item, lang=lang) }}">{{ item }}</a></li>
</ul> {%- endfor %}
</small> </ul>
{%- endfor -%} </small>
{%- endif %} {%- endfor -%}
</small> {%- endif %}
</div> </small>
{%- endif -%} </div>
{%- if page.extra.banner -%} {%- endif -%}
{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%} {%- if page.extra.banner -%}
<div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div> {%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%}
{%- endif -%} <div class="blurnail" style="--blurnail: url('{{ blurnail.url }}')"></div>
</article> {%- endif -%}
</article>
</div>
{%- endfor %} {%- endfor %}
</div> </div>