Skip to content

Commit 6d7903b

Browse files
john-b-yangjohn-b-yang
committed
Add animations
1 parent a51c14f commit 6d7903b

15 files changed

Lines changed: 366 additions & 103 deletions

File tree

‎static/css/core.css‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@
2222
--font-anta: 'Anta', sans-serif;
2323

2424
/* Font sizes */
25-
--text-xs: 0.75rem; /* 12px */
26-
--text-sm: 0.875rem; /* 14px */
27-
--text-base: 1rem; /* 16px */
25+
--text-xs: 0.7rem; /* 12px */
26+
--text-sm: 0.8rem; /* 14px */
27+
--text-base: 0.925rem; /* 16px */
2828
--text-md: 1.125rem; /* 18px */
2929
--text-lg: 1.25rem; /* 20px */
3030
--text-xl: 1.5rem; /* 24px */
@@ -90,4 +90,19 @@
9090
justify-content: center;
9191
margin-bottom: 1em;
9292
padding: 2rem;
93+
}
94+
95+
/* Logo styling for dark mode */
96+
img[src*="anthropic.svg"],
97+
img[src*="xai.svg"],
98+
img[src*="openai.svg"] {
99+
/* No filter in light mode - keeps original colors */
100+
filter: none;
101+
}
102+
103+
:root[data-theme="dark"] img[src*="anthropic.svg"],
104+
:root[data-theme="dark"] img[src*="xai.svg"],
105+
:root[data-theme="dark"] img[src*="openai.svg"] {
106+
/* White filter for dark mode */
107+
filter: brightness(0) invert(1);
93108
}

‎static/css/homepage.css‎

Lines changed: 148 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@
55
font-family: var(--font-anta);
66
}
77

