From beed8451d47885cfb72b002d11195caf676ab15b Mon Sep 17 00:00:00 2001
From: Devin Zuczek <devin.zuczek@gmail.com>
Date: Fri, 24 Jul 2026 23:07:53 -0400
Subject: [PATCH] cute

---
 apps/www/src/client/App.tsx    | 20 ++++++++++++--------
 apps/www/src/client/styles.css | 14 ++++++++++++++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/apps/www/src/client/App.tsx b/apps/www/src/client/App.tsx
index 0e34a6b..99e0672 100644
--- a/apps/www/src/client/App.tsx
+++ b/apps/www/src/client/App.tsx
@@ -315,14 +315,18 @@ function About({ slides, error }: { slides: Slide[] | null; error: string }) {
 						View the source
 					</a>
 				</div>
-				<p className={`status ${state}`}>
-					<span className="dot" />
-					{state === 'online'
-						? 'Server online'
-						: state === 'down'
-							? 'Server unreachable'
-							: 'Checking the server'}
-				</p>
+				<div className="status-block">
+					<p className={`status ${state}`}>
+						<span className="dot" />
+						{state === 'online'
+							? 'Server online'
+							: state === 'down'
+								? 'Server unreachable'
+								: 'Checking the server'}
+					</p>
+					{/* Only when it's actually up: when it isn't, people want the status, not the joke. */}
+					{state === 'online' && <p className="status-quip">The cloud never goes down, right?</p>}
+				</div>
 			</div>
 		</section>
 	)
diff --git a/apps/www/src/client/styles.css b/apps/www/src/client/styles.css
index ea3d45f..0a9a5c3 100644
--- a/apps/www/src/client/styles.css
+++ b/apps/www/src/client/styles.css
@@ -324,6 +324,20 @@ body {
 	gap: 12px;
 }
 
+.status-block {
+	display: flex;
+	flex-direction: column;
+	gap: 7px;
+}
+
+.status-quip {
+	margin: 0;
+	font-size: 0.8rem;
+	font-style: italic;
+	color: var(--muted);
+	opacity: 0.8;
+}
+
 /* Status of the actual server, not decoration — see About. */
 .status {
 	display: inline-flex;