diff --git a/frontend/src/app/core/layout/footer.component.html b/frontend/src/app/core/layout/footer.component.html index 164cf80..de80aee 100644 --- a/frontend/src/app/core/layout/footer.component.html +++ b/frontend/src/app/core/layout/footer.component.html @@ -22,10 +22,30 @@
- -
-
-
+ +
diff --git a/frontend/src/app/core/layout/footer.component.scss b/frontend/src/app/core/layout/footer.component.scss index 10e4ffd..f1020f9 100644 --- a/frontend/src/app/core/layout/footer.component.scss +++ b/frontend/src/app/core/layout/footer.component.scss @@ -66,11 +66,69 @@ .social { display: flex; + flex-direction: column; + align-items: flex-start; gap: var(--space-3); } -.social-icon { - width: 24px; - height: 24px; - background-color: var(--color-neutral-800); - border-radius: 50%; + +.social-link-row { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.social-name { + color: var(--color-neutral-200); + font-size: 0.875rem; +} + +.social-icon-link { + display: inline-flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + border-radius: 50%; + background-color: var(--color-neutral-50); + color: #0a66c2; + transition: + transform 0.2s ease, + background-color 0.2s ease, + color 0.2s ease; + + &:hover { + background-color: #0a66c2; + color: var(--color-neutral-50); + transform: translateY(-1px); + } + + &:focus-visible { + outline: 2px solid var(--color-secondary-500); + outline-offset: 2px; + } +} + +.social-icon-linkedin { + display: block; + width: 1rem; + height: 1rem; + background-color: currentColor; + mask-image: url("/assets/images/SVG/linkedin-svgrepo-com.svg"); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + -webkit-mask-image: url("/assets/images/SVG/linkedin-svgrepo-com.svg"); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; + -webkit-mask-size: contain; +} + +@media (max-width: 768px) { + .social { + align-items: center; + } + + .social-link-row { + justify-content: center; + } } diff --git a/frontend/src/assets/images/SVG/linkedin-svgrepo-com.svg b/frontend/src/assets/images/SVG/linkedin-svgrepo-com.svg new file mode 100644 index 0000000..452ae4a --- /dev/null +++ b/frontend/src/assets/images/SVG/linkedin-svgrepo-com.svg @@ -0,0 +1,14 @@ + + + + +