Skip to content

Commit 6f43ade

Browse files
robertoglclaude
robertogl
and
claude
committed
Update page styling to match MathWorks corporate aesthetic
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent cbed202 commit 6f43ade

1 file changed

Lines changed: 84 additions & 70 deletions

File tree

‎index.html‎

Lines changed: 84 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -12,48 +12,49 @@
1212
}
1313

1414
:root {
15-
--bg: #f9fafb;
16-
--text: #1a1a1a;
17-
--text-muted: #57606a;
18-
--card-bg: #fff;
19-
--card-border: #d0d7de;
15+
--bg: #ffffff;
16+
--text: #333333;
17+
--text-muted: #6c6c6c;
18+
--card-bg: #ffffff;
19+
--card-border: #e0e0e0;
2020
--accent: #0076a8;
21-
--accent-light: #e5f3f8;
21+
--accent-light: #f5f5f5;
2222
--header-bg: #0076a8;
2323
--toggle-bg: rgba(255, 255, 255, 0.2);
24-
--tool-bg: #f0f4f8;
25-
--tool-border: #d0d7de;
24+
--tool-bg: #f5f5f5;
25+
--tool-border: #e0e0e0;
2626
}
2727

2828
[data-theme="dark"] {
29-
--bg: #0d1117;
30-
--text: #e6edf3;
31-
--text-muted: #8b949e;
32-
--card-bg: #161b22;
33-
--card-border: #30363d;
34-
--accent: #58a6ff;
35-
--accent-light: #1c3a5c;
36-
--header-bg: #003d57;
29+
--bg: #1c1c1c;
30+
--text: #e6e6e6;
31+
--text-muted: #a0a0a0;
32+
--card-bg: #2d2d2d;
33+
--card-border: #3d3d3d;
34+
--accent: #4db8d9;
35+
--accent-light: #2a3a42;
36+
--header-bg: #004b6b;
3737
--toggle-bg: rgba(255, 255, 255, 0.15);
38-
--tool-bg: #1c2128;
39-
--tool-border: #30363d;
38+
--tool-bg: #252525;
39+
--tool-border: #3d3d3d;
4040
}
4141

4242
body {
43-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
43+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
4444
background: var(--bg);
4545
color: var(--text);
46-
line-height: 1.6;
47-
padding: 2rem;
46+
line-height: 1.5;
47+
padding: 0;
4848
transition: background 0.3s, color 0.3s;
49+
font-size: 15px;
4950
}
5051

5152
header {
5253
text-align: center;
53-
margin-bottom: 3rem;
54-
padding: 2.5rem 1rem;
54+
margin-bottom: 0;
55+
padding: 3rem 1rem;
5556
background: var(--header-bg);
56-
border-radius: 8px;
57+
border-radius: 0;
5758
color: #fff;
5859
position: relative;
5960
overflow: hidden;
@@ -66,19 +67,22 @@
6667
left: -50%;
6768
width: 200%;
6869
height: 200%;
69-
background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 70%);
70+
background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
7071
pointer-events: none;
7172
}
7273

7374
header h1 {
74-
font-size: 2.5rem;
75-
margin-bottom: 0.5rem;
75+
font-size: 2rem;
76+
margin-bottom: 0.4rem;
7677
color: #fff;
78+
font-weight: 700;
79+
letter-spacing: -0.02em;
7780
}
7881

7982
header p {
80-
color: rgba(255, 255, 255, 0.85);
81-
font-size: 1.1rem;
83+
color: rgba(255, 255, 255, 0.9);
84+
font-size: 1rem;
85+
font-weight: 400;
8286
}
8387

8488
.theme-toggle {
@@ -103,30 +107,31 @@
103107
display: inline-block;
104108
margin-top: 0.75rem;
105109
padding: 0.5rem 1.2rem;
106-
background: rgba(255, 255, 255, 0.15);
107-
border: 1px solid rgba(255, 255, 255, 0.4);
108-
border-radius: 6px;
109-
color: #fff;
110+
background: #ffffff;
111+
border: none;
112+
border-radius: 4px;
113+
color: var(--accent);
110114
text-decoration: none;
111-
font-size: 0.95rem;
115+
font-size: 0.9rem;
116+
font-weight: 600;
112117
transition: background 0.2s;
113118
}
114119

115120
.open-matlab-btn:hover {
116-
background: rgba(255, 255, 255, 0.3);
121+
background: #e8e8e8;
117122
}
118123

119124
.intro-box {
120125
max-width: 1200px;
121-
margin: 0 auto 2rem;
122-
padding: 1.25rem 1.5rem;
123-
background: var(--card-bg);
124-
border: 1px solid var(--card-border);
125-
border-radius: 8px;
126+
margin: 0 auto;
127+
padding: 2rem 1.5rem;
128+
background: var(--accent-light);
129+
border: none;
130+
border-radius: 0;
126131
color: var(--text-muted);
127-
font-size: 0.95rem;
128-
line-height: 1.7;
129-
transition: background 0.3s, border-color 0.3s;
132+
font-size: 0.93rem;
133+
line-height: 1.6;
134+
transition: background 0.3s;
130135
}
131136

