From 86f1ba0aaab540a0a71de06a911d0937c40f7181 Mon Sep 17 00:00:00 2001 From: welpo Date: Sun, 18 May 2025 23:37:21 +0200 Subject: [PATCH] Update webmentions styling + add EOL newline + restore some changes --- content/blog/shortcodes/index.es.md | 2 +- content/blog/shortcodes/index.md | 47 +++--- sass/parts/_webmention.scss | 251 +++++++++++++++------------- static/js/webmention.min.js | 2 +- templates/partials/header.html | 1 - templates/partials/webmentions.html | 2 +- 6 files changed, 160 insertions(+), 145 deletions(-) diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index bc89c3d..6fa148c 100644 --- a/content/blog/shortcodes/index.es.md +++ b/content/blog/shortcodes/index.es.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalizados" date = 2023-02-19 -updated = 2025-02-21 +updated = 2025-02-15 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más." [taxonomies] diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index ce5c8e5..98945d8 100644 --- a/content/blog/shortcodes/index.md +++ b/content/blog/shortcodes/index.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2025-03-19 +updated = 2025-05-18 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." [taxonomies] @@ -60,28 +60,28 @@ The diagram will be rendered as follows: {% mermaid() %} classDiagram - class CognitiveDistortions { - +AllOrNothingThinking() - +Overgeneralization() - +MentalFilter() - +JumpingToConclusions() - } - class AllOrNothingThinking { - +SeeInExtremes() - } - class Overgeneralization { - +GeneralizeFromSingle() - } - class MentalFilter { - +FocusOnNegative() - } - class JumpingToConclusions { - +MakeAssumptions() - } - CognitiveDistortions *-- AllOrNothingThinking - CognitiveDistortions *-- Overgeneralization - CognitiveDistortions *-- MentalFilter - CognitiveDistortions *-- JumpingToConclusions + class CognitiveDistortions { + +AllOrNothingThinking() + +Overgeneralization() + +MentalFilter() + +JumpingToConclusions() + } + class AllOrNothingThinking { + +SeeInExtremes() + } + class Overgeneralization { + +GeneralizeFromSingle() + } + class MentalFilter { + +FocusOnNegative() + } + class JumpingToConclusions { + +MakeAssumptions() + } + CognitiveDistortions *-- AllOrNothingThinking + CognitiveDistortions *-- Overgeneralization + CognitiveDistortions *-- MentalFilter + CognitiveDistortions *-- JumpingToConclusions {% end %} The Mermaid shortcode supports two parameters: @@ -462,4 +462,3 @@ def مرحبا_بالعالم(): {%/* end */%} ```` - diff --git a/sass/parts/_webmention.scss b/sass/parts/_webmention.scss index 62960b5..b6d6338 100644 --- a/sass/parts/_webmention.scss +++ b/sass/parts/_webmention.scss @@ -1,132 +1,149 @@ #webmentions { - margin: 0; - position: relative; - z-index: 100; - line-height: 1.2em; - color: var(--text-color); - background-color: var(--background-color); + position: relative; + z-index: 100; + margin: 0; + background-color: var(--background-color); + color: var(--text-color); + line-height: 1.2em; - h2 { - font-size: 1.1em; - margin-bottom: 1.5em; - } - - h3 { - font-size: 0.9em; - display: flex; - align-items: center; - - .svg-icon, span { - margin-right: .375rem; - } - } - - ol { - padding: 0; - } - - li, p { - font-family: inherit; - } - - .likes { - display: flex; - flex-wrap: wrap; - list-style: none; - padding-left: 1rem; - - li { - margin-bottom: .375rem; - // margin-left: -1rem; - position: relative; - - img { - border-radius: 50%; - height: 3rem; - -o-object-fit: cover; - object-fit: cover; - display: block; - height: auto; - max-width: 100%; - } - } - } - - .comment { - font-size: 80%; - box-shadow: rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px; - border-radius: 0.5rem; - padding: 0.5rem; - padding-bottom: 0; - background: var(--bg-1); - min-height: 100px; - overflow: hidden; - margin-bottom: 0.5em; - - - div { - display: flex; - flex-wrap: nowrap; - align-items: center; - justify-content: space-between; + h2 { + margin-bottom: 1.5em; + font-size: 1.1em; } + h3 { + display: flex; + align-items: center; + font-size: 0.9em; + + svg { + margin-inline-end: 0.2rem; + } + + .svg-icon, + span { + margin-inline-end: .3rem; + } + } + + ol { + padding: 0; + } + + li, p { - line-height: 1.5em; + font-family: inherit; } - .p-author { - font-size: 1.3em; - font-style: bold; + +.likes { + display: flex; + flex-wrap: wrap; + margin-top: 0.5rem; + padding: 0; + list-style: none; + + li { + position: relative; + transition: transform 0.8s ease-out, z-index 0s linear 0.4s; + margin-bottom: .375rem; + margin-inline-start: -.75rem; + + &:first-child { + margin-inline-start: 0; + } + + &:hover { + transform: scale(1.3) translateY(-4px); + z-index: 10; + transition: transform 0.05s ease-out, z-index 0s linear 0s; + } + + img { + display: block; + border: 2px solid var(--background-color, white); + border-radius: 50%; + aspect-ratio: 1/1; + width: 2.5rem; + height: 2.5rem; + object-fit: cover; + } + } } - .u-url { - font-style: italic; - text-decoration: underline; + .comment { + margin-bottom: 1rem; + border-radius: 10px; + background: var(--bg-0); + padding: 1rem; + overflow: hidden; + font-size: 80%; + + div { + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + } + + p { + margin-bottom: 0; + line-height: 1.5em; + } + + .p-author { + font-style: bold; + font-size: 1.3em; + } + + .u-url { + font-style: italic; + text-decoration: underline; + } + + .u-author { + display: flex; + align-items: center; + + img { + display: block; + margin-inline-end: .625rem; + width: 2rem; + max-width: 100%; + height: 2rem; + } + } } - .u-author { - display: flex; - align-items: center; + form { + input { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 20px 0px 0px 20px; + background-color: var(--input-background-color); + padding-inline: 1rem 1rem; + padding-block: .75rem; + width: calc(60% - 2rem); + color: var(--text-color); + font-size: 1rem; + } - img { - height: 2rem; - margin-right: .625rem; - width: 2rem; - display: block; - max-width: 100%; - } - } + button { + flex: 1; + border: 1px solid var(--divider-color); + border-radius: 0px 20px 20px 0px; + background-color: var(--input-background-color); + padding-inline: 0.7rem 0.7rem; + padding-block: .75rem; + width: 7rem; + color: var(--text-color); + font-size: 1rem; + } - } - - form { - input { - flex: 1; - border: 1px solid var(--divider-color); - border-radius: 20px 0px 0px 20px; - background-color: var(--input-background-color); - color: var(--text-color); - font-size: 1rem; - padding-inline: 1rem 1rem; - padding-block: .75rem; - width: calc(60% - 2rem); + button:hover { + cursor: pointer; + background-color: var(--primary-color); + color: var(--hover-color); + } } - button { - flex: 1; - border: 1px solid var(--divider-color); - border-radius: 0px 20px 20px 0px; - background-color: var(--input-background-color); - color: var(--text-color); - font-size: 1rem; - padding-inline: 0.7rem 0.7rem; - padding-block: .75rem; - width: 7rem; - } - button:hover { - background-color: var(--primary-color); - color: var(--hover-color); - cursor: pointer; - } - } } diff --git a/static/js/webmention.min.js b/static/js/webmention.min.js index 72e151a..76f9cc6 100644 --- a/static/js/webmention.min.js +++ b/static/js/webmention.min.js @@ -63,4 +63,4 @@ `}),html+=` - `}window.addEventListener("load",async function(){var container=document.getElementById(containerID);if(container){let pages=[stripurl(refurl)],apiURL=(addurls&&addurls.split("|").forEach(function(url){pages.push(stripurl(url))}),`https://webmention.io/api/mentions.jf2?per-page=${maxWebmentions}&sort-by=${sortBy}&sort-dir=`+sortDir),json=(pages.forEach(function(path){apiURL+=`&target[]=${encodeURIComponent("http:"+path)}&target[]=`+encodeURIComponent("https:"+path)}),{});try{var response=await window.fetch(apiURL);200<=response.status&&response.status<300?json=await response.json():(console.error("Could not parse response"),new Error(response.statusText))}catch(error){console.error("Request failed",error)}var response=[],mentions=[],bookmarks=[],likes=[],reposts=[];let mapping={"in-reply-to":response,"like-of":likes,"repost-of":reposts,"bookmark-of":bookmarks,"follow-of":[],"mention-of":mentions,rsvp:response},formattedMentions=(json.children.forEach(function(child){var store=mapping[child["wm-property"]];store&&store.push(child)}),""),formattedComments=(0${repostsStr}${likesStr}${bookmarksStr}${formattedComments}${formattedMentions}`}})})(); \ No newline at end of file + `}window.addEventListener("load",async function(){var container=document.getElementById(containerID);if(container){let pages=[stripurl(refurl)],apiURL=(addurls&&addurls.split("|").forEach(function(url){pages.push(stripurl(url))}),`http://127.0.0.1:1111/test_webmentions.jf2?`),json=(pages.forEach(function(path){apiURL+=`&target[]=${encodeURIComponent("http:"+path)}&target[]=`+encodeURIComponent("https:"+path)}),{});try{var response=await window.fetch(apiURL);200<=response.status&&response.status<300?json=await response.json():(console.error("Could not parse response"),new Error(response.statusText))}catch(error){console.error("Request failed",error)}var response=[],mentions=[],bookmarks=[],likes=[],reposts=[];let mapping={"in-reply-to":response,"like-of":likes,"repost-of":reposts,"bookmark-of":bookmarks,"follow-of":[],"mention-of":mentions,rsvp:response},formattedMentions=(json.children.forEach(function(child){var store=mapping[child["wm-property"]];store&&store.push(child)}),""),formattedComments=(0${repostsStr}${likesStr}${bookmarksStr}${formattedComments}${formattedMentions}`}})})(); diff --git a/templates/partials/header.html b/templates/partials/header.html index 8849a7c..049450e 100644 --- a/templates/partials/header.html +++ b/templates/partials/header.html @@ -151,7 +151,6 @@ {%- endif -%} - {# Search #} {%- if config.build_search_index -%} {%- if config.search.index_format -%} diff --git a/templates/partials/webmentions.html b/templates/partials/webmentions.html index e6f59c7..c8c04ce 100644 --- a/templates/partials/webmentions.html +++ b/templates/partials/webmentions.html @@ -55,4 +55,4 @@ {%- set dash = "-" -%} {% endif %} -
hello
\ No newline at end of file +
hello