From cf29f38f4370c280f738b123bde54487f412d0cc Mon Sep 17 00:00:00 2001
From: Matthew Wise <matt@havenweb.org>
Date: Fri, 19 Jul 2024 09:17:35 -0500
Subject: [PATCH] improve visibility of custom CSS tips

---
 app/views/settings/edit.html.erb |  2 +-
 app/views/static/themes.html.erb | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/views/settings/edit.html.erb b/app/views/settings/edit.html.erb
index 5517a1e..3dea868 100644
--- a/app/views/settings/edit.html.erb
+++ b/app/views/settings/edit.html.erb
@@ -21,7 +21,7 @@
   <%= render "fonts", setting: @setting, allow_remove: false %>
   <p><%= link_to "Modify custom fonts", edit_fonts_path %></p>
   <p>
-    <%= form.label :css, (link_to "Custom CSS", "/themes", target: "_blank" )%><br>
+    <%= form.label :css, (link_to "Custom CSS (click for tips)", "/themes", target: "_blank" )%><br>
     <%= form.text_area :css, :style => 'display:block;width:100%;' %>
   </p>
  
diff --git a/app/views/static/themes.html.erb b/app/views/static/themes.html.erb
index 4b05747..63a6131 100644
--- a/app/views/static/themes.html.erb
+++ b/app/views/static/themes.html.erb
@@ -1,9 +1,9 @@
 <h1>CSS and Themes</h1>
-<p>CSS is the way websites control the format and style of their content.  Your blog allows you to add custom CSS code to change how it looks.  Here are a few themes you can use that demonstrate how to change colors and fonts.
+<p>CSS is the way websites control the format and style of their content.  Your haven allows you to add custom CSS code to change how it looks.  Here are a few themes you can use that demonstrate how to change colors and fonts.
 
 <h2>Default</h2>
-<img src="/img/default.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
-<p>This theme represents the default colors used in your blog.  You can use it as a starting point to change some of the colors on your blog.  Each line defines a CSS variable for a color in hex notation.
+<img src="/img/default.png" alt="Default mode preview" width="360px" style="border: 5px solid #555" />
+<p>This theme represents the default colors used in your Haven.  You can use it as a starting point to change some of the colors.  Each line defines a CSS variable for a color in hex notation.
 
 <pre>
 :root {
@@ -44,7 +44,7 @@
 </pre>
 
 <h2>Terminal</h2>
-<img src="/img/terminal.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
+<img src="/img/terminal.png" alt="Terminal theme preview" width="360px" style="border: 5px solid #555" />
 <p>This theme uses green text on a black background inspired by old computer terminals.
 <pre>
 :root {
@@ -64,8 +64,8 @@
 </pre>
 
 <h2>Custom Fonts</h2>
-<img src="/img/lora.png" alt="Dark mode preview" width="360px" style="border: 5px solid #555" />
-<p>This example demonstrates using a custom font.  In order to use a custom font you must first upload your font on the Settings page.  For this example, we're going to use the <a href="https://fonts.google.com/specimen/Lora">Lora</a> font from Google.  Download the <a href="/Lora.ttf">Lora font here</a>.
+<img src="/img/lora.png" alt="Lora font preview" width="360px" style="border: 5px solid #555" />
+<p>This example demonstrates using a custom font.  In order to use a custom font you must first upload your font on the Settings page.  For this example, we're going to use the <a href="https://fonts.google.com/specimen/Lora">Lora</a> font from Google.  Download the <a href="/Lora.ttf">Lora font here</a>.  You should be able to use any <code>.ttf</code> font.
 
 <p>After uploading the font on the settings page, you will be able to reference it by name.  In this example, we use the Lora font for all headings.  Use the same name for the font as the settings page lists. Do not put the font name in quotes.