Skip to content

Commit d61f396

Browse files
TYMGTYMG
committed
[ Section 6 ]: Padding Still Off But Continue
1 parent 7cdea4e commit d61f396

23 files changed

+870
-790
lines changed

‎Natours/starter/mixins.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@mixin clearfix {
2+
&::after {
3+
content: "";
4+
clear: both;
5+
display: table;
6+
}
7+
}
8+
9+
@mixin box-shadow-s {
10+
box-shadow: 0 1.5rem 4rem rgba($color-black, .15);
11+
}
12+
13+
@mixin absCenter {
14+
position: absolute;
15+
top:50%;
16+
left:50%;
17+
transform: translate(-50%, -50%);
18+
}
19+
20+
// Media Query Manager
21+
22+
/*
23+
0-600px: Phone
24+
600px - 900px: Tablet Portrait
25+
900px - 1200px: Tablet landscape
26+
[1200 - 1800] is where our normal styles apply
27+
1800px + : Big desktop
28+
29+
*/
30+
31+
32+
// 1em = 16px (Default Pixel Size 16px)
33+
@mixin respond($breakpoint) {
34+
@if $breakpoint == phone {
35+
@media (max-width:37.5em) {@content}; //600px
36+
}
37+
@if $breakpoint == tab-port {
38+
@media (max-width:56.25em) {@content}; //900px
39+
}
40+
@if $breakpoint == tab-land {
41+
@media (max-width: 75em) {@content}; //1200px
42+
}
43+
@if $breakpoint == big-desktop {
44+
@media (max-width: 112.5em) {@content}; //1800px
45+
}
46+
}
47+
48+
// NOT USED
49+
@mixin respond-phone {
50+
@media (max-width:600px) {
51+
@content
52+
};
53+
}

‎Natours/starter/sass/abstracts/_variables.scss

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,30 @@
1-
2-
//Colors
1+
// COLORS
32
$color-primary: #55c57a;
43
$color-primary-light: #7ed56f;
54
$color-primary-dark: #28b485;
65

7-
$color-grey-light-1:#f7f7f7;
8-
$color-grey-light-2:#eee;
9-
106
$color-secondary-light: #ffb900;
117
$color-secondary-dark: #ff7730;
128

139
$color-tertiary-light: #2998ff;
14-
$color-tertiary-dark:#5643fa;
10+
$color-tertiary-dark: #5643fa;
11+
12+
$color-grey-light-1: #f7f7f7;
13+
$color-grey-light-2: #eee;
1514

1615
$color-grey-dark: #777;
1716
$color-grey-dark-2: #999;
1817
$color-grey-dark-3: #333;
1918

20-
2119
$color-white: #fff;
20+
$color-black: #000;
21+
2222

23-
$color-black: #000000;
23+
// FONT
24+
$default-font-size: 1.6rem;
2425

2526

26-
//Grid
27+
// GRID
2728
$grid-width: 114rem;
2829
$gutter-vertical: 8rem;
29-
$gutter-horizontal: 6rem;
30-
31-
//Font
32-
$default-font-size: 1.5em;
30+
$gutter-horizontal: 6rem;

‎Natours/starter/sass/base/_animations.scss

Lines changed: 27 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,43 @@
1-
2-
3-
@keyframes spinner {
4-
0% {
5-
opacity: 1;
6-
transform: translateX(10rem) translateY(10rem) rotate(720deg);
7-
}
8-
9-
100% {
10-
opacity: 1;
11-
transform: translate(0);
12-
}
13-
}
14-
15-
@keyframes moveInLeft {
1+
@keyframes moveInLeft {
162
0% {
17-
opacity: 0;
18-
transform: rotate(-10rem) rotate(90deg);
3+
opacity: 0;
4+
transform: translateX(-10rem);
195
}
20-
6+
217
80% {
22-
transform: translateX(1rem);
8+
transform: translateX(1rem);
239
}
24-
10+
2511
100% {
26-
opacity: 1;
27-
transform: translateX(0);
12+
opacity: 1;
13+
transform: translate(0);
2814
}
29-
}
30-
31-
@keyframes moveInRight {
15+
}
16+
17+
@keyframes moveInRight {
3218
0% {
33-
opacity: 0;
34-
transform: translateX(100rem);
19+
opacity: 0;
20+
transform: translateX(10rem);
3521
}
36-
22+
3723
80% {
38-
transform: translateX(-1rem);
24+
transform: translateX(-1rem);
3925
}
40-
26+
4127
100% {
42-
opacity: 1;
43-
transform: translateX(0);
28+
opacity: 1;
29+
transform: translate(0);
4430
}
45-
}
46-
@keyframes moveInBottom {
31+
}
32+
33+
@keyframes moveInBottom {
4734
0% {
48-
opacity: 0;
49-
transform: translateY(100rem);
35+
opacity: 0;
36+
transform: translateY(3rem);
5037
}
51-
52-
80% {
53-
transform: translateY(-1rem);
54-
}
55-
38+
5639
100% {
57-
opacity: 1;
58-
transform: translateX(0);
40+
opacity: 1;
41+
transform: translate(0);
5942
}
60-
}
43+
}

‎Natours/starter/sass/base/_base.scss

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
1-
21
*,
32
*::after,
43
*::before {
5-
margin: 0;
6-
padding: 0;
7-
box-sizing: inherit;
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
87
}
98

