112 lines
1.8 KiB
CSS
112 lines
1.8 KiB
CSS
/*adapted from: https://www.remysheppard.com/blog/hugo-share-buttons/*/
|
|
.social-share {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: left;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.social-share a {
|
|
border-radius: 25px;
|
|
padding: 0.25rem 0.5rem;
|
|
background: white;
|
|
border: 1px solid transparent;
|
|
transition: background ease 0.3s, color ease 0.3s;
|
|
margin-bottom: 1em;
|
|
margin-left: 0.5em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.social-share a:before {
|
|
display: none;
|
|
}
|
|
|
|
.social-share a.facebook {
|
|
border-color: #4267B2;
|
|
color: #4267B2;
|
|
}
|
|
|
|
.social-share a.facebook:hover {
|
|
background: #4267B2;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.twitter {
|
|
border-color: #1DA1F2;
|
|
color: #1DA1F2;
|
|
}
|
|
|
|
.social-share a.twitter:hover {
|
|
background: #1DA1F2;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.reddit {
|
|
border-color: #FF4500;
|
|
color: #FF4500;
|
|
}
|
|
|
|
.social-share a.reddit:hover {
|
|
background: #FF4500;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.stumbleupon {
|
|
border-color: #EB471D;
|
|
color: #EB471D;
|
|
}
|
|
|
|
.social-share a.stumbleupon:hover {
|
|
background: #EB471D;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.tumblr {
|
|
border-color: #35465C;
|
|
color: #35465C;
|
|
}
|
|
|
|
.social-share a.tumblr:hover {
|
|
background: #35465C;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.linkedin {
|
|
border-color: #2867B2;
|
|
color: #2867B2;
|
|
}
|
|
|
|
.social-share a.linkedin:hover {
|
|
background: #2867B2;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.email {
|
|
border-color: #00A4EF;
|
|
color: #00A4EF;
|
|
}
|
|
|
|
.social-share a.email:hover {
|
|
background: #00A4EF;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.mastodon {
|
|
border-color: #6364FF;
|
|
color: #6364FF;
|
|
}
|
|
|
|
.social-share a.mastodon:hover {
|
|
background: #6364FF;
|
|
color: white;
|
|
}
|
|
|
|
.social-share a.bsky {
|
|
border-color: #0A7AFF;
|
|
color: #0A7AFF;
|
|
}
|
|
|
|
.social-share a.bsky:hover {
|
|
border-color: #0A7AFF;
|
|
color: white;
|
|
} |