search

smaranjitghose / awesome-portfolio-websites

A community maintained open source project aimed at making a personal portfolio for researchers, developers, and analysts simple, fast, and less cumbersome. We make sure you have a full-fledged website to showcase your work while you can spend time on your learning and innovative endeavors.
https://portfolio.smaranjitghose.com/
MIT License
2.36k stars 1.49k forks source link

Make the social media buttons on the Home Page more prominent w.r.t the background #800

Closed smaranjitghose closed 3 years ago

smaranjitghose commented 3 years ago

Reference

Light Mode

social_media_buttona

Dark Mode

social_media_button_dark

Note:

puneetkaur2929 commented 3 years ago

Hey @smaranjitghose I am interested to work on this issue, whether you want these changes in both the modes?

aliya-rahmani commented 3 years ago

@puneetkaur2929 these changes are only for the dark mode, but the already persisting hover effects shouldn't be affected. You need to make the according to the reference. I'm assigning you this issue for 3 days.

Shivangi-27 commented 3 years ago

Hey, @smaranjitghose I want to try to solve this issue in light mode?

smaranjitghose commented 3 years ago

@Shivangi-27 Assigned for 2 days

Shivangi-27 commented 3 years ago

I removed the background color of all the icons for both light and dark themes. Is this correct or do I have to change the background color of all the icons?

image

image

anushbhatia commented 3 years ago

I removed the background color of all the icons for both light and dark themes. Is this correct or do I have to change the background color of all the icons?

image

image

Some logos like GitHub and others won't be visible in that case so we can't use this.

Shivangi-27 commented 3 years ago

Ok i will try to set the perfect background color in both the modes

Shivangi-27 commented 3 years ago

I changed the background color of all the icons for both light and dark themes.

image

image

smaranjitghose commented 3 years ago

It looks absolutely weird w.r.t the UI.

Just use two different shades of black, one is already done for the background of the page, for the icon background play around with the color palette and figure it out. Perhaps something closer to that of the navbar background color. There is no need to modify the light mode icon background color.

purohitmansi commented 3 years ago

Please assign this to me. I want to give it a try.

Shivangi-27 commented 3 years ago

.dark-theme.socialicon{ background-color: #423F3E; } I am applying this in home.css but it's not working. Am I wrong somewhere??

anushbhatia commented 3 years ago

.dark-theme.socialicon{ background-color: #423F3E; } I am applying this in home.css but it's not working. Am I wrong somewhere??

there are already elements present in the dark mode for particular elements just look through them

Refer to these variables and try adding an ew variable or modifying colour here so the colours will get updated automatically. https://github.com/smaranjitghose/awesome-portfolio-websites/blob/master/assets/css/home.css html[data-theme="dark"] { --col-icon:white; --col-bd-radius:black; --col-bd-icon:transparent; --col-box-shadow: 5px 5px 10px rgba(22, 21, 21, 0.7) , -5px -5px 10px rgba(255,255,255,0.1); --col-box-shadow-hover:inset rgba(255, 255, 255, 1) 2px 2px 4px, inset rgba(255, 255, 255, 0.5) -2px -2px 4px; --col-icon-dribbble: #ea4c89; --col-icon-linkedin: #0e76a8; --col-icon-medium: #00ab6c; --col-icon-kaggle: #41aff3; --col-icon-instagram: rgb(201, 94, 174); --col-icon-mail:rgb(209, 82, 82); --col-icon-google-scholar:#3cba54; --col-icon-codeforces:rgb(19, 145, 184); --col-icon-leetcode:rgb(255, 181, 62); --col-white: #fff; }

How this works is according to the mode presents the CSS will automatically fetch the variable and add that particular colour to it directly.

smaranjitghose commented 3 years ago

Resolved