Skip to content

Commit 1b9951e

Browse files
sanjay-kvsanjay-kv
committed
added counter UI changes to Github API metrics
1 parent 445c419 commit 1b9951e

2 files changed

Lines changed: 155 additions & 116 deletions

File tree

‎src/components/Community/LandingCommunity.css‎

Lines changed: 139 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -5,46 +5,58 @@
55
}
66

77
.landing-community .landing-community__header {
8-
display: flex;
9-
justify-content: space-between;
10-
align-items: center;
118
max-width: 100%;
129
margin-bottom: 2rem;
1310
padding: 0 1rem;
14-
flex-wrap: wrap;
11+
}
12+
13+
.landing-community .landing-community__eyebrow {
14+
display: inline-flex;
15+
align-items: center;
16+
gap: 0.5rem;
17+
margin-bottom: 0.75rem;
18+
font-size: 0.75rem;
19+
font-weight: 600;
20+
letter-spacing: 0.15em;
21+
text-transform: uppercase;
22+
color: #16a34a;
23+
font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
24+
}
25+
26+
[data-theme="dark"] .landing-community .landing-community__eyebrow {
27+
color: #4ade80;
1528
}
1629

1730
.landing-community .landing-community__header .landing-community__title {
18-
font-size: 2rem;
19-
line-height: 2rem;
31+
font-size: 2.25rem;
32+
line-height: 1.2;
2033
text-align: start;
21-
font-weight: 500;
34+
font-weight: 700;
35+
letter-spacing: -0.02em;
2236
padding: 0;
37+
margin: 0;
38+
color: #0f172a;
39+
font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
2340
}
2441

