From 68a7003713b88397cc2985fcad399b518ad19082 Mon Sep 17 00:00:00 2001
From: OLIMINATOR <oliminator@protonmail.com>
Date: Tue, 6 Dec 2022 13:22:42 +0100
Subject: [PATCH] mobile optimalizacia

---
 src/components/widgets/Hero.astro    |  9 ++++--
 src/components/widgets/Socials.astro | 41 +++++++++++++---------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/widgets/Hero.astro b/src/components/widgets/Hero.astro
index 9d67c4f..604ce2e 100644
--- a/src/components/widgets/Hero.astro
+++ b/src/components/widgets/Hero.astro
@@ -4,7 +4,12 @@ import { Image } from "@astrojs/image/components";
 import logo from "../../assets/logo.png";
 ---
 
-<main class="mt-64 flex justify-center items-center">
+<main
+    class="mt-24 md:mt-64 flex flex-col md:flex-row justify-center items-center"
+>
     <Image src={logo} width={200} height={200} alt="descriptive text" />
-    <Socials />
+    <section class="md:ml-6 md:text-left text-center">
+        <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
+        <Socials />
+    </section>
 </main>
diff --git a/src/components/widgets/Socials.astro b/src/components/widgets/Socials.astro
index f05f085..a3aee6f 100644
--- a/src/components/widgets/Socials.astro
+++ b/src/components/widgets/Socials.astro
@@ -24,25 +24,22 @@ const socials = [
 ];
 ---
 
-<section>
-    <h1 class="text-white font-extrabold text-6xl">xHyroM</h1>
-    <ul class="flex text-white my-5">
-        {
-            socials.map((social) => (
-                <li class="mr-4 flex">
-                    <a
-                        class="hover:-translate-y-1 transition-all w-10 h-10"
-                        href={social.link}
-                        title={social.name}
-                    >
-                        <img
-                            class="w-8 h-8"
-                            src={`/icons/${social.icon}.svg`}
-                            alt={`${social.name} icon`}
-                        />
-                    </a>
-                </li>
-            ))
-        }
-    </ul>
-</section>
+<ul class="flex text-white my-5 md:justify-start justify-center">
+    {
+        socials.map((social) => (
+            <li class="mr-4 ">
+                <a
+                    class="hover:-translate-y-1 transition-all w-10 h-10"
+                    href={social.link}
+                    title={social.name}
+                >
+                    <img
+                        class="w-8 h-8"
+                        src={`/icons/${social.icon}.svg`}
+                        alt={`${social.name} icon`}
+                    />
+                </a>
+            </li>
+        ))
+    }
+</ul>