Book text styling

- Added styling for large first letters and standard block text for chapter headings and paragraphs - Modified html pages throughout to include new classes both for headings and other static text.
RydalWater · Oct 26, 2024 · b602357 · b602357
1 parent 32a73fb
commit b602357
Show file tree

Hide file tree

Showing 22 changed files with 205 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,6 @@
 __pycache__*
 node_modules
 *.log
-staticfiles
+staticfiles
+package.json
+package-lock.json
diff --git a/openlibrarian_root/almanac/templates/almanac/user_friends.html b/openlibrarian_root/almanac/templates/almanac/user_friends.html
@@ -6,7 +6,9 @@
 {% block content %}
 
 <div class="container mt-2">
-    <p class="fw-bold">Friends & Foes</p>
+    <div class="chapter-header">
+        <p>Friends & Foes</p>
+    </div>
 </div>
 
 <form method="post">
@@ -44,7 +46,7 @@ <h2 class="accordion-header" id="friends">
                             </ul>
                             {% endfor %}
                         {% else %}
-                            <p>No users currently added to your friends list.</p>
+                            <p class="book-text text-center">No users currently added to your friends list.</p>
                         {% endif %}
                     </div>
                 </div>
@@ -78,7 +80,7 @@ <h2 class="accordion-header" id="foes">
                             </ul>
                             {% endfor %}
                         {% else %}
-                            <p>No users currently added to your muted list.</p>
+                            <p class="book-text text-center">No users currently added to your muted list.</p>
                         {% endif %}
                     </div>
                 </div>

diff --git a/openlibrarian_root/almanac/templates/almanac/user_profile.html b/openlibrarian_root/almanac/templates/almanac/user_profile.html
@@ -6,7 +6,9 @@
 {% block content %}
 
 <div class="container mt-2">
-    <p class="fw-bold">Profile</p>
+    <div class="chapter-header">
+        <p>Profile</p>
+    </div>
 </div>
 
 <form method="post">
@@ -15,7 +17,7 @@
     {% if session.nsec %}
         <div style="height: 55vh; overflow-y: auto;">
             <div class="input-group-sm text-start">
-                <label for="edit_nym" class="form-label">Account Nym</label>
+                <label for="edit_nym" class="form-label book-text">Account Nym</label>
                 {% if nym %}
                     <input class="form-control" type="text", name="edit_nym", value="{{ session.nym }}"></input>
                 {% else %}
@@ -25,21 +27,21 @@
             <div class="accordion-flush" id="nym-info">
                 <div class="accordion-item">
                     <p class="accordion-header" id="headingOne">
-                        <button class="accordion-button collapsed d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+                        <button class="accordion-button collapsed d-block text-center book-text" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                             <i class="fa-solid fa-circle-info"></i> What is a Nym?
                         </button>
                     </p>
                     <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#nym-info">
                         <div class="accordion-body">
-                            <p class="mt-2">
-                                Your Nym is a simple way for you would like your account to be referred to.
+                            <p class="mt-2 book-text">
+                                <span class="dropcap">Y</span>our Nym is a simple way for you would like your account to be referred to.
                                 It can be changed any time and doesn't need to be unique to you. Think of it as a nickname, alias or user name. 
                             </p>
-                            <p>
+                            <p class="book-text">
                                 We <b>DO NOT</b> recommend using your real name as your Nym as it potentially creates a permanent link 
                                 between your account and you as an individual. 
                             </p>
-                            <p> 
+                            <p class="book-text"> 
                                 If you are unsure what to put how about picking your favorite character from a book, or maybe randomly generating one.
                             </p>
                         </div>
@@ -48,19 +50,19 @@
             </div>
             {% if session.profile %}
                 <div class="input-group-sm text-start">
-                    <label for="edit_displayname" class="form-label mt-1">Display Name</label>
+                    <label for="edit_displayname" class="form-label mt-1 book-text">Display Name</label>
                     {% if session.profile.displayname %}
                         <input class="form-control" type="text", name="edit_displayname", value="{{ session.profile.displayname }}"></input>
                     {% else %}
                         <input class="form-control" type="text", name="edit_displayname", placeholder="Enter your preferred display name"></input>
                     {% endif %}
