-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
112 lines (93 loc) · 2.41 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
/* Font */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@600;800&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Device Sizes */
--Mobile-width: 375px;
--Desktop-width: 1440px;
/* Colors */
--yellow: hsl(47, 88%, 63%);
--white: hsl(0, 0%, 100%);
--grey: hsl(0, 0%, 50%);
--black: hsl(0, 0%, 7%);
/* Typography */
--paragraph-font-family: Figtree sans-serif;
--paragaph-font-size: 16px;
--paragraph-font-weidht: 600;
/* Components */
/* Body */
--body-background-color: var(--yellow);
/* Card */
--card-max-width: 327px;
--card-margin-y: 155px;
--card-spacing: 24px;
--card-border-radius: 1.25rem;
--card-background-color: var(--white);
--card-border-color: var(--black);
--card-shadow-width: 8px;
/* Card Image */
--card-image-border-radius: 10px;
/* Tag */
--tag-border-radius: 4px;
--tag--padding: 4px 12px;
--tag-background-color: var(--yellow);
--tag-font-size: 0.75rem;
--tag-font-weight: 800;
--tag-text-color: var(--black);
/* Card Title */
--card-title-font-size: 1.25rem;
--card-title-font-weight: 800;
--card-title-hover-color: var(--yellow);
/* Card Footer */
--card-footer-spacing: 0.75rem;
--card-footer-image-size: 2rem;
}
body {
font-family: var(--paragraph-font-family);
font-size: var(--paragaph-font-size);
font-weight: var(--paragraph-font-weidht);
background-color: var(--body-background-color);
}
.card {
max-width: var(--card-max-width);
width: 100%;
display: flex;;
flex-direction: column;
margin: var(--card-margin-y) auto;
gap: var(--card-spacing);
padding: var(--card-spacing);
background-color: var(--card-background-color);
border: 1px solid var(--card-border-color);
border-radius: var(--card-border-radius);
box-shadow: var(--card-shadow-width) var(--card-shadow-width) 0 0;
}
.card__image {
border-radius: var(--card-image-border-radius);
}
.tag {
border-radius: var(--tag-border-radius);
padding: var(--tag--padding);
background-color: var(--tag-background-color);
font-weight: var(--tag-font-weight);
font-size: var(--tag-font-size);
color: var(--tag-text-color)
}
.card__title {
font-size: var(--card-title-font-size);
font-weight: var(--card-title-font-weight);
}
.card__title:hover {
color: var(--card-title-hover-color);
}
.card__footer {
display: flex;
gap: var(--card-footer-spacing);
}
.card__footer img {
width: var(--card-footer-image-size);
height: var(--card-footer-image-size);
}