Skip to content

Commit cc81841

Browse files
recursivezerorecursivezero
committed
nakshtra css unified ;map full view text color change
1 parent 3f6565f commit cc81841

File tree

5 files changed

+137
-126
lines changed

5 files changed

+137
-126
lines changed

‎.vscode/dictionaries/project-words.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ LXXX
5959
Madhyam
6060
Magha
6161
maithili
62+
Majeure
6263
Margashirsha
6364
matra
6465
matras

‎src/assets/styles/nakshtra.css‎

Lines changed: 115 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,61 @@
44
padding-inline: 1rem;
55
}
66

7+
.legend__list {
8+
display: flex;
9+
align-items: center;
10+
flex-wrap: wrap;
11+
12+
div {
13+
flex: 1;
14+
text-align: right;
15+
font-style: italic;
16+
}
17+
18+
.legend {
19+
font-size: large;
20+
color: rgb(44, 45, 42);
21+
margin-inline-end: 4px;
22+
23+
&::before {
24+
content: attr(data-icon);
25+
font-size: 1.75rem;
26+
}
27+
}
28+
29+
dl {
30+
display: flex;
31+
margin: 3px 4px;
32+
align-items: center;
33+
padding-inline: 1rem;
34+
border: 3px dotted #b2c3d9;
35+
}
36+
37+
dd {
38+
margin: 0;
39+
padding: 0.3rem 0.6rem;
40+
border-radius: 0.5rem;
41+
font-size: 1.25rem;
42+
}
43+
}
44+
745
.card__list {
846
display: grid;
947
grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));
1048
gap: 1rem;
11-
margin: 1rem;
12-
}
49+
margin-block: 1rem;
50+
1351

14-
@container nakshtra (width <=700px) {
15-
.card__list {
16-
grid-template-columns: repeat(2, 1fr);
52+
@container nakshtra (width <=700px) {
53+
.card__list {
54+
grid-template-columns: repeat(2, 1fr);
55+
}
1756
}
18-
}
1957

20-
@container nakshtra (width <=468px) {
21-
.card__list {
22-
grid-template-columns: 1fr;
58+
@container nakshtra (width <=468px) {
59+
.card__list {
60+
grid-template-columns: 1fr;
61+
}
2362
}
2463
}
2564

@@ -31,4 +70,71 @@
3170
background-color: rgba(var(--card-bg), 0.5);
3271
border-left: 4px solid var(--primary-color);
3372
opacity: 0.8;
73+
}
74+
75+
76+
77+
78+
/* Nakshtra card */
79+
.card {
80+
border-radius: 8px;
81+
padding: 1rem;
82+
text-align: center;
83+
cursor: pointer;
84+
transition:
85+
transform 0.2s,
86+
box-shadow 0.2s;
87+
box-shadow: 0 2px 5px var(--primary-color);
88+
aspect-ratio: 1/1;
89+
display: flex;
90+
flex-direction: column;
91+
justify-content: start;
92+
position: relative;
93+
}
94+
95+
.card:hover {
96+
transform: translateY(-5px);
97+
box-shadow: 0 25px 75px var(--primary-color);
98+
}
99+
100+
.nakshatra-card {
101+
aspect-ratio: auto;
102+
cursor: default;
103+
padding: 1.5rem;
104+
display: flex;
105+
flex-direction: column;
106+
align-items: center;
107+
108+
img {
109+
width: 100%;
110+
aspect-ratio: 1;
111+
}
112+
113+
h3 {
114+
font-size: 2rem;
115+
color: #df9f9f;
116+
margin: 0;
117+
}
118+
119+
.nakshatra-details {
120+
padding: 0;
121+
margin: 0;
122+
font-size: 0.95rem;
123+
width: 100%;
124+
text-align: left;
125+
126+
p {
127+
padding: 0.5rem 1rem;
128+
margin: 0;
129+
font-size: 1.5rem;
130+
131+
&:nth-child(even) {
132+
border-block: 1px dashed light-dark(#78818d, #123456);
133+
}
134+
135+
& span {
136+
padding-inline: 0.5rem;
137+
}
138+
}
139+
}
34140
}

‎src/components/District.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,7 @@ import "@/assets/styles/map/district.css";
108108
});
109109
texts.forEach((text) => {
110110
text.style.display = "block";
111+
text.style.stroke = "#5417dcb0";
111112
text.style.fill = getComputedStyle(document.documentElement).getPropertyValue("--text");
112113
});
113114
break;
@@ -238,6 +239,7 @@ import "@/assets/styles/map/district.css";
238239

239240
const mouseX = e.clientX;
240241
const mouseY = e.clientY;
242+
tooltip.style.color = "green";
241243

242244
tooltip.style.left = `${mouseX - 250}px`;
243245
tooltip.style.top = `${mouseY - 120}px`;

‎src/components/NakshtraCard.astro‎

Lines changed: 0 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -17,68 +17,6 @@ const {
1717
} = Astro.props;
1818
---
1919

