cute

apps/www/src/client/App.tsx

@@ -315,6 +315,7 @@ function About({ slides, error }: { slides: Slide[] | null; error: string }) {
 						View the source
 					</a>
 				</div>
+				<div className="status-block">
 					<p className={`status ${state}`}>
 						<span className="dot" />
 						{state === 'online'
@@ -323,6 +324,9 @@ function About({ slides, error }: { slides: Slide[] | null; error: string }) {
 								? '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;