diff --git a/assets/css/common/post-single.css b/assets/css/common/post-single.css index 486ad36e..c4f5dcb6 100644 --- a/assets/css/common/post-single.css +++ b/assets/css/common/post-single.css @@ -407,3 +407,73 @@ img.in-text { display: inline; margin: auto; } + +.comment-reply-link { + box-shadow: 0 1px 0; + box-decoration-break: clone; + -webkit-box-decoration-break: clone; +} +.fediverse-comment { + background-color: var(--code-bg); + border-radius: var(--radius); + border: 1px var(--border) solid; + padding: 20px; + margin-bottom: 1.5rem; + display: flex; + flex-direction: column; + color: var(--content); +} +.fediverse-comment p { + margin-bottom: 0px; +} +.fediverse-comment .author { + padding-top:0; + display:flex; +} +.fediverse-comment .author a { + text-decoration: none; +} +.fediverse-comment .author .avatar img { + margin-right:1rem; + min-width:60px; + border-radius: 5px; +} +.fediverse-comment .author .details { + display: flex; + flex-direction: column; +} +.fediverse-comment .author .details .name { + font-weight: bold; +} +.fediverse-comment .author .details .user { + color: #5d686f; + font-size: medium; +} +.fediverse-comment .author .date { + margin-left: auto; + font-size: small; +} +.fediverse-comment .content { + margin: 15px 20px; +} +.fediverse-comment .content p:first-child { + margin-top:0; + margin-bottom:0; +} +.fediverse-comment .status > div { + display: inline-block; + margin-right: 15px; +} +.fediverse-comment .status a { + color: #5d686f; + text-decoration: none; +} +.fediverse-comment .status .replies.active a { + color: #003eaa; +} +.fediverse-comment .status .reblogs.active a { + color: #8c8dff; +} +.fediverse-comment .status .favourites.active a { + color: #ca8f04; +} diff --git a/assets/css/core/theme-vars.css b/assets/css/core/theme-vars.css index db1845d3..aed5791f 100644 --- a/assets/css/core/theme-vars.css +++ b/assets/css/core/theme-vars.css @@ -15,6 +15,7 @@ --code-block-bg: rgb(28, 29, 33); --code-bg: rgb(245, 245, 245); --border: rgb(238, 238, 238); + --fediverse-comment-indent: 10px } .dark { diff --git a/layouts/partials/comments-fediverse.html b/layouts/partials/comments-fediverse.html new file mode 100644 index 00000000..4cc5cf41 --- /dev/null +++ b/layouts/partials/comments-fediverse.html @@ -0,0 +1,140 @@ +{{- /* Fediverse comments area start */ -}} +
Use your Fediverse account (e.g. Mastodon) to
+ + + + +{{- /* Fediverse comments area end */ -}} diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html index 918451a1..61fa2630 100644 --- a/layouts/partials/comments.html +++ b/layouts/partials/comments.html @@ -1,3 +1,4 @@ {{- /* Comments area start */ -}} {{- /* to add comments read => https://gohugo.io/content-management/comments/ */ -}} +{{- if (.Params.comments.fediverse) }} {{- partial "comments-fediverse.html" . }} {{- end }} {{- /* Comments area end */ -}} . +