20-
<style>
21-
.card {
22-
border-radius: 8px;
23-
padding: 1rem;
24-
text-align: center;
25-
cursor: pointer;
26-
transition:
27-
transform 0.2s,
28-
box-shadow 0.2s;
29-
box-shadow: 0 2px 5px var(--primary-color);
30-
aspect-ratio: 1/1;
31-
display: flex;
32-
flex-direction: column;
33-
justify-content: start;
34-
position: relative;
35-
}
36-
37-
.card:hover {
38-
transform: translateY(-5px);
39-
box-shadow: 0 25px 75px var(--primary-color);
40-
}
41-
42-
.nakshatra-card {
43-
aspect-ratio: auto;
44-
cursor: default;
45-
padding: 1.5rem;
46-
display: flex;
47-
flex-direction: column;
48-
align-items: center;
49-
50-
img {
51-
width: 100%;
52-
aspect-ratio: 1;
53-
}
54-
55-
h3 {
56-
font-size: 2rem;
57-
color: #df9f9f;
58-
margin: 0;
59-
}
60-
61-
.nakshatra-details {
62-
padding: 0;
63-
margin: 0;
64-
font-size: 0.95rem;
65-
width: 100%;
66-
text-align: left;
67-
p {
68-
padding: 0.5rem 1rem;
69-
margin: 0;
70-
font-size: 1.5rem;
71-
&:nth-child(even) {
72-
border-block: 1px dashed light-dark(#78818d, #123456);
73-
}
74-
& span {
75-
padding-inline: 0.5rem;
76-
}
77-
}
78-
}
79-
}
80-
</style>
81-
8220
<div class="card nakshatra-card">
8321
<img src=`/assets/images/nakshatra/${image}` alt={name} />
8422
<h3>{name}</h3>

‎src/pages/nakshtra/index.astro‎

Lines changed: 19 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,46 +10,10 @@ var currentLang = "hindi";
1010
1111
const meta = {
1212
title: "Nakshtra",
13-
description: "Explore all 27 Nakshatras (lunar mansions) in Vedic astrology."
13+
description: "Explore all 27 Nakshatra (lunar mansions) in Vedic astrology."
1414
};
1515
---
1616

17-
<style>
18-
.legend__list {
19-
display: flex;
20-
align-items: center;
21-
div {
22-
flex: 1;
23-
text-align: right;
24-
font-style: italic;
25-
}
26-
.legend {
27-
font-size: large;
28-
color: rgb(44, 45, 42);
29-
margin-inline-end: 4px;
30-
&::before {
31-
content: attr(data-icon);
32-
font-size: 1.75rem;
33-
}
34-
}
35-
}
36-
37-
dl {
38-
display: flex;
39-
margin: 3px 4px;
40-
align-items: center;
41-
padding-inline: 1rem;
42-
border: 3px dotted #b2c3d9;
43-
}
44-
45-
dd {
46-
margin: 0;
47-
padding: 0.3rem 0.6rem;
48-
border-radius: 0.5rem;
49-
font-size: 1.25rem;
50-
}
51-
</style>
52-
5317
<BaseLayout meta={meta}>
5418
<BackIcon />
5519
<Fragment slot="header-right">
@@ -59,28 +23,28 @@ const meta = {
5923
description="In Hindu astrology, Nakshatra (नक्षत्र) refers to a constellation or lunar mansion."
6024
/>
6125
</Fragment>
26+
<div class="container__nakshtra">
27+
<h1>Nakshatra Nexus</h1>
28+
<div class="legend__list">
29+
<div>Legends:</div>
30+
<dl>
31+
<dt class="legend" data-icon="🪐"></dt>
32+
<dd>Ruling Planet</dd>
33+
</dl>
34+
<dl>
35+
<dt class="legend" data-icon="📿"></dt>
36+
<dd>Deity</dd>
37+
</dl>
38+
<dl>
39+
<dt class="legend" data-icon="࿊"></dt>
40+
<dd>Symbol</dd>
41+
</dl>
42+
</div>
6243

63-
<h1>Nakshatra Nexus</h1>
64-
<div class="legend__list">
65-
<div>Legends:</div>
66-
<dl>
67-
<dt class="legend" data-icon="🪐"></dt>
68-
<dd>Ruling Planet</dd>
69-
</dl>
70-
<dl>
71-
<dt class="legend" data-icon="📿"></dt>
72-
<dd>Deity</dd>
73-
</dl>
74-
<dl>
75-
<dt class="legend" data-icon="࿊"></dt>
76-
<dd>Symbol</dd>
77-
</dl>
78-
</div>
79-
<dt class="container__nakshtra">
8044
<div class="card__list">
8145
{(data as any)[currentLang].map((nakshtra: Nakshtra) => <NakshtraCard {nakshtra} />)}
8246
</div>
83-
</dt>
47+
</div>
8448
<div class="note">
8549
<p>
8650
<strong>Note on Abhijit Nakshatra:</strong> A 28th Nakshatra, Abhijit, is mentioned in some texts (between Uttara Ashadha

0 commit comments

Comments
 (0)