From 1460ff4a611886bd0700f1e16a0ad9050dab8161 Mon Sep 17 00:00:00 2001
From: Ryan Barrett <git@ryanb.org>
Date: Fri, 15 Dec 2023 12:33:51 -0800
Subject: [PATCH] front page redesign: misc

---
 static/style.css     |  7 +------
 static/topology.js   |  4 ++--
 templates/base.html  |  5 ++++-
 templates/index.html | 11 ++++++++---
 4 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/static/style.css b/static/style.css
index a6222be..6af6de1 100644
--- a/static/style.css
+++ b/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 {
diff --git a/static/topology.js b/static/topology.js
index 033a621..c970565 100644
--- a/static/topology.js
+++ b/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;
 
diff --git a/templates/base.html b/templates/base.html
index acc4fe6..99536a1 100644
--- a/templates/base.html
+++ b/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">
diff --git a/templates/index.html b/templates/index.html
index 1231b8a..c07ffb9 100644
--- a/templates/index.html
+++ b/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>