Add webmention styles and share buttons
- 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.
This commit is contained in:
Fundor333
@@ -1,234 +1,6 @@
|
||||
: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) {
|
||||
--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);
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
}
|
||||
|
||||
small,
|
||||
aside p {
|
||||
font-size: smaller;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
section#comments {
|
||||
#comments-wrapper {
|
||||
margin: 1.5em 0;
|
||||
padding: 0 var(--card-padding);
|
||||
}
|
||||
|
||||
.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: 0em auto 0em -1em;
|
||||
padding: 0.5em;
|
||||
|
||||
&.comment-reply {
|
||||
margin: 0em auto 0em 1em;
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
grid-area: avatar;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
|
||||
.avatar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
&.op::after {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
bottom: -0.25rem;
|
||||
color: var(--accent-color-text);
|
||||
content: "✓";
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
position: absolute;
|
||||
right: -0.25rem;
|
||||
text-align: center;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
gap: 0.5em;
|
||||
grid-area: name;
|
||||
|
||||
.instance {
|
||||
background-color: var(--code-background-color);
|
||||
border-radius: 9999px;
|
||||
color: var(--neutral);
|
||||
font-size: smaller;
|
||||
font-weight: normal;
|
||||
padding: 0.25em 0.75em;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.op {
|
||||
background-color: var(
|
||||
--code-background-color
|
||||
);
|
||||
color: var(--accent-color-text);
|
||||
|
||||
&::before {
|
||||
content: "✓";
|
||||
font-weight: bold;
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
@extend small;
|
||||
|
||||
grid-area: time;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend small;
|
||||
|
||||
grid-area: interactions;
|
||||
|
||||
.faves {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: red;
|
||||
content: "♥";
|
||||
font-size: 2rem;
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: inline;
|
||||
height: 1.25em;
|
||||
vertical-align: middle;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "…";
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "root";
|
||||
@import "pride";
|
||||
@import "comments";
|
||||
@import "generic";
|
||||
@import "webmention";
|
||||
@import "social_media_share";
|
||||
|
||||
145
assets/sass/comments.scss
Normal file
145
assets/sass/comments.scss
Normal file
@@ -0,0 +1,145 @@
|
||||
section#comments {
|
||||
#comments-wrapper {
|
||||
margin: 1.5em 0;
|
||||
padding: 0 var(--card-padding);
|
||||
}
|
||||
|
||||
.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: 0em auto 0em -1em;
|
||||
padding: 0.5em;
|
||||
|
||||
&.comment-reply {
|
||||
margin: 0em auto 0em 1em;
|
||||
}
|
||||
|
||||
.avatar-link {
|
||||
grid-area: avatar;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
width: 4rem;
|
||||
|
||||
.avatar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 20%;
|
||||
}
|
||||
|
||||
&.op::after {
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 50%;
|
||||
bottom: -0.25rem;
|
||||
color: var(--accent-color-text);
|
||||
content: "✓";
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
height: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
position: absolute;
|
||||
right: -0.25rem;
|
||||
text-align: center;
|
||||
width: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.author {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
gap: 0.5em;
|
||||
grid-area: name;
|
||||
|
||||
.instance {
|
||||
background-color: var(--code-background-color);
|
||||
border-radius: 9999px;
|
||||
color: var(--neutral);
|
||||
font-size: smaller;
|
||||
font-weight: normal;
|
||||
padding: 0.25em 0.75em;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.op {
|
||||
background-color: var(
|
||||
--code-background-color
|
||||
);
|
||||
color: var(--accent-color-text);
|
||||
|
||||
&::before {
|
||||
content: "✓";
|
||||
font-weight: bold;
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
@extend small;
|
||||
|
||||
grid-area: time;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
main {
|
||||
grid-area: post;
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
@extend small;
|
||||
|
||||
grid-area: interactions;
|
||||
|
||||
.faves {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&::before {
|
||||
color: red;
|
||||
content: "♥";
|
||||
font-size: 2rem;
|
||||
margin-inline-end: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
display: inline;
|
||||
height: 1.25em;
|
||||
vertical-align: middle;
|
||||
width: 1.25em;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ellipsis::after {
|
||||
content: "…";
|
||||
}
|
||||
}
|
||||
}
|
||||
31
assets/sass/generic.scss
Normal file
31
assets/sass/generic.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.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,
|
||||
aside p {
|
||||
font-size: smaller;
|
||||
opacity: 0.9;
|
||||
}
|
||||
26
assets/sass/pride.scss
Normal file
26
assets/sass/pride.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
@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 0.2s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
}
|
||||
29
assets/sass/root.scss
Normal file
29
assets/sass/root.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
: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) {
|
||||
--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);
|
||||
}
|
||||
}
|
||||
193
assets/sass/social_media_share.scss
Normal file
193
assets/sass/social_media_share.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
// Social media sharing buttons
|
||||
.resp-sharing-button__link,
|
||||
.resp-sharing-button__icon {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.resp-sharing-button__link {
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.resp-sharing-button {
|
||||
border-radius: 5px;
|
||||
transition: 25ms ease-out;
|
||||
padding: 0.5em 0.75em;
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.resp-sharing-button__icon svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.4em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.resp-sharing-button--small svg {
|
||||
margin: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Non solid icons get a stroke */
|
||||
.resp-sharing-button__icon {
|
||||
stroke: #fff;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
/* Solid icons get a fill */
|
||||
.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: #ff6600;
|
||||
}
|
||||
.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,
|
||||
.share-buttons {
|
||||
a {
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.page-content a[target="_blank"]::after {
|
||||
content: none;
|
||||
}
|
||||
66
assets/sass/webmention.scss
Normal file
66
assets/sass/webmention.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
#webmentions {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
line-height: 1.2em;
|
||||
|
||||
.comments {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: medium;
|
||||
margin: 0;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.reacts img {
|
||||
margin: 3px -1ex 8px 0;
|
||||
}
|
||||
|
||||
img.missing {
|
||||
border: dashed black 1px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
li {
|
||||
text-indent: -1em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
a.reaction {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
margin-right: 0;
|
||||
letter-spacing: -1ex;
|
||||
margin-right: 3ex;
|
||||
|
||||
img {
|
||||
max-height: 3em;
|
||||
width: auto;
|
||||
margin-right: -1ex;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
sub {
|
||||
font-size: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.comments li {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
.text {
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user