ux and paths and stuff (#8)

Author: isaacbowen

Gemfile

@@ -18,6 +18,9 @@ gem "stripe"
 gem "rollbar"
 gem "oj" # per rollbar recommendation
 
+# needing this locally for the moment
+# gem "openssl"
+
 group :development, :test do
   # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
   gem "debug", platforms: [ :mri, :windows ]

app/assets/stylesheets/application.css

@@ -11,7 +11,7 @@
 
 :root {
   --background: #0a0a0f;
-  --foreground: #e8e8f0;
+  --foreground: #d4d0c8;
   --border: #1a1a2e;
   --border-light: #2a2a3e;
   --accent: #00d9ff;
@@ -36,12 +36,36 @@ body {
   color: var(--foreground);
   font-family: "Lightward Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   line-height: 1.6;
+
+  /* Flex column layout */
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  /* Responsive viewport padding and gap */
+  padding: 1rem;
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  body {
+    padding: 2rem;
+    gap: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    padding: 3rem;
+    gap: 2rem;
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: "Lightward Favorit Expanded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: normal;
   letter-spacing: 0.02em;
+  text-transform: uppercase;
 }
 
 a {
@@ -55,9 +79,11 @@ a:hover {
 
 button, input[type="submit"] {
   font-family: "Lightward Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 1em;
   background: var(--border-light);
   color: var(--accent);
-  border: 1px solid var(--accent);
+  border: none;
+  border-left: 3px solid var(--accent);
   cursor: pointer;
   transition: all 0.2s;
   padding: 0.5rem 1rem;
@@ -67,47 +93,63 @@ button, input[type="submit"] {
 button:hover, input[type="submit"]:hover {
   background: var(--accent);
   color: var(--background);
-  border-color: var(--accent);
-  box-shadow: 0 0 12px var(--accent);
+  border-left-color: var(--accent);
 }
 
 button.secondary {
-  background: transparent;
+  background: var(--background);
   color: var(--foreground);
-  border-color: var(--border-light);
+  border-left-color: var(--border-light);
 }
 
 button.secondary:hover {
   background: var(--border-light);
   color: var(--foreground);
-  border-color: var(--accent);
-  box-shadow: 0 0 8px var(--accent);
+  border-left-color: var(--accent);
 }
 
 button.danger {
-  background: transparent;
+  background: var(--background);
   color: var(--error);
-  border-color: var(--error);
+  border-left-color: var(--error);
 }
 
 button.danger:hover {
   background: var(--error);
   color: var(--background);
-  border-color: var(--error);
-  box-shadow: 0 0 12px var(--error);
+  border-left-color: var(--error);
+}
+
+button.exit, a.exit {
+  background: var(--background);
+  color: var(--foreground);
+  border: none;
+  border-left: 3px solid var(--accent-active);
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+button.exit:hover, a.exit:hover {
+  background: var(--border-light);
+  color: var(--foreground);
+  border-left-color: var(--accent-active);
 }
 
 textarea {
   font-family: "Lightward Favorit Mono", "Courier New", monospace;
-  background: var(--background);
+  font-size: 1em;
+  background: var(--user-message-bg);
   color: var(--foreground);
-  border: 1px solid var(--border);
+  border: none;
+  border-left: 3px solid var(--accent);
+  border-radius: 8px;
+  padding: 1rem;
   resize: vertical;
 }
 
 textarea:focus {
   outline: none;
-  border-color: var(--border-light);
+  border-left-color: var(--accent-active);
 }
 
 input {
@@ -130,3 +172,19 @@ input:focus {
     opacity: 1;
   }
 }
+
+dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.75rem 1.5rem;
+  margin: 1.5rem 0;
+}
+
+dt {
+  font-weight: normal;
+  opacity: 0.6;
+}
+
+dd {
+  margin: 0;
+}