feat: Add configurable UI scale option

6 files changed, 30 insertions, 16 deletions

diff --git a/config.example.yaml b/config.example.yaml
index 5ceba5f..bc6a772 100644
--- a/config.example.yaml
+++ b/config.example.yaml
@@ -48,6 +48,10 @@ display:
   #   "UTC"              - Use UTC timezone
   #   "America/New_York" - Use specific IANA timezone (e.g., "Europe/London", "Asia/Tokyo")
   timezone: "Browser"
+  
+  # UI scale factor (0.5 to 2.0, default: 1.0)
+  # Adjusts the overall size of text and spacing
+  # scale: 1.0
 
 # Monitor groups
 groups:
diff --git a/ideas.md b/ideas.md
index f21c1ee..0d82d5d 100644
--- a/ideas.md
+++ b/ideas.md
@@ -2,13 +2,6 @@
 
 ## 1. Style & Theme Options
 
-### Theme System
-- Keep the terminal theme as the new default
-- Add it as an optional theme alongside the OpenCode style
-- Make further refinements to the terminal theme
-- Theme switcher between "terminal" and "opencode" styles via config
-- Configurable color palette (allow users to use colored statuses if desired)
-
 ### Terminal Theme Enhancements
 - **ASCII art/box drawing characters**: Use `┌─┐│└┘` for group borders instead of CSS borders
 - **Terminal-style status indicators**: Replace colored dots with `[✓]` `[!]` `[✗]` text symbols
diff --git a/internal/config/config.go b/internal/config/config.go
index 7bad5f9..076a203 100644
--- a/internal/config/config.go
+++ b/internal/config/config.go
@@ -30,6 +30,8 @@ type DisplayConfig struct {
 	PingFixedSlots bool `yaml:"ping_fixed_slots"`
 	// Timezone for display (e.g., "UTC", "America/New_York", "Local")
 	Timezone string `yaml:"timezone"`
+	// Scale adjusts the overall UI scale (default: 1.0, range: 0.5-2.0)
+	Scale float64 `yaml:"scale"`
 }
 
 // SiteConfig contains site metadata
@@ -203,6 +205,15 @@ func (c *Config) applyDefaults() {
 	if c.Display.Timezone == "" {
 		c.Display.Timezone = "Local"
 	}
+	if c.Display.Scale == 0 {
+		c.Display.Scale = 1.0
+	}
+	// Clamp scale to reasonable range
+	if c.Display.Scale < 0.5 {
+		c.Display.Scale = 0.5
+	} else if c.Display.Scale > 2.0 {
+		c.Display.Scale = 2.0
+	}
 
 	// Apply group defaults
 	for i := range c.Groups {
diff --git a/internal/server/server.go b/internal/server/server.go
index fe8c01e..ab1ca4c 100644
--- a/internal/server/server.go
+++ b/internal/server/server.go
@@ -129,6 +129,7 @@ type PageData struct {
 	Timezone           string       // Timezone for display
 	UseBrowserTimezone bool         // Use client-side timezone conversion
 	ThemeCSS           template.CSS // OpenCode theme CSS (safe CSS)
+	Scale              float64      // UI scale factor (0.5-2.0)
 }
 
 // GroupData contains data for a monitor group
@@ -213,6 +214,7 @@ func (s *Server) handleIndex(w http.ResponseWriter, r *http.Request) {
 		Timezone:           s.config.Display.Timezone,
 		UseBrowserTimezone: s.config.Display.Timezone == "Browser",
 		ThemeCSS:           themeCSS,
+		Scale:              s.config.Display.Scale,
 	}
 
 	overallUp := true
diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index f494dcf..2e57537 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -13,6 +13,7 @@
 html {
     -webkit-text-size-adjust: 100%;
     tab-size: 4;
+    font-size: calc(16px * var(--scale, 1));
 }
 
 :root {
@@ -67,7 +68,7 @@ body {
     background: var(--bg-primary);
     color: var(--text-primary);
     font-family: 'JetBrains Mono', Menlo, Monaco, 'Courier New', monospace;
-    font-size: 12px;
+    font-size: 0.75rem; /* 12px at scale 1 */
     line-height: 1.5;
 }
 
@@ -220,7 +221,7 @@ a {
 .min-h-screen { min-height: 100vh; }
 .min-w-0 { min-width: 0px; }
 .max-w-4xl { max-width: 56rem; }
-.max-w-\[200px\] { max-width: 200px; }
+.max-w-\[200px\] { max-width: 12.5rem; } /* 200px at scale 1 */
 
 /* Spacing - more compact */
 .mx-auto { margin-left: auto; margin-right: auto; }
@@ -255,10 +256,10 @@ a {
 .divide-neutral-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color); }
 
 /* Typography */
-.text-xs { font-size: 11px; line-height: 1.4; }
-.text-sm { font-size: 12px; line-height: 1.5; }
-.text-lg { font-size: 14px; line-height: 1.5; }
-.text-xl { font-size: 16px; line-height: 1.5; }
+.text-xs { font-size: 0.6875rem; line-height: 1.4; } /* 11px at scale 1 */
+.text-sm { font-size: 0.75rem; line-height: 1.5; }   /* 12px at scale 1 */
+.text-lg { font-size: 0.875rem; line-height: 1.5; }  /* 14px at scale 1 */
+.text-xl { font-size: 1rem; line-height: 1.5; }      /* 16px at scale 1 */
 .font-medium { font-weight: 400; }
 .font-semibold { font-weight: 400; }
 .font-bold { font-weight: 400; }
@@ -296,7 +297,7 @@ a {
 @media (min-width: 640px) {
     .sm\:py-12 { padding-top: 2.4rem; padding-bottom: 2.4rem; }
     .sm\:mb-12 { margin-bottom: 2.4rem; }
-    .sm\:text-2xl { font-size: 18px; line-height: 1.5; }
+    .sm\:text-2xl { font-size: 1.125rem; line-height: 1.5; } /* 18px at scale 1 */
 }
 
 /* Space */
@@ -338,7 +339,7 @@ svg { fill: none; }
     position: fixed;
     z-index: 1000;
     padding: 0.5rem 0.7rem;
-    font-size: 11px;
+    font-size: 0.6875rem; /* 11px at scale 1 */
     line-height: 1.5;
     background-color: var(--bg-secondary);
     color: var(--text-primary);
@@ -349,7 +350,7 @@ svg { fill: none; }
     opacity: 0;
     transform: translateY(4px);
     transition: opacity 100ms ease, transform 100ms ease;
-    max-width: 280px;
+    max-width: 17.5rem; /* 280px at scale 1 */
     white-space: normal;
 }
 
diff --git a/internal/server/templates/index.html b/internal/server/templates/index.html
index 886ef63..0e36c16 100644
--- a/internal/server/templates/index.html
+++ b/internal/server/templates/index.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <style>
+        :root { --scale: {{.Scale}}; }
+    </style>
     {{if .ThemeCSS}}
     <style>
         /* OpenCode Theme - Loaded before external CSS to prevent flash */