MateusLopes/desafio-react-e-typescript-mateus-lopes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add estilizacao e responsividade main page

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2023-01-11 13:42:44 -03:00
parent 648fe1b266
commit 62e1e06d66
1 changed files with 160 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/main/main.scss Normal file
View File

@ -0,0 +1,160 @@
.main {
padding: 29px 100px 70px 100px;
@media (max-width: 1024px) {
padding: 29px 16px 70px 16px;
}
.article-name {
display: flex;
align-items: center;
gap: 8px;
@media (min-width: 2500px) {
gap: 8.75px;
img.icon-home {
width: 31.25px;
}
img.icon-arrow-right {
width: 15.62px;
}
}
h5.article-name-title {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 12px;
line-height: 14px;
text-transform: uppercase;
color: $color-gray-600;
@media (min-width: 2500px) {
font-size: 24px;
line-height: 28px;
}
}
}
h1.article-title {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 24px;
line-height: 28px;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
color: $color-gray-200;
margin: 80px 0;
@media (max-width: 1024px) {
margin: 80px 0 40px 0;
}
@media (min-width: 2500px) {
font-size: 48px;
line-height: 56px;
}
}
article.article-container {
display: flex;
gap: 30px;
@media (max-width: 1024px) {
flex-direction: column;
}
ul.sections-list {
border-right: 1px solid $color-black;
width: 28.094%;
height: 285px;
@media (max-width: 1024px) {
width: 100%;
height: fit-content;
border-right: none;
}
@media (min-width: 2500px) {
width: 25.6523%;
height: 465px;
}
li {
font-family: $font-family-Roboto;
color: $color-gray-350;
font-weight: 400;
font-size: 16px;
line-height: 19px;
padding: 10px 0 10px 16px;
@media (min-width: 2500px) {
font-size: 32px;
line-height: 38px;
}
}
.active-li {
color: $color-white;
background-color: $color-black;
font-weight: 700;
}
}
section {
display: none;
}
section.active {
display: block;
width: 69.26%;
@media (max-width: 1024px) {
width: 100%;
}
@media (min-width: 2500px) {
width: 73.044%;
}
h2.section-title {
font-family: $font-family-Roboto;
font-weight: 700;
font-size: 24px;
line-height: 28px;
margin-bottom: 12px;
color: $color-gray-200;
@media (max-width: 1024px) {
text-align: center;
}
@media (min-width: 2500px) {
font-size: 48px;
line-height: 56px;
}
}
.section-description p {
font-family: $font-family-Roboto;
font-weight: 400;
font-size: 13px;
line-height: 15px;
color: $color-gray-350;
@media (max-width: 1024px) {
font-size: 12px;
line-height: 18px;
text-align: justify;
}
@media (min-width: 2500px) {
font-size: 26px;
line-height: 30px;
}
}
}
}
}