From ca1e1b2cf34a1be9af76abdc413ae661d4036ebb Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Thu, 5 Jan 2023 15:56:56 -0300
Subject: [PATCH] style(main): adaptando main para todas as telas

---
 src/components/Main/Main.module.scss | 111 +++++++++++++++++++++++++--
 src/components/Main/Main.tsx         |  13 ++--
 src/global.scss                      |   4 +
 3 files changed, 113 insertions(+), 15 deletions(-)

diff --git a/src/components/Main/Main.module.scss b/src/components/Main/Main.module.scss
index 386a2a8..17d5c84 100644
--- a/src/components/Main/Main.module.scss
+++ b/src/components/Main/Main.module.scss
@@ -8,15 +8,51 @@ main {
     flex-direction: column;
     align-items: center;
     margin-bottom: 66.56px;
-    .Main__Nav {
+    @media (min-width: 2500px) {
+        min-height: calc(100vh - 765px);
+    }
+    @media (max-width: 1025px) {
+        margin-bottom: 80px;
+    }
+    .Navigation__Bar {
         width: 84.378%;
-        padding-top: 30px;
+        position: absolute;
+        top: 149px;
         display: flex;
         align-items: center;
-        & img {
-            margin-right: 8px;
+        @media (min-width: 2500px) {
+            top: 191px;
+            width: 92.002%;
         }
-        & a:not(:first-of-type) {
+        @media (max-width: 1025px) {
+            width: 96.875%;
+            top: 168px;
+        }
+        @media (max-width: 376px) {
+            width: 91.484%;
+        }
+        &__ArrowPointToRight {
+            margin-right: 9.72px;
+            @media (min-width: 2500px) {
+                width: 8.9px;
+                height: 15.62px;
+                margin-right: 11.74px;
+            }
+        }
+        &__HomeLink {
+            margin-right: 9.73px;
+            @media (min-width: 2500px) {
+                margin-right: 12.12px;
+            }
+            & img {
+                @media (min-width: 2500px) {
+                    width: 31.22px;
+                    height: 31.25px;
+                }
+            }
+        }
+
+        &__InstitucionalLink {
             font-family: "Roboto";
             font-style: normal;
             font-weight: 400;
@@ -25,7 +61,10 @@ main {
             color: #c4c4c4;
             text-decoration: none;
             text-transform: uppercase;
-            margin-left: 8px;
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
         }
     }
     h1 {
@@ -37,17 +76,42 @@ main {
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: #292929;
-        margin: 80px 0;
+        margin: 141px 0 80px;
+        @media (min-width: 2500px) {
+            font-size: 48px;
+            line-height: 56px;
+        }
+        @media (max-width: 1025px) {
+            margin: 125px 0 40px;
+        }
     }
     .Container {
         display: flex;
         justify-content: space-between;
         width: 84.378%;
+        @media (min-width: 2500px) {
+            width: 92.002%;
+        }
+        @media (max-width: 1025px) {
+            width: 96.875%;
+            flex-direction: column;
+        }
+        @media (max-width: 376px) {
+            width: 91.484%;
+        }
         aside {
             display: flex;
             flex-direction: column;
             width: 27.864%;
             border-right: 1px solid #000000;
+            @media (min-width: 2500px) {
+                width: 25.601%;
+            }
+            @media (max-width: 1025px) {
+                border: none;
+                width: 100%;
+            }
+
             & a {
                 width: auto;
                 height: 39px;
@@ -59,10 +123,25 @@ main {
                 display: flex;
                 align-items: center;
                 padding-left: 16px;
+                @media (min-width: 2500px) {
+                    height: 58px;
+                    font-size: 32px;
+                    line-height: 38px;
+                }
             }
         }
         & div {
             width: 69.241%;
+            @media (min-width: 2500px) {
+                width: 73.02%;
+            }
+            @media (max-width: 1025px) {
+                width: 100%;
+                text-align: justify;
+                font-size: 12px;
+                line-height: 18px;
+            }
+
             h2 {
                 font-family: "Roboto";
                 font-style: normal;
@@ -70,6 +149,16 @@ main {
                 font-size: 24px;
                 line-height: 28px;
                 color: #292929;
+                margin: 10px 0 12px;
+                @media (min-width: 2500px) {
+                    font-size: 48px;
+                    line-height: 56px;
+                    margin: 10px 0 12px;
+                }
+                @media (max-width: 1025px) {
+                    text-align: center;
+                    margin: 30px 0 12px;
+                }
             }
 
             p {
@@ -79,6 +168,14 @@ main {
                 font-size: 13px;
                 line-height: 15px;
                 color: #7d7d7d;
+                @media (min-width: 2500px) {
+                    font-size: 26px;
+                    line-height: 30px;
+                }
+                @media (max-width: 376px) {
+                    font-size: 12px;
+                    line-height: 18px;
+                }
             }
         }
     }
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index 6332033..a3d97f7 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,4 +1,4 @@
-import { BrowserRouter, Link , NavLink } from "react-router-dom";
+import { BrowserRouter, Link, NavLink } from "react-router-dom";
 import Rotas from "../../config/routes";
 import HomeIcon from "../../assets/imgs/HomeIcon.svg";
 import ArrowPointToRight from "../../assets/imgs/ArrowPointToRight.svg";
@@ -8,15 +8,12 @@ const Main = () => {
   return (
     <BrowserRouter>
       <main>
-        <nav className={styles["Main__Nav"]}>
-          <Link to="/">
+        <nav className={styles["Navigation__Bar"]}>
+          <Link to="/" className={styles["Navigation__Bar__HomeLink"]}>
             <img src={HomeIcon} alt="ícone da página inicial" />
           </Link>
-          <img
-            src={ArrowPointToRight}
-            alt="ícone de seta apontando para qual página está aberta"
-          />
-          <Link to="/">Institucional</Link>
+          <img src={ArrowPointToRight} className={styles["Navigation__Bar__ArrowPointToRight"]} alt="ícone de seta apontando para qual página está aberta"/>
+          <Link to="/" className={styles["Navigation__Bar__InstitucionalLink"]}>Institucional</Link>
         </nav>
         <h1>institucional</h1>
         <section className={styles["Container"]}>
diff --git a/src/global.scss b/src/global.scss
index fea205b..e974274 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -5,4 +5,8 @@ body {
   margin: 0;
   padding: 0;
   background: $white;
+}
+
+html,body {
+  height: 100%;
 }
\ No newline at end of file