From bf9f73bfe193a12e8b56ab48752681ba45356ac3 Mon Sep 17 00:00:00 2001
From: GivFNZ <givfnz@p0ntus.com>
Date: Sat, 22 Feb 2025 12:49:21 -0300
Subject: [PATCH] style: responsive: remove drawer outline, fix image and hide
 avatar

---
 src/components/Avatar/avatar.ts      | 3 +++
 src/components/Drawer/styles.ts      | 6 +++++-
 src/components/Header/index.tsx      | 2 +-
 src/components/MainContent/styles.ts | 3 +++
 src/pages/home/index.tsx             | 5 +++--
 src/pages/home/styles.ts             | 2 +-
 6 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Avatar/avatar.ts b/src/components/Avatar/avatar.ts
index d7d885f..835c15c 100644
--- a/src/components/Avatar/avatar.ts
+++ b/src/components/Avatar/avatar.ts
@@ -14,4 +14,7 @@ border-radius: 50%;
 width: 2rem;
 height: 2rem;
 margin-right: 10px;
+@media(max-width: 640px){
+      display: none;
+    }
 `
\ No newline at end of file
diff --git a/src/components/Drawer/styles.ts b/src/components/Drawer/styles.ts
index c573469..35a4ece 100644
--- a/src/components/Drawer/styles.ts
+++ b/src/components/Drawer/styles.ts
@@ -1,4 +1,4 @@
-import styled, { keyframes } from "styled-components";
+import styled from "styled-components";
 
 export const Drawer = styled.button`
 all: unset;
@@ -13,6 +13,10 @@ display: none;
 &::after {
     content: "☰";
 }
+&:focus {
+  outline: none;
+  border: 0;
+}
 @media(max-width: 640px){
   display: block;
 }
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 7b3b323..c7a9594 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -18,7 +18,7 @@ export default function Header() {
         <HeaderContainer>
           <HomeLink href="/">
             <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
-            Giv's Website
+            <span>Giv's Website</span>
           </HomeLink>
           <nav>
             <NavLink href="#about">{t("about")}</NavLink>
diff --git a/src/components/MainContent/styles.ts b/src/components/MainContent/styles.ts
index 0e3a08a..f4d6a1f 100644
--- a/src/components/MainContent/styles.ts
+++ b/src/components/MainContent/styles.ts
@@ -5,4 +5,7 @@ export const MainContainer = styled.div`
     margin: 3rem;
     background-color: ${props => props.theme["gray-700"]};
     border-radius: 8px;
+    @media(max-width: 640px){
+        margin: 0 0 3rem 0;
+    }
 `
\ No newline at end of file
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 26d051b..5c15056 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -6,6 +6,7 @@ import { IconContainer, IconLink, HomeLabel, TopSection } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
 import { Avatar } from '../../components/Avatar/avatar';
 import { t } from 'i18next';
+import { Paragraph } from '../../components/Paragraph/styles';
 
 export default function Home() {
   const typedElement = useRef(null);
@@ -27,9 +28,9 @@ export default function Home() {
     <MainContainer>
       <TopSection>
         <Avatar src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
-        <strong>
+        <Paragraph>
           <span ref={typedElement} />
-        </strong>
+        </Paragraph>
       </TopSection>
       <HomeLabel>
         {t("checkSocialLinks")}
diff --git a/src/pages/home/styles.ts b/src/pages/home/styles.ts
index bb5da4c..67f8f8b 100644
--- a/src/pages/home/styles.ts
+++ b/src/pages/home/styles.ts
@@ -27,7 +27,7 @@ span{
   font-size: 2.3rem;
 }
 @media (max-width: 448px) {
-  display: block;
+  flex-direction: column;
   font-size: 1rem;
 }
 `
\ No newline at end of file