10000 feat/ Responsividade em Home. · lostcode-dev/lostcode-blog@92eda58 · GitHub
[go: up one dir, main page]
Skip to content

Commit 92eda58

Browse files
lostcode-devlostcode-dev
committed
feat/ Responsividade em Home.
1 parent e7ac70e commit 92eda58

File tree

3 files changed

+40
-2
lines changed

3 files changed

+40
-2
lines changed

‎src/pages/home.module.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import '../styles/variables';
2+
13
.contentContainer {
24
max-width: 1120px;
35
margin: 0 auto;
@@ -11,6 +13,12 @@
1113
img {
1214
animation: upDown 1s infinite alternate;
1315
}
16+
17+
@media (max-width: $breakpoint-md) {
18+
flex-direction: column;
19+
text-align: center;
20+
justify-content: center;
21+
}
1422
}
1523

1624
.imgContainer {
@@ -24,6 +32,10 @@
2432
height: 100%!important;
2533
display: block!important;
2634
}
35+
36+
@media (max-width: $breakpoint-md) {
37+
display: none;
38+
}
2739
}
2840

2941

@@ -49,6 +61,12 @@
4961
span {
5062
color: var(--yellow);
5163
}
64+
65+
@media (max-width: $breakpoint-sm) {
66+
font-size: 4rem;
67+
line-height: 4rem;
68+
margin-top: 2rem;
69+
}
5270
}
5371

5472
p {

‎src/styles/_variables.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$breakpoint-xs: 0;
2+
$breakpoint-sm: 576px;
3+
$breakpoint-md: 768px;
4+
$breakpoint-lg: 992px;
5+
$breakpoint-xl: 1200px;
6+
$breakpoint-xxl: 1400px;

‎src/styles/global.scss

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@tailwind base;
22
@tailwind components;
33
@tailwind utilities;
4+
@import './_variables.scss';
45

56
* {
67
margin: 0;
@@ -31,18 +32,31 @@ html {
3132
scroll-behavior: smooth;
3233
}
3334

34-
@media (max-width: 1080px) {
35+
@media (max-width: $breakpoint-xl) {
3536
html {
3637
font-size: 93.75%;
3738
}
3839
}
3940

40-
@media (max-width: 720px) {
41+
@media (max-width: $breakpoint-lg) {
4142
html {
4243
font-size: 87.5%;
4344
}
4445
}
4546

47+
@media (max-width: $breakpoint-md) {
48+
html {
49+
font-size: 75.5%;
50+
}
51+
}
52+
53+
@media (max-width: $breakpoint-sm) {
54+
html {
55+
font-size: 67.5%;
56+
}
57+
}
58+
59+
4660
body {
4761
background: var(--pink);
4862
background: linear-gradient(180deg, var(--pink) 0%, var(--purple) 100%);

0 commit comments

Comments
 (0)
0