Button styling

assets/css/post_text.css

@@ -15,9 +15,7 @@
     box-sizing: border-box;
 }
 
-*, ::before, ::after {
-  box-sizing: inherit;
-}
+*, ::before, ::after { box-sizing: inherit; }
 
 body {
     background-image: url('/images/background2.gif');
@@ -66,11 +64,9 @@ pre > code {
   background-color: var(--light-warm-gray);
 }
 
-.site-nav > a {
-  border: outset var(--light-blue);
-  flex: 1;
-  padding: 0 0.5em 0 0.5em;
-  background-color: var(--light-blue);
+.site-nav > .click {
+    flex: 1;
+    padding: 0 0.5em 0 0.5em;
 }
 
 .site-footer {
@@ -132,6 +128,20 @@ pre > code {
     padding: 1em;
 }
 
+.click {
+    color: black;
+    text-decoration: none;
+    border: outset var(--light-blue);
+    background-color: var(--light-blue);
+}
+
+.click::first-letter { text-decoration: underline; }
+
+.click:active {
+    border: inset var(--dark-blue);
+    background-color: var(--dark-blue);
+}
+
 /*
  * Nested/layered classes
  */
@@ -152,11 +162,20 @@ pre > code {
   gap: 0.25em;
 }
 
+/* ================================================================== */
+
+/*
+ * Can't really add a class to these nav elements with
+ * Mojolicious::Plugin::TagHelpers::Pagination...
+ */
+
 .pager__nav > a {
   border: outset var(--light-blue);
   flex: 1;
   text-align: center;
   background-color: var(--light-blue);
+  text-decoration: none;
+  color: black;
 }
 
 .pager__nav > a[rel="self"] {
@@ -164,6 +183,15 @@ pre > code {
   background-color: var(--dark-blue);
 }
 
+.pager__nav > a:link::first-letter { text-decoration: underline; }
+
+.pager__nav > a:active {
+  border: inset var(--dark-blue);
+  background-color: var(--dark-blue);
+}
+
+/* ================================================================== */
+
 .post {
   background-color: var(--light-warm-gray);
   border: outset var(--light-warm-gray);
@@ -185,8 +213,13 @@ pre > code {
   border: outset var(--true-gray);
   padding: 0.25em;
   background-color: var(--true-gray);
+  text-decoration: none;
 }
 
+.post__id:link::first-letter { text-decoration: underline; }
+
+.post__id:active { border: inset; }
+
 .post__date, .post__author, .post__body {
   margin: 1em 0.5em;
   padding: 0.25em 0.5em;
@@ -217,11 +250,8 @@ pre > code {
   align-items: center;
 }
 
-.post__nav > a {
+.post__nav > .click {
   flex: 1 0;
   text-align: center;
-  border: outset var(--light-blue);
   padding: 0.25em 0;
-  white-space: nowrap;
-  background-color: var(--light-blue);
 }

templates/layouts/default.html.ep

@@ -9,15 +9,17 @@
 <header class="site-header">
   <h1 class="site-title">Post::Text</h1>
   <nav class="site-nav">
-    <%= link_to List  => threads_list => {list_page => 1}  %>
-    <%= link_to New   => 'post_thread'                     %>
-    <%= link_to About => 'about_page'                      %>
-    <%= link_to Rules => 'rules_page'                      %>
-    <%= link_to RSS   => threads_feed => {format => 'rss'} %>
+    <%= link_to List => threads_list => {list_page => 1},
+        (class => 'click') %>
+    <%= link_to New   => post_thread => (class => 'click') %>
+    <%= link_to About => about_page  => (class => 'click') %>
+    <%= link_to Rules => rules_page  => (class => 'click') %>
+    <%= link_to RSS => threads_feed => {format => 'rss'},
+        (class => 'click') %>
     <% if (is_mod) { =%>
-    <%= link_to Logout => 'mod_logout' %>
+    <%= link_to Logout => mod_logout => (class => 'click') %>
     <% } else { =%>
-    <%= link_to Login => 'mod_login' %>
+    <%= link_to Login => mod_login => (class => 'click') %>
     <% } =%>
     </span>
   </nav>

templates/remark/create.html.ep

@@ -54,11 +54,10 @@
   <h3 class="page-title">Last Remark</h3>
   <article class="post">
     <h4 class="post--remark__date">
-      <%= $last_remark->{'date'} %>
-      <span class="post__id">
-        <%= link_to "#$last_remark_id",
-            single_remark => {remark_id => $last_remark_id} %>
-      </span>
+      <%= link_to $last_remark->{'date'}, single_remark =>
+          {remark_id => $last_remark_id} %>
+      <%= link_to "#$last_remark_id", single_remark =>
+          {remark_id => $last_remark_id}, (class => 'post__id') %>
     </h4>
     <h5 class="post__author"><%= $last_remark->{'author'} %></h5>
     <div class="post__body">

templates/thread/by_id.html.ep

@@ -13,19 +13,25 @@
       <%== markdown $thread->{'body'} =%>
     </div>
     <nav class="post__nav">
-      <%= link_to post_remark => {thread_id => $thread->{'id'}}, begin %>
+      <%= link_to post_remark => {thread_id => $thread->{'id'}},
+          (class => 'click'), begin %>
         Remark (<%= $thread->{'remark_tally'} %>)
       <% end %>
-      <%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %>
+      <%= link_to bump_thread => {thread_id => $thread->{'id'}},
+          (class => 'click'), begin %>
         Bump (<%= $thread->{'bump_tally'} %>)
       <% end %>
-      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
+      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
     </nav>
     <% if (is_mod) { =%>
     <nav class="post__nav">
-      <%= link_to Hide   => hide_thread   => {thread_id => $thread->{'id'}} %>
-      <%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}} %>
-      <%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}} %>
+      <%= link_to Hide => hide_thread => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
+      <%= link_to Unhide => unhide_thread => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
+      <%= link_to Unflag => unflag_thread => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
     </nav>
     <% } =%>
   </article>
@@ -46,8 +52,10 @@
       <%== markdown $remark->{'body'} =%>
     </div>
     <nav class="post__nav">
-      <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %>
-      <%= link_to Flag   => flag_remark => {remark_id => $remark->{'id'}} %>
+      <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
+      <%= link_to Flag => flag_remark => {remark_id => $remark->{'id'}},
+          (class => 'click') %>
     </nav>
   </article>
   <% } =%>

templates/thread/by_page.html.ep

@@ -17,15 +17,18 @@
       <%== markdown truncate_text $thread->{'body'} =%>
     </div>
     <nav class="post__nav">
-      <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}} %>
+      <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
+      (class => 'click') %>
       <%= link_to url_for(single_thread => {thread_id => $thread->{'id'}})
-          ->fragment('remarks'), begin %>
+          ->fragment('remarks'), (class => 'click'), begin %>
         <%= $thread->{'remark_tally'} %> Remarks
-      <% end %>
-      <%= link_to bump_thread => {thread_id => $thread->{'id'}}, begin %>
+      <% end =%>
+      <%= link_to bump_thread => {thread_id => $thread->{'id'}},
+      (class => 'click'), begin %>
         Bump (<%= $thread->{'bump_tally'} %>)
       <% end %>
-      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}} %>
+      <%= link_to Flag => flag_thread => {thread_id => $thread->{'id'}},
+          (class => 'click') %>
     </nav>
   </article>
   <% } =%>