Skip to content

Commit 4923328

Browse files
abdonmoralesabdonmorales
committed
Implemented UI fixes and complete the shift to Apple Liquid glass
1 parent 47c6115 commit 4923328

13 files changed

Lines changed: 482 additions & 247 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"@astrojs/react": "^4.4.2",
2424
"@types/react": "^19.1.10",
2525
"@types/react-dom": "^19.1.7",
26-
"astro": "^5.16.4",
26+
"astro": "^5.16.6",
2727
"react": "^19.1.1",
2828
"react-dom": "^19.1.1"
2929
},

‎src/components/CallToAction.astro‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,16 @@ const { href } = Astro.props;
2121
line-height: 1.1;
2222
border-radius: 999rem;
2323
overflow: hidden;
24-
background: var(--gradient-accent-orange);
25-
box-shadow: var(--shadow-md);
24+
background:
25+
linear-gradient(145deg, color-mix(in srgb, #fff 12%, transparent), transparent 50%),
26+
var(--gradient-accent-orange);
27+
border: 1px solid color-mix(in srgb, var(--accent-regular) 55%, transparent);
28+
box-shadow: 0 16px 36px color-mix(in srgb, var(--accent-regular) 28%, transparent);
29+
-webkit-backdrop-filter: blur(12px) saturate(1.25);
30+
backdrop-filter: blur(12px) saturate(1.25);
31+
transition: transform var(--theme-transition), box-shadow var(--theme-transition);
2632
white-space: nowrap;
33+
will-change: transform, box-shadow;
2734
}
2835

2936
@media (min-width: 20em) {
@@ -47,6 +54,11 @@ const { href } = Astro.props;
4754
background-color: hsla(var(--gray-999-basis), 0.3);
4855
}
4956

57+
a:hover {
58+
transform: translateY(-1px);
59+
box-shadow: 0 20px 42px color-mix(in srgb, var(--accent-regular) 32%, transparent);
60+
}
61+
5062
@media (min-width: 50em) {
5163
a {
5264
padding: 1.125rem 2.5rem;

‎src/components/ContactCTA.astro‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import CallToAction from './CallToAction.astro';
33
import Icon from './Icon.astro';
44
---
55

6-
<aside>
6+
<aside class="contact-cta glass-panel flush">
77
<h2>Interested in working together?</h2>
88
<CallToAction href="mailto:abdonmorales@utexas.edu">
99
Send Me a Message
@@ -12,16 +12,16 @@ import Icon from './Icon.astro';
1212
</aside>
1313

1414
<style>
15-
aside {
15+
.contact-cta {
1616
display: flex;
1717
flex-direction: column;
1818
align-items: center;
19-
gap: 3rem;
20-
border-top: 1px solid var(--gray-800);
21-
border-bottom: 1px solid var(--gray-800);
22-
padding: 5rem 1.5rem;
23-
background-color: var(--gray-999_40);
24-
box-shadow: var(--shadow-sm);
19+
gap: 2.5rem;
20+
padding: clamp(3rem, 5vw, 4.25rem) clamp(1.5rem, 3vw, 2.75rem);
21+
border-radius: 1.75rem;
22+
box-shadow: var(--glass-shadow-medium);
23+
backdrop-filter: var(--glass-blur-medium);
24+
-webkit-backdrop-filter: var(--glass-blur-medium);
2525
}
2626

2727
h2 {
@@ -31,8 +31,8 @@ import Icon from './Icon.astro';
3131
}
3232

3333
@media (min-width: 50em) {
34-
aside {
35-
padding: 7.5rem;
34+
.contact-cta {
35+
padding: clamp(3.5rem, 5vw, 5.5rem);
3636
flex-direction: row;
3737
flex-wrap: wrap;
3838
justify-content: space-between;

‎src/components/Footer.astro‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const currentYear = new Date().getFullYear();
44
const endCopyYear = new Date().getFullYear() + 2;
55
---
66

7-
<footer>
7+
<footer class="footer-shell glass-panel flush">
88
<div class="group">
99
<p>
1010
Designed & Developed in Austin, Texas with <a href="https://astro.build/">Astro 5.14.1</a>
@@ -19,26 +19,29 @@ const endCopyYear = new Date().getFullYear() + 2;
1919
</p>
2020
</footer>
2121
<style>
22-
footer {
22+
.footer-shell {
2323
display: flex;
2424
flex-direction: column;
25-
gap: 3rem;
25+
gap: 2rem;
2626
margin-top: auto;
27-
padding: 3rem 2rem 3rem;
27+
padding: 2.5rem clamp(1.5rem, 3vw, 3rem);
2828
text-align: center;
2929
color: var(--gray-400);
3030
font-size: var(--text-sm);
31+
border-radius: 1.5rem;
32+
backdrop-filter: var(--glass-blur-light);
33+
-webkit-backdrop-filter: var(--glass-blur-light);
3134
}
3235

33-
footer a {
36+
.footer-shell a {
3437
color: var(--gray-400);
3538
text-decoration: 1px solid underline transparent;
3639
text-underline-offset: 0.25em;
3740
transition: text-decoration-color var(--theme-transition);
3841
}
3942

40-
footer a:hover,
41-
footer a:focus {
43+
.footer-shell a:hover,
44+
.footer-shell a:focus {
4245
text-decoration-color: currentColor;
4346
}
4447

@@ -56,10 +59,10 @@ const endCopyYear = new Date().getFullYear() + 2;
5659
}
5760

5861
@media (min-width: 50em) {
59-
footer {
62+
.footer-shell {
6063
flex-direction: row;
6164
justify-content: space-between;
62-
padding: 2.5rem 5rem;
65+
padding: 2.5rem clamp(2rem, 4vw, 4rem);
6366
}
6467

6568
.group {

‎src/components/Nav.astro‎

Lines changed: 85 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
2121
];
2222
---
2323

24-
<nav>
24+
<nav class="nav-shell glass-panel flush">
2525
<div class="menu-header">
2626
<a href="/" class="site-title">
2727
<Icon icon="terminal-window" color="var(--accent-regular)" size="1.6em" gradient />
@@ -174,19 +174,21 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
174174
z-index: 9999;
175175
position: relative;
176176
font-family: var(--font-brand);
177-
}
178-
179-
.nav-controls {
177+
width: min(100%, calc(var(--page-max-width) + 3rem));
178+
margin-inline: auto;
179+
padding: clamp(0.75rem, 2vw, 1.25rem);
180180
display: flex;
181-
align-items: center;
182-
gap: 0.5rem;
181+
flex-direction: column;
182+
gap: 0.75rem;
183+
border-radius: 1.5rem;
183184
}
184185

185186
.menu-header {
186187
display: flex;
187188
justify-content: space-between;
188-
gap: 0.5rem;
189-
padding: 1.5rem;
189+
align-items: center;
190+
gap: 0.75rem;
191+
padding: 0.35rem 0.5rem 0.35rem 0.75rem;
190192
}
191193

192194
.site-title {
@@ -196,28 +198,39 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
196198
line-height: 1.1;
197199
color: var(--gray-0);
198200
text-decoration: none;
201+
text-shadow: 0 1px 0 color-mix(in srgb, #fff 30%, transparent);
199202
}
200203

201204
.menu-button {
202205
position: relative;
203206
display: flex;
204-
border: 0;
205207
border-radius: 999rem;
206-
padding: 0.5rem;
207-
font-size: 1.5rem;
208-
color: var(--gray-300);
209-
background: radial-gradient(var(--gray-900), var(--gray-800) 150%);
210-
box-shadow: var(--shadow-md);
211-
transition: background-color var(--theme-transition),
212-
color var(--theme-transition);
208+
padding: 0.6rem;
209+
font-size: 1.35rem;
210+
color: var(--gray-200);
211+
border: 1px solid var(--glass-stroke-soft);
212+
background: linear-gradient(
213+
180deg,
214+
color-mix(in srgb, var(--glass-thick) 80%, transparent),
215+
color-mix(in srgb, var(--glass-regular) 65%, transparent)
216+
);
217+
box-shadow: var(--glass-shadow-light);
218+
-webkit-backdrop-filter: var(--glass-blur-light);
219+
backdrop-filter: var(--glass-blur-light);
220+
transition:
221+
background-color var(--theme-transition),
222+
color var(--theme-transition),
223+
transform var(--theme-transition);
213224
}
214225

215226
.menu-button[aria-expanded='true'] {
216227
color: var(--gray-0);
217-
background: linear-gradient(180deg, var(--gray-600), transparent),
218-
radial-gradient(var(--gray-900), var(--gray-800) 150%);
219-
transition: background-color var(--theme-transition),
220-
color var(--theme-transition);
228+
background: linear-gradient(
229+
180deg,
230+
color-mix(in srgb, var(--glass-ultra-thick) 82%, transparent),
231+
color-mix(in srgb, var(--glass-regular) 70%, transparent)
232+
);
233+
transform: translateY(-1px);
221234
}
222235

223236
.menu-button[hidden] {
@@ -228,18 +241,31 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
228241
position: absolute;
229242
inset: -1px;
230243
content: '';
231-
background: var(--gradient-stroke);
244+
background: linear-gradient(145deg, color-mix(in srgb, #fff 15%, transparent), transparent);
232245
border-radius: 999rem;
233246
z-index: -1;
247+
opacity: 0.9;
234248
}
235249

236250
.menu-content {
237251
position: absolute;
238-
left: 0;
239-
right: 0;
252+
left: clamp(0.5rem, 2vw, 1.25rem);
253+
right: clamp(0.5rem, 2vw, 1.25rem);
254+
top: calc(100% - 0.5rem);
240255
max-height: 80vh;
241256
overflow-y: auto;
242257
scrollbar-width: thin;
258+
padding: 0.35rem;
259+
border-radius: 1.25rem;
260+
border: 1px solid var(--glass-stroke-soft);
261+
background: linear-gradient(
262+
160deg,
263+
color-mix(in srgb, var(--glass-regular) 60%, transparent),
264+
color-mix(in srgb, var(--glass-thin) 48%, transparent)
265+
);
266+
box-shadow: var(--glass-shadow-medium);
267+
backdrop-filter: var(--glass-blur-light);
268+
-webkit-backdrop-filter: var(--glass-blur-light);
243269
}
244270

245271
.nav-items {
@@ -250,15 +276,23 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
250276
font-size: var(--text-md);
251277
line-height: 1.2;
252278
list-style: none;
253-
padding: 2rem;
254-
background-color: var(--gray-999);
255-
border-bottom: 1px solid var(--gray-800);
279+
padding: 1.25rem 1.5rem;
280+
background: linear-gradient(
281+
180deg,
282+
color-mix(in srgb, var(--glass-regular) 75%, transparent),
283+
color-mix(in srgb, var(--glass-thin) 60%, transparent)
284+
);
285+
border-radius: 1.1rem;
286+
border: 1px solid var(--glass-stroke-soft);
287+
box-shadow: var(--glass-shadow-light);
256288
}
257289

258290
.link {
259291
display: inline-block;
260-
color: var(--gray-300);
292+
color: var(--gray-200);
261293
text-decoration: none;
294+
letter-spacing: 0.01em;
295+
font-weight: 500;
262296
}
263297

264298
.link.active {
@@ -272,10 +306,15 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
272306
display: flex;
273307
justify-content: space-between;
274308
gap: 0.75rem;
275-
padding: 1.5rem 2rem 1.5rem 1.5rem;
276-
background-color: var(--gray-999);
277-
border-radius: 0 0 0.75rem 0.75rem;
278-
box-shadow: var(--shadow-lg);
309+
padding: 1rem 1.35rem 1.25rem;
310+
background: linear-gradient(
311+
180deg,
312+
color-mix(in srgb, var(--glass-regular) 70%, transparent),
313+
color-mix(in srgb, var(--glass-thin) 55%, transparent)
314+
);
315+
border-radius: 1.1rem;
316+
border: 1px solid var(--glass-stroke-soft);
317+
box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
279318
}
280319

281320
.socials {
@@ -311,7 +350,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
311350
display: grid;
312351
grid-template-columns: 1fr auto 1fr;
313352
align-items: center;
314-
padding: 2.5rem 5rem;
353+
padding: 1rem 1.5rem;
315354
gap: 1rem;
316355
}
317356

@@ -325,26 +364,23 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
325364

326365
.menu-content {
327366
display: contents;
367+
position: static;
368+
padding: 0;
328369
}
329370

330371
.nav-items {
331372
position: relative;
332373
flex-direction: row;
333374
font-size: var(--text-sm);
334375
border-radius: 999rem;
335-
border: 0;
336-
padding: 0.5rem 0.5625rem;
337-
background: radial-gradient(var(--gray-900), var(--gray-800) 150%);
338-
box-shadow: var(--shadow-md);
339-
}
340-
341-
.nav-items::before {
342-
position: absolute;
343-
inset: -1px;
344-
content: '';
345-
background: var(--gradient-stroke);
346-
border-radius: 999rem;
347-
z-index: -1;
376+
border: 1px solid var(--glass-stroke-soft);
377+
padding: 0.35rem 0.45rem;
378+
background: linear-gradient(
379+
140deg,
380+
color-mix(in srgb, var(--glass-regular) 72%, transparent),
381+
color-mix(in srgb, var(--glass-thin) 55%, transparent)
382+
);
383+
box-shadow: var(--glass-shadow-medium);
348384
}
349385

350386
.link {
@@ -357,13 +393,14 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
357393

358394
.link:hover,
359395
.link:focus {
360-
color: var(--gray-100);
361-
background-color: var(--accent-subtle-overlay);
396+
color: var(--gray-0);
397+
background-color: color-mix(in srgb, var(--accent-regular) 15%, transparent);
362398
}
363399

364400
.link.active {
365401
color: var(--accent-text-over);
366-
background-color: var(--accent-regular);
402+
background-color: color-mix(in srgb, var(--accent-regular) 85%, transparent);
403+
box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-regular) 25%, transparent);
367404
}
368405

369406
.menu-footer {

0 commit comments

Comments
 (0)