Browse Source

Reduce font weights for better readability

Toned down the excessive boldness from previous commit:

Font weight changes:
- Body text: 600 (semibold) → normal
- Headers: 900 (black) → bold
- Labels: 900 → bold
- Buttons: 900 → bold
- Table headers: 900 → bold
- Table cells: 600 → normal
- Links: 900 → bold
- Form inputs: 600 → normal
- Code blocks: 700 → normal
- Info box: 700 → normal

Border changes:
- Most borders: 3px → 2px
- Maintains clear structure without being overly heavy

Line height:
- 1.4 → 1.5 for better breathing room

Result:
- Maintains 60s datasheet aesthetic
- Much more readable and less harsh
- Headers still stand out with bold weight
- Body text is comfortable to read
- Clean technical document appearance

👾 Generated with [Letta Code](https://letta.com)

Co-Authored-By: Letta <noreply@letta.com>
Cameron Pfiffer 9 months ago
parent
commit
9ca4b632f8
2 changed files with 48 additions and 48 deletions
  1. 21 21
      app.py
  2. 27 27
      dashboard.html

+ 21 - 21
app.py

@@ -301,8 +301,8 @@ async def root(request: Request):
                     background: #f5f5dc;
                     margin: 0;
                     padding: 15px;
-                    line-height: 1.4;
-                    font-weight: 600;
+                    line-height: 1.5;
+                    font-weight: normal;
                 }
                 .container {
                     max-width: 900px;
@@ -316,9 +316,9 @@ async def root(request: Request):
                     margin-bottom: 8px;
                     font-size: 24px;
                     letter-spacing: 3px;
-                    font-weight: 900;
+                    font-weight: bold;
                     text-transform: uppercase;
-                    border-bottom: 3px solid #000;
+                    border-bottom: 2px solid #000;
                     padding-bottom: 8px;
                 }
                 h2 {
@@ -326,13 +326,13 @@ async def root(request: Request):
                     margin: 20px 0 10px;
                     font-size: 16px;
                     letter-spacing: 2px;
-                    font-weight: 900;
+                    font-weight: bold;
                     text-transform: uppercase;
-                    border-bottom: 3px solid #000;
+                    border-bottom: 2px solid #000;
                     padding-bottom: 3px;
                 }
                 .info-box {
-                    border: 3px solid #000;
+                    border: 2px solid #000;
                     padding: 12px;
                     margin: 15px 0;
                     background: #fafafa;
@@ -342,7 +342,7 @@ async def root(request: Request):
                     font-size: 13px;
                     line-height: 1.6;
                     margin: 0;
-                    font-weight: 700;
+                    font-weight: normal;
                 }
                 .feature-list {
                     list-style: none;
@@ -351,18 +351,18 @@ async def root(request: Request):
                 }
                 .feature-list li {
                     padding: 4px 0;
-                    font-weight: 600;
+                    font-weight: normal;
                 }
                 .feature-list li:before {
                     content: "▪ ";
                     color: #000;
-                    font-weight: 900;
+                    font-weight: bold;
                 }
                 code {
                     background: #f0f0f0;
                     padding: 2px 6px;
                     border: 1px solid #000;
-                    font-weight: 700;
+                    font-weight: normal;
                 }
                 pre {
                     background: #fafafa;
@@ -370,19 +370,19 @@ async def root(request: Request):
                     padding: 12px;
                     overflow-x: auto;
                     margin: 10px 0;
-                    font-weight: 600;
+                    font-weight: normal;
                 }
                 .endpoint {
                     background: #fafafa;
                     padding: 8px 12px;
                     margin: 6px 0;
                     border: 2px solid #000;
-                    font-weight: 700;
+                    font-weight: normal;
                 }
                 a {
                     color: #000;
                     text-decoration: underline;
-                    font-weight: 900;
+                    font-weight: bold;
                 }
                 a:hover {
                     background: #000;
@@ -390,10 +390,10 @@ async def root(request: Request):
                 }
                 .note {
                     background: #fafafa;
-                    border: 3px solid #000;
+                    border: 2px solid #000;
                     padding: 12px;
                     margin: 15px 0;
-                    font-weight: 700;
+                    font-weight: normal;
                 }
             </style>
         </head>
