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 responsividade para todas as telas

Browse Source
This commit is contained in:
Mateus Antonio Rodrigues Lopes 2023-01-08 12:12:38 -03:00
parent 69f73c8118
commit 32d883c865
1 changed files with 159 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
src/pages/app.scss
View File

@ -1,7 +1,163 @@
body {
background-color: white;
background-color: $color-white;
width: 100%;
font-family: $font-family-Roboto;
}
.main {
padding: 29px 100px 70px 100px;
@media (max-width: 1024px) {
padding: 29px 16px 70px 16px;
}
.article-name {
display: flex;
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%;
@media (max-width: 1024px) {
width: 100%;
border-right: none;
}
@media (min-width: 2500px) {
width: 25.6523%;
}
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;
}
}
li.active {
color: $color-white;
background-color: $color-black;
font-weight: 700;
}
}
section {
display: none;
}
section.active {
display: block;
width: 69.26%;
margin-bottom: 11px;
@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;
}
}
}
}
}