forked from M3-Academy/desafio-react-e-typescript
style(main): adaptando main para todas as telas
This commit is contained in:
parent
f930fc80c3
commit
ca1e1b2cf3
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"]}>
|
||||
|
||||
@ -5,4 +5,8 @@ body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $white;
|
||||
}
|
||||
|
||||
html,body {
|
||||
height: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user