WIP: backend auth/chores/households work and frontend styling

2026-07-15 21:20:57 -04:00
parent 08987d7c49
commit b4e47b652f
12 changed files with 1597 additions and 276 deletions
@@ -3,13 +3,14 @@
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sis — Chore Tracker</title>
+  <title>Sis — Household Chore Tracker</title>
+  <link rel="manifest" href="/manifest.json">
  <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest">
  <link rel="stylesheet" href="/style.css">
  <script type="importmap">
    {
      "imports": {
-        "mithril": "https://unpkg.com/mithril@2.2.13/mithril.min.js"
+        "mithril": "https://esm.sh/mithril@2.2.13"
      }
    }
  </script>
@@ -0,0 +1,13 @@
+{
+  "name": "Sis",
+  "short_name": "Sis",
+  "description": "Shared household chore tracker",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#fff9e6",
+  "background_color": "#fff9e6",
+  "icons": [
+    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ]
+}
@@ -1,10 +1,72 @@
 /* Sis custom styles — layered on top of Neo Brutalism */

+:root {
+  --nb-red: #e74c3c;
+  --nb-yellow: #f1c40f;
+  --nb-green: #2ecc71;
+  --nb-orange: #e67e22;
+}
+
 body {
  min-height: 100vh;
  background: #fff9e6;
+  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
+  background-size: 20px 20px;
 }

 #app {
  padding: 1rem;
 }
+
+.nb-container {
+  padding: 0 1rem;
+}
+
+.nb-navbar {
+  background: #fff;
+  border-bottom: 3px solid #000;
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 4px 4px 0 #000;
+  margin-bottom: 2rem;
+}
+
+.nb-navbar-start, .nb-navbar-end {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.nb-modal-overlay {
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .nb-navbar {
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 0.5rem;
+  }
+  .nb-navbar-end {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  .nb-row {
+    flex-direction: column;
+  }
+}
+
+.nb-list-item {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+.nb-list-item:last-child {
+  border-bottom: none;
+}