From ff4f041e2cfbb154dffbb8d6feece98e7d28507b Mon Sep 17 00:00:00 2001
From: Ryan Barrett <git@ryanb.org>
Date: Fri, 22 Dec 2023 10:29:59 -0800
Subject: [PATCH] front page redesign: misc responsive style tweaks

---
 static/style.css     | 36 +++++++++++++++---------------------
 templates/index.html | 14 ++++----------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/static/style.css b/static/style.css
index ba5230e5..e5cdb026 100644
--- a/static/style.css
+++ b/static/style.css
@@ -86,14 +86,20 @@ pre .value, code .value, code.value {
 }
 
 #front .row {
-  padding: 1em;
+  padding-top: 1em;
+  padding-bottom: 1em;
+}
+
+#front .row p {
+  padding-left: 1em;
+  padding-right: 1em;
 }
 
 #front #header {
   padding-bottom: 0;
   background-color: var(--fg);
   /* see corresponding shadow in .front-dark below */
-  box-shadow: 0 0 .5em .5em var(--fg);
+  box-shadow: 0 0 .5em 1.5em var(--fg);
 }
 
 #front-form {
@@ -118,7 +124,7 @@ pre .value, code .value, code.value {
 
 .front-light {
   background-color: var(--fg);
-  box-shadow: 0 0 .5em 1em var(--fg);
+  box-shadow: 0 0 .5em 1.5em var(--fg);
 }
 
 .front-dark {
@@ -150,12 +156,16 @@ pre .value, code .value, code.value {
   /* align-items: center; */
 }
 
+.front-buttons .btn-group {
+  text-align: left;
+}
+
 #front-tagline {
   margin-bottom: 0;
   text-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
 }
 
-@media (min-width: 992px) {  /* @screen-md-min */
+@media (min-width: 1200px) {  /* @screen-lg-min */
   .front-buttons > div:first-child {
     text-align: right;
   }
@@ -174,6 +184,7 @@ pre .value, code .value, code.value {
 .front-buttons .btn {
   float: none;  /* separate buttons */
   border-radius: .2em !important;
+  margin: .1em !important;
 }
 
 .btn.web, .btn.web:hover, .btn.web:focus, .btn.web.active {
@@ -181,27 +192,11 @@ pre .value, code .value, code.value {
   border: 2px solid #47c986;
 }
 
-/* .btn.web.active { */
-/*   background-color: #50996c; */
-/* } */
-
-/* .btn.web:hover { */
-/*   background-color: #60a98c; */
-/* } */
-
 .btn.fediverse, .btn.fediverse:hover, .btn.fediverse:focus, .btn.fediverse.active {
   background-color: #88305b;
   border: 2px solid #c94786;
 }
 
-/* .btn.fediverse.active { */
-/*   background-color: #88305b; */
-/* } */
-
-/* .btn.fediverse:hover { */
-/*   background-color: #88305b; */
-/* } */
-
 .btn.active:not(.disabled) {
   box-shadow: 0px 0px .5em white, 2px 2px .5em yellow, -2px -2px .5em red;
 }
@@ -221,7 +216,6 @@ pre .value, code .value, code.value {
   background-color: #46374F;
   /* not disabled: #491F62; */
   border: 2px solid #63516E;
-  /* not disabled: ; */
 }
 
 .btn.disabled, .btn.disabled:hover {
diff --git a/templates/index.html b/templates/index.html
index b3a372c7..3ff5bf0a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,12 +6,6 @@
 <script src="/static/bootstrap.min.js"></script>
 <script src="/static/index.js"></script>
 
-<!--
-nostr purple
-web blue? green? globe
-fediverse pink?
-bluesky light blue
- -->
 <div id="front-form" class="front-dark">
 <div id="topology" style="position: absolute; top: 0; left: 0"></div>
 
@@ -24,14 +18,14 @@
 
 <div id="front-me" class="row front-buttons"
      role="group" data-toggle="buttons" aria-label="I'm on">
-  <div class="col-md-3 bigger text-outline">
+  <div class="col-lg-4 bigger text-outline">
     I'm on
   </div>
 
   <!--
     -- Separated buttons
     -->
-  <div class="btn-group col-md-8 big">
+  <div class="btn-group col-lg-8 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
@@ -58,11 +52,11 @@
 
 <div id="front-them" class="row front-buttons"
      role="group" data-toggle="buttons" aria-label="I want to follow someone on">
-  <div class="col-md-3 bigger text-outline">
+  <div class="col-lg-4 bigger text-outline">
     I want to follow <br class="visible-xs-inline"> someone on
   </div>
 
-  <div class="btn-group col-md-8 big">
+  <div class="btn-group col-lg-8 big">
   <label for="them-web" class="btn btn-primary web">
     <input name="them" id="them-web" type="radio" autocomplete="off">
     🌐 Web