Skip to content

Commit 00665bc

Browse files
DalaScriptDalaScript
committed
update folder structure
1 parent a5f34f2 commit 00665bc

6 files changed

Lines changed: 126 additions & 91 deletions

File tree

‎assets/styles/base/_reset.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/* || Reset
2+
*************************/
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}

‎assets/styles/base/_variables.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/* || Fonts Imports ('Outfit')
2+
*************************/
3+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
4+
5+
/* || Global Variables
6+
*************************/
7+
/* || Colors
8+
*************************/
9+
$white: #ffffff;
10+
$light-gray: #d6e2f0;
11+
$grayish-blue: #7b879d;
12+
$dark-blue: #1f3251;
13+
14+
/* || Fonts
15+
*************************/
16+
$outfit: "Outfit", sans-serif;
17+
18+
/* || Spacing
19+
*************************/
20+
$space-xs: 0.5rem;
21+
$space-sm: 1rem;
22+
$space-md: 1.5rem;
23+
$space-lg: 2.5rem;
24+
25+
/* || Font sizes
26+
*************************/
27+
$fs-sm: 0.9375rem;
28+
$fs-md: 1.375rem;

‎assets/styles/components/_card.scss‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/* || Card Component
2+
*************************/
3+
.card {
4+
padding: $space-sm $space-sm $space-lg;
5+
max-width: 320px;
6+
border-radius: 20px;
7+
8+
background-color: $white;
9+
box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
10+
11+
/* || Image
12+
*************************/
13+
&__img {
14+
width: 100%;
15+
height: auto;
16+
border-radius: 10px;
17+
display: block;
18+
}
19+
20+
/* || Text Content
21+
*************************/
22+
&__content {
23+
margin-top: $space-md;
24+
padding: 0 $space-sm;
25+
text-align: center;
26+
}
27+
28+
/* || Title
29+
*************************/
30+
&__title {
31+
font-size: $fs-md;
32+
color: $dark-blue;
33+
}
34+
35+
/* || Description
36+
*************************/
37+
&__description {
38+
margin-top: $space-sm;
39+
40+
font-size: $fs-sm;
41+
font-weight: 400;
42+
letter-spacing: 0.1875px;
43+
line-height: 1.1875rem;
44+
45+
color: $grayish-blue;
46+
}
47+
}

‎assets/styles/layout/_body.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/* || Body Element
2+
*************************/
3+
body {
4+
background-color: $light-gray;
5+
font-family: $outfit;
6+
}
7+
8+
/* || Main Element
9+
*************************/
10+
main {
11+
height: 100vh;
12+
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}

‎assets/styles/styles.css‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
/* || main scss styles
2+
*************************/
3+
/* || import base styles
4+
*************************/
15
/* || Fonts Imports ('Outfit')
26
*************************/
37
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
@@ -19,20 +23,26 @@
1923
box-sizing: border-box;
2024
}
2125

22-
/* || Body Elements
26+
/* || import layout styles
27+
*************************/
28+
/* || Body Element
2329
*************************/
2430
body {
2531
background-color: #d6e2f0;
2632
font-family: "Outfit", sans-serif;
2733
}
2834

35+
/* || Main Element
36+
*************************/
2937
main {
3038
height: 100vh;
3139
display: flex;
3240
justify-content: center;
3341
align-items: center;
3442
}
3543

44+
/* || import components styles
45+
*************************/
3646
/* || Card Component
3747
*************************/
3848
.card {
@@ -41,31 +51,35 @@ main {
4151
border-radius: 20px;
4252
background-color: #ffffff;
4353
box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
54+
/* || Image
55+
*************************/
56+
/* || Text Content
57+
*************************/
58+
/* || Title
59+
*************************/
60+
/* || Description
61+
*************************/
4462
}
45-
4663
.card__img {
4764
width: 100%;
4865
height: auto;
4966
border-radius: 10px;
5067
display: block;
5168
}
52-
5369
.card__content {
5470
margin-top: 1.5rem;
5571
padding: 0 1rem;
5672
text-align: center;
5773
}
58-
5974
.card__title {
6075
font-size: 1.375rem;
6176
color: #1f3251;
6277
}
63-
6478
.card__description {
6579
margin-top: 1rem;
6680
font-size: 0.9375rem;
6781
font-weight: 400;
6882
letter-spacing: 0.1875px;
6983
line-height: 1.1875rem;
7084
color: #7b879d;
71-
}
85+
}

‎assets/styles/styles.scss‎

Lines changed: 8 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,15 @@
1-
/* || Fonts Imports ('Outfit')
1+
/* || main scss styles
22
*************************/
3-
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
43

5-
/* || Global Variables
4+
/* || import base styles
65
*************************/
7-
/* || Colors
8-
*************************/
9-
$white: #ffffff;
10-
$light-gray: #d6e2f0;
11-
$grayish-blue: #7b879d;
12-
$dark-blue: #1f3251;
13-
14-
/* || Fonts
15-
*************************/
16-
$outfit: "Outfit", sans-serif;
17-
18-
/* || Spacing
19-
*************************/
20-
$space-xs: 0.5rem;
21-
$space-sm: 1rem;
22-
$space-md: 1.5rem;
23-
$space-lg: 2.5rem;
6+
@import 'base/variables';
7+
@import 'base/reset';
248

25-
/* || Font sizes
9+
/* || import layout styles
2610
*************************/
27-
$fs-sm: 0.9375rem;
28-
$fs-md: 1.375rem;
11+
@import 'layout/body';
2912

30-
/* || Reset
13+
/* || import components styles
3114
*************************/
32-
* {
33-
margin: 0;
34-
padding: 0;
35-
box-sizing: border-box;
36-
}
37-
38-
/* || Body Elements
39-
*************************/
40-
body {
41-
background-color: $light-gray;
42-
font-family: $outfit;
43-
}
44-
45-
main {
46-
height: 100vh;
47-
48-
display: flex;
49-
justify-content: center;
50-
align-items: center;
51-
}
52-
53-
/* || Card Component
54-
*************************/
55-
.card {
56-
padding: $space-sm $space-sm $space-lg;
57-
max-width: 320px;
58-
border-radius: 20px;
59-
60-
background-color: $white;
61-
box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.0476518);
62-
63-
&__img {
64-
width: 100%;
65-
height: auto;
66-
border-radius: 10px;
67-
display: block;
68-
}
69-
70-
&__content {
71-
margin-top: $space-md;
72-
padding: 0 $space-sm;
73-
text-align: center;
74-
}
75-
76-
77-
&__title {
78-
font-size: $fs-md;
79-
color: $dark-blue;
80-
}
81-
82-
&__description {
83-
margin-top: $space-sm;
84-
85-
font-size: $fs-sm;
86-
font-weight: 400;
87-
letter-spacing: 0.1875px;
88-
line-height: 1.1875rem;
89-
90-
color: $grayish-blue;
91-
}
92-
}
15+
@import 'components/card';

0 commit comments

Comments
 (0)