Skip to content

Commit 29d8466

Browse files
AdityaSingh-7AdityaSingh-7
committed
updated state css
1 parent 18758de commit 29d8466

File tree

2 files changed

+118
-81
lines changed

2 files changed

+118
-81
lines changed

‎src/assets/styles/map/state.css‎

Lines changed: 96 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,21 @@
1111
--spacing-unit: 1rem;
1212
}
1313

14-
1514
/* Header Container */
1615
.container_header {
1716
text-align: center;
1817
padding: calc(var(--spacing-unit) * 2);
1918
background-color: var(--primary-bg);
2019
border-radius: 8px;
2120
box-shadow: var(--shadow-md);
21+
}
2222

23-
h1 {
24-
font-size: 2.5rem;
25-
color: var(--primary-text);
26-
font-weight: 700;
27-
letter-spacing: -0.5px;
28-
margin: 0;
29-
}
23+
.container_header h1 {
24+
font-size: 2.5rem;
25+
color: var(--primary-text);
26+
font-weight: 700;
27+
letter-spacing: -0.5px;
28+
margin: 0;
3029
}
3130

3231
/* Main Container */
@@ -42,23 +41,23 @@
4241
/* SVG Container (Left Side) */
4342
#state-svg-container {
4443
flex: 0.8;
45-
padding: calc(var(--spacing-unit) * 2);
44+
padding: calc(var(--spacing-unit) * 1);
4645
background-color: var(--secondary-bg);
4746
border-radius: 8px;
4847
box-shadow: var(--shadow-md);
48+
}
4949

50-
h3 {
51-
margin-bottom: calc(var(--spacing-unit) * 1.5);
52-
color: var(--primary-text);
53-
font-size: 1.5rem;
54-
text-align: center;
55-
}
50+
#state-svg-container h3 {
51+
margin-bottom: calc(var(--spacing-unit) * 1.5);
52+
color: var(--primary-text);
53+
font-size: 1.5rem;
54+
text-align: center;
55+
}
5656

57-
#state-svg {
58-
width: 100%;
59-
height: auto;
60-
min-height: 300px;
61-
}
57+
#state-svg {
58+
width: 100%;
59+
height: auto;
60+
min-height: 300px;
6261
}
6362

6463
/* Right Content */
@@ -67,31 +66,31 @@
6766
display: flex;
6867
flex-direction: column;
6968
gap: calc(var(--spacing-unit) * 2);
69+
}
7070

71-
img {
72-
width: 100%;
73-
height: auto;
74-
object-fit: cover;
75-
border-radius: 8px;
76-
box-shadow: var(--shadow-md);
77-
}
71+
.right-content img {
72+
width: 100%;
73+
height: auto;
74+
object-fit: cover;
75+
border-radius: 8px;
76+
box-shadow: var(--shadow-md);
77+
}
7878

79-
.content-text {
80-
display: flex;
81-
flex-direction: column;
82-
gap: calc(var(--spacing-unit) * 1.5);
83-
84-
a {
85-
color: var(--accent-color);
86-
text-decoration: none;
87-
font-weight: 500;
88-
margin-top: var(--spacing-unit);
89-
90-
&:hover {
91-
text-decoration: underline;
92-
}
93-
}
94-
}
79+
.content-text {
80+
display: flex;
81+
flex-direction: column;
82+
gap: calc(var(--spacing-unit) * 1.5);
83+
}
84+
85+
.content-text a {
86+
color: var(--accent-color);
87+
text-decoration: none;
88+
font-weight: 500;
89+
margin-top: var(--spacing-unit);
90+
}
91+
92+
.content-text a:hover {
93+
text-decoration: underline;
9594
}
9695

9796
/* Info Table */
@@ -102,37 +101,62 @@
102101
border-radius: 8px;
103102
overflow: hidden;
104103
box-shadow: var(--shadow-md);
104+
}
105105

106-
th,
107-
td {
108-
padding: calc(var(--spacing-unit) * 1.2);
109-
border: 1px solid var(--border-color);
110-
color: rgba(46, 41, 55, 0.911);
111-
}
106+
.info-table th, .info-table td {
107+
padding: calc(var(--spacing-unit) * 1.2);
108+
border: 1px solid var(--border-color);
109+
color: rgba(46, 41, 55, 0.911);
110+
}
112111

