Skip to content

Commit e0ed89e

Browse files
TechQueryTechQuery
committed
[refactor] fix many layouts & styles of CodeX codes
1 parent 8ef8dd2 commit e0ed89e

23 files changed

Lines changed: 2188 additions & 838 deletions

‎components/Activity/Hackathon/ActionHub.module.less‎

Lines changed: 73 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
}
1717

1818
.registerCard {
19+
;
1920
background: linear-gradient(135deg, rgba(44, 232, 255, 0.08), rgba(123, 97, 255, 0.14));
2021
}
2122

@@ -25,8 +26,23 @@
2526
}
2627

2728
.regEyebrow,
28-
.entryEyebrow,
29+
.entryEyebrow {
30+
margin: 0;
31+
color: @cyan;
32+
font-weight: 700;
33+
font-size: 0.75rem;
34+
font-family: @heading;
35+
letter-spacing: 0.12em;
36+
text-transform: uppercase;
37+
}
38+
2939
.entryStep {
40+
color: @cyan;
41+
font-weight: 700;
42+
font-size: 0.72rem;
43+
font-family: @heading;
44+
letter-spacing: 0.1em;
45+
text-transform: uppercase;
3046
}
3147

3248
.regTitle,
@@ -40,7 +56,7 @@
4056
}
4157

4258
.regTitle {
43-
margin-top: 0.4rem;
59+
margin-top: 0;
4460
}
4561

4662
.regDesc,
@@ -50,59 +66,91 @@
5066
}
5167

5268
.regDesc {
53-
margin: 0.9rem 0 1.2rem;
69+
margin: 0;
5470
}
5571

5672
.regActions,
5773
.entryLinks {
58-
display: flex;
59-
flex-wrap: wrap;
60-
gap: 0.9rem;
74+
min-width: 0;
6175
}
6276

6377
.actionButton {
78+
;
79+
}
80+
81+
.actionButtonGhost {
82+
;
83+
border-color: rgba(255, 255, 255, 0.18);
84+
color: @muted;
85+
86+
&:hover {
87+
border-color: rgba(44, 232, 255, 0.36);
88+
color: @cyan;
89+
}
6490
}
6591

66-
.actionButtonGhost,
6792
.entryLink {
93+
border: 1px solid rgba(44, 232, 255, 0.24);
94+
border-radius: 8px;
95+
background: rgba(44, 232, 255, 0.06);
96+
padding: 0.42rem 0.85rem;
97+
color: @cyan;
98+
font-size: 0.8rem;
99+
font-family: @heading;
100+
letter-spacing: 0.06em;
101+
text-decoration: none;
102+
text-transform: uppercase;
103+
104+
&:hover {
105+
border-color: rgba(44, 232, 255, 0.48);
106+
background: rgba(44, 232, 255, 0.12);
107+
color: @cyan;
108+
text-decoration: none;
109+
}
68110
}
69111

70112
.regFacts {
71-
display: flex;
72-
flex-wrap: wrap;
73-
gap: 0.75rem;
74-
margin: 1.3rem 0 0;
113+
margin: 0;
75114

76115
li {
77-
padding: 0.48rem 0.85rem;
116+
border: 1px solid rgba(255, 255, 255, 0.1);
117+
border-radius: 999px;
118+
background: rgba(255, 255, 255, 0.05);
119+
padding: 0.44rem 0.9rem;
78120
color: @copy;
79-
font-size: 0.9rem;
121+
font-size: 0.82rem;
80122
}
81123
}
82124

83-
.entryHub {
84-
}
85-
86125
.entryHubHead {
87-
margin-bottom: 1.25rem;
126+
margin-bottom: 0;
88127
}
89128

90129
.entryTitle {
91-
margin-top: 0.35rem;
130+
margin-top: 0;
92131
font-size: 1.55rem;
93132
}
94133

95134
.entryCard {
135+
;
136+
transition:
137+
transform 0.22s ease,
138+
border-color 0.22s ease;
96139
padding: 1.3rem;
97140
height: 100%;
141+
142+
&:hover {
143+
transform: translateY(-3px);
144+
border-color: rgba(44, 232, 255, 0.26);
145+
}
98146
}
99147

100148
.entryStep {
101149
color: @cyan;
102150
}
103151

