cute

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>
 	)

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;