Skip to content

Commit f89b586

Browse files
committed
update the css class naming
1 parent f343cce commit f89b586

File tree

2 files changed

+70
-36
lines changed

2 files changed

+70
-36
lines changed

src/assets/styles/barahkhadi/index.css

Lines changed: 47 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
height: 100%;
44
overflow-y: auto;
55

6-
& .consonants-rows {
6+
& .consonants__rows {
77
display: flex;
88
flex-direction: column;
99
}
1010

11-
& .consonant-row {
11+
& .consonant__row {
1212
padding: 1rem;
1313
background-color: color-mix(in srgb, var(--background) 97%, var(--text) 3%);
1414
border-radius: 0.5rem;
1515
}
1616

17-
& .consonants-grid {
17+
& .consonants__grid {
1818
display: grid;
1919
gap: 1.25rem;
2020
grid-template-columns: repeat(auto-fit, 250px);
2121
justify-content: center;
2222
}
2323

24-
& .consonant-card {
24+
& .consonant__card {
2525
width: 250px;
2626
height: 250px;
2727
position: relative;
@@ -34,7 +34,7 @@
3434
overflow: hidden;
3535
}
3636

37-
& .consonant-card:hover {
37+
& .consonant__card:hover {
3838
transform: none;
3939
background-color: color-mix(in srgb, var(--primary) 15%, var(--background) 85%);
4040
transition: all 0.2s ease;
@@ -46,18 +46,18 @@
4646
color: var(--text);
4747
}
4848

49-
& .consonants-container {
49+
& .consonants__container {
5050
scrollbar-width: thin;
5151
scrollbar-color: var(--primary) var(--background);
5252
}
5353

54-
& .consonant-card {
54+
& .consonant__card {
5555
position: relative;
5656
z-index: 1;
5757
overflow: hidden;
5858
}
5959

60-
& .consonant-card:hover {
60+
& .consonant__card:hover {
6161
z-index: 1000;
6262
}
6363

@@ -91,7 +91,7 @@
9191
transform: scale(0.95);
9292
}
9393

94-
& .barahkhadi-popover {
94+
& .barahkhadi__popover {
9595
visibility: hidden;
9696
opacity: 0;
9797
position: absolute;
@@ -113,12 +113,17 @@
113113
z-index: 1;
114114
}
115115

116-
& .consonant-card[data-active="true"] .barahkhadi-popover {
116+
& .consonant__card[data-active="true"] .barahkhadi__popover {
117117
visibility: visible;
118118
opacity: 1;
119119
}
120120

121-
& .variations-grid {
121+
& .letter__card[data-active="true"] .barahkhadi__popover {
122+
visibility: visible;
123+
opacity: 1;
124+
}
125+
126+
& .variations__grid {
122127
display: grid;
123128
grid-template-columns: repeat(4, 1fr);
124129
gap: 0.4rem;
@@ -137,4 +142,35 @@
137142
border: 1px solid var(--border);
138143
}
139144

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+
}
140176
}

src/pages/barahkhadi/index.astro

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,40 +22,38 @@ const consonants = [
2222
<Help title="Barahkhadi" description="This page displays the Hindi consonants and their variations." />
2323
</Fragment>
2424
<div class="container__barahkhadi">
25-
<div class="consonants-rows">
26-
{
27-
consonants.map((row) => (
28-
<div class="consonant-row">
29-
<div class="consonants-grid">
30-
{row.map((consonant) => (
31-
<div class="consonant-card" data-active="false">
32-
<a href={`/barahkhadi/${consonant}`} class="consonant-content">
33-
<span class="consonant">{consonant}</span>
34-
</a>
35-
<button class="quick-view-btn">🔍</button>
36-
<div class="barahkhadi-popover">
37-
<div class="variations-grid">
38-
{Object.values(matras).map((matra) => (
39-
<div class="variation">{consonant + matra}</div>
40-
))}
41-
</div>
25+
{
26+
consonants.map((row) => (
27+
<div class="group__row">
28+
<div class="row__grid">
29+
{row.map((consonant) => (
30+
<div class="letter__card" data-active="false">
31+
<a href={`/barahkhadi/${consonant}`} class="letter__link">
32+
<span class="consonant">{consonant}</span>
33+
</a>
34+
<button class="quick-view-btn">🔍</button>
35+
<div class="barahkhadi__popover">
36+
<div class="variations__grid">
37+
{Object.values(matras).map((matra) => (
38+
<div class="variation">{consonant + matra}</div>
39+
))}
4240
</div>
4341
</div>
44-
))}
45-
</div>
42+
</div>
43+
))}
4644
</div>
47-
))
48-
}
49-
</div>
45+
</div>
46+
))
47+
}
5048
</div>
5149
</BaseLayout>
5250

5351
<script>
5452
document.querySelectorAll(".quick-view-btn").forEach((button) => {
5553
button.addEventListener("click", (e) => {
5654
// Close all other open popovers
57-
document.querySelectorAll('.consonant-card[data-active="true"]').forEach((card) => {
58-
if (card !== (e.currentTarget as HTMLElement).closest(".consonant-card")) {
55+
document.querySelectorAll('.letter__card[data-active="true"]').forEach((card) => {
56+
if (card !== (e.currentTarget as HTMLElement).closest(".letter__card")) {
5957
// Don't reset current card
6058
const btn = card.querySelector(".quick-view-btn") as HTMLElement;
6159
card.setAttribute("data-active", "false");
@@ -64,7 +62,7 @@ const consonants = [
6462
});
6563

6664
// Toggle current popover
67-
const card = (e.currentTarget as HTMLElement).closest(".consonant-card") as HTMLElement;
65+
const card = (e.currentTarget as HTMLElement).closest(".letter__card") as HTMLElement;
6866
const isActive = card.getAttribute("data-active") === "true";
6967
const newState = !isActive;
7068
card.setAttribute("data-active", String(newState));

0 commit comments

Comments
 (0)