BernardoWaldhelm/desafio-react-e-typescript-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): estilizando main e navbarSubmenu no tablet e mobile

Browse Source 
home
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-06 12:25:12 -03:00
parent 585b4b5675
commit 30a10392d6
4 changed files with 38 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/Main/Main.module.scss
View File

@ -4,6 +4,11 @@
width: calc(100% - 200px);
padding: 0 100px;
@media #{$mq-tablet}, #{$mq-mobile} {
padding: 0 16px;
width: calc(100% - 32px);
}
&__title {
font-family: $font-family;
font-style: normal;
@ -15,6 +20,11 @@
color: $color-black2;
text-align: center;
margin-bottom: 80px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 24px;
line-height: 28px;
}
}
&__group {

6
src/components/Submenu/NavBar/NavbarSubmenu.module.scss
View File

@ -10,6 +10,10 @@
width: 28%;
}
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
}
&__link{
text-decoration: none;
font-family: $font-family;
@ -21,7 +25,7 @@
width: calc(100% - 32px);
padding: 10px 16px;
@media #{$mq-desktop}{
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 16px;
line-height: 19px;
}

6
src/components/Submenu/Submenu.module.scss
View File

@ -1,5 +1,11 @@
@import '../../variaveis';
.submenu {
display: flex;
align-items: flex-start;
justify-content: flex-start;
@media #{$mq-tablet}, #{$mq-mobile} {
flex-direction: column;
}
}

17
src/components/Subpages/geral.module.scss
View File

@ -5,6 +5,12 @@
padding-left: 30px;
border-left: 1px solid $color-black;
@media #{$mq-tablet}, #{$mq-mobile} {
width: 100%;
border: none;
padding: 0;
}
&__title {
font-family: $font-family;
font-style: normal;
@ -13,6 +19,17 @@
line-height: 56px;
color: $color-black2;
margin-bottom: 12px;
@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
font-size: 24px;
line-height: 28px;
}
@media #{$mq-tablet}, #{$mq-mobile}{
text-align: center;
margin-top: 30px;
}
}
&__paragrafo {