Add Nextcloud recipe display and controller

2026-08-03 15:22:28 -05:00
parent 4ea34ec429
commit 464ae4159d
12 changed files with 1189 additions and 0 deletions
@@ -0,0 +1,89 @@
+:root {
+  color-scheme: light;
+  font-family: system-ui, sans-serif;
+  color: #27231b;
+  background: #f3efe5;
+}
+
+* { box-sizing: border-box; }
+
+body { margin: 0; }
+
+main {
+  width: min(760px, 100%);
+  min-height: 100vh;
+  margin: auto;
+  padding: 24px 18px 60px;
+}
+
+header {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+h1 { margin: 0; font-size: 2.3rem; }
+
+.eyebrow {
+  margin: 0 0 2px;
+  color: #75623a;
+  font-size: .8rem;
+  font-weight: 800;
+  letter-spacing: .12em;
+  text-transform: uppercase;
+}
+
+label { display: block; margin: 24px 0 7px; font-weight: 700; }
+
+input, button { font: inherit; }
+
+input {
+  width: 100%;
+  padding: 14px;
+  border: 1px solid #b7aa91;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 1.05rem;
+}
+
+button {
+  border: 0;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.secondary {
+  padding: 11px 13px;
+  color: #fff;
+  background: #5a4b30;
+}
+
+#status { min-height: 1.5em; color: #665a45; }
+
+#recipes { display: grid; gap: 10px; padding: 0; list-style: none; }
+
+.recipe {
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+  text-align: left;
+  color: inherit;
+  background: #fff;
+  box-shadow: 0 1px 5px rgb(61 48 24 / 12%);
+}
+
+.recipe.active { outline: 3px solid #b58b35; }
+
+.recipe strong { font-size: 1.12rem; }
+
+.recipe span {
+  display: -webkit-box;
+  overflow: hidden;
+  color: #756b59;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}