AO3-7550 i18n-ing skins wizard font, skins wizard font size and skins wizard vertical gap help files

app/controllers/help_controller.rb

@@ -17,6 +17,9 @@ class HelpController < ApplicationController
     skins_basics
     skins_creating
     skins_parents
+    skins_wizard_font_size
+    skins_wizard_font
+    skins_wizard_vertical_gap
     symbols_key
     tags_additional
     tags_categories

app/views/help/skins_wizard_font.html.erb

@@ -0,0 +1,3 @@
+<p><%= t(".default_html", default_fonts: tag.code(t(".default_fonts"))) %></p>
+<p><%= t(".description") %></p>
+<p><%= t(".single_or_double_quotes_html", double_quote_example: tag.kbd('"Lucida Grande"'), single_quote_example: tag.kbd("'Lucide Sans Unicode'")) %></p>

app/views/help/skins_wizard_font_size.html.erb

@@ -0,0 +1,2 @@
+<p><%= t(".default_html", one_hundred_percent: tag.code(t(".one_hundred_percent"))) %></p>
+<p><%= t(".description_html", one_hundred_typed: tag.kbd("100")) %></p>

app/views/help/skins_wizard_vertical_gap.html.erb

@@ -0,0 +1,3 @@
+<p><%= t(".default_html", default_value: tag.code(t(".default_value"))) %></p>
+<p><%= t(".description") %></p>
+<p><%= t(".examples_html", typed_two: tag.kbd("5"), typed_zero_point_five: tag.kbd("0.5")) %></p>

app/views/skins/_wizard_form.html.erb

@@ -19,7 +19,7 @@
   <dl>
     <dt>
       <%= f.label :font, ts('Font') %>
-      <%= link_to_help('skins-wizard-font') %>
+      <%= link_to_help_modal(help_skins_wizard_font_path, t(".font_help_title")) %>
     </dt>
     <dd>
       <%= f.text_field :font, "aria-describedby" => "font-field-notes" %>
@@ -30,7 +30,7 @@
 
     <dt>
       <%= f.label :base_em, ts('Percent of browser font size') %> 
-      <%= link_to_help('skins-wizard-font-size') %>
+      <%= link_to_help_modal(help_skins_wizard_font_size_path, t(".font_size_help_title")) %>
     </dt>
     <dd>
       <%= f.text_field :base_em, "aria-describedby" => "base-em-field-notes" %>
@@ -51,7 +51,7 @@
 
     <dt>
       <%= f.label :paragraph_margin, ts('Vertical gap between paragraphs') %> 
-      <%= link_to_help('skins-wizard-vertical-gap') %>
+      <%= link_to_help_modal(help_skins_wizard_vertical_gap_path, t(".vertical_gap_help_title")) %>
     </dt>
     <dd>
       <%= f.text_field :paragraph_margin %>

config/locales/views/en.yml

@@ -1607,6 +1607,20 @@ en:
       load_archive_skin_components: If you create a replacement skin, you might want to load up all the skins that make up the current default Archive site as parents. This option is only available when you select "replace archive skin entirely" from the "What it does" menu. After that, you can edit your skin and delete just the ones you don't want. This will be easier if you are using nearly all of them, since there are a lot!
       load_archive_skin_components_header: Load Archive Skin Components
       skins_interface_faq: the Skins and Interface FAQ
+    skins_wizard_font:
+      default_fonts: "'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, sans-serif, 'GNU Unifont'"
+      default_html: 'The default is: %{default_fonts}'
+      description: Put any font name in here, and if it's installed on your computer, it'll work for you. If you use several different devices, specify some fall-back fonts, with commas in between the names, in case one of your devices doesn't have the first font.
+      single_or_double_quotes_html: You can use either single or double quotation marks around fonts with multi-word names, e.g. %{single_quote_example} or %{double_quote_example}.
+    skins_wizard_font_size:
+      default_html: 'The default is: %{one_hundred_percent}'
+      description_html: Font sizes on the Archive are based on a percentage of your browser's default font size. Use a number smaller than 100 to make the Archive's text smaller, or use a number larger than 100 to make the text larger. Entering %{one_hundred_typed} will keep the Archive's default font sizes.
+      one_hundred_percent: 100%
+    skins_wizard_vertical_gap:
+      default_html: 'The default is: %{default_value}'
+      default_value: 1.1286em
+      description: Put any number in here and it will be applied as a multiple of the work's font size. A larger number will give you bigger spacing between paragraphs.
+      examples_html: For example, most users see works at a font size of 15 pixels. Entering %{typed_two} will create a vertical gap of 30 pixels, and entering %{typed_zero_point_five} will create a gap of about 8 pixels.
     symbols_key:
       categories:
         alt: Second Square
@@ -2942,8 +2956,11 @@ en:
       revert_to_default: Revert to Default Skin
     wizard_form:
       description: Description
-      skins_parents_help_title: Skins parents
+      font_help_title: Fonts
+      font_size_help_title: Font Sizes
+      skins_parents_help_title: Skins Parents
       title: Title
+      vertical_gap_help_title: Vertical Gaps
   stats:
     index:
       flat_view: Flat View

config/routes.rb

@@ -675,6 +675,9 @@
   get "/help/skins-basics.html", to: redirect("/help/skins_basics")
   get "/help/skins-creating.html", to: redirect("/help/skins_creating")
   get "/help/skins-parents.html", to: redirect("/help/skins_parents")
+  get "/help/skins-wizard-font-size.html", to: redirect("/help/skins_wizard_font_size")
+  get "/help/skins-wizard-font.html", to: redirect("/help/skins_wizard_font")
+  get "/help/skins-wizard-vertical-gap.html", to: redirect("/help/skins_wizard_vertical_gap")
   get "/help/symbols-key.html", to: redirect("/help/symbols_key")
   get "/help/additional-tags-help.html", to: redirect("/help/tags_additional")
   get "/help/categories-help.html", to: redirect("/help/tags_categories")