8+
.hsubtitle {
9+
text-align: center;
10+
font-family: var(--font-anta);
11+
font-size: var(--text-xl);
12+
}
13+
814
.hborder {
915
height: 0.25rem;
1016
border: none;
@@ -16,18 +22,12 @@
1622
.hsubtext {
1723
font-size: var(--text-md);
1824
color: var(--muted);
19-
margin: 0.5em 0 1em 0;
20-
}
21-
22-
.hsubtitle{
23-
font-size: var(--text-xl);
24-
color: var(--muted);
25-
margin: 0.5em 0;
25+
margin: 0.5em 0 2em 0;
2626
}
2727

2828
.h2columns {
2929
display: grid;
30-
grid-template-columns: 55% 38%;
30+
grid-template-columns: 50% 50%;
3131
gap: 1.5rem;
3232
margin-top: 0;
3333
justify-content: center;
@@ -36,38 +36,171 @@
3636
.h3columns {
3737
display: grid;
3838
grid-template-columns: 33% 33% 33%;
39-
gap: 2rem;
39+
gap: 1rem;
4040
margin-top: 0;
4141
}
4242

4343
.hfeature {
4444
border: 1px solid var(--border);
45-
border-radius: 0.5rem;
4645
padding: 0.75rem 1rem;
4746
margin-bottom: 0.5rem;
4847
}
4948

5049
.hfeature span {
51-
font-size: var(--text-md);
5250
font-weight: var(--weight-bold);
5351
}
5452

55-
.hfeature svg {
53+
.hfeature img {
5654
height: 1rem;
5755
width: 1rem;
5856
vertical-align: middle;
5957
margin-right: 0.1em;
6058
display: inline-block;
6159
transform: translateY(-0.12em);
62-
color: var(--accent);
60+
/* Green filter for accent color */
61+
filter: invert(57%) sepia(89%) saturate(1493%) hue-rotate(101deg) brightness(98%) contrast(101%);
62+
}
63+
64+
:root[data-theme="dark"] .hfeature img {
65+
/* Brighter green filter for dark mode accent */
66+
filter: invert(85%) sepia(47%) saturate(1739%) hue-rotate(75deg) brightness(103%) contrast(102%);
6367
}
6468

6569
.hfeature p {
6670
margin: 0.5em 0 0 0;
6771
font-size: var(--text-sm);
6872
}
6973

70-
.hthesis {
71-
width: 60%;
74+
.hsection {
75+
width: 70%;
7276
margin: 0 auto;
77+
}
78+
79+
.preview-image {
80+
width: 150%;
81+
display: block;
82+
content: url('/static/images/misc/preview.png');
83+
position: relative;
84+
left: 50%;
85+
transform: translateX(-50%);
86+
}
87+
88+
:root[data-theme="dark"] .preview-image {
89+
content: url('/static/images/misc/preview_light.png');
90+
}
91+
92+
.cta-buttons {
93+
display: flex;
94+
gap: 1em;
95+
flex-wrap: wrap;
96+
justify-content: center;
97+
}
98+
99+
.cta-button {
100+
display: inline-block;
101+
border: 1px solid var(--border);
102+
color: var(--fg);
103+
text-transform: uppercase;
104+
letter-spacing: 0.06em;
105+
font-weight: 800;
106+
background: transparent;
107+
transition: all 0.15s ease;
108+
}
109+
110+
.cta-button:hover {
111+
border-color: var(--accent);
112+
color: var(--accent);
113+
background: color-mix(in oklab, var(--accent) 6%, transparent);
114+
}
115+
116+
.cta-button.primary {
117+
border-color: var(--accent);
118+
color: var(--bg);
119+
background: var(--accent);
120+
}
121+
122+
.cta-button.primary:hover {
123+
background: color-mix(in oklab, var(--accent) 85%, var(--fg));
124+
}
125+
126+
/* Logo Animations */
127+
.logo-container {
128+
display: flex;
129+
justify-content: center;
130+
align-items: center;
131+
height: 160px;
132+
margin-bottom: -10px;
133+
position: relative;
134+
}
135+
.logo {
136+
width: 160px;
137+
height: 160px;
138+
position: absolute;
139+
}
140+
.logo-left {
141+
animation: slideFromLeft 0.7s ease-out forwards;
142+
}
143+
.logo-right {
144+
animation: slideFromRight 0.7s ease-out forwards;
145+
}
146+
@keyframes slideFromLeft {
147+
0% {
148+
transform: translateX(-300px);
149+
}
150+
100% {
151+
transform: translateX(-40px);
152+
}
153+
}
154+
@keyframes slideFromRight {
155+
0% {
156+
transform: translateX(300px);
157+
}
158+
100% {
159+
transform: translateX(40px);
160+
}
161+
}
162+
163+
/* Title Word Animations */
164+
.title-word {
165+
display: inline-block;
166+
}
167+
.title-code {
168+
animation: codeMove 1.7s ease-in-out forwards;
169+
}
170+
.title-clash {
171+
animation: clashMove 1.7s ease-in-out forwards;
172+
}
173+
@keyframes codeMove {
174+
0%, 58.8% {
175+
transform: translateX(0);
176+
}
177+
70.6% {
178+
transform: translateX(-15px);
179+
}
180+
79.4% {
181+
transform: translateX(8px);
182+
}
183+
88.2% {
184+
transform: translateX(-3px);
185+
}
186+
100% {
187+
transform: translateX(0);
188+
}
189+
}
190+
@keyframes clashMove {
191+
0%, 58.8% {
192+
transform: translateX(0);
193+
}
194+
70.6% {
195+
transform: translateX(15px);
196+
}
197+
79.4% {
198+
transform: translateX(-8px);
199+
}
200+
88.2% {
201+
transform: translateX(3px);
202+
}
203+
100% {
204+
transform: translateX(0);
205+
}
73206
}

‎static/css/layout.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
/* Main styling */
22
html, body {
3-
font-family: var(--font-primary);
3+
-webkit-font-smoothing: antialiased;
4+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
45
font-size: var(--text-base);
56
background: var(--bg);
67
color: var(--fg);
8+
line-height: 1.6;
79
}
810

911
body {
@@ -53,7 +55,7 @@ nav {
5355
.nav-links {
5456
display: flex;
5557
list-style: none;
56-
gap: 0.5rem;
58+
gap: 1rem;
5759
}
5860

5961
.nav-links li {
@@ -88,9 +90,20 @@ nav {
8890
}
8991

9092
/* Leaderboard Table */
93+
.bordered {
94+
background: transparent;
95+
border: 1px solid var(--border);
96+
transition: border-color 0.15s ease;
97+
}
98+
99+
.bordered:hover {
100+
border-color: var(--accent);
101+
}
102+
91103
.leaderboard-table {
92104
width: 100%;
93105
border-collapse: collapse;
106+
font-size: var(--text-sm);
94107
}
95108

96109
.leaderboard-table th,
@@ -258,7 +271,6 @@ pre {
258271
padding: 1rem;
259272
overflow-x: auto;
260273
font-size: var(--text-sm);
261-
line-height: 1.5;
262274
color: var(--fg);
263275
}
264276

‎static/images/logos/clash_g.svg‎

Lines changed: 25 additions & 0 deletions
Loading

‎static/images/logos/clash_r.svg‎

Lines changed: 30 additions & 0 deletions
Loading

‎static/images/misc/cube.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎static/images/misc/loop.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎static/images/misc/preview.png‎

259 KB
Loading

‎static/images/misc/preview_light.png‎

266 KB
Loading

‎static/images/misc/profile.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)