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

Cleaner article card code and styles

Browse Source
This commit is contained in:
daudix
2024-10-14 04:57:51 +03:00
parent 003ec0b29a
commit 4e595760c8
5 changed files with 121 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
sass/_article-list.scss
View File

@ -4,20 +4,19 @@
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);
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;
border-end-end-radius: 1.8125rem; 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); background-color: var(--accent-color-alpha);
padding: 1rem; padding: 1rem;
overflow: hidden; overflow: hidden;
@ -31,13 +30,13 @@
transform: scaleX(-1); transform: scaleX(-1);
} }
} }
.blurnail {
transform: scale(1.25);
}
} }
& > a { &:active {
transform: var(--active);
}
&>a {
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: var(--rounded-corner); border-radius: var(--rounded-corner);
@ -46,6 +45,7 @@
} }
h3 { h3 {
mix-blend-mode: invert;
margin: 0; margin: 0;
color: var(--accent-color); color: var(--accent-color);
font-weight: bold; font-weight: bold;
@ -59,13 +59,13 @@
position: relative; 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;
background-color: currentColor; background-color: currentColor;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
pointer-events: none;
content: ""; content: "";
:root[dir*="rtl"] & { :root[dir*="rtl"] & {
@ -100,7 +100,6 @@
position: absolute; position: absolute;
transform: translateY(-50%); transform: translateY(-50%);
opacity: var(--disabled-opacity); opacity: var(--disabled-opacity);
z-index: -1;
mask-size: cover; mask-size: cover;
transition: var(--transition-longer); transition: var(--transition-longer);
inset-block-start: 50%; inset-block-start: 50%;
@ -137,6 +136,16 @@
color: var(--fg-muted-4); 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 { .tags a {
background-color: var(--fg-muted-1); background-color: var(--fg-muted-1);
color: var(--fg-muted-5); color: var(--fg-muted-5);
@ -167,6 +176,16 @@
color: var(--purple-fg); 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 { .tags a {
background-color: var(--purple-bg); background-color: var(--purple-bg);
color: var(--purple-fg); color: var(--purple-fg);
@ -204,6 +223,16 @@
color: var(--yellow-fg); 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 { .tags a {
background-color: var(--yellow-bg); background-color: var(--yellow-bg);
color: var(--yellow-fg); color: var(--yellow-fg);
@ -233,6 +262,16 @@
color: var(--red-fg); 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 { .tags a {
background-color: var(--red-bg); background-color: var(--red-bg);
color: var(--red-fg); color: var(--red-fg);
@ -262,6 +301,16 @@
color: var(--brown-fg); 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 { .tags a {
background-color: var(--brown-bg); background-color: var(--brown-bg);
color: var(--brown-fg); color: var(--brown-fg);
@ -273,11 +322,7 @@
} }
} }
.draft-badge, .badge {
.archive-badge,
.featured-badge,
.hot-badge,
.poor-badge {
float: inline-end; float: inline-end;
box-shadow: var(--edge-highlight); box-shadow: var(--edge-highlight);
border-radius: 999px; 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 { .details {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -354,18 +349,6 @@
border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2); border-block-start: max(1px, 0.0625rem) solid var(--fg-muted-2);
padding-block-start: 0.5rem; 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 B

BIN
static/processed_images/banner.ed0678c0bce42ad1.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 484 B

11
templates/partials/article_type.html
View File

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

119
templates/partials/articles.html
View File

@ -8,68 +8,61 @@
<div id="article-list"> <div id="article-list">
{%- for page in pages %} {%- for page in pages %}
<div class="article-wrapper"> {%- if page.draft -%}
<article {% include "partials/article_type.html" %}> {%- set article_type = "draft" -%}
<a href="{{ page.permalink | safe }}"></a> {%- set article_string = macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -%}
{%- if page.draft %} {%- elif page.extra.archive -%}
<span class="draft-badge"> {%- set article_type = "archive" -%}
<i class="icon"></i> {%- set article_string = macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -%}
{{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}} {%- elif page.extra.featured -%}
</span> {%- set article_type = "featured" -%}
{%- elif page.extra.archive %} {%- set article_string = macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -%}
<span class="archive-badge"> {%- elif page.extra.hot -%}
<i class="icon"></i> {%- set article_type = "hot" -%}
{{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}} {%- set article_string = macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -%}
</span> {%- elif page.extra.poor -%}
{%- elif page.extra.featured %} {%- set article_type = "poor" -%}
<span class="featured-badge"> {%- set article_string = macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -%}
<i class="icon"></i> {%- endif -%}
{{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}} {%- if page.extra.banner -%}
</span> {%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=4, height=2, op="fill", format="webp") -%}
{%- elif page.extra.hot %} {%- endif -%}
<span class="hot-badge"> <article {% if article_type %}class="{{ article_type }}"{% endif %} {% if blurnail %}style="--blurnail: url('{{ blurnail.url }}')"{% endif %}>
<i class="icon"></i> <a href="{{ page.permalink | safe }}"></a>
{{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}} {% if article_type %}
</span> <span class="badge">
{%- elif page.extra.poor %} <i class="icon"></i>
<span class="poor-badge"> {{- article_string -}}
<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> </article>
{%- 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 %} {%- endfor %}
</div> </div>