25-
.landing-community .landing-community__header .landing-community__highlight {
26-
font-weight: 600;
27-
color: var(--ifm-color-primary);
28-
text-shadow: 0 0 1px var(--ifm-color-primary);
29-
}
30-
31-
.landing-community .landing-community__header .landing-community__error {
32-
color: var(--ifm-color-warning);
33-
font-size: 0.9rem;
34-
margin-top: 0.5rem;
42+
[data-theme="dark"]
43+
.landing-community
44+
.landing-community__header
45+
.landing-community__title {
46+
color: #ffffff;
3547
}
3648

3749
.landing-community .landing-community__content {
3850
display: grid;
3951
grid-template-columns: 1fr 1fr;
40-
gap: 1rem;
41-
text-align: center;
52+
gap: 1.25rem;
53+
text-align: left;
4254
}
4355

4456
.landing-community .landing-community__content .landing-community__stats {
4557
display: grid;
4658
grid-template-columns: 1fr 1fr;
47-
gap: 1rem;
59+
gap: 1.25rem;
4860
}
4961

5062
.landing-community
@@ -53,16 +65,27 @@
5365
.landing-community__stat-item {
5466
display: flex;
5567
flex-direction: column;
56-
justify-content: center;
57-
align-items: center;
58-
padding: 1rem;
68+
justify-content: flex-start;
69+
align-items: flex-start;
70+
padding: 1.5rem;
5971
border-radius: 1rem;
60-
background-color: var(--ifm-color-background);
61-
box-shadow: 0 0 1px var(--ifm-color-primary);
72+
background-color: #ffffff;
73+
border: 1px solid rgba(0, 0, 0, 0.06);
74+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
6275
transition: all 0.3s ease;
6376
position: relative;
6477
}
6578

79+
[data-theme="dark"]
80+
.landing-community
81+
.landing-community__content
82+
.landing-community__stats
83+
.landing-community__stat-item {
84+
background-color: #161616;
85+
border: 1px solid rgba(255, 255, 255, 0.06);
86+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
87+
}
88+
6689
.landing-community
6790
.landing-community__content
6891
.landing-community__stats
@@ -78,8 +101,8 @@
78101
.landing-community__content
79102
.landing-community__stats
80103
.landing-community__stat-item.clickable:focus {
81-
transform: scale(1.02);
82-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
104+
transform: translateY(-3px);
105+
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
83106
outline: none;
84107
}
85108

@@ -93,38 +116,38 @@
93116
.landing-community
94117
.landing-community__content
95118
.landing-community__stats
96-
.landing-community__stat-item:hover {
97-
cursor: pointer;
98-
transform: scale(1.01);
99-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
119+
.landing-community__stat-item
120+
.landing-community__stat-value {
121+
font-size: 2.75rem;
122+
line-height: 1;
123+
font-weight: 700;
124+
letter-spacing: -0.02em;
125+
color: #0f172a;
126+
padding-bottom: 0.75rem;
127+
position: relative;
128+
font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
100129
}
101130

102-
.landing-community
131+
[data-theme="dark"]
132+
.landing-community
103133
.landing-community__content
104134
.landing-community__stats
105135
.landing-community__stat-item
106136
.landing-community__stat-value {
107-
font-size: 3.5rem;
108-
font-weight: 600;
109-
color: var(--ifm-color-primary);
110-
text-shadow: 0 0 1px var(--ifm-color-primary);
111-
padding-bottom: 0.5rem;
112-
position: relative;
137+
color: #f8fafc;
113138
}
114139

115140
/* SlotCounter styling */
116141
.landing-community .slot-counter-number {
117142
font-size: inherit;
118143
font-weight: inherit;
119144
color: inherit;
120-
text-shadow: inherit;
121145
}
122146

123147
.landing-community .slot-counter-separator {
124148
font-size: inherit;
125149
font-weight: inherit;
126150
color: inherit;
127-
text-shadow: inherit;
128151
}
129152

130153
.landing-community
@@ -153,12 +176,18 @@
153176
}
154177

155178
.landing-community .external-link-icon {
156-
font-size: 0.8em;
157-
margin-left: 0.3rem;
158-
opacity: 0.7;
179+
font-size: 0.45em;
180+
margin-left: 0.15rem;
181+
vertical-align: super;
182+
color: #16a34a;
183+
opacity: 0.9;
159184
transition: opacity 0.2s ease;
160185
}
161186

187+
[data-theme="dark"] .landing-community .external-link-icon {
188+
color: #4ade80;
189+
}
190+
162191
.landing-community
163192
.landing-community__content
164193
.landing-community__stats
@@ -172,20 +201,42 @@
172201
.landing-community__stats
173202
.landing-community__stat-item
174203
.landing-community__stat-description {
175-
font-size: 1rem;
176-
text-shadow: 0 0 1px var(--ifm-color-primary);
204+
font-size: 0.875rem;
205+
line-height: 1.5;
206+
color: #64748b;
207+
}
208+
209+
[data-theme="dark"]
210+
.landing-community
211+
.landing-community__content
212+
.landing-community__stats
213+
.landing-community__stat-item
214+
.landing-community__stat-description {
215+
color: #94a3b8;
177216
}
178217

218+
/* ── Image card with bottom overlay ── */
179219
.landing-community .landing-community__content .landing-community__info {
180220
width: 100%;
181-
padding: 1rem;
221+
padding: 0;
182222
border-radius: 1rem;
183-
background-color: var(--ifm-color-background);
184-
box-shadow: 0 0 1px var(--ifm-color-primary);
223+
overflow: hidden;
224+
background-color: #ffffff;
225+
border: 1px solid rgba(0, 0, 0, 0.06);
226+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
185227
transition: all 0.3s ease;
186228
position: relative;
187229
}
188230

231+
[data-theme="dark"]
232+
.landing-community
233+
.landing-community__content
234+
.landing-community__info {
235+
background-color: #161616;
236+
border: 1px solid rgba(255, 255, 255, 0.06);
237+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
238+
}
239+
189240
.landing-community
190241
.landing-community__content
191242
.landing-community__info.clickable {
@@ -198,93 +249,87 @@
198249
.landing-community
199250
.landing-community__content
200251
.landing-community__info.clickable:focus {
201-
transform: scale(1.01);
202-
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
252+
transform: translateY(-3px);
253+
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
203254
outline: none;
204255
}
205256

206257
.landing-community
207258
.landing-community__content
208259
.landing-community__info
209260
.landing-community__image {
261+
display: block;
210262
width: 100%;
263+
height: 100%;
211264
object-fit: cover;
212-
border-radius: 1rem;
213265
}
214266

215267
.landing-community
216268
.landing-community__content
217269
.landing-community__info
218-
.landing-community__info-text {
219-
margin-top: 1rem;
220-
padding: 0;
221-
font-size: 1rem;
222-
text-shadow: 0 0 1px var(--ifm-color-primary);
270+
.landing-community__info-overlay {
271+
position: absolute;
272+
left: 0;
273+
right: 0;
274+
bottom: 0;
275+
padding: 3.5rem 1.5rem 1.25rem;
276+
background: linear-gradient(
277+
to bottom,
278+
transparent 0%,
279+
rgba(0, 0, 0, 0.55) 45%,
280+
rgba(0, 0, 0, 0.8) 100%
281+
);
223282
}
224283

225284
.landing-community
226285
.landing-community__content
227286
.landing-community__info
228-
.landing-community__info-text
229-
.landing-community__link {
230-
color: var(--ifm-color-primary);
231-
text-shadow: 0 0 1px var(--ifm-color-primary);
232-
text-decoration: none;
233-
font-weight: 600;
287+
.landing-community__info-text {
288+
margin: 0 0 0.5rem;
289+
padding: 0;
290+
font-size: 0.9375rem;
291+
line-height: 1.5;
292+
color: #ffffff;
234293
}
235294

236295
.landing-community
237296
.landing-community__content
238297
.landing-community__info
239-
.landing-community__info-text
240-
.landing-community__link:hover {
241-
text-decoration: underline;
242-
}
243-
244-
.landing-community .external-link-indicator {
245-
display: flex;
298+
.landing-community__info-cta {
299+
display: inline-flex;
246300
align-items: center;
247-
justify-content: center;
248-
margin-top: 0.5rem;
249-
gap: 0.5rem;
250-
opacity: 0.7;
251-
transition: opacity 0.2s ease;
301+
gap: 0.35rem;
302+
font-size: 0.875rem;
303+
font-weight: 700;
304+
color: #ffffff;
252305
}
253306

254307
.landing-community
255308
.landing-community__content
256-
.landing-community__info.clickable:hover
257-
.external-link-indicator {
258-
opacity: 1;
309+
.landing-community__info
310+
.landing-community__info-cta
311+
.external-link-icon {
312+
font-size: 1em;
313+
margin-left: 0;
314+
vertical-align: baseline;
315+
color: #ffffff;
259316
}
260317

261318
@media screen and (max-width: 768px) {
262319
.landing-community .landing-community__content {
263320
grid-template-columns: 1fr;
264321
}
265322

323+
.landing-community .landing-community__header .landing-community__title {
324+
font-size: 1.75rem;
325+
}
326+
266327
.landing-community .landing-community__content .landing-community__stats {
267328
grid-template-columns: 1fr;
268329
}
269330

270331
.landing-community .landing-community__content .landing-community__info {
271332
width: 100%;
272-
}
273-
274-
.landing-community
275-
.landing-community__content
276-
.landing-community__info
277-
.landing-community__image {
278-
width: 100%;
279-
}
280-
281-
.landing-community
282-
.landing-community__content
283-
.landing-community__info
284-
.landing-community__info-text {
285-
margin-top: 1rem;
286-
padding: 0;
287-
font-size: 1rem;
288-
text-shadow: 0 0 1px var(--ifm-color-primary);
333+
min-height: 260px;
289334
}
290335
}

0 commit comments

Comments
 (0)