Fixed the hover effect for social media icons

[Neel-07]

Description

I have edited the main.css file and added the code for the icons to change color on hover. I have also tested the solution on
my local server and it works fine

Related Issue

 This fixes the issue #218 

[drewbrew]

The CSS changes look right at first glance, but I'm curious as to why we need the gem changes

[drewbrew]

Why are these changes needed?

[Neel-07]

Hi, thank you for your feedback. I included the tzinfo-data gem in the Gemfile because it is a dependency for the tzinfo gem, which is used for time zone conversions. The tzinfo gem can use either the system zoneinfo files or the Ruby modules from the tzinfo-data gem as the data source. However, on Windows systems, the system zoneinfo files are not available, so the tzinfo-data gem is required. Therefore, I added the tzinfo-data gem to ensure that the application can access the correct time zone information on any platform. I hope this clarifies your question. Also, I was getting errors while running the bundle exec jekyll serve command without the tzinfo-data gem, so I had to include it to make the site work locally.

[sodevious]

Please don’t merge as the generated css file for updated, not the source scss files - the generated one will just get overwritten on the next css build. Check _src/scss for source files.

…

On Wed, Sep 27, 2023 at 9:08 AM Neel Mishra ***@***.***> wrote: ***@***.**** commented on this pull request. ------------------------------ In Gemfile <#219 (comment)> : > gem "webrick" gem "github-pages", group: :jekyll_plugins +gem "tzinfo-data" Hi, thank you for your feedback. I included the tzinfo-data gem in the Gemfile because it is a dependency for the tzinfo gem, which is used for time zone conversions. The tzinfo gem can use either the system zoneinfo files or the Ruby modules from the tzinfo-data gem as the data source. However, on Windows systems, the system zoneinfo files are not available, so the tzinfo-data gem is required. Therefore, I added the tzinfo-data gem to ensure that the application can access the correct time zone information on any platform. I hope this clarifies your question. Also, I was getting errors while running the bundle exec jekyll serve command without the tzinfo-data gem, so I had to include it to make the site work locally. — Reply to this email directly, view it on GitHub <#219 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAG7T7U4TBEC5Y2P252AACTX4QQMBANCNFSM6AAAAAA5ISP7PU> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Neel-07]

Hi @sodevious, thank you for your feedback. I have tried to follow the instructions on how to work with scss files, but I might have made some mistakes. If I am wrong, please guide me to resolve this issue. I appreciate your help and patience

[sodevious]

@Neel-07 Here is the file you would edit to make the changes you want:

2023.djangocon.us/_src/scss/module/_social-icons.scss

Lines 32 to 54 in c48d35c

	&.facebook:hover svg {
	fill: $color-facebook;
	}
	&.twitter:hover svg {
	fill: $color-twitter;
	}
	&.linkedin:hover svg {
	fill: $color-linkedin;
	}
	&.instagram:hover svg {
	fill: $color-instagram;
	}
	&.github:hover svg {
	fill: $color-github;
	}
	&.mastodon:hover svg {
	fill: $color-mastodon;
	}

I ask that you please use an already defined variable instead of a hex value: https://github.com/djangocon/2023.djangocon.us/blob/main/_src/scss/_settings.scss#L51-L109

If you are working locally, run npm run build to generate the built .css file

[Neel-07]

Hello @sodevious, I hope you are doing well. I am working on the issue of changing the color of the icons to match the color of color of twitter icon assigned on hover. Therefore, I would like to ask you if it is alright to modify the _social-icon.scss file and assign the $color-twitter variable to every icon. will it be alright? Thank you for your time and feedback. 😊

[sodevious]

@Neel-07 I'm sorry for not fully reviewing issue #218 prior to this -- the social icons actually do have appropriate CSS so it's okay to leave them as-is and revert the updates you made in this branch. You can see this in effect by scrolling down to the bottom of the website and hovering over social icons.

---

To fix:

• The social icon implementation on the organizers page refers to a non-existing .web class, so to fix you could add hvoer styles for a .web class just like this:

  2023.djangocon.us/_src/scss/module/_social-icons.scss

  Line 32 in c48d35c

  &.facebook:hover svg {

• The $color-github variable that the .github class references is incorrect, so you can change that hex code to match Github branding (black)

  2023.djangocon.us/_src/scss/_settings.scss

  Line 67 in c48d35c

  $color-github: #4078c0;

• Also might be worth double checking if the $color-mastodon is correct as well

[Neel-07]

@sodevious did all the things that you said it became the one like that was mentioned in the issue

[sodevious]

@Neel-07 can you please push what you have so I can see?

[Neel-07]

@sodevious pushed the changes, please have a look onto the files and guide me.