front page redesign: misc

static/style.css

@@ -85,12 +85,6 @@ pre .value, code .value, code.value {
   margin-bottom: 1em;
 }
 
-#front .container {
-  width: 100%;
-  margin: 0;
-  padding: 0;
-}
-
 #front .row {
   padding: 1em;
 }
@@ -169,6 +163,7 @@ pre .value, code .value, code.value {
 
 .front-buttons label {
   font-size: 1em;
+  white-space: nowrap;
 }
 
 .front-buttons label img {

static/topology.js

@@ -1,7 +1,7 @@
 let sketch = function(p) {
+  // this excludes the scroll bar. p.windowWidth and window.innerWidth etc
+  // include it, which makes the canvas too wide and causes horizontal scrolling.
   let width = document.documentElement.clientWidth;
-  // this includes the scroll bar, which is too wide and causes horizontal scrolling
-  // let width = p.windowWidth;
   let height = 900;
   let offset = 300;
 

templates/base.html

@@ -31,7 +31,10 @@
 {% endif %}
 {% endwith %}
 
-<main class="tp-main lead container">
+<main class="tp-main lead
+             {% if body_id == 'front' %} container-fluid
+             {% else %} container
+             {% endif %}">
 
 <div id="header" class="row">
   <div id="logo">

templates/index.html

@@ -14,6 +14,7 @@ bluesky light blue
  -->
 <div id="front-form" class="front-dark">
 <div id="topology" style="position: absolute; top: 0; left: 0"></div>
+
 <div id="front-tagline" class="row bigger">
   <!-- The decentralized social bridge -->
   <em class="front-form-text">Bridging the new social internet</em>
@@ -24,7 +25,11 @@ bluesky light blue
   <span class="i-label">I'm on</span>
 </span>
 <div class="col-sm-8 big">
-  <div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
+  <!--
+    -- Separated buttons
+    -->
+  <div class="btn-group visible-md-block visible-lg-block"
+       role="group" data-toggle="buttons" aria-label="I'm on">
   <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
@@ -95,7 +100,7 @@ bluesky light blue
 </p>
 
 <p id="front-web-web" class="instruction">
-  <a href="https://indieweb.org/reader">Use a feed reader!</a>
+  <a href="https://indieweb.org/reader">Use a feed reader!</a> No need for Bridgy Fed.
 </p>
 
 <div id="front-web-fediverse" class="instruction">
@@ -111,7 +116,7 @@ bluesky light blue
 </p>
 
 <p id="front-fediverse-fediverse" class="instruction">
-  <a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance.</a>
+  <a href="https://docs.joinmastodon.org/user/network/#follow">Search for them on your instance!</a> No need for Bridgy Fed.
 </p>
 </div>