Dictionary index and show styling

app/assets/stylesheets/application.scss

@@ -15,3 +15,35 @@
  */
 
 @import "bootstrap";
+
+$nord0: #2e3440;
+$nord1: #3b4252;
+$nord2: #434c5e;
+$nord3: #4c566a;
+
+// Snow Storm
+$nord4: #D8DEE9;
+
+$nord9: #5e81ac;
+
+a, a:visited {
+  color: $nord0;
+  text-decoration: none;
+}
+
+a:hover {
+  color: $nord3;
+  text-decoration: underline;
+}
+
+.dictionary-index-links {
+  font-size: 40px;
+  //color: #000;
+  font-weight: bold;
+}
+
+.selected-letter {
+  color: $nord9;
+  display: inline;
+}
+

app/helpers/dictionary_helper.rb

@@ -1,10 +1,14 @@
 module DictionaryHelper
   LETTERS = ['i', 'u', 'e', 'o', 'a', 'm', 'n', 'p', 't', 'k', 's', 'w', 'l', 'j'].sort
 
-  def alphabetical_links
+  def alphabetical_links(letter = nil)
 
     LETTERS.map do |l|
-      link_to l.to_s, dictionary_path(l)
+      if l == letter then
+          "<p class=\"selected-letter\">#{l.to_s}</p>"
+      else
+        link_to l.to_s, dictionary_path(l)#, class: "dictionary_index_links text-center"
+      end
     end.join("\n")
   end
 end

app/views/application/_alphabetical_links.html.erb

@@ -0,0 +1,11 @@
+<hr>
+<div class="text-center mx-1 dictionary-index-links">
+  «
+  <% unless defined?(letter) %>
+    <%= sanitize alphabetical_links, tags: ["a", "div", "p"] %>
+  <% else %>
+    <%= sanitize alphabetical_links(letter), tags: ["a", "div", "p"] %>
+  <% end %>
+  »
+</div>
+<hr>

app/views/dictionary/index.html.erb

@@ -1,6 +1,11 @@
-<%= sanitize alphabetical_links, tags: ["a"] %>
+<h1 class="text-center">Index</h1>
+<%= render "alphabetical_links" %>
 
+<div class="p-4">
   <p><%= @parts_of_speech.count %> parts of speech entries in database</p>
   <p><%= @words.count %> word entries in database</p>
+</div>
 
+<div class="p-4">
   <%= render "partsofspeech", parts_of_speech: @parts_of_speech %>
+</div>

app/views/dictionary/show.html.erb

@@ -1,9 +1,11 @@
 <div>
-  <h1><%= @letter.to_s %></h1>
+  <h1 class="text-center"><b><%= @letter.to_s %></b></h1>
 </div>
 
+<%= render "alphabetical_links", letter: @letter %>
+
 <% @words.each do |word| %>
-  <div>
+  <div class="dictionary-entry p-4">
     <h2><%= word.word %></h2>
     <%= render "definitions", word: word %>
   </div>