Skip to content

Replace X with Bluesky in the site footer #1749

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

Replace X with Bluesky in the site footer #1749

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce4e93c
replace x icon with bluesky in the footer
crd477 Jul 10, 2025
1ae5c85
remove twitter from social media definitions
crd477 Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ hero_line_one: The United States Research Software Engineer Association
hero_line_two: A community of people who make research software happen.

# social media
twitter: us_rse
bluesky: us-rse.bsky.social
github_org: USRSE
github_repo: usrse.github.io
linkedin: company/us-rse/
Expand Down
6 changes: 3 additions & 3 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
<span class="screen-reader-text">Mastodon</span>
</a>{% endif %}

{% if site.twitter %}<a href="https://twitter.com/{{ site.twitter }}"
{% if site.bluesky %}<a href="https://bsky.app/profile/{{ site.bluesky }}"
target="_blank"
rel="noopener "
class="button button-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path fill="#741654" d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
<span class="screen-reader-text">Twitter</span>
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#741654" d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2C478.2 298 412 314.6 353.1 304.5c102.9 17.5 129.1 75.5 72.5 133.5c-107.4 110.2-154.3-27.6-166.3-62.9l0 0c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8l0 0c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this isn't necessarily the right PR for this, but does anyone know why we are using these complicated svgs with path, rather than the fa-brands fa-bluesky, something like <i class="fab fa-bluesky" aria-hidden="true"></i>. Do we not load the Font Awesome stylesheet at all and so the icons are not available?

Copy link
Member

@exoticDFT exoticDFT Jul 10, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You know what, just ignore me. There isn't any reason not to really use the svg. They are in theory better since we could be handling arbitrarily sized screens. I just personally never thought about using the svgs for small icons like this, since you have to essentially go to the FA website to get the right path values, making them a little harder to work with FA icons when using them throughout a website.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh sorry, actually before we resolve this. I did notice we have one more file to consider. We are not using the svgs anywhere else on this website (which is fine). But more specifically, we do have a "share button" file we'll need to add fa-bluesky to, to replace twitter. _includes/buttons/share-buttons.html. I need to check to make sure how this is used, because we likely need to update the link for this as well...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You know what, just ignore me. There isn't any reason not to really use the svg. They are in theory better since we could be handling arbitrarily sized screens. I just personally never thought about using the svgs for small icons like this, since you have to essentially go to the FA website to get the right path values, making them a little harder to work with FA icons when using them throughout a website.

My interpretation, as you mentioned already, is that we do not load the whole FA stylesheet, so we use the SVGs instead. I read that loading the SVGs as we do is more performant, but I have no firsthand knowledge on the subject.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ugh sorry, actually before we resolve this. I did notice we have one more file to consider. We are not using the svgs anywhere else on this website (which is fine). But more specifically, we do have a "share button" file we'll need to add fa-bluesky to, to replace twitter. _includes/buttons/share-buttons.html. I need to check to make sure how this is used, because we likely need to update the link for this as well...

I mentioned this in the Slack channel, and I was kinda thinking that it's a separate issue, since the share buttons have other things that aren't in the footer now, like Facebook and Reddit. I'm totally OK with changing them in this PR though.

<span class="screen-reader-text">Bluesky</span>
</a>{% endif %}

{% if site.youtube %}<a href="https://youtube.com/@{{ site.youtube }}"
Expand Down
15 changes: 15 additions & 0 deletions assets/css/reboot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2277,6 +2277,18 @@ tr, td, th {
background-color: #006292;
color: #fff;
}
.btn--bluesky {
background-color: #007bb6;
color: #fff;
}
.btn--bluesky:visited {
background-color: #007bb6;
color: #fff;
}
.btn--bluesky:hover {
background-color: #006292;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the preview, I'm not seeing this color change in any meaningful way when hovering over any of the footer icons. Maybe an issue to track for another PR?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually to be a bit more specific, I don't see these color changes in the live site either.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually to be a bit more specific, I don't see these color changes in the live site either.

Hrm. I'm not sure what's going on with that. I was just mimicking the existing buttons.

color: #fff;
}
.btn--block {
display: block;
width: 100%}
Expand Down Expand Up @@ -3679,6 +3691,9 @@ body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .vi
.social-icons .fa-mastodon {
color: #2b90d9;
}
.social-icons .fa-bluesky {
color: #1185fe;
}
.social-icons .fa-pinterest, .social-icons .fa-pinterest-p, .social-icons .fa-pinterest-square {
color: #cb2027;
}
Expand Down