diff --git a/webiu-ui/src/app/components/profile-card/profile-card.component.scss b/webiu-ui/src/app/components/profile-card/profile-card.component.scss index 69d3ea72..c2712bcf 100644 --- a/webiu-ui/src/app/components/profile-card/profile-card.component.scss +++ b/webiu-ui/src/app/components/profile-card/profile-card.component.scss @@ -1,80 +1,101 @@ .profile-box { display: flex; - border: solid 1px #e0e0e0; - box-shadow: 10px 10px 30px 10px #0505051a; + border: 1px solid #e0e0e0; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; width: 100%; max-width: 350px; - max-height: 650px; - min-height: 300px; + padding: 20px; align-items: center; justify-content: center; flex-direction: column; text-align: center; -} - -.profile-img { - width: 40%; - height: 40%; + background-color: #ffffff; + } + + .profile-img { + width: 120px; + height: 120px; border-radius: 50%; - border: solid 0.2px; -} - -.profile-info { + border: solid 2px #e0e0e0; + object-fit: cover; + margin-bottom: 15px; + } + + .profile-username { + font-size: 1.25em; + font-weight: 600; + margin: 8px 0; + color: #333; + } + + .profile-contributions { + font-size: 1em; + color: #777; + margin-bottom: 15px; + } + + .profile-info { display: flex; width: 100%; gap: 10%; justify-content: center; margin-top: 10px; -} - -.profile-github { + font-size: 0.9em; + color: #555; + } + + .profile-github { display: flex; align-items: center; gap: 10px; border-radius: 5px; - background: var(--Gray-6, #eeecec); + background: #f5f5f5; padding: 8px 12px; justify-content: center; - margin-top: 5%; -} - -.github-icon { + margin-top: 20px; + width: 100%; + max-width: 180px; + } + + .github-icon { display: flex; justify-content: center; align-items: center; -} - -.github-username { - display: flex; - align-items: center; - color: black; -} - -/* Media Queries */ -@media (max-width: 1200px) { - .contributers-context { - grid-template-columns: repeat(3, 1fr); + } + + .github-username { + color: #000; + font-weight: 500; + text-decoration: none; + &:hover { + text-decoration: underline; + } + } + + /* Media Queries */ + @media (max-width: 768px) { + .profile-box { + max-width: 100%; } - .contributors-main { - margin-left: 15%; + } + + @media (max-width: 500px) { + .profile-box { + padding: 15px; } - .box { - width: 100%; - height: 100%; + + .profile-img { + width: 100px; + height: 100px; } -} - -@media (max-width: 992px) { - .box { - width: 80%; - height: 80%; + + .profile-username { + font-size: 1em; } -} - -@media (max-width: 500px) { - .box { - width: 70%; - height: 70%; + + .profile-info { + font-size: 0.8em; } -} + } + \ No newline at end of file