From b157f81a078a4e1adfd4ac942ead01593696a9b9 Mon Sep 17 00:00:00 2001 From: daudix Date: Sat, 22 Jun 2024 06:29:52 +0300 Subject: [PATCH] Allow making posts "featured", tweak article list styles --- content/blog/the-quill-of-duck/index.ar.md | 2 + content/blog/the-quill-of-duck/index.md | 2 +- content/blog/the-quill-of-duck/index.ru.md | 2 + i18n/ar.toml | 1 + i18n/en.toml | 1 + i18n/ru.toml | 3 +- sass/_article-list.scss | 143 +++++++++++++++++++-- sass/_footer.scss | 2 +- sass/_last-updated.scss | 4 + sass/_nav.scss | 1 + sass/_tags.scss | 10 ++ sass/_typography.scss | 1 + sass/_variables.scss | 2 + sass/style.scss | 1 + templates/404.html | 4 +- templates/article.html | 22 ++-- templates/article_list.html | 48 ++++--- templates/page.html | 4 +- templates/partials/comments.html | 2 +- templates/partials/footer.html | 40 +++--- templates/partials/head.html | 46 ++++--- templates/partials/language_switcher.html | 2 + templates/partials/nav.html | 16 +-- templates/taxonomy_list.html | 1 + templates/taxonomy_single.html | 52 ++++---- 25 files changed, 290 insertions(+), 122 deletions(-) create mode 100644 sass/_last-updated.scss diff --git a/content/blog/the-quill-of-duck/index.ar.md b/content/blog/the-quill-of-duck/index.ar.md index 9f66e7e..aae143c 100644 --- a/content/blog/the-quill-of-duck/index.ar.md +++ b/content/blog/the-quill-of-duck/index.ar.md @@ -5,4 +5,6 @@ description = "This is a Duckquill post example, this post has nothing but a bun date = 2023-08-31 [taxonomies] tags = ["Demo", "Test"] +[extra] +featured = true +++ diff --git a/content/blog/the-quill-of-duck/index.md b/content/blog/the-quill-of-duck/index.md index 90c58ae..9953480 100644 --- a/content/blog/the-quill-of-duck/index.md +++ b/content/blog/the-quill-of-duck/index.md @@ -7,11 +7,11 @@ updated = "2024-06-21" [taxonomies] tags = ["Demo", "Test"] [extra] -archive = "This page is, in fact, not archived." toc = true disclaimer = """ See [demo](@/demo/index.md) for showcase of all Duckquill possibilities. This page is a demo of a post with title, publication date, tags, disclaimer, table of contents and comments. """ +featured = true [extra.comments] host = "toot.community" user = "sungsphinx" diff --git a/content/blog/the-quill-of-duck/index.ru.md b/content/blog/the-quill-of-duck/index.ru.md index 4545063..2c9fec4 100644 --- a/content/blog/the-quill-of-duck/index.ru.md +++ b/content/blog/the-quill-of-duck/index.ru.md @@ -5,4 +5,6 @@ description = "This is a Duckquill post example, this post has nothing but a bun date = 2023-08-31 [taxonomies] tags = ["Demo", "Test"] +[extra] +featured = true +++ diff --git a/i18n/ar.toml b/i18n/ar.toml index e9da620..b6e2431 100644 --- a/i18n/ar.toml +++ b/i18n/ar.toml @@ -24,6 +24,7 @@ copy_code = "نسخ الرمز" disclaimer = "إخلاء المسؤولية" drafted = "مسودة" faves_from = "المفضلة من" +featured = "مميز" feed = "موجز" file_an_issue = "ملف مشكلة" filter_by_tag = "تصفية حسب العلامة" diff --git a/i18n/en.toml b/i18n/en.toml index 1949a68..c6359e1 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -25,6 +25,7 @@ copy_code = "Copy code" disclaimer = "Disclaimer" drafted = "Drafted" faves_from = "Favorites from" +featured = "Featured" feed = "Feed" file_an_issue = "File an Issue" filter_by_tag = "Filter by tag" diff --git a/i18n/ru.toml b/i18n/ru.toml index bc20671..2b3a144 100644 --- a/i18n/ru.toml +++ b/i18n/ru.toml @@ -18,7 +18,7 @@ Demo = "Демо" Repo = "Репо" all_tags = "Показать все теги" -archived = "Архивировано" +archived = "Архив" author = "Автор" blog_post_author = "Автор блог-поста" boosts_from = "Продвижения с" @@ -28,6 +28,7 @@ copy_code = "Скопировать код" disclaimer = "Дисклеймер" drafted = "Черновик" faves_from = "Избранное с" +featured = "Подборка" feed = "Лента" file_an_issue = "Отправить Отчет об Ошибке" filter_by_tag = "Фильтр по тегам" diff --git a/sass/_article-list.scss b/sass/_article-list.scss index e647d95..38158b7 100644 --- a/sass/_article-list.scss +++ b/sass/_article-list.scss @@ -1,34 +1,143 @@ #article-list { + margin-top: 2rem; + article { - position: relative; + + &.draft, + &.archive, + &.featured { + position: relative; + + h3 { + margin-right: 8rem; + + :root[dir="rtl"] & { + margin-right: unset; + margin-left: 8rem; + } + } + } &.draft { - transform: scale(0.95); opacity: 0.6; transition: var(--transition-longer); - outline: 0.125rem dashed var(--fg-muted-2); + outline: 0.125rem dashed var(--fg-muted-4); outline-offset: 1rem; - border-radius: 1rem; + border-radius: var(--rounded-corner); + border-top-right-radius: 1.125rem; &:hover { - transform: scale(1); opacity: 1; outline: 0.125rem dashed transparent; outline-offset: 0; } - } - &:has(.draft-badge, .archive-badge) h3 { - margin-right: 7rem; + h3 a { + color: var(--fg-muted-4); + } + + .tags a:hover { + background-color: var(--fg-muted-1); + color: var(--fg-muted-4); + } :root[dir="rtl"] & { - margin-right: unset; - margin-left: 7rem; + border-top-right-radius: var(--rounded-corner); + border-top-left-radius: 1.125rem; + } + } + + &.archive { + h3 a { + color: var(--purple-fg); + } + + .tags a:hover { + background-color: var(--purple-bg); + color: var(--purple-fg); + } + } + + &.featured { + transition: var(--transition-longer); + outline: 0.125rem dashed transparent; + outline-offset: 0; + box-shadow: var(--edge-highlight); + border-radius: var(--rounded-corner); + border-top-right-radius: 2.125rem; + background-color: var(--faves-bg); + padding: 1rem; + overflow: hidden; + + &::before { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + -webkit-mask-size: cover; + position: absolute; + top: 50%; + right: -3rem; + transform: translateY(-50%) rotate(-10deg); + opacity: 0.5; + z-index: -1; + mask-image: $icon; + mask-size: cover; + transition: var(--transition-longer); + background-color: var(--star-featured); + width: 12rem; + height: 12rem; + content: ""; + + :root[dir="rtl"] & { + right: unset; + left: -3rem; + transform: translateY(-50%) rotate(10deg); + } + } + + &:hover { + outline: 0.125rem dashed var(--faves-fg); + outline-offset: 0.5rem; + + &::before { + transform: translateY(-50%) rotate(62deg) scale(1.5); + } + } + + h3 { + margin-top: unset; + + a { + color: var(--faves-fg); + } + } + + .featured-badge { + top: 1rem; + right: 1rem; + + :root[dir="rtl"] & { + left: 1rem; + } + } + + .tags a:hover { + background-color: var(--faves-bg); + color: var(--faves-fg); + } + + :root[dir="rtl"] & { + border-top-right-radius: var(--rounded-corner); + border-top-left-radius: 2.125rem; + + &:hover::before { + transform: translateY(-50%) rotate(-62deg) scale(1.5); + } } } .draft-badge, - .archive-badge { + .archive-badge, + .featured-badge { position: absolute; top: 0; right: 0; @@ -73,6 +182,18 @@ background-color: var(--purple-fg); } } + + .featured-badge { + background-color: var(--faves-bg); + color: var(--faves-fg); + + .icon { + $icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M8 0a1 1 0 0 0-.95.684l-1.448 4.34-4.59-.016C.032 5.004-.371 6.266.43 6.828l3.625 2.555-1.5 4.285c-.317.902.687 1.691 1.492 1.172l4.004-2.594 3.894 2.586c.801.531 1.817-.258 1.5-1.16l-1.504-4.29 3.645-2.577c.789-.563.394-1.809-.574-1.813l-4.66-.015L8.949.69A1 1 0 0 0 8 0m0 0'/%3E%3C/svg%3E"); + -webkit-mask-image: $icon; + mask-image: $icon; + background-color: var(--faves-fg); + } + } } hr:last-of-type { diff --git a/sass/_footer.scss b/sass/_footer.scss index 9432978..bb038ea 100644 --- a/sass/_footer.scss +++ b/sass/_footer.scss @@ -6,7 +6,7 @@ nav { margin: 0 auto 2rem; box-shadow: var(--edge-highlight); - border-radius: 22px; + border-radius: 1.375rem; background-color: var(--fg-muted-1); padding: 0.25rem; width: fit-content; diff --git a/sass/_last-updated.scss b/sass/_last-updated.scss new file mode 100644 index 0000000..35f4416 --- /dev/null +++ b/sass/_last-updated.scss @@ -0,0 +1,4 @@ +.last-updated { + display: block; + margin-top: 1rem; +} diff --git a/sass/_nav.scss b/sass/_nav.scss index abf5af5..cd43ba3 100644 --- a/sass/_nav.scss +++ b/sass/_nav.scss @@ -156,6 +156,7 @@ &#dropdown { details { position: relative; + box-shadow: unset; border-radius: unset; background-color: unset; padding: 0; diff --git a/sass/_tags.scss b/sass/_tags.scss index de47c96..841fca1 100644 --- a/sass/_tags.scss +++ b/sass/_tags.scss @@ -2,9 +2,19 @@ display: inline-flex; flex-wrap: wrap; gap: 0.25rem; + margin: 0; padding: 0; list-style: none; + &.inline { + margin-left: 0.25rem; + + :root[dir="rtl"] & { + margin-right: 0.25rem; + margin-left: unset; + } + } + li { display: flex; transition: var(--transition); diff --git a/sass/_typography.scss b/sass/_typography.scss index f8dc267..eb687cf 100644 --- a/sass/_typography.scss +++ b/sass/_typography.scss @@ -147,6 +147,7 @@ details { border-radius: var(--rounded-corner); background-color: var(--fg-muted-1); padding: 1rem; + box-shadow: var(--edge-highlight); &>summary { cursor: pointer; diff --git a/sass/_variables.scss b/sass/_variables.scss index 0993a32..3cef7a3 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -18,6 +18,7 @@ --boosts-fg: rgb(145, 65, 172); --faves-bg: rgba(229, 165, 10, 0.1); --faves-fg: rgb(229, 165, 10); + --star-featured: rgba(229, 165, 10, 0.15); // VARIABLES --active: 0.9; @@ -70,6 +71,7 @@ --boosts-fg: rgb(220, 138, 221); --faves-bg: rgba(249, 240, 107, 0.1); --faves-fg: rgb(249, 240, 107); + --star-featured: rgba(249, 240, 107, 0.05); color-scheme: dark; } diff --git a/sass/style.scss b/sass/style.scss index cffe73b..e2f42c6 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -20,6 +20,7 @@ @use "hidden"; @use "icon"; @use "input"; +@use "last-updated"; @use "media"; @use "nav"; @use "not-found"; diff --git a/templates/404.html b/templates/404.html index 0691ddf..f7dfe54 100644 --- a/templates/404.html +++ b/templates/404.html @@ -12,8 +12,8 @@
Go Back - {% if config.extra.issues_url %} + {%- if config.extra.issues_url %} File an Issue - {% endif %} + {%- endif %}
{% endblock content %} diff --git a/templates/article.html b/templates/article.html index 5d7a57b..e2ca32e 100644 --- a/templates/article.html +++ b/templates/article.html @@ -11,15 +11,6 @@ - {%- if page.updated -%} - • - - {%- endif -%} {%- if page.authors -%} • @@ -29,8 +20,7 @@ {%- endif -%} {%- if page.taxonomies -%} {%- for name, taxon in page.taxonomies -%} - • -