132137
.intro-box a {
@@ -141,40 +146,43 @@
141146
.section-heading {
142147
max-width: 1200px;
143148
margin: 2.5rem auto 1.25rem;
144-
font-size: 1.6rem;
149+
padding: 0 1.5rem 0.5rem;
150+
font-size: 1.4rem;
151+
font-weight: 600;
145152
color: var(--text);
146-
border-bottom: 2px solid var(--card-border);
147-
padding-bottom: 0.5rem;
153+
border-bottom: 1px solid var(--card-border);
148154
}
149155

150156
.projects {
151157
display: grid;
152-
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
153-
gap: 2rem;
158+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
159+
gap: 1.25rem;
154160
max-width: 1200px;
155161
margin: 0 auto;
162+
padding: 0 1.5rem;
156163
}
157164

158165
.card {
159166
background: var(--card-bg);
160167
border: 1px solid var(--card-border);
161-
border-radius: 8px;
168+
border-radius: 4px;
162169
padding: 0;
163170
display: flex;
164171
flex-direction: column;
165-
transition: transform 0.2s, box-shadow 0.2s, background 0.3s, border-color 0.3s;
172+
transition: transform 0.15s, box-shadow 0.15s, background 0.3s, border-color 0.3s;
166173
opacity: 0;
167174
animation: fadeInUp 0.4s ease forwards;
168175
overflow: hidden;
176+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
169177
}
170178

171179
.card:hover {
172-
transform: translateY(-3px);
173-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
180+
transform: translateY(-2px);
181+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
174182
}
175183

176184
[data-theme="dark"] .card:hover {
177-
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
185+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
178186
}
179187

180188
@keyframes fadeInUp {
@@ -209,15 +217,16 @@
209217
}
210218

211219
.card-body {
212-
padding: 1.25rem 1.5rem 1.5rem;
220+
padding: 1rem 1.25rem 1.25rem;
213221
display: flex;
214222
flex-direction: column;
215223
flex: 1;
216224
}
217225

218226
.card-title {
219-
font-size: 1.3rem;
220-
margin-bottom: 0.5rem;
227+
font-size: 1.05rem;
228+
font-weight: 600;
229+
margin-bottom: 0.4rem;
221230
}
222231

223232
.card-title a {
@@ -231,9 +240,9 @@
231240

232241
.card-summary {
233242
color: var(--text-muted);
234-
font-size: 0.9rem;
235-
margin-bottom: 1rem;
236-
line-height: 1.6;
243+
font-size: 0.85rem;
244+
margin-bottom: 0.75rem;
245+
line-height: 1.5;
237246
flex: 1;
238247
}
239248

@@ -248,9 +257,9 @@
248257
background: var(--tool-bg);
249258
border: 1px solid var(--tool-border);
250259
color: var(--text-muted);
251-
padding: 0.2rem 0.6rem;
252-
border-radius: 4px;
253-
font-size: 0.75rem;
260+
padding: 0.15rem 0.5rem;
261+
border-radius: 3px;
262+
font-size: 0.72rem;
254263
font-weight: 500;
255264
white-space: nowrap;
256265
}
@@ -265,9 +274,9 @@
265274
.topic {
266275
background: var(--accent-light);
267276
color: var(--accent);
268-
padding: 0.12rem 0.55rem;
269-
border-radius: 12px;
270-
font-size: 0.75rem;
277+
padding: 0.1rem 0.5rem;
278+
border-radius: 3px;
279+
font-size: 0.72rem;
271280
font-weight: 500;
272281
}
273282

@@ -284,7 +293,7 @@
284293
padding: 1.5rem;
285294
text-align: center;
286295
color: var(--text-muted);
287-
font-size: 0.85rem;
296+
font-size: 0.82rem;
288297
border-top: 1px solid var(--card-border);
289298
}
290299

@@ -300,14 +309,19 @@
300309
@media (max-width: 600px) {
301310
.projects {
302311
grid-template-columns: 1fr;
312+
padding: 0 1rem;
313+
}
314+
315+
header h1 {
316+
font-size: 1.5rem;
303317
}
304318

305-
body {
306-
padding: 1rem;
319+
.section-heading {
320+
padding: 0 1rem 0.5rem;
307321
}
308322

309-
header h1 {
310-
font-size: 1.75rem;
323+
.intro-box {
324+
padding: 1.5rem 1rem;
311325
}
312326

313327
.card-image {

0 commit comments

Comments
 (0)