fixed flex box

static/backup.html

@@ -32,11 +32,10 @@
         <button class="icon-button back-button" onclick="history.back()">
           <img src="img/back.svg" alt="" />
         </button>
-        <h2>Backup</h2>
+        <h2>Choose a Recovery Method</h2>
         <p class="header-title">
-          It looks like this is a
+          <span style="font-weight: bold">New Node! 🎉</span> It's important
-          <span style="font-weight: bold">new</span> node, it's important
+          to backup your keys.
-          establish backups.
         </p>
       </section>
 
@@ -45,17 +44,11 @@
       <section class="setup-content">
         <div class="description-box">
           <div class="description">
-            In addition to your seed phrase, you'll need a channel backup to
+            In addition to your seed phrase, you also need channel details to recover funds should your node experience a hardware failure.
-          </div>
-          <div class="description">
-            recover funds should your node experience a hardware failure.
           </div>
           <br />
           <div class="description">
-            It's important always to have the latest version of this backup,
+            It's important always to have the latest version of this file, fortunately it's small enough to be cached on the Nostr relay automatically.
-          </div>
-          <div class="description">
-            fortunately they're small enough to be cached on the Nostr relay.
           </div>
         </div>
         <div class="warning-text">

static/css/styles.css

@@ -9,12 +9,17 @@
 }
 
 body {
-  margin-block-start: 15px;
   font-family: Montserrat;
   background-color: var(--background-color);
   color: var(--color);
   text-align: center;
-  overflow: scroll;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
 }
 
 header {
@@ -24,12 +29,14 @@ header {
   flex-direction: row;
   align-items: center;
   gap: 1rem;
+  height: 4rem;
+  padding: 0.5rem 1rem;
 }
 
 main {
-  max-width: 500px;
+  max-width: 600px;
-  width: 100%;
   margin-inline: auto;
+  padding: 1rem;
 }
 
 * {
@@ -37,13 +44,13 @@ main {
 }
 
 @media (min-width: 768px) {
-  body {
+  body > * {
     zoom: 1.4;
   }
 }
 
 @media (min-width: 2000px) {
-  body {
+  body > * {
     zoom: 1.6;
   }
 }
@@ -143,7 +150,7 @@ a {
 
 /* Display a checkmark when the checkbox is checked */
 .checkbox input[type="checkbox"]:checked + .checkbox-shape::before {
-  content: "✔";
+  content: "✓";
   color: #a012c7;
   font-size: 20px;
   text-align: center;
@@ -182,6 +189,13 @@ a {
 
 .setup-header > h2 {
   margin-block-start: 20px;
+  padding: 0 24px;
+}
+
+@media (max-width: 768px) {
+  .setup-header > h2 {
+    font-size: 24px;
+  }
 }
 
 .setup-header .header-title {
@@ -224,7 +238,9 @@ footer {
   max-width: 500px;
   width: 100%;
   margin-inline: auto;
-  margin-top: 18px;
+  padding-top: 18px;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 footer .footer-text {

static/index.html

@@ -27,9 +27,8 @@
 
     <main>
       <section class="setup-header">
-        <h2>Setup</h2>
+        <h2>Setup your Pub</h2>
         <p class="header-title">
-          Let's confirm some things before we start this Pub
         </p>
       </section>
 
@@ -37,7 +36,7 @@
 
       <section class="setup-content">
         <div class="input-group">
-          <span>give this node a name that wallet users will see:</span>
+          <span>Give this node a name that will be seen by wallet users:</span>
           <input
             type="text"
             placeholder="Nodey McNodeFace"

static/js/liquidity.js

@@ -6,4 +6,14 @@ $(() => {
   $("#close-question").click(() => {
     $("#question-content").hide();
   });
+
+  $("#automate").click(() => {
+    $('[data-group="service"]').prop("checked", false);
+    $("#automate").prop("checked", true);
+  });
+
+  $("#manual").click(() => {
+    $('[data-group="service"]').prop("checked", false);
+    $("#manual").prop("checked", true);
+  });
 });

static/liquidity.html

@@ -32,9 +32,9 @@
         <button class="icon-button back-button" onclick="history.back()">
           <img src="img/back.svg" alt="" />
         </button>
-        <h2>Liquidity</h2>
+        <h2>Manage Node Liquidity</h2>
         <p class="header-title">
-          How do you want to manage Lightning connectivity?
+          How do you want to manage your Lightning nodes channels?
         </p>
       </section>
 
@@ -42,17 +42,16 @@
 
       <section class="setup-content">
         <div class="checkbox" style="margin-top: 60px">
-          <input type="checkbox" id="automate" />
+          <input type="checkbox" id="automate" data-group="service" />
           <div class="checkbox-shape"></div>
           <label for="automate">
-            Use Boostrap Service to Automate
+            Use Automation Service
             <div class="question-box">
               <button class="icon-button" id="show-question">
                 <img src="img/question.svg" />
               </button>
               <div class="question-content" id="question-content">
-                Bootstrapping uses a trusted peer until channel management
+                Automation helps to reduce overall fees by trusting peers until channel management events cost >1% of their on-demand liquidity requirements
-                events cost less than 1% to execute
                 <button class="icon-button close-button" id="close-question">
                   <img src="img/close.svg" alt="" />
                 </button>
@@ -61,7 +60,7 @@
           </label>
         </div>
         <div class="checkbox" style="margin-top: 60px">
-          <input type="checkbox" id="manual" />
+          <input type="checkbox" id="manual" data-group="service" />
           <div class="checkbox-shape"></div>
           <label for="manual">Manage my channels manually</label>
         </div>