113-
th {
114-
background: var(--accent-color);
115-
color: black;
116-
text-align: left;
117-
font-size: 1.3rem;
118-
letter-spacing: 0.5px;
119-
}
112+
.info-table th {
113+
background: var(--accent-color);
114+
color: rgb(10, 10, 10); /* Change header text color to white */
115+
text-align: left;
116+
font-size: 1.4rem;
117+
letter-spacing: 0.5px;
118+
}
120119

121-
tr {
122-
&:nth-child(even) {
123-
background-color: var(--secondary-bg);
124-
}
125-
&:hover {
126-
background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--accent-color) 20%);
127-
transition: background-color 0.2s ease;
128-
}
129-
}
120+
/* Style for the official website link */
121+
.info-table th a {
122+
color: white; /* Change link color to white */
123+
text-decoration: none;
124+
font-weight: 500;
125+
font-size: 1.2rem;
126+
}
130127

131-
td:first-child {
132-
font-weight: 600;
133-
color: var(--primary-text);
134-
width: 30%;
135-
}
128+
.info-table th a:hover {
129+
text-decoration: underline; /* Add underline on hover */
130+
opacity: 0.8;
131+
}
132+
133+
.info-table tr:nth-child(even) {
134+
background-color: var(--secondary-bg);
135+
}
136+
137+
.info-table tr:hover {
138+
background-color: color-mix(in srgb, var(--secondary-bg) 80%, var(--accent-color) 20%);
139+
transition: background-color 0.2s ease;
140+
}
141+
142+
.info-table td:first-child {
143+
font-weight: 600;
144+
color: var(--primary-text);
145+
width: 30%;
146+
}
147+
148+
/* Quick Facts Link */
149+
.info-table .quick-facts-link {
150+
color: #d24d4d;
151+
font-weight: 500;
152+
text-decoration: none;
153+
margin-left: 10px;
154+
display: inline-block;
155+
}
156+
157+
.info-table .quick-facts-link:hover {
158+
text-decoration: underline;
159+
opacity: 0.8;
136160
}
137161

138162
/* Error State */
@@ -152,12 +176,11 @@
152176
font-size: 2rem;
153177
}
154178

155-
#state-svg-container,
156-
.right-content {
179+
#state-svg-container, .right-content {
157180
flex: 1;
158181
}
159182

160183
.info-table {
161184
font-size: 0.9rem;
162185
}
163-
}
186+
}

‎src/pages/mapPages/[...state].astro‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,38 @@ const { name, dance, festival, image, svg, wikiLink, description } = stateInfo;
2828
<img src={`/map/images/${image}`} alt={`${dance} from ${name}`} loading="eager" />
2929
<div class="content-text">
3030
<table class="info-table">
31-
<tr><th colspan="2">Quick Facts</th></tr>
31+
<tr>
32+
<th colspan="2">
33+
Quick Facts
34+
{stateInfo.official_website && (
35+
<>
36+
<br />
37+
<a href={stateInfo.official_website} target="_blank" rel="noopener noreferrer">
38+
Visit the official website of {name}
39+
</a>
40+
</>
41+
)}
42+
</th>
43+
</tr>
3244
<tr><td>Dance Form</td><td>{dance}</td></tr>
3345
<tr><td>Origin</td><td>{name}, India</td></tr>
3446
<tr><td>Festival</td><td>{festival}</td></tr>
35-
<tr
36-
><td>Description</td><td
37-
><p>{description}</p>
47+
<tr>
48+
<td>Description</td>
49+
<td>
50+
<p>{description}</p>
3851
<a href={wikiLink} target="_blank" rel="noopener noreferrer">
3952
Read more about {dance} on Wikipedia
40-
</a></td
41-
></tr
42-
>
53+
</a>
54+
</td>
55+
</tr>
4356
</table>
57+
<!--
4458
{stateInfo.official_website && (
4559
<a href={stateInfo.official_website} target="_blank" rel="noopener noreferrer">
4660
Visit the official website of {name}
4761
</a>
48-
)}
62+
)}-->
4963
</div>
5064
</div>
5165
</div>

0 commit comments

Comments
 (0)