104152
.entryCard h4 {
105-
margin: 0.55rem 0 0.45rem;
153+
margin: 0;
106154
color: #fff;
107155
font-size: 1.02rem;
108156
font-family: @heading;
@@ -113,17 +161,17 @@
113161
}
114162

115163
.entryMetaRow {
116-
display: flex;
117-
flex-wrap: wrap;
118-
gap: 0.6rem;
119-
margin: 1rem 0;
164+
margin: 0;
120165
}
121166

122167
.entryMeta {
123-
padding: 0.35rem 0.7rem;
168+
border-radius: 999px;
169+
background: rgba(255, 201, 77, 0.12);
170+
padding: 0.28rem 0.7rem;
124171
color: @gold;
172+
font-weight: 700;
125173
font-size: 0.72rem;
126174
font-family: @heading;
127-
letter-spacing: 0.06em;
175+
letter-spacing: 0.08em;
128176
text-transform: uppercase;
129177
}

‎components/Activity/Hackathon/ActionHub.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,19 +40,21 @@ const ActionEntryCard: FC<{ entry: HackathonActionHubEntry; step: string }> = ({
4040
<span className={styles.entryStep}>
4141
{step} · {entry.eyebrow}
4242
</span>
43-
<h4>{entry.title}</h4>
43+
<h4 className="mt-2 mb-2">{entry.title}</h4>
4444
<p>{entry.description}</p>
4545

46-
<div className={styles.entryMetaRow}>
47-
<span className={styles.entryMeta}>{entry.count}</span>
48-
<span className={styles.entryMeta}>{entry.eyebrow}</span>
46+
<div className={`${styles.entryMetaRow} d-flex flex-wrap gap-2 my-3`}>
47+
<span className={`${styles.entryMeta} d-inline-flex align-items-center`}>{entry.count}</span>
48+
<span className={`${styles.entryMeta} d-inline-flex align-items-center`}>
49+
{entry.eyebrow}
50+
</span>
4951
</div>
5052

51-
<nav className={styles.entryLinks} aria-label={entry.title}>
53+
<nav className={`${styles.entryLinks} d-flex flex-wrap gap-3`} aria-label={entry.title}>
5254
{entry.links.map(link => (
5355
<a
5456
key={`${link.label}-${link.href}`}
55-
className={styles.entryLink}
57+
className={`${styles.entryLink} d-inline-flex align-items-center`}
5658
href={link.href}
5759
{...(link.external && { target: '_blank', rel: 'noreferrer' })}
5860
>
@@ -78,16 +80,16 @@ export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>>
7880
<div className={styles.registerWrap}>
7981
<article className={styles.registerCard}>
8082
<div className={styles.registerCardInner}>
81-
<p className={styles.regEyebrow}>{title}</p>
82-
<h2 className={styles.regTitle}>{primaryTitle}</h2>
83-
<p className={styles.regDesc}>{primaryDescription}</p>
83+
<p className={`${styles.regEyebrow} mb-1`}>{title}</p>
84+
<h2 className={`${styles.regTitle} mt-2`}>{primaryTitle}</h2>
85+
<p className={`${styles.regDesc} mt-3 mb-4`}>{primaryDescription}</p>
8486

85-
<nav className={styles.regActions} aria-label={title}>
87+
<nav className={`${styles.regActions} d-flex flex-wrap gap-3`} aria-label={title}>
8688
{primaryAction && <HackathonActionHubLink action={primaryAction} variant="primary" />}
8789
{children}
8890
</nav>
8991

90-
<ul className={`list-unstyled ${styles.regFacts}`}>
92+
<ul className={`list-unstyled ${styles.regFacts} d-flex flex-wrap gap-2 mt-4`}>
9193
{facts.map(fact => (
9294
<li key={fact}>{fact}</li>
9395
))}
@@ -96,9 +98,9 @@ export const HackathonActionHub: FC<PropsWithChildren<HackathonActionHubProps>>
9698
</article>
9799

98100
<div className={styles.entryHub}>
99-
<header className={styles.entryHubHead}>
100-
<p className={styles.entryEyebrow}>{subtitle}</p>
101-
<h3 className={styles.entryTitle}>{title}</h3>
101+
<header className={`${styles.entryHubHead} mb-4`}>
102+
<p className={`${styles.entryEyebrow} mb-1`}>{subtitle}</p>
103+
<h3 className={`${styles.entryTitle} mt-2`}>{title}</h3>
102104
</header>
103105

104106
<Row as="ol" className="list-unstyled g-3 mb-0">

‎components/Activity/Hackathon/Awards.module.less‎

Lines changed: 104 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,19 @@
11
@import './theme.less';
22

3+
;
4+
35
.supportEyebrow {
6+
margin: 0 0 0.4rem;
7+
color: @cyan;
8+
font-weight: 700;
9+
font-size: 0.75rem;
10+
font-family: @heading;
11+
letter-spacing: 0.12em;
12+
text-transform: uppercase;
13+
}
14+
15+
.supportCopy {
16+
min-width: 0;
417
}
518

619
.awardsGrid {
@@ -9,8 +22,75 @@
922
gap: 1rem;
1023
}
1124

25+
.judgingCard {
26+
margin-top: 0;
27+
border: 1px solid rgba(255, 255, 255, 0.1);
28+
border-radius: 22px;
29+
background:
30+
radial-gradient(circle at top right, rgba(255, 201, 77, 0.08), transparent 30%),
31+
linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
32+
rgba(8, 18, 39, 0.82);
33+
padding: 1.4rem;
34+
}
35+
36+
.judgingTitle {
37+
margin: 0;
38+
color: #fff;
39+
font-size: 1rem;
40+
font-family: @heading;
41+
letter-spacing: 0.08em;
42+
text-transform: uppercase;
43+
}
44+
45+
.criteriaGrid {
46+
display: grid;
47+
grid-template-columns: repeat(2, minmax(0, 1fr));
48+
gap: 0.9rem;
49+
50+
@media (max-width: 991px) {
51+
grid-template-columns: 1fr;
52+
}
53+
}
54+
55+
.criterion {
56+
grid-template-columns: auto 1fr;
57+
border: 1px solid rgba(255, 255, 255, 0.08);
58+
border-radius: 14px;
59+
background: rgba(255, 255, 255, 0.03);
60+
padding: 0.9rem;
61+
}
62+
63+
.criterionWeight {
64+
color: @cyan;
65+
font-size: 1.15rem;
66+
font-family: @heading;
67+
}
68+
69+
.criterionTitle {
70+
display: block;
71+
color: #fff;
72+
font-size: 0.92rem;
73+
line-height: 1.45;
74+
}
75+
76+
.criterionDescription {
77+
margin: 0;
78+
color: @muted;
79+
font-size: 0.87rem;
80+
line-height: 1.6;
81+
}
82+
1283
.badgeTile {
84+
;
85+
transition:
86+
transform 0.22s ease,
87+
border-color 0.22s ease;
1388
overflow: hidden;
89+
90+
&:hover {
91+
transform: translateY(-4px);
92+
border-color: rgba(255, 201, 77, 0.32);
93+
}
1494
}
1595

1696
.badgeArtWrap {
@@ -91,10 +171,11 @@
91171
}
92172

93173
.supportCard {
174+
;
94175
display: grid;
95176
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
96177
gap: 1.25rem;
97-
margin-top: 1.4rem;
178+
margin-top: 0;
98179
padding: 1.55rem;
99180

100181
@media (max-width: 1199px) {
@@ -103,7 +184,7 @@
103184
}
104185

105186
.supportTitle {
106-
margin-top: 0.35rem;
187+
margin-top: 0;
107188
font-size: 1.45rem;
108189
}
109190

@@ -114,10 +195,28 @@
114195
gap: 0.8rem;
115196
}
116197

198+
.supportLink {
199+
justify-self: start;
200+
margin-top: 0;
201+
border: 1px solid rgba(44, 232, 255, 0.3);
202+
border-radius: 10px;
203+
background: rgba(44, 232, 255, 0.08);
204+
padding: 0.65rem 1rem;
205+
color: #fff;
206+
font-size: 0.82rem;
207+
font-family: @heading;
208+
letter-spacing: 0.06em;
209+
text-decoration: none;
210+
text-transform: uppercase;
211+
212+
&:hover {
213+
border-color: rgba(44, 232, 255, 0.52);
214+
color: #fff;
215+
text-decoration: none;
216+
}
217+
}
218+
117219
.partnerLink {
118-
display: flex;
119-
justify-content: center;
120-
align-items: center;
121220
border: 1px solid rgba(255, 255, 255, 0.08);
122221
border-radius: 20px;
123222
background: rgba(255, 255, 255, 0.04);

0 commit comments

Comments
 (0)