more doc revisions

for #295

static/style.css

@@ -66,12 +66,6 @@
   }
 }
 
-#header {
-  float: none;
-  width: 100%;
-  z-index: 0;
-}
-
 #header p {
   text-align: left;
 }
@@ -433,6 +427,12 @@ iframe#twitter-widget-0 {
   filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2,Direction=135,Color='#222222');
 }
 
+a img.shadow:hover
+{
+	box-shadow: 3px 3px 3px #06c !important;
+}
+
+
 .error, .warning {
   margin: 10px;
   padding: .2em;
@@ -476,3 +476,44 @@ iframe {
   border: 1px solid gray;
   height: 300px;
 }
+
+.right {
+	float: right;
+	margin-left: 20px;
+	text-align: center;
+}
+
+.left {
+	float: left;
+	margin-right: 20px;
+	text-align: center;
+}
+
+.left img, .right img {
+  width: 100%;
+}
+
+.left p, .right p {
+  margin-top: .3em;
+  margin-bottom: 1em;
+}
+
+@media screen and (min-width: 312px) {
+}
+
+@media screen and (max-width: 455px) {
+	.half, .half-sidebyside {
+		width: 100%;
+	}
+	.third, .quarter, .sixth {
+		width: 50%;
+	}
+}
+
+@media screen and (min-width: 456px) {
+	.half { width: 50%; }
+	.half-sidebyside { width: 45%; }
+	.third { width: 32%; }
+	.quarter { width: 25%; }
+	.sixth { width: 17%; }
+}

templates/base.html

@@ -33,8 +33,8 @@
 <main class="tp-main lead container">
 
 <div id="intro" class="row">
-<div id="logos" class="col-xs-4">
- <a href="/"><img class="img-responsive" src="/static/bridgy_fed_logo.png" /></a>
+<div id="logo" class="col-xs-4">
+ <a href="/"><img id="logo-img" class="img-responsive" src="/static/bridgy_fed_logo.png" /></a>
 </div>
 
 <div id="header" class="col-xs-7">

templates/docs.html

@@ -4,20 +4,27 @@
 
 <div id="docs">
 
+<div class="right third">
+<a href="/static/snarfed_web_site.png">
+  <img class="shadow" src="/static/snarfed_web_site.png" />
+</a>
+<p><em>Personal web site</em></p>
+<a href="/static/snarfed_mastodon.png">
+  <img class="shadow" src="/static/snarfed_mastodon.png" />
+</a>
+<p><em>Fediverse profile via Bridgy Fed</em></p>
+</div>
+
 <p>
-Bridgy Fed lets you interact with <a href="https://joinmastodon.org/">Mastodon</a> and the rest of the <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a> from your web site. It translates <a href="https://indieweb.org/">IndieWeb</a> posts, replies, likes, reposts, and follows from <a href="http://www.webmention.org/">webmentions</a> to federated social networking protocols like <a href="https://activitypub.rocks/">ActivityPub</a> and <a href="https://en.wikipedia.org/wiki/OStatus">OStatus</a>, and vice versa.
+Bridgy Fed turns your web site into its own <a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a> account, visible in <a href="https://joinmastodon.org/">Mastodon</a> and beyond. You can post, reply, like, repost, and follow fediverse accounts by posting on your site with <a href="https://microformats.org/wiki/microformats2">microformats2</a> and sending <a href="http://www.webmention.org/">webmentions</a>. Bridgy Fed translates those posts to fediverse protocols like <a href="https://activitypub.rocks/">ActivityPub</a> and <a href="https://en.wikipedia.org/wiki/OStatus">OStatus</a>, and sends fediverse interactions back to your site as webmentions.
 </p>
 
 <p>
-This isn't <a href="https://indieweb.org/syndication">syndication</a> or <a href="https://indieweb.org/POSSE">POSSE</a>! You don't need an account on Mastodon or anywhere else. Bridgy Fed lets your site act like a first class member of the fediverse. Other people on the fediverse will see your posts directly from your own site, and vice versa.
+This isn't <a href="https://indieweb.org/syndication">syndication</a> or <a href="https://indieweb.org/POSSE">POSSE</a>! You don't need an account on Mastodon or anywhere else. Bridgy Fed lets your site act like a first class member of the fediverse. People there will see your posts directly from your site, and vice versa.
 </p>
 
 <p>
-Here's <a href="https://mastodon.technology/@snarfed/3194674">an example on Mastodon</a>, and <a href="https://hubzilla.com.br/channel/snarfed/?f=&mid=459a0b809f2d5395efd5d581dad70043c5ea9e1dbd156bc5e1b2f771c98eb970@hubzilla.com.br&zid=snarfed%40hubzilla.com.br">another example on Hubzilla</a>.
-</p>
-
-<p>
-(If you just want people in the fediverse to see posts from your web site, <a href="https://www.google.com/search?q=rss+atom+mastodon+bot">consider an RSS or Atom feed bot instead</a>. Bridgy Fed is more powerful, but also more work to set up and use.)
+Bridgy Fed does take some technical know-how to set up, and there are simpler (but less powerful) alternatives. If you just want your site's posts to show up in the fediverse, without any other interactions, <a href="https://www.google.com/search?q=rss+atom+mastodon+bot">consider an RSS or Atom feed bot instead</a>. Or, if you want to cross-post to an existing Mastodon account, <a href="https://brid.gy/">try Bridgy</a>.
 </p>
 
 <br>