Skip to content

Commit 7610fed

Browse files
simplearyansimplearyan
committed
Cleaning Design
1 parent a7cbf85 commit 7610fed

10 files changed

Lines changed: 118 additions & 105 deletions

File tree

‎src/components/AutoSubjectGrid.astro‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -152,30 +152,7 @@ const gridTitle = isLessonLevel ? "Course Lessons" : "Course Subjects";
152152
<h2 class="grid-title">Course Books & Resources</h2>
153153
<div class="book-grid">
154154
{textbooks.map((book) => {
155-
const isMaths =
156-
book.slug.includes("maths-2") ||
157-
book.data.title.includes("Linear Algebra");
158-
const isStats =
159-
book.slug.includes("stats-2") ||
160-
book.data.title.includes("Probability");
161-
162-
let pattern = "circles";
163-
let fontStyle = "serif";
164-
let layoutStyle = "classic";
165-
let coverColor = book.data.cardColor || "#3b82f6";
166-
167-
if (isMaths) {
168-
pattern = "grid";
169-
fontStyle = "sans";
170-
layoutStyle = "modern";
171-
coverColor = "#3b82f6"; // Ensure consistent blue
172-
} else if (isStats) {
173-
pattern = "waves";
174-
fontStyle = "serif";
175-
layoutStyle = "classic";
176-
// coverColor usually handled by book.data.cardColor but fallback:
177-
if (!book.data.cardColor) coverColor = "#ec4899";
178-
}
155+
const coverColor = book.data.cardColor || "#3b82f6";
179156

180157
return (
181158
<BookCard
@@ -185,9 +162,9 @@ const gridTitle = isLessonLevel ? "Course Lessons" : "Course Subjects";
185162
subtitle={book.data.description}
186163
href={`/education/${book.slug}`}
187164
coverColor={coverColor}
188-
pattern={pattern as any}
189-
fontStyle={fontStyle as any}
190-
layoutStyle={layoutStyle as any}
165+
pattern="circles"
166+
fontStyle="serif"
167+
layoutStyle="classic"
191168
/>
192169
);
193170
})}

‎src/components/BookCard.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const {
4949
width: 100%;
5050
/* Ensure the card doesn't get too small or too huge */
5151
min-width: 120px;
52-
max-width: 220px;
52+
max-width: 180px;
5353
margin: 0 auto;
5454
perspective: 1000px;
5555
/* Container Query Setup */

‎src/components/EducationCard.astro‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,18 @@ const isNew =
5757
<div class="card-header">
5858
<div class="institution-badge">
5959
<span class="institution">{institution}</span>
60+
<span class="separator">•</span>
6061
<span class="course-type">{courseType}</span>
6162
</div>
6263
{isNew && <span class="new-indicator">NEW</span>}
6364
</div>
6465

6566
<div class="card-body">
6667
<h3 class="title">{title}</h3>
68+
<p class="description">{description}</p>
69+
<div class="card-footer">
70+
<span class="view-course">View Course &rarr;</span>
71+
</div>
6772
</div>
6873

6974
<!-- Hover overlay handled by CSS ::after -->

‎src/components/layout/Footer.astro‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,20 @@ const today = new Date();
1111
<span class="logo-x">x</span>
1212
</a>
1313
All rights reserved.
14+
<!-- <span class="footer-separator">•</span>
15+
<span id="footer-date"></span>
1416
</p>
17+
<script>
18+
const footerDate = document.getElementById("footer-date");
19+
if (footerDate) {
20+
footerDate.textContent = new Date().toLocaleDateString("en-US", {
21+
weekday: "long",
22+
year: "numeric",
23+
month: "long",
24+
day: "numeric",
25+
});
26+
}
27+
</script> -->
1528
<div class="social-links">
1629
<a href="/about">About</a>
1730
<a href="#" target="_blank" rel="noopener noreferrer">Twitter</a>
@@ -88,5 +101,14 @@ const today = new Date();
88101
.social-links {
89102
justify-content: center;
90103
}
104+
105+
.footer-separator {
106+
display: none;
107+
}
108+
109+
#footer-date {
110+
display: block;
111+
margin-top: 0.5rem;
112+
}
91113
}
92114
</style>

‎src/components/layout/Header.astro‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ const { disableSticky = false } = Astro.props;
8787
<span>Theme</span>
8888
<ThemeToggle />
8989
</div>
90+
<div id="mobile-date" class="mobile-date"></div>
9091
</nav>
9192
</div>
9293
<div class="mobile-backdrop"></div>
@@ -248,6 +249,14 @@ const { disableSticky = false } = Astro.props;
248249
color: var(--color-text);
249250
}
250251

