Skip to content

Commit a78602d

Browse files
steam-bell-92steam-bell-92
committed
Added Achievement Skin Tone hovering effects
1 parent c601532 commit a78602d

File tree

2 files changed

+143
-58
lines changed

2 files changed

+143
-58
lines changed

‎src/pages/badges/github-badges.module.css‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1485,6 +1485,51 @@ table tr:last-child td:last-child {
14851485
position: relative;
14861486
}
14871487

1488+
/* Mirror levelImages styling for skin tone table so skin-tone badges match Public Sponsor theme */
1489+
.skinToneTable .levelImages {
1490+
display: flex;
1491+
justify-content: center;
1492+
align-items: center;
1493+
padding: 8px;
1494+
border-radius: 12px;
1495+
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
1496+
border: 2px solid #e2e8f0;
1497+
box-shadow:
1498+
0 2px 8px rgba(0, 0, 0, 0.04),
1499+
inset 0 1px 0 rgba(255, 255, 255, 0.5);
1500+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1501+
}
1502+
1503+
.skinToneTable .levelImages:hover {
1504+
transform: translateY(-1px);
1505+
box-shadow:
1506+
0 4px 12px rgba(0, 0, 0, 0.08),
1507+
inset 0 1px 0 rgba(255, 255, 255, 0.7);
1508+
border-color: #c7d2fe;
1509+
}
1510+
1511+
.skinToneTable .levelImages img {
1512+
width: clamp(28px, 4vw, 44px);
1513+
height: clamp(28px, 4vw, 44px);
1514+
border-radius: 12px;
1515+
border: 2px solid #e5e7eb;
1516+
background: white;
1517+
box-shadow:
1518+
0 2px 6px rgba(0, 0, 0, 0.08),
1519+
0 1px 2px rgba(0, 0, 0, 0.04);
1520+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1521+
}
1522+
1523+
.skinToneTable .levelImages img:hover {
1524+
transform: scale(1.12);
1525+
box-shadow:
1526+
0 6px 16px rgba(0, 0, 0, 0.15),
1527+
0 3px 8px rgba(0, 0, 0, 0.1);
1528+
border-color: #3b82f6;
1529+
z-index: 10;
1530+
position: relative;
1531+
}
1532+
14881533
/* Enhanced Needed Amount Section */
14891534
.achievementsTable .neededAmount {
14901535
font-weight: 600;

‎src/pages/badges/github-badges.tsx‎

Lines changed: 98 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -751,45 +751,63 @@ const GithubBadgesContent = (): React.ReactElement => {
751751
</td>
752752
<td>Starstruck</td>
753753
<td>
754-
<img
755-
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
756-
className={styles.badgeImgSmall}
757-
/>{" "}
754+
<div className={styles.levelImages}>
755+
<img
756+
src="https://github.githubassets.com/images/modules/profile/achievements/starstruck-default.png"
757+
className={styles.badgeImgSmall}
758+
alt="Starstruck Default"
759+
/>
760+
</div>
758761
👋
759762
</td>
760763
<td>
761-
<img
762-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
763-
className={styles.badgeImgSmall}
764-
/>{" "}
764+
<div className={styles.levelImages}>
765+
<img
766+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone2.png"
767+
className={styles.badgeImgSmall}
768+
alt="Starstruck Skin Tone 2"
769+
/>
770+
</div>
765771
👋🏻
766772
</td>
767773
<td>
768-
<img
769-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
770-
className={styles.badgeImgSmall}
771-
/>{" "}
774+
<div className={styles.levelImages}>
775+
<img
776+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone3.png"
777+
className={styles.badgeImgSmall}
778+
alt="Starstruck Skin Tone 3"
779+
/>
780+
</div>
772781
👋🏼
773782
</td>
774783
<td>
775-
<img
776-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
777-
className={styles.badgeImgSmall}
778-
/>{" "}
784+
<div className={styles.levelImages}>
785+
<img
786+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone4.png"
787+
className={styles.badgeImgSmall}
788+
alt="Starstruck Skin Tone 4"
789+
/>
790+
</div>
779791
👋🏽
780792
</td>
781793
<td>
782-
<img
783-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
784-
className={styles.badgeImgSmall}
785-
/>{" "}
794+
<div className={styles.levelImages}>
795+
<img
796+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone5.png"
797+
className={styles.badgeImgSmall}
798+
alt="Starstruck Skin Tone 5"
799+
/>
800+
</div>
786801
👋🏾
787802
</td>
788803
<td>
789-
<img
790-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
791-
className={styles.badgeImgSmall}
792-
/>{" "}
804+
<div className={styles.levelImages}>
805+
<img
806+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Star-Struck/PNG/Skin-Tones/StarStruck_SkinTone6.png"
807+
className={styles.badgeImgSmall}
808+
alt="Starstruck Skin Tone 6"
809+
/>
810+
</div>
793811
👋🏿
794812
</td>
795813
</tr>
@@ -803,45 +821,63 @@ const GithubBadgesContent = (): React.ReactElement => {
803821
</td>
804822
<td>Quickdraw</td>
805823
<td>
806-
<img
807-
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
808-
className={styles.badgeImgSmall}
809-
/>{" "}
824+
<div className={styles.levelImages}>
825+
<img
826+
src="https://github.githubassets.com/images/modules/profile/achievements/quickdraw-default.png"
827+
className={styles.badgeImgSmall}
828+
alt="Quickdraw Default"
829+
/>
830+
</div>
810831
👋
811832
</td>
812833
<td>
813-
<img
814-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
815-
className={styles.badgeImgSmall}
816-
/>{" "}
834+
<div className={styles.levelImages}>
835+
<img
836+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone2.png"
837+
className={styles.badgeImgSmall}
838+
alt="Quickdraw Skin Tone 2"
839+
/>
840+
</div>
817841
👋🏻
818842
</td>
819843
<td>
820-
<img
821-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
822-
className={styles.badgeImgSmall}
823-
/>{" "}
844+
<div className={styles.levelImages}>
845+
<img
846+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone3.png"
847+
className={styles.badgeImgSmall}
848+
alt="Quickdraw Skin Tone 3"
849+
/>
850+
</div>
824851
👋🏼
825852
</td>
826853
<td>
827-
<img
828-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
829-
className={styles.badgeImgSmall}
830-
/>{" "}
854+
<div className={styles.levelImages}>
855+
<img
856+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone4.png"
857+
className={styles.badgeImgSmall}
858+
alt="Quickdraw Skin Tone 4"
859+
/>
860+
</div>
831861
👋🏽
832862
</td>
833863
<td>
834-
<img
835-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
836-
className={styles.badgeImgSmall}
837-
/>{" "}
864+
<div className={styles.levelImages}>
865+
<img
866+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone5.png"
867+
className={styles.badgeImgSmall}
868+
alt="Quickdraw Skin Tone 5"
869+
/>
870+
</div>
838871
👋🏾
839872
</td>
840873
<td>
841-
<img
842-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
843-
className={styles.badgeImgSmall}
844-
/>{" "}
874+
<div className={styles.levelImages}>
875+
<img
876+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Quick-Draw/PNG/Skin-Tones/QuickDraw_SkinTone6.png"
877+
className={styles.badgeImgSmall}
878+
alt="Quickdraw Skin Tone 6"
879+
/>
880+
</div>
845881
👋🏿
846882
</td>
847883
</tr>
@@ -991,11 +1027,13 @@ const GithubBadgesContent = (): React.ReactElement => {
9911027
<td>
9921028
<div className={styles.neededBox}>
9931029
<div className={styles.neededLabel}>DEFAULT</div>
994-
<img
995-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
996-
alt="Mars 2020 Contributor"
997-
className={styles.badgeImgSmall}
998-
/>
1030+
<div className={styles.levelImages}>
1031+
<img
1032+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/Mars-2020-Contributor/PNG/Mars2020ContributorBadge.png"
1033+
alt="Mars 2020 Contributor"
1034+
className={styles.badgeImgSmall}
1035+
/>
1036+
</div>
9991037
<div>1</div>
10001038
</div>
10011039
</td>
@@ -1022,11 +1060,13 @@ const GithubBadgesContent = (): React.ReactElement => {
10221060
<td>
10231061
<div className={styles.neededBox}>
10241062
<div className={styles.neededLabel}>DEFAULT</div>
1025-
<img
1026-
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
1027-
alt="Arctic Code Vault Contributor"
1028-
className={styles.badgeImgSmall}
1029-
/>
1063+
<div className={styles.levelImages}>
1064+
<img
1065+
src="https://raw.githubusercontent.com/recodehive/awesome-github-profiles/main/assets/Badges/2020-Arctic-Code-Vault-Contributor/PNG/2020ArcticCodeVaultBadge.png"
1066+
alt="Arctic Code Vault Contributor"
1067+
className={styles.badgeImgSmall}
1068+
/>
1069+
</div>
10301070
<div>1</div>
10311071
</div>
10321072
</td>

0 commit comments

Comments
 (0)