added multiple states in capital astro and header logo minimize

Author: recursivezero

src/assets/styles/capital.css

@@ -156,7 +156,7 @@
 .location-grid {
   display: grid;
   gap: 1.5rem;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
   align-items: start;
 }
 
@@ -369,7 +369,7 @@
 /* Responsive Design */
 @media (max-width: 768px) {
   .location-grid {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
   }
 
   .section-header {
@@ -413,4 +413,4 @@
   .search-container {
     max-width: 100%;
   }
-}
+}

src/components/Capital.astro

@@ -58,7 +58,14 @@ function getColorClass(index: number) {
             >
               <details>
                 <summary title={state.name}>{state.name}</summary>
-                <p title={state.capital}>{state.capital}</p>
+                <p title={state.capital}>
+                  {state.capital}
+                  {state.multiple && (
+                    <span style={{ color: "grey" }} aria-label="capital in winter">
+                      | ❄️ {state.multiple.winter}
+                    </span>
+                  )}
+                </p>
               </details>
             </article>
           ))
@@ -82,7 +89,14 @@ function getColorClass(index: number) {
             >
               <details>
                 <summary title={ut.name}>{ut.name}</summary>
-                <p title={ut.capital}>{ut.capital}</p>
+                <p title={ut.capital}>
+                  {ut.capital}
+                  {ut.multiple && (
+                    <span style={{ color: "grey" }} aria-label="capital in winter">
+                      | ❄️ {ut.multiple.winter}
+                    </span>
+                  )}
+                </p>
               </details>
             </article>
           ))

src/layouts/common/Header.astro

@@ -2,7 +2,7 @@
 import "@/assets/styles/header.css";
 import { APP_NAME } from "@/utils/constants";
 import { Picture } from "astro:assets";
-import logoImage from "/public/assets/images/512x512.png";
+import logoImage from "/public/assets/images/48x48.png";
 ---
 
 <header class="header">

src/utils/location.ts

@@ -2,6 +2,7 @@ export interface Location {
   name: string;
   capital: string;
   isState: boolean;
+  multiple?: { summer: string; winter: string };
 }
 
 export const locations: Location[] = [
@@ -14,12 +15,17 @@ export const locations: Location[] = [
   { name: "Goa", capital: "Panaji", isState: true },
   { name: "Gujarat", capital: "Gandhinagar", isState: true },
   { name: "Haryana", capital: "Chandigarh", isState: true },
-  { name: "Himachal Pradesh", capital: "Shimla", isState: true },
+  { name: "Himachal Pradesh", capital: "Shimla", isState: true, multiple: { summer: "Shimla", winter: "Dharmshala" } },
   { name: "Jharkhand", capital: "Ranchi", isState: true },
   { name: "Karnataka", capital: "Bengaluru", isState: true },
   { name: "Kerala", capital: "Thiruvananthapuram", isState: true },
   { name: "Madhya Pradesh", capital: "Bhopal", isState: true },
-  { name: "Maharashtra", capital: "Mumbai", isState: true },
+  {
+    name: "Maharashtra",
+    capital: "Mumbai",
+    isState: true,
+    multiple: { summer: "Mumbai", winter: "Nagpur" }
+  },
   { name: "Manipur", capital: "Imphal", isState: true },
   { name: "Meghalaya", capital: "Shillong", isState: true },
   { name: "Mizoram", capital: "Aizawl", isState: true },
@@ -39,7 +45,12 @@ export const locations: Location[] = [
   { name: "Andaman and Nicobar Islands", capital: "Port Blair", isState: false },
   { name: "Chandigarh", capital: "Chandigarh", isState: false },
   { name: "Dadra and Nagar Haveli and Daman and Diu", capital: "Daman", isState: false },
-  { name: "Jammu & Kashmir", capital: "Srinagar", isState: false },
+  {
+    name: "Jammu and Kashmir",
+    capital: "Srinagar",
+    isState: false,
+    multiple: { summer: "Srinagar", winter: "Jammu" }
+  },
   { name: "Ladakh", capital: "Leh", isState: false },
   { name: "Lakshadweep", capital: "Kavaratti", isState: false },
   { name: "Delhi", capital: "New Delhi", isState: false },