Skip to content

Commit 3fdb34c

Browse files
ivikramsahuivikramsahu
committed
update site
AI-Session-Id: bb850d52-a517-4b4d-b173-e7ed9525bc2d AI-Tool: claude-code AI-Model: unknown
1 parent bbdb71c commit 3fdb34c

7 files changed

Lines changed: 106 additions & 27 deletions

File tree

‎public/font/DegularDisplay-Regular.otf‎

77.4 KB
Binary file not shown.

‎src/components/JourneyRoadmap.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ const orderedMilestones = [...milestones].reverse();
167167
href={l.url}
168168
target="_blank"
169169
rel="noopener noreferrer"
170-
class="no-underline text-[#174FA9] hover:text-[#174FA9] border-b-0 hover:border-b-0"
170+
class="no-underline border-b-0 hover:border-b-0"
171171
>
172172
{l.label}
173173
</a>

‎src/layouts/BaseLayout.astro‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,19 +137,19 @@ const metaDescription = description ?? 'Writing and notes.';
137137
<nav class="flex shrink-0 items-center gap-4 text-[16px]">
138138
<a
139139
href="/tools/"
140-
class="no-underline text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
140+
class="no-underline text-zinc-700 hover:text-[rgb(var(--brand-link-rgb))] dark:text-zinc-300 dark:hover:text-[rgb(var(--brand-link-rgb))]"
141141
>
142142
Tools
143143
</a>
144144
<a
145145
href="/"
146-
class="no-underline text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
146+
class="no-underline text-zinc-700 hover:text-[rgb(var(--brand-link-rgb))] dark:text-zinc-300 dark:hover:text-[rgb(var(--brand-link-rgb))]"
147147
>
148148
Blog
149149
</a>
150150
<a
151151
href="/about/"
152-
class="no-underline text-zinc-700 hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-white"
152+
class="no-underline text-zinc-700 hover:text-[rgb(var(--brand-link-rgb))] dark:text-zinc-300 dark:hover:text-[rgb(var(--brand-link-rgb))]"
153153
>
154154
About
155155
</a>
@@ -338,6 +338,50 @@ const metaDescription = description ?? 'Writing and notes.';
338338
})();
339339
</script>
340340

341+
<div
342+
id="toast"
343+
class="pointer-events-none fixed bottom-5 left-1/2 z-[60] transition-all duration-200"
344+
aria-live="polite"
345+
aria-atomic="true"
346+
>
347+
<div
348+
id="toast-inner"
349+
class="rounded-xl border border-zinc-200 bg-white/90 px-4 py-2 text-sm font-medium text-zinc-900 shadow-lg backdrop-blur dark:border-zinc-800 dark:bg-zinc-950/90 dark:text-zinc-50"
350+
></div>
351+
</div>
352+
353+
<style is:inline>
354+
#toast {
355+
opacity: 0;
356+
transform: translate(-50%, 12px);
357+
}
358+
#toast[data-open='true'] {
359+
opacity: 1;
360+
transform: translate(-50%, 0);
361+
}
362+
</style>
363+
364+
<script is:inline>
365+
(() => {
366+
let hideTimer;
367+
368+
window.__toast = (message) => {
369+
const host = document.getElementById('toast');
370+
const inner = document.getElementById('toast-inner');
371+
if (!host || !inner) return;
372+
373+
inner.textContent = String(message || 'Copied');
374+
375+
host.dataset.open = 'true';
376+
377+
if (hideTimer) window.clearTimeout(hideTimer);
378+
hideTimer = window.setTimeout(() => {
379+
delete host.dataset.open;
380+
}, 1200);
381+
};
382+
})();
383+
</script>
384+
341385
<main class={`mx-auto w-full ${containerClass} flex-1 px-4 py-10`}>
342386
<slot />
343387
</main>
@@ -348,7 +392,7 @@ const metaDescription = description ?? 'Writing and notes.';
348392
Made with ❤ by
349393
<a
350394
href="https://www.linkedin.com/in/ivikramsahu/"
351-
class="no-underline font-medium text-zinc-700 hover:text-zinc-900 dark:text-zinc-200 dark:hover:text-white"
395+
class="no-underline font-medium text-zinc-700 hover:text-[rgb(var(--brand-link-rgb))] dark:text-zinc-200 dark:hover:text-[rgb(var(--brand-link-rgb))]"
352396
target="_blank"
353397
rel="noopener noreferrer"
354398
>

