Cleaner article card code and styles
This commit is contained in:
daudix
@ -4,20 +4,19 @@
|
||||
gap: 1rem;
|
||||
margin-block-start: 2rem;
|
||||
|
||||
.article-wrapper {
|
||||
transition: var(--transition);
|
||||
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
position: relative;
|
||||
transition: var(--transition);
|
||||
box-shadow: var(--edge-highlight), var(--shadow-glass);
|
||||
border-radius: var(--rounded-corner);
|
||||
border-start-end-radius: 2.125rem;
|
||||
border-end-end-radius: 1.8125rem;
|
||||
background-image:
|
||||
linear-gradient(var(--accent-color-alpha), var(--accent-color-alpha)),
|
||||
linear-gradient(var(--nav-bg), var(--nav-bg)),
|
||||
var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-color: var(--accent-color-alpha);
|
||||
padding: 1rem;
|
||||
overflow: hidden;
|
||||
@ -31,13 +30,13 @@
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
.blurnail {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
}
|
||||
|
||||
& > a {
|
||||
&:active {
|
||||
transform: var(--active);
|
||||
}
|
||||
|
||||
&>a {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--rounded-corner);
|
||||
@ -46,6 +45,7 @@
|
||||
}
|
||||
|
||||
h3 {
|
||||
mix-blend-mode: invert;
|
||||
margin: 0;
|
||||
color: var(--accent-color);
|
||||
font-weight: bold;
|
||||
@ -59,13 +59,13 @@
|
||||
position: relative;
|
||||
transform: translateX(-0.25rem);
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
mask-image: var(--icon);
|
||||
transition: var(--transition);
|
||||
margin-inline-start: 0.25rem;
|
||||
background-color: currentColor;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
|
||||
:root[dir*="rtl"] & {
|
||||
@ -100,7 +100,6 @@
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
opacity: var(--disabled-opacity);
|
||||
z-index: -1;
|
||||
mask-size: cover;
|
||||
transition: var(--transition-longer);
|
||||
inset-block-start: 50%;
|
||||
@ -137,6 +136,16 @@
|
||||
color: var(--fg-muted-4);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
@ -167,6 +176,16 @@
|
||||
color: var(--purple-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
@ -204,6 +223,16 @@
|
||||
color: var(--yellow-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
@ -233,6 +262,16 @@
|
||||
color: var(--red-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
@ -262,6 +301,16 @@
|
||||
color: var(--brown-fg);
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
@ -273,11 +322,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.draft-badge,
|
||||
.archive-badge,
|
||||
.featured-badge,
|
||||
.hot-badge,
|
||||
.poor-badge {
|
||||
.badge {
|
||||
float: inline-end;
|
||||
box-shadow: var(--edge-highlight);
|
||||
border-radius: 999px;
|
||||
@ -294,56 +339,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.draft-badge {
|
||||
background-color: var(--fg-muted-1);
|
||||
color: var(--fg-muted-5);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.archive-badge {
|
||||
background-color: var(--purple-bg);
|
||||
color: var(--purple-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.featured-badge {
|
||||
background-color: var(--yellow-bg);
|
||||
color: var(--yellow-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.hot-badge {
|
||||
background-color: var(--red-bg);
|
||||
color: var(--red-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.poor-badge {
|
||||
background-color: var(--brown-bg);
|
||||
color: var(--brown-fg);
|
||||
|
||||
.icon {
|
||||
-webkit-mask-image: var(--icon);
|
||||
mask-image: var(--icon);
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
@ -354,18 +349,6 @@
|
||||
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
|
||||
padding-block-start: 0.5rem;
|
||||
}
|
||||
|
||||
.blurnail {
|
||||
position: absolute;
|
||||
opacity: var(--dim-opacity);
|
||||
z-index: -2;
|
||||
filter: var(--blurnail-blur);
|
||||
transition: var(--transition-longer);
|
||||
inset: 0;
|
||||
background-image: var(--blurnail);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BIN
static/processed_images/banner.11b1c6ec8721de53.webp
Normal file
BIN
static/processed_images/banner.11b1c6ec8721de53.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 96 B |
Binary file not shown.
|
Before Width: | Height: | Size: 484 B |
@ -1,11 +0,0 @@
|
||||
{%- if page.draft -%}
|
||||
class="draft"
|
||||
{%- elif page.extra.archive -%}
|
||||
class="archive"
|
||||
{%- elif page.extra.featured -%}
|
||||
class="featured"
|
||||
{%- elif page.extra.hot -%}
|
||||
class="hot"
|
||||
{%- elif page.extra.poor -%}
|
||||
class="poor"
|
||||
{%- endif -%}
|
||||
@ -8,68 +8,61 @@
|
||||
|
||||
<div id="article-list">
|
||||
{%- for page in pages %}
|
||||
<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>
|
||||
{%- if page.draft -%}
|
||||
{%- set article_type = "draft" -%}
|
||||
{%- set article_string = macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -%}
|
||||
{%- elif page.extra.archive -%}
|
||||
{%- set article_type = "archive" -%}
|
||||
{%- set article_string = macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -%}
|
||||
{%- elif page.extra.featured -%}
|
||||
{%- set article_type = "featured" -%}
|
||||
{%- set article_string = macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -%}
|
||||
{%- elif page.extra.hot -%}
|
||||
{%- set article_type = "hot" -%}
|
||||
{%- set article_string = macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -%}
|
||||
{%- elif page.extra.poor -%}
|
||||
{%- set article_type = "poor" -%}
|
||||
{%- set article_string = macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -%}
|
||||
{%- endif -%}
|
||||
{%- if page.extra.banner -%}
|
||||
{%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=4, height=2, op="fill", format="webp") -%}
|
||||
{%- endif -%}
|
||||
<article {% if article_type %}class="{{ article_type }}"{% endif %} {% if blurnail %}style="--blurnail: url('{{ blurnail.url }}')"{% endif %}>
|
||||
<a href="{{ page.permalink | safe }}"></a>
|
||||
{% if article_type %}
|
||||
<span class="badge">
|
||||
<i class="icon"></i>
|
||||
{{- article_string -}}
|
||||
</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 -%}
|
||||
</article>
|
||||
{%- endfor %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user