-                    <label for="edit_about" class="form-label mt-1">About</label>
+                    <label for="edit_about" class="form-label mt-1 book-text">About</label>
                     {% if session.profile.about %}
                         <textarea class="form-control" type="text", name="edit_about", maxlength="200">{{ session.profile.about }}</textarea>
                     {% else %}
                         <textarea class="form-control" type="text", name="edit_about", placeholder="Write a bit about yourself (max. 200 characters)" maxlength="200"></textarea>
                     {% endif %}
-                    <label for="edit_picture" class="form-label mt-1">Profile Picture</label>
+                    <label for="edit_picture" class="form-label mt-1 book-text">Profile Picture</label>
                     <div class="input-group input-group-sm">
                         {% if session.profile.picture %}
                             <input class="form-control" type="text", name="edit_picture", value="{{ session.profile.picture }}" aria-describedby="upload"></input>
@@ -69,7 +71,7 @@
                         {% endif %}
                         <!-- <button class="btn btn-outline-secondary" type="button" id="upload"><i class="fa-solid fa-cloud-arrow-up"></i></button> -->
                     </div>
-                    <label for="edit_nip05" class="form-label mt-1">NIP05</label>
+                    <label for="edit_nip05" class="form-label mt-1 book-text">NIP05</label>
                     {% if session.profile.nip05 %}
                         <input class="form-control" type="text", name="edit_nip05", value="{{ session.profile.nip05 }}"></input>
                     {% else %}
@@ -78,16 +80,16 @@
                 </div>
             {% else %}
                 <div class="input-group-sm text-start">
-                    <label for="edit_displayname" class="form-label mt-1">Display Name</label>
+                    <label for="edit_displayname" class="form-label mt-1 book-text">Display Name</label>
                     <input class="form-control" type="text", name="edit_displayname", placeholder="Enter your preferred display name"></input>
-                    <label for="edit_about" class="form-label mt-1">About</label>
+                    <label for="edit_about" class="form-label mt-1 book-text">About</label>
                     <textarea class="form-control" type="text", name="edit_about", placeholder="Write a bit about yourself (max. 200 characters)" maxlength="200"></textarea>
-                    <label for="edit_picture" class="form-label mt-1">Picture</label>
+                    <label for="edit_picture" class="form-label mt-1 book-text">Picture</label>
                     <div class="input-group input-group-sm">
                         <input class="form-control" type="text", name="edit_picture", placeholder="Enter your Picture URL" aria-describedby="upload"></input>
                         <!-- <button class="btn btn-outline-secondary" type="button" id="upload"><i class="fa-solid fa-cloud-arrow-up"></i></button> -->
                     </div>
-                    <label for="edit_nip05" class="form-label mt-1">NIP05</label>
+                    <label for="edit_nip05" class="form-label mt-1 book-text">NIP05</label>
                     <input class="form-control" type="text", name="edit_nip05", placeholder="Enter your NIP05"></input>
                 </div>
             {% endif %}

diff --git a/openlibrarian_root/almanac/templates/almanac/user_relays.html b/openlibrarian_root/almanac/templates/almanac/user_relays.html
@@ -3,7 +3,9 @@
 {% block content %}
 
 <div class="container mt-2">
-    <p class="fw-bold">Relays</p>
+    <div class="chapter-header">
+        <p>Relays</p>
+    </div>
 </div>
 
 <form method="post">
@@ -12,17 +14,17 @@
     <div style="height: 40vh; overflow-y: auto;">
         <div class="accordion-flush mt-2" id="relay-info">
             <div class="accordion-item">
-                <p class="accordion-header" id="headingOne">
+                <p class="accordion-header book-text" id="headingOne">
                     <button class="accordion-button collapsed d-block text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                         <i class="fa-solid fa-circle-info"></i> What is a Relay?
                     </button>
                 </p>
                 <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#relay-info">
                     <div class="accordion-body">
-                        <p class="mt-2">
-                            Relays are the backbone of the Nostr network. They are effectively databases that store your event information.
+                        <p class="mt-2 book-text">
+                            <span class="dropcap">R</span>elays are the backbone of the Nostr network. They are effectively databases that store your event information.
                         </p>
-                        <p>
+                        <p class="book-text">
                             You <b>MUST</b> have at least one relay that is read and write. You can add more if you wish but it is recommended 
                             to only have 3-5. 
                         </p>
@@ -35,7 +37,7 @@
         </div>
         {% if mod_relays %}
             {% for key, value in mod_relays.items %}
