Fix styling

src/components/Footer.astro

@@ -1,8 +1,5 @@
 ---
-import socialIcons from "@assets/socialIcons";
-import { SOCIALS } from "src/config";
 import Hr from "./Hr.astro";
-import LinkButton from "./LinkButton.astro";
 import Socials from "./Socials.astro";
 
 const currentYear = new Date().getFullYear();
@@ -17,7 +14,7 @@ const { noMarginTop = false } = Astro.props;
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
   <Hr noPadding />
   <div class="footer-wrapper">
-    <Socials />
+    <Socials centered />
     <div class="copyright-wrapper">
       <span>Copyright &#169; {currentYear}</span>
       <span class="separator">&nbsp;|&nbsp;</span>

src/components/Socials.astro

@@ -2,10 +2,16 @@
 import { SOCIALS } from "src/config";
 import LinkButton from "./LinkButton.astro";
 import socialIcons from "@assets/socialIcons";
+
+export interface Props {
+  centered?: boolean;
+}
+
+const { centered = false } = Astro.props;
 ---
 
 
-<div class="social-icons">
+<div class={`social-icons ${centered ? "flex" : ""}`}>
     {
       SOCIALS.filter((social) => social.active).map((social) => (
         <LinkButton
@@ -21,8 +27,7 @@ import socialIcons from "@assets/socialIcons";
 
 <style>
   .social-icons {
-    @apply flex flex-wrap justify-center gap-1;
-    @apply mt-1 sm:mt-0 sm:ml-2 sm:space-x-1;
+    @apply flex-wrap justify-center gap-1;
   }
   .link-button {
     @apply p-2 sm:p-1 hover:rotate-6;