-
Notifications
You must be signed in to change notification settings - Fork 1
/
main.sass
146 lines (121 loc) · 2.84 KB
/
main.sass
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
*
padding: 0
margin: 0
box-sizing: border-box
$background-body: #0A0C1C
$background-card: hsl(244, 38%, 16%)
$color-accent: hsl(277, 64%, 61%)
$color-main-heading: hsl(0, 0%, 100%)
$color-stats: hsl(0, 0%, 100%)
$color-main-text: hsla(0, 0%, 100%, 0.75)
$color-stat-headings: hsla(0, 0%, 100%, 0.6)
$font-main: 'Inter', sans-serif
$font-stat-label: 'Lexend Deca', sans-serif
$layout-breakpoint-big: 1110px
$mobile-side-padding: 1.96875rem
$large-side-padding-left: 6.5%
$large-side-padding-right: 8.6%
body
background: $background-body
margin-top: 3rem
margin-bottom: 3rem
div.wrapper
height: 100%
display: flex
justify-content: center
align-items: center
flex-wrap: wrap
// Component Styles
div.stats-component
width: 20.4375rem
background: $background-card
color: $color-main-text
font-family: $font-main
box-shadow: 0px 20px 20px -10px rgba(23, 25, 41, 0.203087)
border-radius: 0.5rem
div.text
padding: 0 $mobile-side-padding 0 $mobile-side-padding
text-align: center
h2
font-style: normal
font-weight: bold
font-size: 1.75rem
line-height: 2rem
color: $color-main-heading
margin: 2.5rem 0 1rem 0
em
color: $color-accent
font-style: normal
p
font-style: normal
font-weight: normal
font-size: 0.9375rem
line-height: 1.5625rem
color: $color-main-text
margin-bottom: 2.5rem
ul
text-align: center
margin-bottom: 2rem
li
list-style: none
font-style: normal
font-weight: bold
font-size: 1.5rem
line-height: 1.8125rem
color: $color-stats
margin: 0 0 1.5rem 0
span.label
font-weight: 500
font-size: 0.75rem
line-height: 1.5625rem
letter-spacing: 0.0625rem
text-transform: uppercase
color: $color-stat-headings
display: inline-block
width: 100%
div.graphic
background: $color-accent
height: 15rem
border-radius: 0.5rem 0.5rem 0 0
img
width: 100%
object-fit: cover
mix-blend-mode: multiply
opacity: 0.75
@media (min-width: $layout-breakpoint-big)
body
margin: 0
div.wrapper
height: 100vh
// Component Styles
div.stats-component
width: 100%
height: 27.875rem
max-width: 69.375rem
display: flex
justify-content: space-between
div.text
order: -1
max-width: 51.4%
padding: 0 $large-side-padding-right 0 $large-side-padding-left
text-align: left
div.graphic
width: 48.6%
height: 100%
border-radius: 0 0.5rem 0.5rem 0
img
height: 100%
object-fit: cover
h2
margin: 4.4375rem 0 1.5625rem 0
font-size: 2.25rem
line-height: 2.75rem
p
margin-right: 1rem
margin-bottom: 4.5rem
ul
text-align: left
li
float: left
margin: 0
padding: 0