Skip to content

Commit 64f61aa

Browse files
J1mL1J1mL1
committed
refactor: make font size and colour consist
1 parent 3457ef4 commit 64f61aa

11 files changed

Lines changed: 671 additions & 564 deletions

File tree

‎src/components/NeumorphicCard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ const shadowClass = pressed
2121
<style>
2222
:global(.bg-neu-base) {
2323
background-color: var(--neu-base);
24+
color: var(--body-color);
2425
}
2526
</style>
26-

‎src/layouts/Layout.astro‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,12 @@ const { title } = Astro.props;
2121
<meta name="viewport" content="width=device-width" />
2222
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
2323
<meta name="generator" content={Astro.generator} />
24+
<link rel="preconnect" href="https://fonts.googleapis.com" />
25+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
26+
<link
27+
rel="stylesheet"
28+
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap"
29+
/>
2430
<title>{title}</title>
2531

2632
<script is:inline>
@@ -69,8 +75,8 @@ const { title } = Astro.props;
6975
<body class="min-h-screen bg-neu-base">
7076
<div class="min-h-screen">
7177
<Nav />
72-
<main class="flex-3 mt-16 px-4 py-8">
73-
<div class="max-w-6xl mx-auto">
78+
<main class="flex-3 mt-16 py-8">
79+
<div class="content-shell">
7480
<slot />
7581
</div>
7682
</main>

‎src/pages/about.astro‎

Lines changed: 176 additions & 198 deletions
Large diffs are not rendered by default.

‎src/pages/index.astro‎

Lines changed: 18 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,57 +7,49 @@ const pageTitle = "Jim's Personal Space"
77
---
88

99
<Layout title={pageTitle}>
10-
<div class="container">
10+
<div class="home-layout">
1111
<NeumorphicCard class="mb-8">
12-
<h1 class="text-4xl font-bold mb-4 text-center">Welcome to <span class="text-gradient">Jim's Corner</span></h1>
13-
<p class="text-center text-lg">
12+
<h1 class="page-heading text-center">Welcome to <span class="text-gradient">Jim's Corner</span></h1>
13+
<p class="page-subheading text-center">
1414
Hello! I'm <strong>Jim</strong>, a computer science student passionate about programming and photography. This is where I document my projects, life insights, and photographic works 📝
1515
</p>
1616
</NeumorphicCard>
1717

1818
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
1919
<NeumorphicCard class="hover:shadow-neu-lg transition-all duration-300">
20-
<a href="/blog" class="block">
21-
<h2 class="text-2xl font-semibold mb-3">Tech Blog <span class="text-gray-500">→</span></h2>
22-
<p class="text-gray-600 dark:text-gray-300">Sharing programming experience, study notes and technical insights</p>
20+
<a href="/blog" class="block card-link">
21+
<h2 class="card-title">Tech Blog <span class="card-arrow">→</span></h2>
22+
<p class="card-description">Sharing programming experience, study notes and technical insights</p>
2323
</a>
2424
</NeumorphicCard>
2525

2626
<NeumorphicCard class="hover:shadow-neu-lg dark:hover:shadow-neu-dark-lg transition-all duration-300">
27-
<a href="/plog" class="block">
28-
<h2 class="text-2xl font-semibold mb-3">Photography Journal <span class="text-gray-500">→</span></h2>
29-
<p class="text-gray-600 dark:text-gray-300">Capturing life moments, sharing photography collections 📸</p>
27+
<a href="/plog" class="block card-link">
28+
<h2 class="card-title">Photography Journal <span class="card-arrow">→</span></h2>
29+
<p class="card-description">Capturing life moments, sharing photography collections 📸</p>
3030
</a>
3131
</NeumorphicCard>
3232

3333
<NeumorphicCard class="hover:shadow-neu-lg dark:hover:shadow-neu-dark-lg transition-all duration-300">
34-
<a href="/projects" class="block">
35-
<h2 class="text-2xl font-semibold mb-3">Project Showcase <span class="text-gray-500">→</span></h2>
36-
<p class="text-gray-600 dark:text-gray-300">Documenting interesting projects I've participated in</p>
34+
<a href="/projects" class="block card-link">
35+
<h2 class="card-title">Project Showcase <span class="card-arrow">→</span></h2>
36+
<p class="card-description">Documenting interesting projects I've participated in</p>
3737
</a>
3838
</NeumorphicCard>
3939

4040
<NeumorphicCard class="hover:shadow-neu-lg dark:hover:shadow-neu-dark-lg transition-all duration-300">
41-
<a href="/about" class="block">
42-
<h2 class="text-2xl font-semibold mb-3">About Me <span class="text-gray-500">→</span></h2>
43-
<p class="text-gray-600 dark:text-gray-300">Learn more about my story and experiences</p>
41+
<a href="/about" class="block card-link">
42+
<h2 class="card-title">About Me <span class="card-arrow">→</span></h2>
43+
<p class="card-description">Learn more about my story and experiences</p>
4444
</a>
4545
</NeumorphicCard>
4646

