2bccadf38c
- Created a new SCSS file for webmention styles to enhance the appearance of comments and reactions. - Added HTML partial for share buttons including Twitter, Facebook, LinkedIn, Reddit, and WhatsApp. - Updated the main SCSS file to include webmention styles and removed the old CSS file for webmentions. - Updated asset integrity for the compiled CSS file.
1 line
7.0 KiB
Plaintext
1 line
7.0 KiB
Plaintext
@charset "UTF-8";:root{--blockquote-border-size:4px;--blockquote-background-color:rgb(248 248 248);--heading-border-size:4px;--link-background-color:189, 195, 199;--link-background-opacity:0.5;--link-background-opacity-hover:0.7;--pre-background-color:#272822;--pre-text-color:#f8f8f2;--code-background-color:rgba(0, 0, 0, 0.12);--code-text-color:#808080;--table-border-color:#dadada;--tr-even-background-color:#efefee}@media(prefers-color-scheme:dark){:root{--code-background-color:#272822;--code-text-color:rgba(255, 255, 255, 0.9);--table-border-color:#717171;--tr-even-background-color:#545454;--blockquote-background-color:rgb(75 75 75)}}@keyframes enterIn{0%{opacity:0}100%{opacity:100}}@media only screen and (min-width:768px){#pridecodes-code-corner-svg{width:150px}}@media only screen and (max-width:767px){#pridecodes-code-corner-svg{width:75px}}#pridecodes-code-corner-svg{animation:enterIn 2s;transition:all .2s ease-in-out}#pridecodes-code-corner-svg:hover{transform:scale(1.1);transform-origin:left top}section#comments #comments-wrapper{margin:1.5em 0;padding:0 var(--card-padding)}section#comments .comment{display:grid;column-gap:1rem;grid-template-areas:"avatar name" "avatar time" "avatar post" "...... interactions";grid-template-columns:min-content;justify-items:start;margin:0 auto 0 -1em;padding:.5em}section#comments .comment.comment-reply{margin:0 auto 0 1em}section#comments .comment .avatar-link{grid-area:avatar;height:4rem;position:relative;width:4rem}section#comments .comment .avatar-link .avatar{height:100%;width:100%;border-radius:20%}section#comments .comment .avatar-link.op::after{background-color:var(--accent-color);border-radius:50%;bottom:-.25rem;color:var(--accent-color-text);content:"✓";display:block;font-size:1.25rem;font-weight:700;height:1.5rem;line-height:1.5rem;position:absolute;right:-.25rem;text-align:center;width:1.5rem}section#comments .comment .author{align-items:center;display:flex;font-weight:700;gap:.5em;grid-area:name}section#comments .comment .author .instance{background-color:var(--code-background-color);border-radius:9999px;color:var(--neutral);font-size:smaller;font-weight:400;padding:.25em .75em}section#comments .comment .author .instance:hover{opacity:.8;text-decoration:none}section#comments .comment .author .instance.op{background-color:var(--code-background-color);color:var(--accent-color-text)}section#comments .comment .author .instance.op::before{content:"✓";font-weight:700;margin-inline-end:.25em}section#comments .comment time{grid-area:time;line-height:1.5rem}section#comments .comment main{grid-area:post}section#comments .comment main p:first-child{margin-top:.25em}section#comments .comment main p:last-child{margin-bottom:0}section#comments .comment footer{grid-area:interactions}section#comments .comment footer .faves{color:inherit}section#comments .comment footer .faves:hover{opacity:.8;text-decoration:none}section#comments .comment footer .faves::before{color:red;content:"♥";font-size:2rem;margin-inline-end:.25em}section#comments .comment .emoji{display:inline;height:1.25em;vertical-align:middle;width:1.25em}section#comments .comment .invisible{display:none}section#comments .comment .ellipsis::after{content:"…"}.author{margin:0}.center-img{display:flex;justify-content:center;width:80%}.menu .trigger{float:left;display:flex;align-items:center}@media screen and (max-width:768px){.menu .menu-icon{position:relative}}small,section#comments .comment time,section#comments .comment footer,aside p{font-size:smaller;opacity:.9}#webmentions{margin:0;position:relative;z-index:100;line-height:1.2em}#webmentions .comments{overflow-x:hidden;overflow-y:scroll}#webmentions h2{font-size:medium;margin:0;padding:2px}#webmentions .reacts img{margin:3px -1ex 8px 0}#webmentions img.missing{border:dashed #000 1px}#webmentions ul{list-style-type:none;margin:0;padding:4px}#webmentions li{text-indent:-1em;padding-left:1em}#webmentions a.reaction{position:relative;text-decoration:none;margin-right:0;letter-spacing:-1ex;margin-right:3ex}#webmentions a.reaction img{max-height:3em;width:auto;margin-right:-1ex;border-radius:25%}#webmentions a.reaction sub{font-size:50%}#webmentions .comments li{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#webmentions .comments li .text{font-style:italic;text-decoration:none}.resp-sharing-button__link,.resp-sharing-button__icon{display:inline-block}.resp-sharing-button__link{text-decoration:none;color:#fff;margin:.5em}.resp-sharing-button{border-radius:5px;transition:25ms ease-out;padding:.5em .75em;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.resp-sharing-button__icon svg{width:1em;height:1em;margin-right:.4em;vertical-align:top}.resp-sharing-button--small svg{margin:0;vertical-align:middle}.resp-sharing-button__icon{stroke:#fff;fill:none}.resp-sharing-button__icon--solid,.resp-sharing-button__icon--solidcircle{fill:#fff;stroke:none}.resp-sharing-button--twitter{background-color:#55acee}.resp-sharing-button--twitter:hover{background-color:#2795e9}.resp-sharing-button--pinterest{background-color:#bd081c}.resp-sharing-button--pinterest:hover{background-color:#8c0615}.resp-sharing-button--facebook{background-color:#3b5998}.resp-sharing-button--facebook:hover{background-color:#2d4373}.resp-sharing-button--tumblr{background-color:#35465c}.resp-sharing-button--tumblr:hover{background-color:#222d3c}.resp-sharing-button--reddit{background-color:#5f99cf}.resp-sharing-button--reddit:hover{background-color:#3a80c1}.resp-sharing-button--google{background-color:#dd4b39}.resp-sharing-button--google:hover{background-color:#c23321}.resp-sharing-button--linkedin{background-color:#0077b5}.resp-sharing-button--linkedin:hover{background-color:#046293}.resp-sharing-button--email{background-color:#777}.resp-sharing-button--email:hover{background-color:#5e5e5e}.resp-sharing-button--xing{background-color:#1a7576}.resp-sharing-button--xing:hover{background-color:#114c4c}.resp-sharing-button--whatsapp{background-color:#25d366}.resp-sharing-button--whatsapp:hover{background-color:#1da851}.resp-sharing-button--hackernews{background-color:#f60}.resp-sharing-button--hackernews:hover,.resp-sharing-button--hackernews:focus{background-color:#fb6200}.resp-sharing-button--vk{background-color:#507299}.resp-sharing-button--vk:hover{background-color:#43648c}.resp-sharing-button--facebook{background-color:#3b5998;border-color:#3b5998}.resp-sharing-button--facebook:hover,.resp-sharing-button--facebook:active{background-color:#2d4373;border-color:#2d4373}.resp-sharing-button--twitter{background-color:#55acee;border-color:#55acee}.resp-sharing-button--twitter:hover,.resp-sharing-button--twitter:active{background-color:#2795e9;border-color:#2795e9}.resp-sharing-button--linkedin{background-color:#0077b5;border-color:#0077b5}.resp-sharing-button--linkedin:hover,.resp-sharing-button--linkedin:active{background-color:#046293;border-color:#046293}.resp-sharing-button--reddit{background-color:#5f99cf;border-color:#5f99cf}.resp-sharing-button--reddit:hover,.resp-sharing-button--reddit:active{background-color:#3a80c1;border-color:#3a80c1}.article-lastmod a,.share-buttons a{color:var(--body-text-color)}.page-content a[target=_blank]::after{content:none} |