front page redesign: incorporate first round of feedback from #indieweb

* cross browser testing
* tone down glow shadows
* drop "coming soon" buttons, move to their own section below

static/style.css

@@ -2,6 +2,7 @@
 :root {
   --bg: #23527c;
   --fg: white;
+  --glow: #ffd080;
 }
 
 #header {
@@ -119,11 +120,6 @@ pre .value, code .value, code.value {
   box-shadow: none;
 }
 
-.front-form-text {
-	box-shadow: 0 0 .5em 0.5em #23527c90;
-	background-color: #23527c90;
-}
-
 .text-outline {
   text-shadow: -2px -2px 0 var(--bg), 2px -2px 0 var(--bg), -2px 2px 0 var(--bg), 2px 2px 0 var(--bg);
   /* this is easier and supported in major browsers but draws the outline *inside*
@@ -172,10 +168,10 @@ pre .value, code .value, code.value {
 
 #front-tagline {
   margin-bottom: 0;
-  text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
+  text-shadow: 0px 0px .2em var(--glow);
 }
 
-@media (min-width: 1200px) {  /* @screen-lg-min */
+@media (min-width: 992px) {  /* @screen-md-min */
   .front-buttons > div:first-child {
     text-align: right;
   }
@@ -207,38 +203,13 @@ pre .value, code .value, code.value {
   border: 2px solid #c94786;
 }
 
-.btn.active:not(.disabled) {
-  box-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
+.btn.active {
+  box-shadow: 1px 1px .1em var(--glow), -1px -1px .1em var(--glow);
 }
 
-.btn:hover:not(.disabled) {
-  box-shadow: 0px 0px 1em white, 2px 2px 1em yellow, -2px -2px 1em red;
-}
-
-.btn.atproto, .btn.atproto:hover {
-  background-color: #2b3e5b;
-  /* not disabled: #113a79; */
-  border: 2px solid #3e6894;
-  /* not disabled: #4786c9; */
-}
-
-.btn.nostr, .btn.nostr:hover {
-  background-color: #46374F;
-  /* not disabled: #491F62; */
-  border: 2px solid #63516E;
-}
-
-.btn.disabled, .btn.disabled:hover {
-  opacity: 100%;
-  color: #c0c0c0;
-}
-
-.btn.disabled img {
-  opacity: 65%;
-}
-
-.nostr img {
-  height: 1.4em !important;
+.btn:hover {
+  box-shadow: 1px 1px .1em var(--glow), -1px -1px .1em var(--glow);
+  text-shadow: 0px 0px .1em var(--glow);
 }
 
 #front-instructions {

templates/index.html

@@ -18,14 +18,14 @@
 
 <div id="front-me" class="row front-buttons"
      role="group" data-toggle="buttons" aria-label="I'm on">
-  <div class="col-lg-4 bigger text-outline">
+  <div class="col-md-4 col-md-offset-2 bigger text-outline">
     I'm on
   </div>
 
   <!--
     -- Separated buttons
     -->
-  <div class="btn-group col-lg-8 big">
+  <div class="btn-group col-md-6 big">
   <label for="me-web" class="btn btn-primary web">
     <!-- autocomplete="off" prevents Firefox from preserving these buttons' state
          https://github.com/twbs/bootstrap/issues/793
@@ -38,25 +38,16 @@
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
-  <br class="visible-xs-inline">
-  <label for="me-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
-    <img src="/static/atproto_logo.png">
-    Bluesky
-  </label>
-  <label for="me-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
-    <img src="/static/nostr_logo_transparent.png">
-    Nostr
-  </label>
   </div>
 </div>
 
 <div id="front-them" class="row front-buttons"
      role="group" data-toggle="buttons" aria-label="I want to follow someone on">
-  <div class="col-lg-4 bigger text-outline">
+  <div class="col-lg-4 col-lg-offset-2 col-md-5 col-md-offset-1 bigger text-outline">
     I want to follow <br class="visible-xs-inline"> someone on
   </div>
 
-  <div class="btn-group col-lg-8 big">
+  <div class="btn-group col-md-6 big">
   <label for="them-web" class="btn btn-primary web">
     <input name="them" id="them-web" type="radio" autocomplete="off">
     🌐 Web
@@ -66,15 +57,6 @@
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
-  <br class="visible-xs-inline">
-  <label for="them-atproto" class="btn btn-primary disabled atproto" title="Coming soon">
-    <img src="/static/atproto_logo.png">
-    Bluesky
-  </label>
-  <label for="them-nostr" class="btn btn-primary disabled nostr" title="Coming soon">
-    <img src="/static/nostr_logo_transparent.png">
-    Nostr
-  </label>
   </div>
 </div>
 
@@ -114,7 +96,11 @@
 <!-- <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">
-<p>Bridgy Fed is a free, non-commercial, open source 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>
+<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">
+<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>
 
 <div id="front-logo-bottom" class="row">