From a285b3e56425972acded727556f306d7b26b28cd Mon Sep 17 00:00:00 2001
From: elpekenin <monopatinct@gmail.com>
Date: Sun, 16 Oct 2022 11:21:27 +0200
Subject: [PATCH] Fix styling

---
 src/components/Footer.astro  |  5 +----
 src/components/Socials.astro | 11 ++++++++---
 src/pages/index.astro        |  7 +++++--
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c93a4e6..c6090b6 100644
--- a/src/components/Footer.astro
+++ b/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>
diff --git a/src/components/Socials.astro b/src/components/Socials.astro
index eacfc7a..6b5983c 100755
--- a/src/components/Socials.astro
+++ b/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;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 5267874..94d2b2f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -47,7 +47,7 @@ const sortedPosts = getSortedPosts(posts);
         > for more info.
       </p>
       <div class="social-wrapper">
-        <div class="whitespace-nowrap">Social Links:</div>
+        <div class="social-links">Social Links:</div>
           <Socials />
       </div>
     </section>
@@ -106,7 +106,7 @@ const sortedPosts = getSortedPosts(posts);
   <Footer />
 </Layout>
 
-<style is:global>
+<style>
   /* ===== Hero Section ===== */
   #hero {
     @apply pt-8;
@@ -126,6 +126,9 @@ const sortedPosts = getSortedPosts(posts);
   .social-wrapper {
     @apply flex flex-col sm:flex-row sm:items-center mt-4 mb-6;
   }
+  .social-links {
+    @apply whitespace-nowrap mr-2 sm:mb-0 mb-1;
+  }
 
   /* ===== Featured & Recent Posts Sections ===== */
   #featured,