From 2bf87e0de7928f325811e1bb96cfcaefdf6cf66a Mon Sep 17 00:00:00 2001 From: Natalie Somersall Date: Sun, 29 Oct 2023 12:02:58 -0600 Subject: [PATCH] feat: add Mastodon sharing link (#1344) Adds a "share to Mastodon" button as a link sharing option using @justinribeiro's share-to-mastodon package Discussion of proposed change - #1324 --------- Co-authored-by: Cotes Chung <11371340+cotes2020@users.noreply.github.com> --- _data/share.yml | 13 ++++++ _includes/post-sharing.html | 31 ++++++++++++-- _sass/colors/typography-light.scss | 3 +- _sass/layout/post.scss | 67 +++++++++++++----------------- 4 files changed, 71 insertions(+), 43 deletions(-) diff --git a/_data/share.yml b/_data/share.yml index feede74..d572e6d 100644 --- a/_data/share.yml +++ b/_data/share.yml @@ -23,3 +23,16 @@ platforms: # - type: Weibo # icon: "fab fa-weibo" # link: "http://service.weibo.com/share/share.php?title=TITLE&url=URL" + # + # - type: Mastodon + # icon: "fa-brands fa-mastodon" + # # See: https://github.com/justinribeiro/share-to-mastodon#properties + # instances: + # - label: mastodon.social + # link: "https://mastodon.social/" + # - label: mastodon.online + # link: "https://mastodon.online/" + # - label: fosstodon.org + # link: "https://fosstodon.org/" + # - label: photog.social + # link: "https://photog.social/" diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html index a316001..4f06626 100644 --- a/_includes/post-sharing.html +++ b/_includes/post-sharing.html @@ -1,14 +1,39 @@
- +
diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index e875aef..11f052c 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -63,7 +63,8 @@ /* Posts */ --toc-highlight: #0550ae; - --btn-share-hover-color: var(--link-color); + --btn-share-color: gray; + --btn-share-hover-color: #0d6efd; --card-bg: white; --card-hovor-bg: #e2e2e2; --card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0, diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index f44ee89..431e161 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -2,14 +2,6 @@ Post-specific style */ -@mixin btn-sharing-color($light-color, $important: false) { - @if $important { - color: var(--btn-share-color, $light-color) !important; - } @else { - color: var(--btn-share-color, $light-color); - } -} - %btn-post-nav { width: 50%; position: relative; @@ -72,11 +64,23 @@ h1 + .post-meta { -ms-user-select: none; user-select: none; + %icon-size { + font-size: 1.125rem; + } + .share-icons { - font-size: 1.2rem; + display: flex; + + i { + color: var(--btn-share-color); + + @extend %icon-size; + } > * { - margin-left: 0.25rem; + @extend %icon-size; + + margin-left: 0.5rem; &:hover { i { @@ -87,43 +91,28 @@ h1 + .post-meta { button { position: relative; - bottom: 2px; + bottom: 1px; padding: 0; @extend %cursor-pointer; } - - a :hover { - text-decoration: none; - } - - .fa-square-x-twitter { - @include btn-sharing-color(black); - } - - .fa-facebook-square { - @include btn-sharing-color(rgb(66, 95, 156)); - } - - .fa-telegram { - @include btn-sharing-color(rgb(39, 159, 217)); - } - - .fa-linkedin { - @include btn-sharing-color(rgb(0, 119, 181)); - } - - .fa-weibo { - @include btn-sharing-color(rgb(229, 20, 43)); - } } /* .share-icons */ - - .fas.fa-link { - @include btn-sharing-color(rgb(171, 171, 171)); - } } /* .share-wrapper */ } +.share-mastodon { + /* See: https://github.com/justinribeiro/share-to-mastodon#properties */ + --wc-stm-font-family: $font-family-base; + --wc-stm-dialog-background-color: var(--card-bg); + --wc-stm-form-button-border: 1px solid var(--btn-border-color); + --wc-stm-form-submit-background-color: var(--sidebar-btn-bg); + --wc-stm-form-cancel-background-color: var(--sidebar-btn-bg); + --wc-stm-form-button-background-color-hover: #007bff; + --wc-stm-form-button-color-hover: white; + + font-size: 1rem; +} + .post-tags { line-height: 2rem;