Skip to content

Commit 8a22253

Browse files
chhaviS04chhaviS04
committed
Refactored
1 parent b0564ef commit 8a22253

File tree

9 files changed

+320
-246
lines changed

9 files changed

+320
-246
lines changed

‎src/assets/styles/glossary/glossary.css‎

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
/* Container and grid */
2+
.container__page,
3+
.alphabet-page-container {
4+
padding: 1rem 1.5rem;
5+
max-width: 1300px;
6+
margin: 0 auto;
7+
font-family: var(--font-family-sans, sans-serif);
8+
}
9+
10+
.page-header,
11+
.head {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
margin-bottom: 2rem;
16+
padding-bottom: 1rem;
17+
border-bottom: 1px solid var(--border, #e0e0e0);
18+
}
19+
20+
.page-main-title {
21+
margin: 0;
22+
font-size: clamp(1.8rem, 4vw, 2.5rem);
23+
color: var(--text-heading, var(--text, #333));
24+
font-weight: 700;
25+
flex-grow: 1;
26+
text-align: center;
27+
}
28+
29+
.grid-container.glossary-grid {
30+
display: grid;
31+
grid-template-columns: repeat(3, 1fr);
32+
gap: 1.75rem;
33+
padding-top: 1.5rem;
34+
}
35+
36+
@media (max-width: 1024px) {
37+
.grid-container.glossary-grid {
38+
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
39+
gap: 1.5rem;
40+
}
41+
}
42+
43+
@media (max-width: 768px) {
44+
.page-header,
45+
.head {
46+
flex-direction: column;
47+
align-items: stretch;
48+
}
49+
50+
.page-header .page-main-title,
51+
.head .page-main-title {
52+
order: -1;
53+
width: 100%;
54+
margin-bottom: 1rem;
55+
text-align: center;
56+
}
57+
58+
.flip__all__button {
59+
width: auto;
60+
align-self: center;
61+
margin-top: 0.5rem;
62+
margin-bottom: 0.5rem;
63+
}
64+
65+
.page-header .back-button-container,
66+
.head .back-button-container {
67+
align-self: center;
68+
}
69+
70+
.grid-container.glossary-grid {
71+
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
72+
gap: 1.25rem;
73+
}
74+
}
75+
76+
@media (max-width: 480px) {
77+
.container__page,
78+
.alphabet-page-container {
79+
padding: 1rem 1rem;
80+
}
81+
82+
.grid-container.glossary-grid {
83+
grid-template-columns: 1fr;
84+
gap: 1rem;
85+
}
86+
}
87+
88+
/* Flip card base styles */
89+
.flip__card {
90+
width: 100%;
91+
height: 100%;
92+
perspective: 1000px;
93+
min-height: 260px;
94+
position: relative;
95+
}
96+
97+
.flip__card__inner {
98+
width: 100%;
99+
height: 100%;
100+
text-align: center;
101+
transition: transform 0.8s;
102+
transform-style: preserve-3d;
103+
position: relative;
104+
}
105+
106+
.flip__card.flipped .flip__card__inner {
107+
transform: rotateY(180deg);
108+
}
109+
110+
.card {
111+
background: var(--card-bg, #fff);
112+
border-radius: 1.25rem;
113+
padding: 2.5rem 1.5rem;
114+
box-shadow: 0 4px 15px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
115+
transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
116+
display: flex;
117+
flex-direction: column;
118+
gap: 0.75rem;
119+
position: absolute;
120+
width: 100%;
121+
height: 100%;
122+
backface-visibility: hidden;
123+
top: 0;
124+
left: 0;
125+
justify-content: center;
126+
align-items: center;
127+
}
128+
129+
.card__front {
130+
z-index: 2;
131+
}
132+
133+
.card__back {
134+
transform: rotateY(180deg);
135+
z-index: 1;
136+
}
137+
138+
.card__glow {
139+
position: absolute;
140+
inset: 0;
141+
background: radial-gradient(
142+
circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
143+
color-mix(in srgb, var(--primary, #6a5acd) 10%, transparent) 0%,
144+
transparent 60%
145+
);
146+
opacity: 0;
147+
transition: opacity 0.3s ease;
148+
pointer-events: none;
149+
}
150+
151+
.card:hover .card__glow {
152+
opacity: 1;
153+
}
154+
155+
/* Flip button */
156+
.flip__button {
157+
position: absolute;
158+
top: 0.8rem;
159+
right: 0.8rem;
160+
z-index: 10;
161+
}
162+
163+
.flip__button__text {
164+
font-size: 0.8rem;
165+
color: var(--secondary, #555);
166+
padding: 0.3rem 0.6rem;
167+
background: color-mix(in srgb, var(--background, #fff) 95%, var(--text, #333) 5%);
168+
border-radius: 2rem;
169+
cursor: pointer;
170+
transition: all 0.3s ease;
171+
border: 1px solid var(--border, #e0e0e0);
172+
}
173+
174+
.flip__button__text:hover {
175+
background: var(--primary, #6a5acd);
176+
color: var(--text-on-primary, white);
177+
transform: translateY(-2px);
178+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
179+
}
180+
181+
.flip__all__button {
182+
font-size: 1rem;
183+
padding: 0.5rem 1.2rem;
184+
border-radius: 2rem;
185+
background: var(--primary, #6a5acd);
186+
color: var(--text-on-primary, #fff);
187+
border: none;
188+
cursor: pointer;
189+
transition: all 0.2s;
190+
margin-left: 1rem;
191+
}
192+
193+
.flip__all__button.active {
194+
transform: scale(0.95);
195+
background-color: color-mix(in srgb, var(--primary) 70%, black 30%);
196+
}
197+
198+
.flip__all__button:focus {
199+
outline: 2px solid var(--primary, #6a5acd);
200+
}
201+
202+
/* Hide/show for flip button text/symbol */
203+
.is-hidden {
204+
display: none;
205+
}
206+
207+
/* Card content */
208+
.card-content-front,
209+
.card-content-back {
210+
width: 100%;
211+
text-align: center;
212+
margin-top: 1rem;
213+
}
214+
215+
/* .text {
216+
font-size: clamp(1.4rem, 3vw, 2rem);
217+
font-weight: 700;
218+
color: var(--text, #333);
219+
margin: 0;
220+
transition: color 0.3s ease;
221+
} */
222+
223+
.description {
224+
font-size: 0.95rem;
225+
color: var(--secondary, #555);
226+
margin: 0.5rem 0 0 0;
227+
line-height: 1.4;
228+
opacity: 0.9;
229+
}
230+
231+
@media (max-width: 600px) {
232+
.card {
233+
padding: 1.5rem 0.5rem;
234+
}
235+
.text {
236+
font-size: 1.1rem;
237+
}
238+
.description {
239+
font-size: 0.85rem;
240+
}
241+
}

‎src/components/SunSignCards.astro‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export interface SunSignEntry {
55
symbol: string;
66
dates: string;
77
emoji?: string;
8-
firstLetters?: string; // Original, kept for data integrity if needed elsewhere
8+
firstLetters: string; // Original, kept for data integrity if needed elsewhere
99
parsedHindiLetters?: string; // New property for processed Hindi letters
1010
parsedEnglishLetters?: string; // New property for processed English letters
1111
}
@@ -15,6 +15,32 @@ interface Props {
1515
}
1616
1717
const { item } = Astro.props;
18+
19+
// Data processing logic here
20+
const letterPairs = item.firstLetters
21+
? item.firstLetters
22+
.split(",")
23+
.map((p) => p.trim())
24+
.filter((p) => p)
25+
: [];
26+
const englishLettersArray: string[] = [];
27+
const hindiLettersArray: string[] = [];
28+
29+
letterPairs.forEach((pair) => {
30+
const match = pair.match(/^([A-Za-z\s]+)\s*\(([^)]+)\)$/);
31+
if (match && match[1] && match[2]) {
32+
englishLettersArray.push(match[1].trim());
33+
hindiLettersArray.push(match[2].trim());
34+
} else {
35+
const singleLetterMatch = pair.match(/^([A-Za-z\s]+)$/);
36+
if (singleLetterMatch && singleLetterMatch[1]) {
37+
englishLettersArray.push(singleLetterMatch[1].trim());
38+
}
39+
}
40+
});
41+
42+
const parsedHindiLetters = hindiLettersArray.join(", ");
43+
const parsedEnglishLetters = englishLettersArray.join(", ");
1844
---
1945

2046
<div class="flip__card sun-sign-card">
@@ -38,21 +64,7 @@ const { item } = Astro.props;
3864
<span class="flip__button__text" title="Flip Card">Flip Card</span>
3965
</div>
4066
<div class="sun-sign-details-back">
41-
{/* <h3 class="flipped__text">{item.name}</h3> */}
42-
{
43-
/* {item.image && <img src={`/assets/images/${category}/${item.image}`} alt={item.name} class="image" />}
44-
{item.emoji && !item.image && <p class="emoji">{item.emoji}</p>} */
45-
}
4667
<p class="description"><strong>Date Range:</strong> {item.dates}</p>
47-
48-
{/* Remove old display of combined firstLetters */}
49-
{
50-
/* {item.firstLetters && (
51-
<p class="description"><strong>First Letters:</strong> {item.firstLetters}</p>
52-
)} */
53-
}
54-
55-
{/* New display for separated Hindi and English first letters */}
5668
{
5769
(item.parsedHindiLetters && item.parsedHindiLetters.length > 0) ||
5870
(item.parsedEnglishLetters && item.parsedEnglishLetters.length > 0) ? (
@@ -69,6 +81,9 @@ const { item } = Astro.props;
6981
</>
7082
) : null
7183
}
84+
<div> Initials:</div>
85+
<div>English : {parsedEnglishLetters}</div>
86+
<div>Hindi: {parsedHindiLetters}</div>
7287
</div>
7388
</div>
7489
</div>

‎src/data/glossary.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
"days": {
4141
"title": "Days of the Week",
4242
"data": [
43-
{ "id": "sunday", "letter": "Sun", "fullName": "Sunday (रविवार)" },
44-
{ "id": "monday", "letter": "Mon", "fullName": "Monday (सोमवार)" },
45-
{ "id": "tuesday", "letter": "Tue", "fullName": "Tuesday (मंगलवार)" },
46-
{ "id": "wednesday", "letter": "Wed", "fullName": "Wednesday (बुधवार)" },
47-
{ "id": "thursday", "letter": "Thu", "fullName": "Thursday (गुरुवार)" },
48-
{ "id": "friday", "letter": "Fri", "fullName": "Friday (शुक्रवार)" },
49-
{ "id": "saturday", "letter": "Sat", "fullName": "Saturday (शनिवार)" }
43+
{ "id": "sunday", "letter": "S", "hindi": "रविवार" },
44+
{ "id": "monday", "letter": "M", "hindi": "सोमवार" },
45+
{ "id": "tuesday", "letter": "T", "hindi": "मंगलवार" },
46+
{ "id": "wednesday", "letter": "W", "hindi": "बुधवार" },
47+
{ "id": "thursday", "letter": "T", "hindi": "गुरुवार" },
48+
{ "id": "friday", "letter": "F", "hindi": "शुक्रवार" },
49+
{ "id": "saturday", "letter": "S", "hindi": "शनिवार" }
5050
]
5151
},
5252
"months": {
@@ -301,12 +301,12 @@
301301
"seasons": {
302302
"title": "Seasons",
303303
"data": [
304-
{ "id": "spring", "letter": "🌸", "fullName": "Spring (वसन्त)" },
305-
{ "id": "summer", "letter": "☀️", "fullName": "Summer (ग्रीष्म)" },
306-
{ "id": "monsoon", "letter": "🌧️", "fullName": "Monsoon (वर्षा)" },
307-
{ "id": "autumn", "letter": "🍂", "fullName": "Autumn (शरद)" },
308-
{ "id": "pre_winter", "letter": "🌬️", "fullName": "Pre-Winter (हेमन्त)" },
309-
{ "id": "winter", "letter": "❄️", "fullName": "Winter (शिशिर/शीत)" }
304+
{ "id": "spring", "letter": "🌸", "hindi": " वसन्त" },
305+
{ "id": "summer", "letter": "☀️", "hindi": "ग्रीष्म" },
306+
{ "id": "monsoon", "letter": "🌧️", "hindi": "वर्षा" },
307+
{ "id": "autumn", "letter": "🍂", "hindi": "शरद" },
308+
{ "id": "pre_winter", "letter": "🌬️", "hindi": "हेमन्त" },
309+
{ "id": "winter", "letter": "❄️", "hindi": "शिशिर/शीत" }
310310
]
311311
},
312312
"sunsign": {

‎src/pages/glossary/colours.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
import BaseLayout from "@/layouts/Base";
33
import BackButton from "@/components/BackButton.astro";
4-
import "@/assets/styles/varnmala/greek-alphabet.css"; // General styles
4+
import "@/assets/styles/varnmala/number.css"; // General styles
55
import "@/assets/styles/glossary/colour.css"; // Import the specific styles for this page
66
import glossaryData from "@/data/glossary.json";
77
@@ -33,7 +33,7 @@ function parseNames(fullName: string): { english: string; hindi: string } {
3333

3434
<div class="grid-container alphabet-grid colours-grid">
3535
{
36-
coloursData.map((entry) => {
36+
coloursData.map((entry: any) => {
3737
const names = parseNames(entry.fullName);
3838
return (
3939
<div class="flip__card" data-id={entry.id}>

0 commit comments

Comments
 (0)