@@ -418,7 +418,7 @@ HOSTING:  FREE SERVERLESS DEPLOYMENT</pre>
             <h2>QUICK START</h2>
             
             <div class="example">
-                <p style="font-weight:900;margin:10px 0 6px 0;">SEND ONE-TIME MESSAGE:</p>
+                <p style="font-weight:bold;margin:10px 0 6px 0;">SEND ONE-TIME MESSAGE:</p>
                 <pre>curl -X POST https://letta--switchboard-api.modal.run/schedules/one-time \\
   -H 'Authorization: Bearer YOUR_LETTA_API_KEY' \\
   -H 'Content-Type: application/json' \\
@@ -430,7 +430,7 @@ HOSTING:  FREE SERVERLESS DEPLOYMENT</pre>
             </div>
             
             <div class="example">
-                <p style="font-weight:900;margin:10px 0 6px 0;">CREATE RECURRING SCHEDULE:</p>
+                <p style="font-weight:bold;margin:10px 0 6px 0;">CREATE RECURRING SCHEDULE:</p>
                 <pre>curl -X POST https://letta--switchboard-api.modal.run/schedules/recurring \\
   -H 'Authorization: Bearer YOUR_LETTA_API_KEY' \\
   -H 'Content-Type: application/json' \\
@@ -442,10 +442,10 @@ HOSTING:  FREE SERVERLESS DEPLOYMENT</pre>
             </div>
             
             <h2>CLI TOOL</h2>
-            <p style="margin:8px 0;font-weight:700;">NATURAL LANGUAGE SCHEDULING SUPPORT</p>
+            <p style="margin:8px 0;">NATURAL LANGUAGE SCHEDULING SUPPORT</p>
             
             <div class="example">
-                <p style="font-weight:900;margin:10px 0 6px 0;">INSTALLATION:</p>
+                <p style="font-weight:bold;margin:10px 0 6px 0;">INSTALLATION:</p>
                 <pre>git clone https://github.com/cpfiffer/letta-switchboard.git
 cd letta-switchboard/cli
 go build -o letta-switchboard
@@ -453,7 +453,7 @@ go build -o letta-switchboard
             </div>
             
             <div class="example">
-                <p style="font-weight:900;margin:10px 0 6px 0;">USAGE:</p>
+                <p style="font-weight:bold;margin:10px 0 6px 0;">USAGE:</p>
                 <pre># Send immediately
 ./letta-switchboard send --agent-id agent-xxx --message "Hello!"
 

+ 27 - 27
dashboard.html

@@ -11,8 +11,8 @@
             background: #f5f5dc;
             color: #000;
             padding: 15px;
-            line-height: 1.4;
-            font-weight: 600;
+            line-height: 1.5;
+            font-weight: normal;
         }
         .container { max-width: 1400px; margin: 0 auto; background: white; padding: 30px; box-shadow: 0 0 20px rgba(0,0,0,0.1); }
         h1 { 
@@ -20,7 +20,7 @@
             margin-bottom: 8px;
             font-size: 24px;
             letter-spacing: 3px;
-            font-weight: 900;
+            font-weight: bold;
             text-transform: uppercase;
         }
         h2 { 
@@ -28,16 +28,16 @@
             margin: 20px 0 10px;
             font-size: 16px;
             letter-spacing: 2px;
-            font-weight: 900;
+            font-weight: bold;
             text-transform: uppercase;
-            border-bottom: 3px solid #000;
+            border-bottom: 2px solid #000;
             padding-bottom: 3px;
         }
         
         /* API Key Section */
         #api-key-section {
             background: #fafafa;
-            border: 3px solid #000;
+            border: 2px solid #000;
             padding: 15px;
             margin-bottom: 20px;
         }
@@ -49,7 +49,7 @@
             color: #000;
             font-family: 'Courier New', monospace;
             font-size: 14px;
-            font-weight: 600;
+            font-weight: normal;
         }
         #api-key-section input:focus {
             outline: none;
