style: responsive: remove drawer outline, fix image and hide avatar

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;
+    }
 `

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;
 }

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>

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;
+    }
 `

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")}

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;
 }
 `