4747
<NeumorphicCard class="hover:shadow-neu-lg dark:hover:shadow-neu-dark-lg transition-all duration-300">
48-
<a href="/contact" class="block">
49-
<h2 class="text-2xl font-semibold mb-3">Contact Me <span class="text-gray-500">→</span></h2>
50-
<p class="text-gray-600 dark:text-gray-300">Feel free to reach out with any questions or ideas 👋</p>
48+
<a href="/contact" class="block card-link">
49+
<h2 class="card-title">Contact Me <span class="card-arrow">→</span></h2>
50+
<p class="card-description">Feel free to reach out with any questions or ideas 👋</p>
5151
</a>
5252
</NeumorphicCard>
5353
</div>
5454
</div>
5555
</Layout>
56-
57-
<style>
58-
.container {
59-
margin: 0 auto;
60-
padding: 1rem;
61-
max-width: 1200px;
62-
}
63-
</style>

‎src/pages/projects.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ projectsData.sort((a: CollectionEntry<'projects'>, b: CollectionEntry<'projects'
1313
---
1414

1515
<Layout title={pageTitle}>
16-
<div class="container">
17-
<NeumorphicCard class="mb-8 text-center">
18-
<h1 class="text-4xl font-bold mb-4">My <span class="text-gradient">Project</span> Collection</h1>
19-
<p class="text-lg text-gray-600 dark:text-gray-300">
16+
<div class="projects-layout">
17+
<NeumorphicCard class="projects-hero text-center mb-8">
18+
<h1 class="page-heading">My <span class="text-gradient">Project</span> Collection</h1>
19+
<p class="page-subheading">
2020
Here are some of my recent projects. Click to view details.
2121
</p>
2222
</NeumorphicCard>
@@ -77,4 +77,4 @@ projectsData.sort((a: CollectionEntry<'projects'>, b: CollectionEntry<'projects'
7777
}
7878
});
7979
});
80-
</script>
80+
</script>

‎src/pages/projects/[id].astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const { Content } = await entry.render();
2020
---
2121

2222
<Layout title={entry.data.title}>
23-
<div class="container project-detail-container">
23+
<div class="project-detail-container">
2424
<div class="project-header">
2525
<a href="/projects" class="back-link"> &larr; Back to Projects </a>
2626
<h1 class="page-title">{entry.data.title}</h1>
@@ -72,4 +72,4 @@ const { Content } = await entry.render();
7272
}
7373
});
7474
});
75-
</script>
75+
</script>

‎src/styles/base/layout.css‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ html, body {
66
background-color: var(--neu-base);
77
color: var(--text-color);
88
transition: background-color 0.3s ease, color 0.3s ease;
9-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
9+
font-family: var(--font-sans);
1010
}
1111

1212
html {
@@ -18,6 +18,48 @@ body {
1818
flex-direction: column;
1919
}
2020

21+
.content-shell {
22+
width: 100%;
23+
max-width: 1200px;
24+
margin: 0 auto;
25+
padding: 0 clamp(1rem, 4vw, 2rem);
26+
box-sizing: border-box;
27+
}
28+
29+
h1,
30+
h2,
31+
h3,
32+
h4,
33+
h5,
34+
h6 {
35+
font-family: var(--font-heading);
36+
letter-spacing: 0.01em;
37+
color: var(--heading-color);
38+
}
39+
40+
.page-heading,
41+
.section-heading,
42+
.page-title {
43+
color: var(--heading-color);
44+
}
45+
46+
body,
47+
p,
48+
li,
49+
span {
50+
color: var(--body-color);
51+
}
52+
53+
.page-subheading,
54+
.section-subheading,
55+
.lead-text {
56+
color: var(--subheading-color);
57+
}
58+
59+
.subheading {
60+
color: var(--subheading-color);
61+
}
62+
2163
* {
2264
transition: background-color 0.3s ease; /* Apply to all elements */
23-
}
65+
}

‎src/styles/base/variables.css‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
:root {
2+
--font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
3+
--font-heading: 'Nunito', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
24
--accent: 124, 58, 237;
35
--accent-gradient-light: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
46
--accent-gradient-dark: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, #2a2a2a 60%);
@@ -10,7 +12,10 @@
1012
--neu-light: #ffffff;
1113
--neu-dark: #c0c0c0;
1214
--text-color: #1a1a1a;
13-
--card-bg: #e0e0e0;
15+
--heading-color: #121212;
16+
--subheading-color: #4f4f4f;
17+
--body-color: #1a1a1a;
18+
--card-bg: white;
1419
}
1520

1621
:root.dark {
@@ -23,4 +28,7 @@
2328
--neu-base: #2e2e2e;
2429
--neu-light: #3a3a3a;
2530
--neu-dark: #1a1a1a;
26-
}
31+
--heading-color: #f7f7f7;
32+
--subheading-color: #cdcdcd;
33+
--body-color: #e8e8e8;
34+
}

0 commit comments

Comments
 (0)