De-emphasize new series form
Collapsed by default behind a <details> toggle at the top of the page.
Single-column layout with tight spacing keeps tasks as the focus.

Assisted-by: Claude Opus 4.6 via pi
change pnwxslyrqzuktunlolvwoxnmkzloqwrp
commit 45d7700e3973a5d567e289539b669362667ca476
author Alpha Chen <alpha@kejadlen.dev>
date
parent topxponm
diff --git a/lib/views/home.rb b/lib/views/home.rb
index 27622ef..43729a7 100644
--- a/lib/views/home.rb
+++ b/lib/views/home.rb
@@ -14,6 +14,46 @@ module Views
     def view_template
       render Layout.new(current_user: @current_user) do
         div(class: "home") do
+          div(class: "panel") do
+            details(class: "new-series") do
+              summary { "New Series" }
+
+              form(method: "post", action: "/series") do
+                div(class: "field") do
+                  label(for: "note") { "Note" }
+                  textarea(id: "note", name: "note", rows: 3, required: true)
+                end
+
+                div(class: "field") do
+                  label(for: "interval_count") { "Repeat every" }
+                  div(class: "interval") do
+                    input(
+                      type: "number", id: "interval_count", name: "interval_count",
+                      min: 1, value: 1, required: true
+                    )
+                    select(id: "interval_unit", name: "interval_unit", required: true) do
+                      option(value: "day") { "day(s)" }
+                      option(value: "week") { "week(s)" }
+                      option(value: "month") { "month(s)" }
+                      option(value: "quarter") { "quarter(s)" }
+                      option(value: "year") { "year(s)" }
+                    end
+                  end
+                end
+
+                div(class: "field") do
+                  label(for: "first_due_date") { "First due date" }
+                  input(
+                    type: "date", id: "first_due_date", name: "first_due_date",
+                    value: Date.today.to_s, required: true
+                  )
+                end
+
+                button(type: "submit") { "Create" }
+              end
+            end
+          end
+
           div(class: "panel flow") do
             h2 { "Tasks" }
 
@@ -29,44 +69,6 @@ module Views
               end
             end
           end
-
-          div(class: "panel flow") do
-            h2 { "New Series" }
-
-            form(method: "post", action: "/series") do
-              div(class: "field") do
-                label(for: "note") { "Note" }
-                textarea(id: "note", name: "note", rows: 3, required: true)
-              end
-
-              div(class: "field") do
-                label(for: "interval_count") { "Repeat every" }
-                div(class: "interval") do
-                  input(
-                    type: "number", id: "interval_count", name: "interval_count",
-                    min: 1, value: 1, required: true
-                  )
-                  select(id: "interval_unit", name: "interval_unit", required: true) do
-                    option(value: "day") { "day(s)" }
-                    option(value: "week") { "week(s)" }
-                    option(value: "month") { "month(s)" }
-                    option(value: "quarter") { "quarter(s)" }
-                    option(value: "year") { "year(s)" }
-                  end
-                end
-              end
-
-              div(class: "field") do
-                label(for: "first_due_date") { "First due date" }
-                input(
-                  type: "date", id: "first_due_date", name: "first_due_date",
-                  value: Date.today.to_s, required: true
-                )
-              end
-
-              button(type: "submit") { "Create" }
-            end
-          end
         end
       end
     end
diff --git a/public/css/app.css b/public/css/app.css
index 9c3ba22..b6b9963 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -63,21 +63,13 @@ h1 { font-size: var(--step-2); }
 
 .home {
   display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--space-l);
+  gap: var(--space-s);
   padding: var(--space-l) var(--grid-gutter);
-  max-width: 60rem;
+  max-width: 36rem;
   margin-inline: auto;
 }
 
-@media (min-width: 48rem) {
-  .home {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
 .panel {
-  padding: var(--space-m);
 }
 
 /* -------------------- */
@@ -129,6 +121,37 @@ h1 { font-size: var(--step-2); }
   font-style: italic;
 }
 
+/* -------------------- */
+/* New series (collapsible) */
+/* -------------------- */
+
+.new-series summary {
+  font-size: var(--step--1);
+  font-weight: 600;
+  color: #666;
+  cursor: pointer;
+  list-style: none;
+}
+
+.new-series summary::before {
+  content: "+ ";
+}
+
+.new-series[open] summary::before {
+  content: "− ";
+}
+
+.new-series[open] summary {
+  margin-block-end: var(--space-s);
+}
+
+.new-series form {
+  padding: var(--space-m);
+  border: 1px solid #e0e0e0;
+  border-radius: 6px;
+  background: #fff;
+}
+
 /* -------------------- */
 /* Forms */
 /* -------------------- */