Skip to content

Commit be37bf4

Browse files
xkeshavxkeshav
authored
Merge pull request #41 from recursivezero/develop
Develop
2 parents 8b15fae + 8f7fa0d commit be37bf4

File tree

17 files changed

+914
-191
lines changed

17 files changed

+914
-191
lines changed

‎docs/pages.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,16 @@ This document describes the functionality and purpose of each page in the applic
2121

2222
### Interactive Learning Pages
2323

24+
#### Barahkhadi Page (/pages/barahkhadi/index.astro)
25+
26+
![Barahkhadi page](../src/assets/screenshots/barahkhadi.png)
27+
28+
- Grid display of Hindi consonants organized in traditional groups
29+
- Quick view popover showing barahkhadi variations for each consonant
30+
- Interactive buttons to show/hide variations
31+
- Clickable consonants leading to detailed pages
32+
- Responsive layout with consonant groups
33+
2434
#### Varnmala Page (/pages/varnmala.astro)
2535

2636
![Varnmala page](../src/assets/screenshots/varnmala.png)

‎public/map/svg/Kashmir.svg‎

Lines changed: 3 additions & 2 deletions
Loading

‎src/assets/screenshots/barahkhadi.png‎

186 KB
Loading

‎src/assets/styles/barahkhadi/consonant.css‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
.container__consonant {
2+
height: 100%;
3+
padding: 2rem;
4+
5+
& .consonant__header {
6+
display: flex;
7+
align-items: center;
8+
gap: 2rem;
9+
margin-bottom: 2rem;
10+
}
11+
12+
& .back__link {
13+
color: var(--primary);
14+
text-decoration: none;
15+
font-size: 1.2rem;
16+
}
17+
18+
& .combinations__grid {
19+
display: grid;
20+
grid-template-columns: repeat(4, 1fr);
21+
gap: 1rem;
22+
padding: 1rem;
23+
max-height: calc(100vh - 12rem);
24+
overflow-y: auto;
25+
border: 1px solid var(--border);
26+
border-radius: 1rem;
27+
scrollbar-width: thin;
28+
scrollbar-color: var(--primary) var(--background);
29+
}
30+
31+
& .combination__card {
32+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
33+
border-radius: 0.5rem;
34+
padding: 2rem 1rem;
35+
display: grid;
36+
place-items: center;
37+
gap: 0.5rem;
38+
}
39+
40+
& .combination__content {
41+
display: flex;
42+
flex-direction: column;
43+
align-items: center;
44+
gap: 0.5rem;
45+
}
46+
47+
& .combination__result {
48+
font-size: 3rem;
49+
font-weight: bold;
50+
}
51+
52+
@container (min-width: 768px) {
53+
.combination-result {
54+
font-size: 4rem;
55+
}
56+
}
57+
58+
@container (max-width: 480px) {
59+
.combinations-grid {
60+
grid-template-columns: 1fr;
61+
}
62+
}
63+
}