‎src/pages/about.astro‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,10 @@ import AboutContent from '../content/pages/about.mdx';
6767
await copyText(u.toString());
6868
window.history.replaceState(null, '', u.toString());
6969

70+
if (typeof window.__toast === 'function') {
71+
window.__toast('Copied link');
72+
}
73+
7074
const prevTitle = h.getAttribute('title') || '';
7175
h.setAttribute('title', 'Copied link');
7276
window.setTimeout(() => {

‎src/pages/blog/[...slug].astro‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,9 @@ function renderInlineCode(input: string) {
197197
const ok = await copyText(url);
198198
if (ok) {
199199
history.replaceState(null, '', `#${id}`);
200+
if (typeof window.__toast === 'function') {
201+
window.__toast('Copied link');
202+
}
200203
}
201204
});
202205
};

‎src/pages/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function renderInlineCode(input: string) {
6666
<div class="space-y-10">
6767
<div class="space-y-2">
6868
<h1 class="text-[32px] font-semibold tracking-tight">Blog</h1>
69-
<p class="text-lg text-zinc-600 dark:text-zinc-400">Thoughts, notes, and small write-ups.</p>
69+
<p class="text-[16px] text-zinc-600 dark:text-zinc-400">Thoughts, notes, and small write-ups.</p>
7070
</div>
7171

7272
<div class="lg:grid lg:grid-cols-[minmax(0,1fr)_22rem] lg:gap-8">
@@ -86,7 +86,7 @@ function renderInlineCode(input: string) {
8686
<div class="font-hal min-w-0 flex-1 text-[24px] font-semibold leading-snug text-zinc-700 dark:text-zinc-50">
8787
<span set:html={renderInlineCode(post.data.title)} />
8888
</div>
89-
<div class="shrink-0 text-right text-[15px] text-zinc-500 dark:text-zinc-400">
89+
<div class="shrink-0 text-right text-[16px] text-zinc-500 dark:text-zinc-400">
9090
{post.data.date.toLocaleDateString('en-US', {
9191
year: 'numeric',
9292
month: 'short',
@@ -95,7 +95,7 @@ function renderInlineCode(input: string) {
9595
</div>
9696
</div>
9797
{post.data.description && (
98-
<div class="text-[15px] leading-relaxed text-zinc-600 dark:text-zinc-300">
98+
<div class="text-[16px] leading-relaxed text-zinc-600 dark:text-zinc-300">
9999
<span set:html={renderInlineCode(post.data.description)} />
100100
</div>
101101
)}

‎src/styles/global.css‎

Lines changed: 47 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22
@tailwind components;
33
@tailwind utilities;
44

5+
:root {
6+
--brand-primary-rgb: 0 173 228;
7+
--brand-primary: rgb(var(--brand-primary-rgb));
8+
--brand-link-rgb: 23 79 169;
9+
--brand-link: rgb(var(--brand-link-rgb));
10+
}
11+
512
@font-face {
613
font-family: 'Agave';
714
src: url('/font/Agave-Regular.ttf') format('truetype');
@@ -18,6 +25,14 @@
1825
font-display: swap;
1926
}
2027

28+
@font-face {
29+
font-family: 'Degular Display';
30+
src: url('/font/DegularDisplay-Regular.otf') format('opentype');
31+
font-weight: 400;
32+
font-style: normal;
33+
font-display: swap;
34+
}
35+
2136
@layer components {
2237
.prose :where(code, pre, kbd, samp) {
2338
@apply font-mono;
@@ -66,15 +81,18 @@
6681
}
6782

6883
.prose :where(h2[id], h3[id], h4[id], h5[id], h6[id]):hover {
69-
@apply underline decoration-zinc-300 underline-offset-4 dark:decoration-zinc-700;
84+
text-decoration: underline;
85+
text-decoration-thickness: from-font;
86+
text-underline-offset: 4px;
87+
text-decoration-color: rgb(var(--brand-primary-rgb) / 0.55);
7088
}
7189

7290
.openai-prose {
7391
@apply prose prose-zinc dark:prose-invert;
7492
}
7593

7694
.openai-prose {
77-
font-size: 17px;
95+
font-size: 16.5px;
7896
line-height: 1.75;
7997
}
8098

@@ -119,24 +137,24 @@
119137

120138
.openai-prose :where(a):not(:where(.not-prose, .not-prose *)) {
121139
@apply no-underline;
122-
color: #174FA9;
123-
border-bottom: 1px solid rgba(23, 79, 169, 0.35);
140+
color: rgb(var(--brand-link-rgb) / 1);
141+
border-bottom: 1px solid rgb(var(--brand-link-rgb) / 0.35);
124142
transition: border-color 150ms ease, color 150ms ease;
125143
}
126144

127145
.openai-prose :where(a:hover):not(:where(.not-prose, .not-prose *)) {
128-
color: #174FA9;
129-
border-bottom-color: #174FA9;
146+
color: rgb(var(--brand-link-rgb) / 1);
147+
border-bottom-color: rgb(var(--brand-link-rgb) / 1);
130148
}
131149

132150
.openai-prose :where(.dark a):not(:where(.not-prose, .not-prose *)) {
133-
color: #174FA9;
134-
border-bottom-color: rgba(23, 79, 169, 0.45);
151+
color: rgb(var(--brand-link-rgb) / 1);
152+
border-bottom-color: rgb(var(--brand-link-rgb) / 0.45);
135153
}
136154

137155
.openai-prose :where(.dark a:hover):not(:where(.not-prose, .not-prose *)) {
138-
color: #174FA9;
139-
border-bottom-color: #174FA9;
156+
color: rgb(var(--brand-link-rgb) / 1);
157+
border-bottom-color: rgb(var(--brand-link-rgb) / 1);
140158
}
141159

142160
.openai-prose :where(pre):not(:where(.not-prose, .not-prose *)) {
@@ -214,14 +232,23 @@
214232
@apply scroll-smooth;
215233
}
216234

235+
::selection {
236+
background: rgb(var(--brand-primary-rgb) / 0.25);
237+
}
238+
239+
:where(a, button, input, textarea, select, summary):focus-visible {
240+
outline: 2px solid rgb(var(--brand-primary-rgb) / 0.75);
241+
outline-offset: 3px;
242+
}
243+
217244
:where(h1, h2, h3, h4, h5, h6) {
218-
font-family: "HAL Magic High", ui-sans-serif, system-ui, sans-serif;
219-
letter-spacing: 0.3px;
245+
font-family: "Degular Display", "Mona Sans", ui-sans-serif, system-ui, sans-serif;
246+
letter-spacing: 1px;
220247
}
221248

222249
.font-hal {
223-
font-family: "HAL Magic High", ui-sans-serif, system-ui, sans-serif;
224-
letter-spacing: 0.3px;
250+
font-family: "Degular Display", "Mona Sans", ui-sans-serif, system-ui, sans-serif;
251+
letter-spacing: 1px;
225252
}
226253

227254
:where(h1, h2, h3, h4, h5, h6, strong, b) {
@@ -240,16 +267,17 @@
240267
@apply bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-50;
241268
font-size: 16.5px;
242269
line-height: revert;
270+
font-weight: 450;
243271
font-family: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
244272
}
245273

246274
a {
247-
color: #174FA9;
275+
color: rgb(var(--brand-link-rgb) / 1);
248276
@apply underline decoration-zinc-300 underline-offset-4 dark:decoration-zinc-700;
249277
}
250278

251279
a:hover {
252-
color: #174FA9;
280+
color: rgb(var(--brand-link-rgb) / 1);
253281
@apply decoration-zinc-900 dark:decoration-zinc-200;
254282
}
255283
}
@@ -264,14 +292,14 @@
264292
}
265293

266294
:where(h1, h2, h3, h4, h5, h6) {
267-
letter-spacing: 0.3px !important;
295+
letter-spacing: 1px !important;
268296
}
269297

270298
.font-hal {
271-
letter-spacing: 0.3px !important;
299+
letter-spacing: 1px !important;
272300
}
273301

274302
.tracking-tight.font-hal {
275-
letter-spacing: 0.3px !important;
303+
letter-spacing: 1px !important;
276304
}
277305
}

0 commit comments

Comments
 (0)