-                <ul class="list-group text-start bg-secondary-container">
+                <ul class="list-group text-start bg-secondary-container mt-1">
                     {% if nsec %}
                         <li class="list-group-item container d-flex justify-content-between align-items-center">
                             <div class="col-2">
@@ -63,15 +65,15 @@
             {% endfor %}
             {% if messages %}
                 {% for message in messages %}
-                    <p class="text text-danger">{{ message }}</p>
+                    <p class="text text-danger book-text text-center">{{ message }}</p>
                 {% endfor %}
             {% endif %}
         {% endif %}
     </div>
         <div style="height: 15vh; overflow-y: auto;">
         {% if nsec %}
-            <div class="text-start">
-                <label for="add_relay_url" class="form-label mt-1">Add Relay</label>
+            <div>
+                <label for="add_relay_url" class="form-label mt-1 book-text text-center fw-bold">Add Relay</label>
                 <div class="input-group input-group-sm">
                     <input class="form-control" type="text", name="add_relay_url", placeholder="Enter a relay and click add"></input>
                     <button class="btn btn-sm btn-outline-secondary" type="submit" name="add_relay" value="Save">Add</button>

diff --git a/openlibrarian_root/almanac/templates/almanac/user_setting.html b/openlibrarian_root/almanac/templates/almanac/user_setting.html
@@ -3,8 +3,10 @@
 {% block content %}
 
 <div class="container mt-2">
-    <p class="fw-bold">Almanac</p>
-    <p>Here you'll find settings and profile information. </p>
+    <div class="chapter-header">
+        <p>Almanac</p>
+    </div>
+    <p class="book-text text-center">Here you'll find settings and profile information. </p>
 </div>
 
 <div class="container">

diff --git a/openlibrarian_root/archives/templates/archives/about.html b/openlibrarian_root/archives/templates/archives/about.html
@@ -2,7 +2,9 @@
 
 {% block content %}
     <div class="container mt-2">
-        <p class="fw-bold">Current Features</p>
+        <div class="chapter-header">
+            <p>Current Features</p>
+        </div>
         <ul class="list-group text-start">
             <li class="list-group-item">User profile</li>
             <li class="list-group-item">Relays</li>
@@ -13,14 +15,14 @@
             <li class="list-group-item">Import Friends/Foes Lists</li>
         </ul>
     </div>
-    <div class="container mt-2"></div>
-        <p class="fw-bold">Privacy</p>
-        <p>We don't collect any personal information.</p>
-        <p>All your key and other data live on your browser in the cache or on relays, there is no backend server.</p>
-        <p>We do not track you except with cross-site request forgery protection.</p>
-        <p>We are not responsible for any misuse of this app or the data which you share with relays.</p>
-        <p>This app is open source and available under MIT License on <a href="https://github.com/RydalWater/OpenLibrarian" target="_blank">GitHub</a>.</p>
-        <p>Thank you for using Open Librarian!</p>
+    <div class="container mt-2">
+        <div class="chapter-header">
+            <p>Privacy</p>
+        </div>
+        <p class="book-text"><span class="dropcap">W</span>e don't collect any personal information. Your keys and other data live on your browser in the cache and all signatures happen locally, there is no backend server.</p>
+        <p class="book-text">We do not track you except with cross-site request forgery protection. Therefore, we are not responsible for any misuse of this app.</p>
+        <p class="book-text">Similarly, we are not responsible for any data which you share with relays please review the relay specific data policies (where available) for more details.</p>
+        <p class="book-text">This app is open source and available under MIT License on <a href="https://github.com/RydalWater/OpenLibrarian" target="_blank">GitHub</a>. <b>Thank you for using Open Librarian!</b></p>
     </div>
 {% if not npub %}
     <div class="container mt-2">

diff --git a/openlibrarian_root/circulation_desk/templates/circulation_desk/create_account.html b/openlibrarian_root/circulation_desk/templates/circulation_desk/create_account.html
@@ -4,19 +4,21 @@
 <form method="post">
     {% csrf_token %}
     <div class="container mt-2">
-        <p class="fw-bold">Sign-up</p>
+        <div class="chapter-header">
+            <p>Sign-up</p>
+        </div>
         {% if not words %}
-            <p>
-                It is extremely important to save your seed words somewhere secure. 
+            <p class="book-text">
+                <span class="dropcap">I</span>t is extremely important to save your seed words somewhere secure. 
                 These are the same as a password and should not be given out to anyone. 
                 In the event that you lose your seed words, you will not be able to recover them.
                 OpenLibrarian does not store a copy of your seed words.
             </p>
 
