From 0a3baed1dab9ce2f6b15110ac1b93879cbcacc75 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Thu, 22 May 2025 11:49:58 -0400
Subject: [PATCH] intro: Wordsmith some more, and fiddle with style.

---
 apps/intro/index.html | 83 ++++++++++++++++++++++++++++---------------
 1 file changed, 55 insertions(+), 28 deletions(-)

diff --git a/apps/intro/index.html b/apps/intro/index.html
index 3637e950..bbed5cc9 100644
--- a/apps/intro/index.html
+++ b/apps/intro/index.html
@@ -6,6 +6,8 @@
 		<style>
 			.slide {
 				display: none;
+				margin-left: auto;
+				margin-right: auto;
 			}
 			.dot {
 				width: 1em;
@@ -27,6 +29,7 @@
 			margin: 0;
 			padding: 0;
 			flex-direction: column;
+			align-items: center;
 		"
 		class="w3-flex w3-dark-gray w3-center"
 	>
@@ -65,27 +68,33 @@
 			<div class="slide w3-gray" style="width: 90%">
 				<div class="w3-card-4 w3-xlarge">
 					<header class="w3-container w3-blue">
-						<h1>Secure Scuttlebutt in a nutshell:</h1>
+						<h1>💻Secure Scuttlebutt in a Nutshell🦀</h1>
 					</header>
 					<div class="w3-container w3-xlarge w3-left-align">
+						<p>
+							Secure Scuttlebutt is a social network whose technical operation
+							attempts to mirrors human social interaction.
+						</p>
 						<ul>
 							<li>
-								You create your own account and post to your own feed. This is
-								all <b>local</b> and happens <b>offline</b>. You are fully in
-								charge, and you can do most things with no reception whatsoever.
+								You can create your own account and post to your own feed on
+								your own device. This is all <b>local</b> with no external
+								communication. This puts you fully in control of your own words
+								and actions.
 							</li>
 							<li>
-								To interact with others, <b>connect over the network</b>, either
-								directly to your friends (ie, on coffee shop Wi-Fi), to
-								<i>rooms</i> (search the web for <i>#ssbroom</i>), or to
-								<i>pubs</i>.
+								Before you can interact with others, you need to
+								<b>connect over the network</b>, either directly to your friends
+								(i.e., peer-to-peer between your phones on coffee shop Wi-Fi) or
+								to 🚪<i>rooms</i> and 🍻<i>pubs</i> (hint: search the web for
+								<i>#ssbroom</i>).
 							</li>
 							<li>
-								To start seeing content, you need to make some connections and
-								then <b>follow accounts</b>. By default you see your direct
-								friends and friends of those friends. If you encounter content
-								you'd rather not see, <b>block</b> the offending account to
-								improve the experience for you and your followers.
+								Who you choose to <b>follow</b> determines what you see, with
+								most people choosing to see messages from friends and friends of
+								those friends. If you encounter content you'd rather not see,
+								<b>block</b> the offending account to improve the experience for
+								you and your followers.
 							</li>
 							<li>
 								Your feed is an <b>immutable</b> log of your activity. Post with
@@ -111,19 +120,27 @@
 						<h1>~😎 Let's Talk Tilde Friends ~😎</h1>
 					</header>
 					<div class="w3-container w3-xlarge w3-left-align">
-						Tilde Friends is an application platform that is an application of
-						its own.
+						<p>
+							Tilde Friends is an application platform that is an application of
+							its own.
+						</p>
 						<ul>
 							<li>
 								This intro is a Tilde Friends app. You can click <b>edit</b> at
-								the top to look under the hood and make changes if so inclined.
+								the top to look under the hood and make changes.
 							</li>
 							<li>
-								But it's also set up so that you can't just break an instance of
-								an app that everybody is using. There are <b>protections</b> in
-								place like an operating system. The intent is also for it to be
-								<b>safe</b>
-								to run strange apps without worrying about adverse effects.
+								It is already possible to make and share new applications using
+								only Tilde Friends and Secure Scuttlebutt without having to set
+								up development environments, configure web servers, register
+								domain names, or pay for hosting services.
+							</li>
+							<li>
+								But it's also set up so that you can't just break an app that
+								everybody is using or do malicious things with personal content.
+								There are <b>protections</b> in place like an operating system.
+								The intent is also for it to be <b>safe</b> to run strange apps
+								without worrying about adverse effects.
 							</li>
 							<li>
 								But this is all a big 🚧work in progress🚧 and
@@ -142,18 +159,22 @@
 						<h1>🦀Let's Get this Tilde Friends Party Started🎉</h1>
 					</header>
 					<div class="w3-container w3-xlarge w3-left-align">
+						<p>The button below will take you to the Secure Scuttlebutt app.</p>
 						<ul>
-							<li>
-								The button below will take you to the Secure Scuttlebutt app.
-							</li>
 							<li>
 								Remember:
 								<ol>
 									<li>You are in charge. This is all on your device.</li>
-									<li>Make network connections to replicate with others.</li>
-									<li>Follow more accounts to see more content.</li>
 									<li>
-										Post respectfully, and block those you'd rather not see.
+										Make network connections to exchange messages with others.
+									</li>
+									<li>
+										Follow more accounts to see more content, and block those
+										posting content you'd rather not see.
+									</li>
+									<li>
+										Be respectful, and consider the consequences of what you
+										post.
 									</li>
 									<li>
 										This is all under active development. Exercise patience, and
@@ -175,7 +196,13 @@
 		</div>
 		<div
 			class="w3-text-white w3-xlarge w3-center w3-flex"
-			style="width: 100%; flex: 0 1; flex-direction: row; align-items: center"
+			style="
+				width: 100%;
+				flex: 0 1;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+			"
 		>
 			<div class="w3-jumbo" id="left" style="flex: 1 0; cursor: pointer">
 				&#10094;