diff --git a/src/assets/css/styles.css b/src/assets/css/styles.css index f8c161c..1a1d2bb 100644 --- a/src/assets/css/styles.css +++ b/src/assets/css/styles.css @@ -1194,7 +1194,7 @@ html.light-theme .hero::before { display: flex; justify-content: center; align-items: center; - gap: 2rem; + gap: 1.5rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; @@ -1204,8 +1204,8 @@ html.light-theme .hero::before { display: inline-flex; align-items: center; justify-content: center; - width: 4rem; - height: 4rem; + width: 3rem; + height: 3rem; color: var(--or-oki); text-decoration: none; transition: transform 0.2s, opacity 0.2s; @@ -1219,19 +1219,20 @@ html.light-theme .hero::before { } .contact-social-link img { - width: 60%; - height: 60%; + width: 70%; + height: 70%; object-fit: contain; + filter: brightness(0) saturate(100%) invert(0.9) sepia(0.8) hue-rotate(30deg); } @media (min-width: 768px) { .contact-socials { - gap: 2.5rem; + gap: 2rem; } .contact-social-link { - width: 4.5rem; - height: 4.5rem; + width: 3.5rem; + height: 3.5rem; } } @@ -1301,8 +1302,8 @@ footer .flag-bar { display: inline-flex; align-items: center; justify-content: center; - width: 2.5rem; - height: 2.5rem; + width: 1.75rem; + height: 1.75rem; color: var(--or-oki); text-decoration: none; transition: transform 0.2s, opacity 0.2s; @@ -1313,19 +1314,26 @@ footer .flag-bar { height: 100%; } +.social-link img { + width: 100%; + height: 100%; + object-fit: contain; + filter: brightness(0) saturate(100%) invert(0.9) sepia(0.8) hue-rotate(30deg); +} + .social-link:hover { - transform: scale(1.1); - opacity: 0.8; + transform: scale(1.15); + opacity: 0.9; } @media (min-width: 768px) { .footer-socials { - gap: 1.5rem; + gap: 1rem; } .social-link { - width: 2.75rem; - height: 2.75rem; + width: 2rem; + height: 2rem; } }