From bb1190e3f8e81a5524f456cfea8c9a58ed806999 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Thu, 22 May 2025 12:00:33 -0400
Subject: [PATCH] intro: Ugg, CSS.

---
 apps/intro/index.html | 37 +++++++++++++++++++++++--------------
 1 file changed, 23 insertions(+), 14 deletions(-)

diff --git a/apps/intro/index.html b/apps/intro/index.html
index bbed5cc9..a2e4f2cf 100644
--- a/apps/intro/index.html
+++ b/apps/intro/index.html
@@ -34,24 +34,33 @@
 		class="w3-flex w3-dark-gray w3-center"
 	>
 		<div
-			style="flex: 1 1 auto; overflow: auto; contain: content; padding: 64px"
+			style="
+				flex: 1 1 auto;
+				overflow: auto;
+				contain: content;
+				padding-top: 16px;
+				padding-bottom: 16px;
+			"
 		>
-			<div
-				class="slide w3-content w3-xlarge w3-blue w3-card-4 w3-panel w3-padding-32 w3-round-xlarge"
-			>
-				<div>
-					<div>Welcome to</div>
-					<div>~😎 Tilde Friends.</div>
+			<div class="slide">
+				<div
+					class="w3-content w3-xlarge w3-card-4 w3-blue w3-panel w3-padding-32 w3-round-xlarge"
+					style="margin: 32px"
+				>
+					<div>
+						<div>Welcome to</div>
+						<div>~😎 Tilde Friends.</div>
+					</div>
+					<footer>
+						<button class="w3-button w3-yellow proceed">Next</button>
+					</footer>
 				</div>
-				<footer>
-					<button class="w3-button w3-yellow proceed">Next</button>
-				</footer>
 			</div>
 			<div class="slide w3-card-4 w3-gray" style="width: 90%">
 				<header class="w3-container w3-blue w3-xlarge">
 					<h1>This brief tutorial will introduce:</h1>
 				</header>
-				<ul class="w3-xlarge w3-left-align">
+				<ul class="w3-large w3-left-align">
 					<li><b>Secure Scuttlebutt</b>, a decentralized social network.</li>
 					<li>
 						<b>Tilde Friends</b>, the application platform that you are using
@@ -70,7 +79,7 @@
 					<header class="w3-container w3-blue">
 						<h1>💻Secure Scuttlebutt in a Nutshell🦀</h1>
 					</header>
-					<div class="w3-container w3-xlarge w3-left-align">
+					<div class="w3-container w3-large w3-left-align">
 						<p>
 							Secure Scuttlebutt is a social network whose technical operation
 							attempts to mirrors human social interaction.
@@ -119,7 +128,7 @@
 					<header class="w3-container w3-blue w3-center">
 						<h1>~😎 Let's Talk Tilde Friends ~😎</h1>
 					</header>
-					<div class="w3-container w3-xlarge w3-left-align">
+					<div class="w3-container w3-large w3-left-align">
 						<p>
 							Tilde Friends is an application platform that is an application of
 							its own.
@@ -158,7 +167,7 @@
 					<header class="w3-container w3-blue w3-center">
 						<h1>🦀Let's Get this Tilde Friends Party Started🎉</h1>
 					</header>
-					<div class="w3-container w3-xlarge w3-left-align">
+					<div class="w3-container w3-large w3-left-align">
 						<p>The button below will take you to the Secure Scuttlebutt app.</p>
 						<ul>
 							<li>