109
html {
11-
// Note: Setting the Root Font Size won't affect the Media Queries
12-
/* This defines what one rem is */
13-
font-size: 62.5%; //1rem = 10px; 10/16px = 62.5%;
14-
15-
16-
/*
17-
Order is important with media queries, because conflicts can occur.
18-
19-
And when conflicts, where both media query are true, occur the last rule will be applied.
20-
*/
21-
@include respond(tab-land) { // width < 1200
22-
font-size: 56.25%; //1rem = 9px, 9/16 = 56%
23-
}
10+
// Note: Setting the Root Font Size won't affect the Media Queries
11+
/* This defines what one rem is */
12+
font-size: 62.5%; //1rem = 10px; 10/16px = 62.5%;
2413

25-
//Removed the @include respond(phone) b/c had same font size
26-
@include respond(tab-port) { //900px with <900
27-
font-size: 50%; //1 rem = 8 px, 8/16 = 50%
28-
}
29-
//Removed the @include respond(phone) b/c had same font size
30-
@include respond(phone) { //900px with <900
31-
font-size: 30%; //1 rem = 8 px, 8/16 = 50%
32-
}
33-
@include respond(big-desktop) { //1800px
34-
font-size: 75%; //1rem = 12, 12/16
14+
15+
/*
16+
Order is important with media queries, because conflicts can occur.
17+
18+
And when conflicts, where both media query are true, occur the last rule will be applied.
19+
*/
20+
@include respond(tab-land) { // width < 1200
21+
font-size: 56.25%; //1rem = 9px, 9/16 = 56%
22+
}
23+
24+
//Removed the @include respond(phone) b/c had same font size
25+
@include respond(tab-port) { //900px with <900
26+
font-size: 50%; //1 rem = 8 px, 8/16 = 50%
27+
}
28+
//Removed the @include respond(phone) b/c had same font size
29+
@include respond(phone) { //900px with <900
30+
font-size: 30%; //1 rem = 8 px, 8/16 = 50%
31+
}
32+
@include respond(big-desktop) { //1800px
33+
font-size: 75%; //1rem = 12, 12/16
34+
}
3535
}
36-
}
37-
3836
body {
39-
box-sizing: border-box;
37+
box-sizing: border-box;
38+
39+
padding:3rem;
40+
41+
@include respond(tab-port) { //900px with <900
42+
padding: 0;
43+
}
44+
4045
}

‎Natours/starter/sass/base/_typography.scss

Lines changed: 51 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,71 @@
11
body {
22
font-family: "Lato", sans-serif;
33
font-weight: 400;
4-
/* font-size: 16px; */
4+
/*font-size: 16px;*/
55
line-height: 1.7;
66
color: $color-grey-dark;
7-
padding: 1rem;
8-
box-sizing: border-box;
9-
}
7+
padding: 3rem;
8+
}
109

1110
.heading-primary {
12-
color: #fff;
11+
color: $color-white;
1312
text-transform: uppercase;
13+
1414
backface-visibility: hidden;
1515
margin-bottom: 6rem;
16+
1617
&--main {
17-
display: block;
18-
font-size: 5rem;
19-
font-weight: 400;
20-
letter-spacing: 2.5rem;
18+
display: block;
19+
font-size: 6rem;
20+
font-weight: 400;
21+
letter-spacing: 3.5rem;
2122

22-
animation-name: moveInLeft;
23-
animation-duration: 2s;
24-
animation-timing-function: ease-out;
23+
animation-name: moveInLeft;
24+
animation-duration: 1s;
25+
animation-timing-function: ease-out;
26+
27+
/*
28+
animation-delay: 3s;
29+
animation-iteration-count: 3;
30+
*/
2531
}
2632

2733
&--sub {
28-
display: block;
29-
font-size: 2.5rem;
30-
font-weight: 700;
31-
letter-spacing: 1rem;
32-
animation: moveInRight 2s ease-out;
34+
display: block;
35+
font-size: 2rem;
36+
font-weight: 700;
37+
letter-spacing: 1.75rem;
38+
animation: moveInRight 1s ease-out;
3339
}
34-
}
40+
}
41+
42+
.heading-secondary {
43+
font-size: 3.5rem;
44+
text-transform: uppercase;
45+
font-weight: 700;
46+
display: inline-block;
47+
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
48+
-webkit-background-clip: text;
49+
color: transparent;
50+
letter-spacing: .2rem;
51+
transition: all .2s;
3552

36-
.heading-secondary {
37-
font-size: 3.5rem;
38-
text-transform: uppercase;
39-
font-weight: 700;
40-
background-image: linear-gradient(to right, $color-primary-light, $color-primary-dark);
41-
display: inline-block;
42-
-webkit-background-clip: text;
43-
color:transparent;
44-
letter-spacing: .2rem;
45-
transition: all .2s;
53+
&:hover {
54+
transform: skewY(2deg) skewX(15deg) scale(1.1);
55+
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
56+
}
57+
}
4658

47-
&:hover {
48-
transform: skew(2deg , 20deg) scale(1.1);
49-
text-shadow: .5rem 1rem 2rem rgba($color-black, .2);
50-
}
51-
}
59+
.heading-tertiary {
60+
font-size: $default-font-size;
61+
font-weight: 700;
62+
text-transform: uppercase;
63+
}
5264

53-
.heading-tertiary {
54-
font-size: $default-font-size;
55-
font-weight: 700;
56-
text-transform: uppercase;
57-
}
65+
.paragraph {
66+
font-size: $default-font-size;
5867

59-
.paragraph {
60-
font-size: $default-font-size;
61-
&:not(:last-child) {
62-
margin-bottom: 3rem;
63-
}
64-
}
65-
68+
&:not(:last-child) {
69+
margin-bottom: 3rem;
70+
}
71+
}

0 commit comments

Comments
 (0)