From 4d84bcd80b430facd94e9e08fb0168c137c7f538 Mon Sep 17 00:00:00 2001
From: Ryan Barrett <git@ryanb.org>
Date: Tue, 26 Dec 2023 15:05:44 -0800
Subject: [PATCH] front page redesign: instructions layout tweak

---
 static/style.css     | 12 ++++++++++--
 templates/index.html | 10 ++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/static/style.css b/static/style.css
index 956e4fe..d2349e7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -187,14 +187,22 @@ pre .value, code .value, code.value {
   margin: .1em !important;
 }
 
-#front .web {
+.front-light .web {
   color: #20593c;
 }
 
-#front .fediverse {
+.front-light .fediverse {
   color: #88305b;
 }
 
+.front-dark .web {
+  color: #87d8a6;
+}
+
+.front-dark .fediverse {
+  color: #d887a6;
+}
+
 .fediverse img {
   height: 1em;
 }
diff --git a/templates/index.html b/templates/index.html
index 841f727..972cdb2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -24,21 +24,23 @@
   <input required type="url" name="url" id="url" placeholder="snarfed.org" />
   <input type="submit" class="btn btn-default" value="Go" />
 </form>
-<br><br>
-<p>Got a <a class="fediverse" href="https://en.wikipedia.org/wiki/Fediverse"><img src="/static/fediverse_logo.svg"> fediverse</a> account? Follow the <span class="web">🌐 web</span> site <a class="handle" href="https://example.com/">example.com</a> by searching for <span class="handle">@example.com@web.brid.gy</span> in your fediverse instance.</p>
 </div>
 
 <div class="row big front-dark">
+<p>Got a <a class="fediverse" href="https://en.wikipedia.org/wiki/Fediverse"><img src="/static/fediverse_logo.svg"> fediverse</a> account? Follow the <span class="web">🌐 web</span> site <a class="handle" href="https://example.com/">example.com</a> by searching for <span class="handle">@example.com@web.brid.gy</span> in your fediverse instance.</p>
+</div>
+
+<div class="row big front-light">
 <p>Bridgy Fed connects many popular decentralized social networks. You can use it from one network to follow people on another, see their posts, and reply and like and repost like normal. All interactions work in both directions. <a href="/docs">See the docs for more info.</a></p>
 </div>
 
 <!-- <p>Blocks, mutes, and other native moderation features work automatically. You can opt out of Bridgy Fed by adding <em>#nobridge</em> or <em>#nobots</em> to your bio or <a href="mailto:opt-out@brid.gy">by private email request</a>.</p> -->
 
-<div class="row big front-light">
+<div class="row big front-dark">
 <p>Bridgy Fed currently supports web sites and blogs and the <a href="https://enwp.org/fediverse">fediverse</a> via <a href="https://activitypub.rocks/">ActivityPub</a>. More networks like <a href="https://blueskyweb.xyz/">Bluesky</a>/<a href="https://atproto.com/">AT Protocol</a> and <a href="https://en.wikipedia.org/wiki/Nostr">Nostr</a> are coming soon!</p>
 </div>
 
-<div class="row big front-dark">
+<div class="row big front-light">
 <p>Bridgy Fed is a free, non-commercial, <a href="https://github.com/snarfed/bridgy-fed">open source</a> service. <a href="https://snarfed.org/2023-11-27_re-introducing-bridgy-fed">More background here.</a> <a href="mailto:feedback@brid.gy">Feedback</a> and <a href="https://github.com/snarfed/bridgy-fed/issues">bug reports</a> are welcome!</a></p>
 </div>