-            <p>
+            <p class="book-text">
                 Your NSEC is your Secret Key, it is geneated from your Seed Words and can be used to login to OpenLibrarian and other Nostr powered applications.
             </p>
-            <p>
+            <p class="book-text">
                 Your NPUB is your Public Key, it is generated from your NSEC and can be used to share your profile with other users.  
             </p>
         {% endif %}
@@ -33,8 +35,8 @@
                 <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" readonly value="{{ nsec }}">
                 <span class="input-group-text" id="inputGroup-sizing-sm"><i class="fa-solid fa-circle-exclamation text-danger"></i></span>
             </div>
-            <p class="text-danger">In the event that you lose your seed words, you will not be able to recover them. Open Librarian does not store a copy.</p>
-            <p class="text-danger">DO NOT SHARE your NSEC or Seed Words with anyone.</p>
+            <p class="text-danger book-text">In the event that you lose your seed words, you will not be able to recover them. Open Librarian does not store a copy.</p>
+            <p class="text-danger book-text">DO NOT SHARE your NSEC or Seed Words with anyone.</p>
         </div>
         <div class="container">
             <div class="row">
@@ -54,11 +56,13 @@
     {% endif %}
     <div class="container">
         <button id="seed-gen" class="btn btn-sm btn-primary" name="generate_seed" value="Generate"><i class="fa-solid fa-shuffle"></i></button>
-        <label for="seed-gen">Click here to randomly generate your account.</label>
+        <label class="book-text" for="seed-gen">Click here to randomly generate your account.</label>
     </div>
     {% if words %}
-        <p>Please make sure you’ve backed up your Seed Words before moving to the next step. There will be a test!</p>
-        <button type="submit" class="btn btn-sm btn-primary" name="confirm_seed" value="Confirm"><i class="fa-solid fa-check"></i> I have saved my seed</button>
+        <div class="container mt-2">
+            <p class="book-text">Please make sure you’ve backed up your Seed Words before moving to the next step. There will be a test!</p>
+            <button type="submit" class="btn btn-sm btn-primary" name="confirm_seed" value="Confirm"><i class="fa-solid fa-check"></i> I have saved my seed</button>
+        </div>
     {% endif %}
 </form>
 

diff --git a/openlibrarian_root/circulation_desk/templates/circulation_desk/create_account_confirm.html b/openlibrarian_root/circulation_desk/templates/circulation_desk/create_account_confirm.html
@@ -3,20 +3,22 @@
 {% block content %}
     <form method="post" class="container mt-2">
         {% csrf_token %}
-        <p class="fw-bold">Sign-up</p>
+        <div class="chapter-header">
+            <p>Sign-up</p>
+        </div>
         {% if private_key_confirmed == "Success" %}
-            <p>Success! Your account has been created.</p>
-            <p>Lets go to your <a href="{% url 'almanac:settings' %}">Almanac</a> Page and set up your profile.</p>
+            <p class="book-text text-center">Success! Your account has been created.</p>
+            <p class="book-text text-center">Lets go to your <a href="{% url 'almanac:settings' %}">Almanac</a> Page and set up your profile.</p>
         {% else %}
             <div class="container mt-2">
-                <p>To confirm you've written down your Seed Words please re-enter it below for the following Public Key.</p>
+                <p class="book-text">To confirm you've written down your Seed Words please re-enter it below for the following Public Key.</p>
                 <div class="input-group input-group-sm mb-3">
                     <span class="input-group-text" id="inputGroup-sizing-sm">NPUB</span>
                     <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" readonly value="{{ npub }}">
                     <span class="input-group-text" id="inputGroup-sizing-sm"><i class="fa-solid fa-user-check text-success"></i></span>
                 </div>
-                <p class="text-danger">In the event that you lose your seed words, you will not be able to recover them. Open Librarian does not store a copy.</p>
-                <p class="text-danger">DO NOT SHARE your NSEC or Seed Words with anyone.</p>
+                <p class="text-danger book-text">In the event that you lose your seed words, you will not be able to recover them. Open Librarian does not store a copy.</p>
+                <p class="text-danger book-text">DO NOT SHARE your NSEC or Seed Words with anyone.</p>
             </div>
             <datalist id="word-list">
                 {% for each in word_list %}