📱 improve responsive for footer and header

ImJustLucas · Mar 16, 2024 · 7c4b5ea · 7c4b5ea
1 parent 6cc1c75
commit 7c4b5ea
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 14 deletions.
diff --git a/src/components/Layouts/Footer/SocialBar.tsx b/src/components/Layouts/Footer/SocialBar.tsx
@@ -6,8 +6,8 @@ export const SocialBar: React.FC = () => {
   return (
     <SocialBarStyled>
       <Link
-        className="icon github--icon"
-        href="https://github.com/ImJustLucas"
+        className="icon linkedin--icon"
+        href="https://www.linkedin.com/in/lucasbellier/"
         target="_blank"
       >
         <svg
@@ -17,39 +17,79 @@ export const SocialBar: React.FC = () => {
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
-          <g clipPath="url(#clip0_1_62)">
+          <g clipPath="url(#clip0_1_56)">
             <path
-              d="M12 2C6.475 2 2 6.475 2 12C1.99887 14.0993 2.65882 16.1456 3.88622 17.8487C5.11362 19.5517 6.84615 20.8251 8.838 21.488C9.338 21.575 9.525 21.275 9.525 21.012C9.525 20.775 9.512 19.988 9.512 19.15C7 19.613 6.35 18.538 6.15 17.975C6.037 17.687 5.55 16.8 5.125 16.562C4.775 16.375 4.275 15.912 5.112 15.9C5.9 15.887 6.462 16.625 6.65 16.925C7.55 18.437 8.988 18.012 9.562 17.75C9.65 17.1 9.912 16.663 10.2 16.413C7.975 16.163 5.65 15.3 5.65 11.475C5.65 10.387 6.037 9.488 6.675 8.787C6.575 8.537 6.225 7.512 6.775 6.137C6.775 6.137 7.612 5.875 9.525 7.163C10.3391 6.93706 11.1802 6.82334 12.025 6.825C12.875 6.825 13.725 6.937 14.525 7.162C16.437 5.862 17.275 6.138 17.275 6.138C17.825 7.513 17.475 8.538 17.375 8.788C18.012 9.488 18.4 10.375 18.4 11.475C18.4 15.313 16.063 16.163 13.838 16.413C14.2 16.725 14.513 17.325 14.513 18.263C14.513 19.6 14.5 20.675 14.5 21.013C14.5 21.275 14.688 21.587 15.188 21.487C17.173 20.8168 18.8979 19.541 20.1199 17.8392C21.3419 16.1373 21.9994 14.0951 22 12C22 6.475 17.525 2 12 2Z"
+              d="M6.94 5.00002C6.93974 5.53046 6.72877 6.03906 6.35351 6.41394C5.97825 6.78883 5.46944 6.99929 4.939 6.99902C4.40857 6.99876 3.89997 6.78779 3.52508 6.41253C3.1502 6.03727 2.93974 5.52846 2.94 4.99802C2.94027 4.46759 3.15124 3.95899 3.5265 3.5841C3.90176 3.20922 4.41057 2.99876 4.941 2.99902C5.47144 2.99929 5.98004 3.21026 6.35492 3.58552C6.72981 3.96078 6.94027 4.46959 6.94 5.00002ZM7 8.48002H3V21H7V8.48002ZM13.32 8.48002H9.34V21H13.28V14.43C13.28 10.77 18.05 10.43 18.05 14.43V21H22V13.07C22 6.90002 14.94 7.13002 13.28 10.16L13.32 8.48002Z"
               fill="#96A2A5"
             />
           </g>
           <defs>
-            <clipPath id="clip0_1_62">
+            <clipPath id="clip0_1_56">
               <rect width="24" height="24" fill="white" />
             </clipPath>
           </defs>
         </svg>
       </Link>
       <Link
         className="icon linkedin--icon"
-        href="https://www.linkedin.com/in/lucasbellier/"
+        href="https://twitter.com/ImJustLucas_"
         target="_blank"
       >
         <svg
+          xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
+        >
+          <g clipPath="url(#clip0_461_35)">
+            <path
+              d="M22.162 5.65593C21.3985 5.99362 20.589 6.2154 19.76 6.31393C20.6337 5.79136 21.2877 4.96894 21.6 3.99993C20.78 4.48793 19.881 4.82993 18.944 5.01493C18.3146 4.34151 17.4804 3.89489 16.5709 3.74451C15.6615 3.59413 14.7279 3.74842 13.9153 4.18338C13.1026 4.61834 12.4564 5.30961 12.0771 6.14972C11.6978 6.98983 11.6067 7.93171 11.818 8.82893C10.1551 8.74558 8.52832 8.31345 7.04328 7.56059C5.55823 6.80773 4.24812 5.75097 3.19799 4.45893C2.82628 5.09738 2.63095 5.82315 2.63199 6.56193C2.63199 8.01193 3.36999 9.29293 4.49199 10.0429C3.828 10.022 3.17862 9.84271 2.59799 9.51993V9.57193C2.59819 10.5376 2.93236 11.4735 3.54384 12.221C4.15532 12.9684 5.00647 13.4814 5.95299 13.6729C5.33661 13.84 4.6903 13.8646 4.06299 13.7449C4.32986 14.5762 4.85 15.3031 5.55058 15.824C6.25117 16.3449 7.09712 16.6337 7.96999 16.6499C7.10247 17.3313 6.10917 17.8349 5.04687 18.1321C3.98458 18.4293 2.87412 18.5142 1.77899 18.3819C3.69069 19.6114 5.91609 20.264 8.18899 20.2619C15.882 20.2619 20.089 13.8889 20.089 8.36193C20.089 8.18193 20.084 7.99993 20.076 7.82193C20.8949 7.23009 21.6016 6.49695 22.163 5.65693L22.162 5.65593Z"
+              fill="#676767"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_461_35">
+              <rect width="24" height="24" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+      </Link>
+      <Link
+        className="icon linkedin--icon"
+        href="https://discord.gg/htaxa7vUh6"
+        target="_blank"
+      >
+        <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
         >
-          <g clipPath="url(#clip0_1_56)">
+          <path d="M19.3034 5.33716C17.9344 4.71103 16.4805 4.2547 14.9629 4C14.7719 4.32899 14.5596 4.77471 14.411 5.12492C12.7969 4.89144 11.1944 4.89144 9.60255 5.12492C9.45397 4.77471 9.2311 4.32899 9.05068 4C7.52251 4.2547 6.06861 4.71103 4.70915 5.33716C1.96053 9.39111 1.21766 13.3495 1.5891 17.2549C3.41443 18.5815 5.17612 19.388 6.90701 19.9187C7.33151 19.3456 7.71356 18.73 8.04255 18.0827C7.41641 17.8492 6.82211 17.5627 6.24904 17.2231C6.39762 17.117 6.5462 17.0003 6.68416 16.8835C10.1438 18.4648 13.8911 18.4648 17.3082 16.8835C17.4568 17.0003 17.5948 17.117 17.7434 17.2231C17.1703 17.5627 16.576 17.8492 15.9499 18.0827C16.2789 18.73 16.6609 19.3456 17.0854 19.9187C18.8152 19.388 20.5875 18.5815 22.4033 17.2549C22.8596 12.7341 21.6806 8.80747 19.3034 5.33716ZM8.5201 14.8459C7.48007 14.8459 6.63107 13.9014 6.63107 12.7447C6.63107 11.5879 7.45884 10.6434 8.5201 10.6434C9.57071 10.6434 10.4303 11.5879 10.4091 12.7447C10.4091 13.9014 9.57071 14.8459 8.5201 14.8459ZM15.4936 14.8459C14.4535 14.8459 13.6034 13.9014 13.6034 12.7447C13.6034 11.5879 14.4323 10.6434 15.4936 10.6434C16.5442 10.6434 17.4038 11.5879 17.3825 12.7447C17.3825 13.9014 16.5548 14.8459 15.4936 14.8459Z"></path>
+        </svg>
+      </Link>
+      <Link
+        className="icon linkedin--icon"
+        href="https://github.com/ImJustLucas"
+        target="_blank"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <g clipPath="url(#clip0_461_47)">
             <path
-              d="M6.94 5.00002C6.93974 5.53046 6.72877 6.03906 6.35351 6.41394C5.97825 6.78883 5.46944 6.99929 4.939 6.99902C4.40857 6.99876 3.89997 6.78779 3.52508 6.41253C3.1502 6.03727 2.93974 5.52846 2.94 4.99802C2.94027 4.46759 3.15124 3.95899 3.5265 3.5841C3.90176 3.20922 4.41057 2.99876 4.941 2.99902C5.47144 2.99929 5.98004 3.21026 6.35492 3.58552C6.72981 3.96078 6.94027 4.46959 6.94 5.00002ZM7 8.48002H3V21H7V8.48002ZM13.32 8.48002H9.34V21H13.28V14.43C13.28 10.77 18.05 10.43 18.05 14.43V21H22V13.07C22 6.90002 14.94 7.13002 13.28 10.16L13.32 8.48002Z"
-              fill="#96A2A5"
+              d="M12 2C6.475 2 2 6.475 2 12C1.99887 14.0993 2.65882 16.1456 3.88622 17.8487C5.11362 19.5517 6.84615 20.8251 8.838 21.488C9.338 21.575 9.525 21.275 9.525 21.012C9.525 20.775 9.512 19.988 9.512 19.15C7 19.613 6.35 18.538 6.15 17.975C6.037 17.687 5.55 16.8 5.125 16.562C4.775 16.375 4.275 15.912 5.112 15.9C5.9 15.887 6.462 16.625 6.65 16.925C7.55 18.437 8.988 18.012 9.562 17.75C9.65 17.1 9.912 16.663 10.2 16.413C7.975 16.163 5.65 15.3 5.65 11.475C5.65 10.387 6.037 9.488 6.675 8.787C6.575 8.537 6.225 7.512 6.775 6.137C6.775 6.137 7.612 5.875 9.525 7.163C10.3391 6.93706 11.1802 6.82334 12.025 6.825C12.875 6.825 13.725 6.937 14.525 7.162C16.437 5.862 17.275 6.138 17.275 6.138C17.825 7.513 17.475 8.538 17.375 8.788C18.012 9.488 18.4 10.375 18.4 11.475C18.4 15.313 16.063 16.163 13.838 16.413C14.2 16.725 14.513 17.325 14.513 18.263C14.513 19.6 14.5 20.675 14.5 21.013C14.5 21.275 14.688 21.587 15.188 21.487C17.173 20.8168 18.8979 19.541 20.1199 17.8392C21.3419 16.1373 21.9994 14.0951 22 12C22 6.475 17.525 2 12 2Z"
+              fill="#676767"
             />
           </g>
           <defs>
-            <clipPath id="clip0_1_56">
+            <clipPath id="clip0_461_47">
               <rect width="24" height="24" fill="white" />
             </clipPath>
           </defs>

diff --git a/src/components/Layouts/Footer/index.tsx b/src/components/Layouts/Footer/index.tsx
@@ -8,8 +8,8 @@ export const Footer: FC = () => {
   return (
     <FooterWrapper>
       <SocialBar />
-      <span>•</span>
-      <span>Made with 💙 by ImJustLucas</span>
+      <Dot>•</Dot>
+      <span>Made with 💖 by ImJustLucas</span>
     </FooterWrapper>
   );
 };
@@ -26,4 +26,16 @@ const FooterWrapper = styled.footer`
   svg path {
     fill: ${({ theme }) => theme.colors.text.contrast};
   }
+
+  @media (max-width: ${({ theme }) => theme.breakpoint.tablet}) {
+    flex-direction: column;
+    align-items: center;
+    padding-bottom: ${({ theme }) => theme.spacing.md};
+  }
+`;
+
+const Dot = styled.span`
+  @media (max-width: ${({ theme }) => theme.breakpoint.tablet}) {
+    display: none;
+  }
 `;
diff --git a/src/components/Layouts/Header/index.tsx b/src/components/Layouts/Header/index.tsx
@@ -38,6 +38,10 @@ const TitleContainer = styled.div`
   display: flex;
   align-items: center;
   flex: 1;
+
+  @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
+    display: none;
+  }
 `;
 
 const MenuContainer = styled.div`
@@ -46,13 +50,27 @@ const MenuContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+
+  @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    right: 0;
+  }
 `;
 
 const ThemeToggleContainer = styled.div`
   display: flex;
   align-items: center;
   flex: 1;
   justify-content: flex-end;
+
+  @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
+    position: fixed;
+    z-index: 10;
+    bottom: 16px;
+    right: 16px;
+  }
 `;
 
 const HeaderTitle = styled.h2`

diff --git a/src/components/Pages/Home/Hero/IconContainer.tsx b/src/components/Pages/Home/Hero/IconContainer.tsx
@@ -36,6 +36,7 @@ const IconContainer = styled.div`
 
     @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
       top: 70%;
+      left: 5%;
     }
   }
 
@@ -49,8 +50,7 @@ const IconContainer = styled.div`
     }
 
     @media (max-width: ${({ theme }) => theme.breakpoint.mobile}) {
-      top: 20%;
-      left: 80%;
+      top: 25%;
     }
   }