From 4e595760c84cd6655bdd77d699369d15c80b7926 Mon Sep 17 00:00:00 2001 From: daudix Date: Mon, 14 Oct 2024 04:57:51 +0300 Subject: [PATCH] Cleaner article card code and styles --- sass/_article-list.scss | 147 ++++++++---------- .../banner.11b1c6ec8721de53.webp | Bin 0 -> 96 bytes .../banner.ed0678c0bce42ad1.webp | Bin 484 -> 0 bytes templates/partials/article_type.html | 11 -- templates/partials/articles.html | 119 +++++++------- 5 files changed, 121 insertions(+), 156 deletions(-) create mode 100644 static/processed_images/banner.11b1c6ec8721de53.webp delete mode 100644 static/processed_images/banner.ed0678c0bce42ad1.webp delete mode 100644 templates/partials/article_type.html diff --git a/sass/_article-list.scss b/sass/_article-list.scss index 05bc0ea..bc09d33 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -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; - } } } diff --git a/static/processed_images/banner.11b1c6ec8721de53.webp b/static/processed_images/banner.11b1c6ec8721de53.webp new file mode 100644 index 0000000000000000000000000000000000000000..05d28ad3f08720248d1be3348444465d68eaa9b0 GIT binary patch literal 96 zcmWIYbaRVfU|F({cK#AmWg$v+>9!{YC#9*%<&u CjU{6M literal 0 HcmV?d00001 diff --git a/static/processed_images/banner.ed0678c0bce42ad1.webp b/static/processed_images/banner.ed0678c0bce42ad1.webp deleted file mode 100644 index b1bde2a8138a3b6987925b5572c953e73fc36e88..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 484 zcmWIYbaT7I$iNWp>J$(bVBvFtk%2*<{{SPy|Hlg3azl4^?GA4L<)YAReLar%_{6u{ zcn|PfK9`XybbNQ&_Q#XW)&bKPCX~qDEW2f6=*_o$!j}nsmj(aL46K{=|Hgi~LRPld z!Ws^@O;#whtT^Bi7P*)wxnG>=`I1Q1$;*sYwUTG7J;=u(TU)(u`}SR@bqr=|B^H|P z5}P7(OG750e4b>!Tq$qm5u3{V?7OT%0k)cL*$O(PJsn3^T{_-e-YbwWbxRiK1O@3G z%cgBosV&PETXt-E)B>M`1VM)=-f3qZKR3{H2r6muTdcG5#1)@+w~qV>y13~Xud&_! zx%MZY|6CMaQo-#!$svt-fgQu{@7}vV%DBwdh(6o;j;XOql(jENW!;V+)?TRsPCLIb zKbWX_U8_h$x9`~Xl^17SzF;I${B4($fSagQi_XsQO#&$#CBNAJcfB<6Uvl%2PwJ&> z)&+n5*&aSMi-C`cK_MXY=C<71Ak_V$K4kXw(>t%r_o-dJ`TT6!lv7*Xo|o9XDZkCy z?dd13{WWa2b-=xApRYHwF^PQ2T7CBEG_NBIUwrmfdiEu*-+5c4Zsi?`zy3=le8rCb s&=dN^I!AsU1DlkI)=t~mj;+BS5`28EFSevDKQGU*$WV~QY@P=b07#+UCjbBd diff --git a/templates/partials/article_type.html b/templates/partials/article_type.html deleted file mode 100644 index ec59b31..0000000 --- a/templates/partials/article_type.html +++ /dev/null @@ -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 -%} diff --git a/templates/partials/articles.html b/templates/partials/articles.html index f5e305b..53144c0 100644 --- a/templates/partials/articles.html +++ b/templates/partials/articles.html @@ -8,68 +8,61 @@
{%- for page in pages %} -
-
- - {%- if page.draft %} - - - {{- macros_translate::translate(key="drafted", default="Drafted", language_strings=language_strings) -}} - - {%- elif page.extra.archive %} - - - {{- macros_translate::translate(key="archived", default="Archived", language_strings=language_strings) -}} - - {%- elif page.extra.featured %} - - - {{- macros_translate::translate(key="featured", default="Featured", language_strings=language_strings) -}} - - {%- elif page.extra.hot %} - - - {{- macros_translate::translate(key="hot", default="Hot", language_strings=language_strings) -}} - - {%- elif page.extra.poor %} - - - {{- macros_translate::translate(key="poor", default="Poor", language_strings=language_strings) -}} - - {%- endif %} -

{{ page.title }}

- {%- if page.description %} - {{ page.description | markdown | safe }} - {%- endif %} - {%- if page.date -%} -
- - - {%- if page.authors -%} - • {% include "partials/authors.html" -%} - {%- endif -%} - - {%- if page.taxonomies -%} - {%- for name, taxon in page.taxonomies %} - -
    - {%-for item in taxon -%} -
  • {{ item }}
    • - {%- endfor %} -
- - {%- endfor -%} - {%- endif %} - -
- {%- endif -%} - {%- if page.extra.banner -%} - {%- set blurnail = resize_image(path=page.colocated_path ~ page.extra.banner, width=16, height=8, op="fill", format="webp") -%} -
- {%- endif -%} -
-
+ {%- 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 -%} +
+ + {% if article_type %} + + + {{- article_string -}} + + {%- endif %} +

{{ page.title }}

+ {%- if page.description %} + {{ page.description | markdown | safe }} + {%- endif %} + {%- if page.date -%} +
+ + + {%- if page.authors -%} + • {% include "partials/authors.html" -%} + {%- endif -%} + + {%- if page.taxonomies -%} + {%- for name, taxon in page.taxonomies %} + +
    + {%-for item in taxon -%} +
  • {{ item }}
    • + {%- endfor %} +
+ + {%- endfor -%} + {%- endif %} + +
+ {%- endif -%} +
{%- endfor %}