@@ -61,7 +61,7 @@
         button {
             background: white;
             color: #000;
-            border: 3px solid #000;
+            border: 2px solid #000;
             padding: 8px 16px;
             cursor: pointer;
             font-size: 13px;
@@ -69,7 +69,7 @@
             margin-top: 8px;
             text-transform: uppercase;
             letter-spacing: 1px;
-            font-weight: 900;
+            font-weight: bold;
         }
         button:hover { 
             background: #000;
@@ -95,10 +95,10 @@
             padding: 10px 20px;
             background: #e8e8e8;
             color: #000;
-            border: 3px solid #000;
+            border: 2px solid #000;
             border-bottom: none;
             cursor: pointer;
-            font-weight: 900;
+            font-weight: bold;
             font-family: 'Courier New', monospace;
             text-transform: uppercase;
             letter-spacing: 1px;
@@ -108,14 +108,14 @@
         .tab.active { 
             background: white;
             color: #000;
-            border-bottom: 3px solid white;
-            margin-bottom: -3px;
+            border-bottom: 2px solid white;
+            margin-bottom: -2px;
         }
         
         /* Content */
         .content {
             background: white;
-            border: 3px solid #000;
+            border: 2px solid #000;
             border-top: none;
             padding: 15px;
             display: none;
@@ -127,23 +127,23 @@
             width: 100%;
             border-collapse: collapse;
             margin-top: 10px;
-            border: 3px solid #000;
+            border: 2px solid #000;
         }
         th, td {
-            padding: 6px 10px;
+            padding: 8px 12px;
             text-align: left;
-            border: 2px solid #000;
+            border: 1px solid #000;
         }
         th { 
             background: #f0f0f0;
-            font-weight: 900;
+            font-weight: bold;
             color: #000;
             text-transform: uppercase;
             font-size: 12px;
             letter-spacing: 1px;
         }
         tr:hover { background: #fafafa; }
-        td { font-size: 14px; font-weight: 600; }
+        td { font-size: 14px; font-weight: normal; }
         
         /* Forms */
         .form-group {
@@ -152,7 +152,7 @@
         label {
             display: block;
             margin-bottom: 6px;
-            font-weight: 900;
+            font-weight: bold;
             color: #000;
             text-transform: uppercase;
             font-size: 12px;
@@ -166,7 +166,7 @@
             color: #000;
             font-family: 'Courier New', monospace;
             font-size: 15px;
-            font-weight: 600;
+            font-weight: normal;
         }
         input:focus, textarea:focus, select:focus {
             outline: none;
@@ -174,14 +174,14 @@
             box-shadow: none;
         }
         textarea { min-height: 80px; }
-        small { color: #666; font-size: 12px; font-weight: 600; }
+        small { color: #666; font-size: 12px; font-weight: normal; }
         
         /* Status badges */
         .badge {
             padding: 3px 8px;
             border: 2px solid;
             font-size: 11px;
-            font-weight: 900;
+            font-weight: bold;
             font-family: 'Courier New', monospace;
             text-transform: uppercase;
             letter-spacing: 1px;
@@ -198,8 +198,8 @@
         }
         
         .hidden { display: none; }
-        .error { color: #000; margin-top: 8px; font-weight: 900; }
-        .empty { text-align: center; padding: 30px; color: #666; font-weight: 600; }
+        .error { color: #000; margin-top: 8px; font-weight: bold; }
+        .empty { text-align: center; padding: 30px; color: #666; font-weight: normal; }
         
         /* Loading spinner */
         .loading {
@@ -230,8 +230,8 @@
 <body>
     <div class="container">
         <h1>LETTA SWITCHBOARD — MESSAGE ROUTING SERVICE</h1>
-        <div style="border: 3px solid #000; padding: 12px; margin-bottom: 20px; background: #fafafa;">
-            <pre style="font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.6; margin: 0; font-weight: 700;">SYSTEM:   MESSAGE ROUTING TERMINAL
+        <div style="border: 2px solid #000; padding: 12px; margin-bottom: 20px; background: #fafafa;">
+            <pre style="font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.6; margin: 0; font-weight: normal;">SYSTEM:   MESSAGE ROUTING TERMINAL
 VERSION:  1.0.0
 STATUS:   OPERATIONAL
 PROTOCOL: REST API + SCHEDULED EXECUTION</pre>