v1.3 - added an sqlite db and built data structure

2026-09-25 02:35:46 -05:00 · 2026-09-25 02:35:46 -05:00 · 5efdafbb97
commit 5efdafbb97
parent b0fba52c0e
37 changed files with 6414 additions and 1988 deletions
--- a/src/index.css
+++ b/src/index.css
@ -69,3 +69,143 @@ h1, h2, h3, h4, h5, h6 {
 .footer-icons:hover .ig-icon { fill: var(--ig-fill); }
 .fb-icon:hover { fill: #0862f7; }
 .ds-icon:hover { fill: #5865f1; }
+
+
+/* Event Card Section */
+.ev-card {
+  container-type: inline-size;
+}
+ 
+.ev-grid {
+  display: grid;
+  gap: 0.25rem 1.5rem;
+  grid-template-columns: 2fr 1fr;
+  grid-template-areas:
+    "ngu   image"
+    "info  image"
+    "desc  desc";
+}
+ 
+.ev-ngu {
+  grid-area: ngu;
+}
+ 
+.ev-info {
+  grid-area: info;
+}
+ 
+.ev-image {
+  grid-area: image;
+  justify-self: stretch;
+  align-self: center;
+  max-height: 11rem;
+}
+ 
+.ev-desc {
+  grid-area: desc;
+  margin-top: 1rem;
+}
+ 
+@container (max-width: 30rem) {
+  .ev-grid {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "ngu"
+      "info"
+      "desc";
+  }
+ 
+  .ev-grid .ev-image {
+    justify-self: start;
+    width: auto;
+    max-height: 7rem;
+    margin-bottom: 0.5rem;
+  }
+}
+ 
+/* ═══════════════════════════════════════════════════════════════
+   SKELETON
+   Holds roughly a card's height so the page doesn't jump when the
+   data arrives. The shimmer is decoration, so it goes away for
+   anyone who has asked for less motion.
+   ═══════════════════════════════════════════════════════════════ */
+
+.skeleton {
+  border-radius: 1.5rem;
+  min-height: 22rem;
+  background: linear-gradient(
+    100deg,
+    rgba(0, 0, 0, 0.04) 30%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.04) 70%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+  }
+} 
+
+/* ═══════════════════════════════════════════════════════════════
+   UNITY REGIONS
+   Append to index.css. Scoped to .ur- so nothing here reaches the
+   rest of the site.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* The 0fr → 1fr grid row animates to the panel's real height, so
+   nobody has to guess a max-height that's wrong the moment a
+   region's description grows. The inline style sets the value;
+   this sets how it moves. */
+.ur-panel {
+  display: grid;
+  transition: grid-template-rows 300ms ease;
+}
+
+.ur-chevron {
+  transition: transform 200ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ur-panel,
+  .ur-chevron {
+    transition: none;
+  }
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ORGANIZATION LIST
+   Append to index.css. Scoped to .ol- so nothing here reaches the
+   rest of the site.
+   ═══════════════════════════════════════════════════════════════ */
+
+/* The 0fr → 1fr grid row animates to the panel's real height, so
+   nobody has to guess a max-height that's wrong the moment a
+   description grows. The inline style sets the value; this sets
+   how it moves. */
+.ol-panel {
+  display: grid;
+  transition: grid-template-rows 300ms ease;
+}
+
+.ol-chevron {
+  transition: transform 200ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ol-panel,
+  .ol-chevron {
+    transition: none;
+  }
+}