Develop: added 2 capitals and fix header logo size (#167)

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/assets/styles/header.css

@@ -24,12 +24,13 @@
       height: 3rem;
     }
 
-    span {
+    p {
       font-size: 1.5rem;
       font-weight: 600;
+      margin-inline-start: 1rem;
       color: var(--primary);
 
-      & em {
+      & span {
         color: #6d8c3d;
       }
     }
@@ -39,10 +40,6 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-
-    & span {
-      margin-inline: 1rem;
-    }
   }
 
   .title {

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>
           ))