252+
.mobile-date {
253+
font-family: var(--font-mono);
254+
font-size: 0.9rem;
255+
color: var(--color-text-muted);
256+
border-bottom: 1px dashed var(--color-border);
257+
padding-bottom: 1rem;
258+
}
259+
251260
.close-menu-btn {
252261
background: none;
253262
border: none;
@@ -345,4 +354,15 @@ const { disableSticky = false } = Astro.props;
345354
mobileLinks.forEach((link) => {
346355
link.addEventListener("click", toggleMenu);
347356
});
357+
358+
// Set Mobile Date
359+
const mobileDate = document.getElementById("mobile-date");
360+
if (mobileDate) {
361+
mobileDate.textContent = new Date().toLocaleDateString("en-US", {
362+
weekday: "long",
363+
year: "numeric",
364+
month: "long",
365+
day: "numeric",
366+
});
367+
}
348368
</script>

‎src/layouts/EducationSingleLayout.astro‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const { title, description, pubDate, image, institution, courseType } =
3434
</time>
3535
</div>
3636
<h1>{title}</h1>
37-
<p class="description">{description}</p>
37+
<!-- <p class="description">{description}</p> -->
3838
</div>
3939
{
4040
image && (
@@ -66,15 +66,17 @@ const { title, description, pubDate, image, institution, courseType } =
6666
}
6767

6868
.education-header {
69-
padding: 6rem 0 4rem;
69+
/* padding: 6rem 0 4rem; */
70+
padding: 2rem 0 0rem;
71+
7072
text-align: center;
7173
background: linear-gradient(
7274
to bottom,
7375
var(--color-bg) 0%,
7476
var(--color-surface) 100%
7577
);
7678
border-bottom: 1px solid var(--color-border);
77-
margin-bottom: 4rem;
79+
/* margin-bottom: 4rem; */
7880
}
7981

8082
.container {
@@ -101,7 +103,7 @@ const { title, description, pubDate, image, institution, courseType } =
101103

102104
.institution-badge {
103105
background: var(--color-primary-muted);
104-
color: var(--color-primary);
106+
color: var(--color-text);
105107
padding: 0.25rem 0.85rem;
106108
border-radius: 999px;
107109
font-weight: 700;
@@ -191,7 +193,8 @@ const { title, description, pubDate, image, institution, courseType } =
191193
}
192194

193195
.education-header {
194-
padding: 4rem 0 3rem;
196+
/* padding: 4rem 0 3rem; */
197+
padding: 2rem 0 0rem;
195198
}
196199

197200
.hero-image-wrapper {

‎src/pages/about.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ import Layout from "../layouts/Layout.astro";
1414
<h1 class="name">Aryan</h1>
1515
<p class="tagline">Student & Lifelong Learner</p>
1616
<div class="social-links">
17-
<a href="#" class="social-btn">Twitter</a>
18-
<a href="#" class="social-btn">GitHub</a>
19-
<a href="#" class="social-btn">LinkedIn</a>
17+
<!-- <a href="" class="social-btn">Twitter</a> -->
18+
<a href="https://github.com/simplearyan?tab=repositories" target="_blank" class="social-btn">GitHub</a>
19+
<!-- <a href="" class="social-btn">LinkedIn</a> -->
2020
</div>
2121
</div>
2222
</div>

‎src/pages/education.astro‎

Lines changed: 3 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -62,35 +62,6 @@ const bookItems = educationItems.filter(
6262

6363
<div class="books-grid">
6464
{bookItems.map((book) => {
65-
// Assign separate styles based on the book
66-
const isMaths = book.slug.includes("maths-2");
67-
const isStats = book.slug.includes("stats-2");
68-
69-
let pattern:
70-
| "circles"
71-
| "grid"
72-
| "waves"
73-
| "dots" = "circles";
74-
let fontStyle:
75-
| "serif"
76-
| "sans"
77-
| "display"
78-
| "handwritten" = "serif";
79-
let layoutStyle:
80-
| "classic"
81-
| "minimal"
82-
| "modern" = "classic";
83-
84-
if (isMaths) {
85-
pattern = "grid";
86-
fontStyle = "sans";
87-
layoutStyle = "modern";
88-
} else if (isStats) {
89-
pattern = "waves";
90-
fontStyle = "serif";
91-
layoutStyle = "classic";
92-
}
93-
9465
return (
9566
<BookCard
9667
title={book.data.title
@@ -101,9 +72,9 @@ const bookItems = educationItems.filter(
10172
coverColor={
10273
book.data.cardColor || "#3b82f6"
10374
}
104-
pattern={pattern}
105-
fontStyle={fontStyle}
106-
layoutStyle={layoutStyle}
75+
pattern="circles"
76+
fontStyle="serif"
77+
layoutStyle="classic"
10778
/>
10879
);
10980
})}

‎src/pages/index.astro‎

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -80,30 +80,6 @@ const posts = (await getCollection("blog"))
8080
</div>
8181
<div class="books-grid">
8282
{bookItems.map((book) => {
83-
// Assign separate styles based on the book
84-
const isMaths = book.slug.includes("maths-2");
85-
const isStats = book.slug.includes("stats-2");
86-
87-
let pattern: "circles" | "grid" | "waves" | "dots" =
88-
"circles";
89-
let fontStyle:
90-
| "serif"
91-
| "sans"
92-
| "display"
93-
| "handwritten" = "serif";
94-
let layoutStyle: "classic" | "minimal" | "modern" =
95-
"classic";
96-
97-
if (isMaths) {
98-
pattern = "grid";
99-
fontStyle = "sans";
100-
layoutStyle = "modern";
101-
} else if (isStats) {
102-
pattern = "waves";
103-
fontStyle = "serif";
104-
layoutStyle = "classic";
105-
}
106-
10783
return (
10884
<BookCard
10985
title={book.data.title
@@ -112,9 +88,9 @@ const posts = (await getCollection("blog"))
11288
subtitle={book.data.description}
11389
href={`/education/${book.slug}`}
11490
coverColor={book.data.cardColor || "#3b82f6"}
115-
pattern={pattern}
116-
fontStyle={fontStyle}
117-
layoutStyle={layoutStyle}
91+
pattern="circles"
92+
fontStyle="serif"
93+
layoutStyle="classic"
11894
/>
11995
);
12096
})}
@@ -287,20 +263,15 @@ const posts = (await getCollection("blog"))
287263
<div class="card-header">
288264
<div class="institution-badge">
289265
<span class="institution">${data.institution || "Unknown Institution"}</span>
266+
<span class="separator">•</span>
290267
<span class="course-type" style="color: ${categoryColor}">${data.courseType || "Course"}</span>
291268
</div>
292269
</div>
293270
<div class="card-body">
294271
<h3 class="title">${data.title}</h3>
295272
<p class="description">${data.description}</p>
296-
<div class="tags">
297-
${(data.tags || [])
298-
.slice(0, 3)
299-
.map(
300-
(tag) =>
301-
`<span class="tag">${tag}</span>`,
302-
)
303-
.join("")}
273+
<div class="card-footer">
274+
<span class="view-course">View Course &rarr;</span>
304275
</div>
305276
</div>
306277
</a>

‎src/styles/education-card.css‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,15 @@
6868

6969
.institution-badge {
7070
display: flex;
71-
flex-direction: column;
72-
gap: 0.25rem;
71+
flex-direction: row;
72+
align-items: center;
73+
gap: 0.5rem;
74+
flex-wrap: wrap;
75+
}
76+
77+
.separator {
78+
color: var(--color-border);
79+
font-size: 0.7rem;
7380
}
7481

7582
.institution {
@@ -120,4 +127,41 @@
120127
/* Dark mode title */
121128
[data-theme="dark"] .title {
122129
color: #f1f5f9;
130+
}
131+
132+
.description {
133+
font-size: 0.9rem;
134+
color: var(--color-text-muted);
135+
margin-top: 0.5rem;
136+
margin-bottom: 1.5rem;
137+
line-height: 1.5;
138+
font-family: var(--font-sans);
139+
display: -webkit-box;
140+
-webkit-line-clamp: 2;
141+
line-clamp: 2;
142+
-webkit-box-orient: vertical;
143+
overflow: hidden;
144+
}
145+
146+
.card-footer {
147+
margin-top: auto;
148+
display: flex;
149+
justify-content: flex-end;
150+
}
151+
152+
.view-course {
153+
font-size: 0.8rem;
154+
font-weight: 600;
155+
text-transform: uppercase;
156+
letter-spacing: 0.05em;
157+
color: var(--category-color);
158+
font-family: var(--font-sans);
159+
opacity: 0;
160+
transform: translateX(-10px);
161+
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
162+
}
163+
164+
.education-card:hover .view-course {
165+
opacity: 1;
166+
transform: translateX(0);
123167
}

0 commit comments

Comments
 (0)