catchup

src/components/events/EventsList.js

@@ -97,8 +97,7 @@ export default function EventsList() {
           <span className="one"> 1</span>
           <span className="zero">5</span>
           <span className="zero-second"></span>
-        </span> 
-        <br />
+        </span>{" "}
         Events
       </h1>
       <h2>Upcoming Events ({filtered.length})</h2>
@@ -138,56 +137,60 @@ export default function EventsList() {
         </select>
       </div>
 
-      <div className="card-grid">
-        {filtered.map((e) => {
-          const href = toHref(e.website || e.url || KATY_EVENTS_URL);
-          const Wrapper = href ? "a" : "div";
-          const repeats = recurrenceLabel(e.recurrence);
-
-          return (
-            <Wrapper
-              key={e.id}
-              className="card-link"
-              {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})}
-            >
-              <div className={`info-card ${href ? "clickable" : ""}`}>
-                <div className="top-row">
-                  <div style={{ fontWeight: 700 }}>{e.title}</div>
-                  <div className="muted">{e.category}</div>
-                </div>
-
-                <div className="muted">{toDateLabel(e.start)}</div>
-                {repeats ? <div className="muted">{repeats}</div> : null}
-
-                {e.locationName ? (
-                  <div className="muted">{e.locationName}</div>
-                ) : null}
-                {e.address ? <div className="muted">{e.address}</div> : null}
-
-                {e.tags && e.tags.length ? (
-                  <div className="pill-row">
-                    {e.tags.slice(0, 6).map((t) => (
-                      <span key={t} className="pill">
-                        {t}
-                      </span>
-                    ))}
+      <div className="resources-container">
+        <div className="cards-container">
+          <div className="card-grid">
+            {filtered.map((e) => {
+              const href = toHref(e.website || e.url || KATY_EVENTS_URL);
+              const Wrapper = href ? "a" : "div";
+              const repeats = recurrenceLabel(e.recurrence);
+
+              return (
+                <Wrapper
+                  key={e.id}
+                  className="card-link"
+                  {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})}
+                >
+                  <div className={`info-card ${href ? "clickable" : ""}`}>
+                    <div className="top-row">
+                      <div className="card-title">{e.title}</div>
+                      <div className="muted">{e.category}</div>
+                    </div>
+
+                    <div className="muted">{toDateLabel(e.start)}</div>
+                    {repeats ? <div className="muted">{repeats}</div> : null}
+
+                    {e.locationName ? (
+                      <div className="muted">{e.locationName}</div>
+                    ) : null}
+                    {e.address ? <div className="muted">{e.address}</div> : null}
+
+                    {e.tags && e.tags.length ? (
+                      <div className="pill-row">
+                        {e.tags.slice(0, 6).map((t) => (
+                          <span key={t} className="pill">
+                            {t}
+                          </span>
+                        ))}
+                      </div>
+                    ) : null}
+
+                    <div className="meta-row">
+                      <div className="muted">
+                        {e.cost ? <span>Cost: {e.cost}</span> : null}
+                      </div>
+                      {href ? (
+                        <span style={{ color: "var(--accent)" }}>
+                          View details →
+                        </span>
+                      ) : null}
+                    </div>
                   </div>
-                ) : null}
-
-                <div className="meta-row">
-                  <div className="muted">
-                    {e.cost ? <span>Cost: {e.cost}</span> : null}
-                  </div>
-                  {href ? (
-                    <span style={{ color: "var(--accent)" }}>
-                      View details →
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-            </Wrapper>
-          );
-        })}
+                </Wrapper>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );

src/components/home-page/home-page-resources/featured.css

@@ -41,9 +41,7 @@
   background-color: rgba(96, 108, 56, 1);
   transition: .2s ease-in-out;
 }
-.aspect:hover{
-  box-shadow: 4px 5px rgb(0,0,0);
-}
+
 .featured-info h2 span{
     font-size: 30px;
     margin-bottom: 5px;

src/components/home-page/home-page.css

@@ -8,6 +8,12 @@
   animation: popup 1s ease-out  forwards;
 }
 
+@media (max-width: 860px) {
+	.polaroid-string {
+		display: none !important;
+	}	
+}
+
 @keyframes popup
 {
   100%{

src/components/home-page/home-page.js

@@ -2,47 +2,47 @@ import About from "./home-page-resources/about";
 import Polaroid from "./home-page-resources/polaroid-pic";
 import RetroBanner from "./retro-banner";
 import "./home-page.css";
-import Tabbed from './home-page-resources/tabbed-section'
-import Featured from './home-page-resources/featured-resource'
+import Tabbed from "./home-page-resources/tabbed-section";
+import Featured from "./home-page-resources/featured-resource";
 
 function Home() {
   const img = (p) => `${process.env.PUBLIC_URL}${p}`;
 
   return (
     <>
-      <RetroBanner />
+      <section className="hero-polaroid-section">
+        <RetroBanner />
 
-      <div className="polaroid-string">
-        <div style={{ transform: "rotate(5deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-stock.jpg")}
-            text="learn"
-            to="/timeline"
-          />
-        </div>
+        <div className="polaroid-string">
+          <div style={{ transform: "rotate(5deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-stock.jpg")}
+              text="learn"
+              to="/timeline"
+            />
+          </div>
 
-        <div style={{ transform: "rotate(-5deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-hero.jpg")}
-            text="search"
-            to="/map"
-          />
-        </div>
+          <div style={{ transform: "rotate(-5deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-hero.jpg")}
+              text="search"
+              to="/map"
+            />
+          </div>
 
-        <div style={{ transform: "rotate(7deg)" }}>
-          <Polaroid
-            imageurl={img("/images/katy-tx.jpg")}
-            text="join"
-            to="/resources"
-          />
+          <div style={{ transform: "rotate(7deg)" }}>
+            <Polaroid
+              imageurl={img("/images/katy-tx.jpg")}
+              text="join"
+              to="/resources"
+            />
+          </div>
         </div>
-      </div>
+      </section>
+
       <About />
-
       <Tabbed />
       <Featured />
-
-
     </>
   );
 }

src/components/map/Map.js

@@ -16,7 +16,8 @@ L.Icon.Default.mergeOptions({
 });
 
 // Default center coordinates: 29°47'40.3"N 95°49'29.1"W (Katy, TX)
-const center = [29.7945, -95.8248];
+// 29.939345, -95.304114
+const center = [29.730367, -95.578197];
 
 function MapEventHandler({ onBoundsChange, isZoomingRef, mapRef }) {
   const map = useMap();
@@ -60,6 +61,7 @@ function Map() {
   const mapRef = useRef(null);
   const markersRef = useRef([]);
   const isZoomingRef = useRef(false);
+  const markerRefs = useRef({});
 
   useEffect(() => {
     const validResources = resourcesData.filter(
@@ -99,18 +101,24 @@ function Map() {
   }, []);
 
   const handleResourceClick = (resource) => {
-    if (mapRef.current) {
-      isZoomingRef.current = true;
+    if (!mapRef.current) return;
 
-      mapRef.current.flyTo([resource.lat, resource.lng], 16, {
-        animate: true,
-        duration: 0.8,
-      });
+    isZoomingRef.current = true;
 
-      setTimeout(() => {
-        isZoomingRef.current = false;
-      }, 900);
-    }
+    const map = mapRef.current;
+
+    map.once("moveend", () => {
+      const marker = markerRefs.current[resource.id];
+      if (marker) {
+        marker.openPopup();
+      }
+      isZoomingRef.current = false;
+    });
+
+    map.flyTo([resource.lat, resource.lng], 16, {
+      animate: true,
+      duration: 0.8,
+    });
   };
 
   return (
@@ -131,7 +139,7 @@ function Map() {
         <div className="map-wrapper">
           <MapContainer
             center={center}
-            zoom={13}
+            zoom={11}
             style={{ height: "70vh", minHeight: "420px", width: "100%" }}
             scrollWheelZoom={true}
             tap={true}
@@ -152,6 +160,11 @@ function Map() {
               <Marker
                 key={marker.resource.id || index}
                 position={marker.position}
+                ref={(ref) => {
+                  if (ref && marker.resource.id) {
+                    markerRefs.current[marker.resource.id] = ref;
+                  }
+                }}
               >
                 <Popup>
                   <div className="popup-content">

src/components/resources/ResourcesList.js

@@ -104,7 +104,7 @@ export default function ResourcesList() {
                 >
                   <div className={`info-card ${href ? "clickable" : ""}`}>
                     <div className="top-row">
-                      <div className="resource-name">{r.name}</div>
+                      <div className="card-title">{r.name}</div>
                       <div className="muted">{r.category}</div>
                     </div>
 
@@ -119,18 +119,6 @@ export default function ResourcesList() {
                         </span>
                       ))}
                     </div>
-
-                    <div className="meta-row">
-                      <div className="muted">
-                        {r.phone ? <span>{r.phone}</span> : null}
-                      </div>
-                      {r.website ? (
-                        <span style={{ color: "var(--accent)" }}>
-                          Visit site →
-                        </span>
-                      ) : null}
-                    </div>
-
                     {r.hours || r.eligibility ? (
                       <div className="muted">
                         {r.hours ? (
@@ -145,6 +133,17 @@ export default function ResourcesList() {
                         ) : null}
                       </div>
                     ) : null}
+
+                    <div className="meta-row">
+                      <div className="muted">
+                        {r.phone ? <span>{r.phone}</span> : null}
+                      </div>
+                      {r.website ? (
+                        <span style={{ color: "var(--accent)" }}>
+                          Visit site →
+                        </span>
+                      ) : null}
+                    </div>
                   </div>
                 </Wrapper>
               );

src/components/styles/pages.css

@@ -44,6 +44,7 @@
   display: grid;
   gap: 14px;
 	width: 100%;
+  grid-template-columns: 1fr;
 }
 
 .resources-container {
@@ -83,7 +84,19 @@
 
 @media (min-width: 720px) {
   .card-grid {
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .card-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1200px) {
+  .card-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
 .filter-bar{
@@ -215,6 +228,14 @@
   align-items: center;
 }
 
+.info-card .meta-row {
+  margin-top: auto;
+}
+
+.info-card .card-title {
+  font-weight: 700;
+}
+
 .info-card .muted {
   opacity: 0.8;
   font-family: 'DIN Condensed Web';