‎src/assets/styles/barahkhadi/index.css‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
.container__barahkhadi {
2+
padding: 1rem;
3+
height: 100%;
4+
overflow-y: auto;
5+
6+
& .consonants__rows {
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
& .consonant__row {
12+
padding: 1rem;
13+
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
14+
border-radius: 0.5rem;
15+
}
16+
17+
& .consonants__grid {
18+
display: grid;
19+
gap: 1.25rem;
20+
grid-template-columns: repeat(auto-fit, 250px);
21+
justify-content: center;
22+
}
23+
24+
& .consonant__card {
25+
width: 250px;
26+
height: 250px;
27+
position: relative;
28+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
29+
border-radius: 0.5rem;
30+
display: grid;
31+
place-items: center;
32+
text-decoration: none;
33+
transition: transform 0.2s ease;
34+
overflow: hidden;
35+
}
36+
37+
& .consonant__card:hover {
38+
transform: none;
39+
background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
40+
transition: all 0.2s ease;
41+
}
42+
43+
& .consonant {
44+
font-size: 7rem;
45+
font-weight: bold;
46+
color: var(--text);
47+
}
48+
49+
& .consonants__container {
50+
scrollbar-width: thin;
51+
scrollbar-color: var(--primary) var(--background);
52+
}
53+
54+
& .consonant__card {
55+
position: relative;
56+
z-index: 1;
57+
overflow: hidden;
58+
}
59+
60+
& .consonant__card:hover {
61+
z-index: 1000;
62+
}
63+
64+
& .quick-view-btn {
65+
position: absolute;
66+
top: 8px;
67+
right: 8px;
68+
padding: 6px;
69+
font-size: 1.2rem;
70+
background: color-mix(in srgb, var(--text) 10%, var(--background) 90%);
71+
border: 1px solid var(--border);
72+
border-radius: 8px;
73+
cursor: pointer;
74+
color: var(--text);
75+
line-height: 1;
76+
z-index: 2;
77+
display: flex;
78+
align-items: center;
79+
justify-content: center;
80+
width: 32px;
81+
height: 32px;
82+
transition: all 0.2s ease;
83+
}
84+
85+
& .quick-view-btn:hover {
86+
background: color-mix(in srgb, var(--text) 15%, var(--background) 85%);
87+
transform: scale(1.05);
88+
}
89+
90+
& .quick-view-btn:active {
91+
transform: scale(0.95);
92+
}
93+
94+
& .barahkhadi__popover {
95+
visibility: hidden;
96+
opacity: 0;
97+
position: absolute;
98+
top: 0;
99+
left: 0;
100+
width: 100%;
101+
height: 100%;
102+
padding: 0.75rem;
103+
background: var(--background);
104+
border: 1px solid var(--border);
105+
border-radius: 0.5rem;
106+
box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 15%, transparent);
107+
transition: opacity 0.2s, visibility 0.2s;
108+
display: flex;
109+
align-items: flex-end;
110+
justify-content: center;
111+
color: var(--text);
112+
overflow: hidden;
113+
z-index: 1;
114+
}
115+
116+
& .consonant__card[data-active="true"] .barahkhadi__popover {
117+
visibility: visible;
118+
opacity: 1;
119+
}
120+
121+
& .letter__card[data-active="true"] .barahkhadi__popover {
122+
visibility: visible;
123+
opacity: 1;
124+
}
125+
126+
& .variations__grid {
127+
display: grid;
128+
grid-template-columns: repeat(4, 1fr);
129+
gap: 0.4rem;
130+
width: 100%;
131+
max-height: 100%;
132+
overflow-y: auto;
133+
}
134+
135+
& .variation {
136+
font-size: 1.5rem;
137+
padding: 0.4rem;
138+
text-align: center;
139+
background: color-mix(in srgb, var(--text) 5%, var(--background) 95%);
140+
border-radius: 4px;
141+
color: var(--text);
142+
border: 1px solid var(--border);
143+
}
144+
145+
& .group__row {
146+
padding: 1rem;
147+
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
148+
border-radius: 0.5rem;
149+
}
150+
151+
& .row__grid {
152+
display: grid;
153+
gap: 1.25rem;
154+
grid-template-columns: repeat(auto-fit, 250px);
155+
justify-content: center;
156+
}
157+
158+
& .letter__card {
159+
width: 250px;
160+
height: 250px;
161+
position: relative;
162+
background-color: color-mix(in srgb, var(--secondary) 15%, var(--background) 85%);
163+
border-radius: 0.5rem;
164+
display: grid;
165+
place-items: center;
166+
text-decoration: none;
167+
transition: transform 0.2s ease;
168+
overflow: hidden;
169+
}
170+
171+
& .letter__card:hover {
172+
transform: none;
173+
background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
174+
transition: all 0.2s ease;
175+
}
176+
}

0 commit comments

Comments
 (0)