Show/hide behavior for long threads in threads list

assets/css/elements.css

@@ -33,7 +33,9 @@ body {
     /* Spooky time! */
     /* background-image: url('/images/halloween_background_1.gif'); */
     /* Winter/snow */
-    background-image: url('/images/jwsfp1.gif');
+    /* background-image: url('/images/jwsfp1.gif'); */
+    /* Christmas */
+    background-image: url('/images/christmas.gif');
     width: 95vmin;
     margin: 0 auto;
     font-family: 'w95fa', sans-serif;
@@ -73,3 +75,5 @@ img {
     cursor: url('/cursors/arrow.cur'), auto;
     max-width: 100%;
 }
+
+summary { cursor: pointer; }

assets/css/nested.css

@@ -91,6 +91,8 @@
     border: inset var(--dark-warm-gray) 0.18rem;
 }
 
+details[open].post__body summary { display: none; }
+
 .post__nav {
     display: flex;
     justify-content: flex-end;

templates/thread/by_page.html.ep

@@ -23,9 +23,18 @@
     </h3>
     <h4 class="post__date"><%= $thread->{'date'} %></h4>
     <h5 class="post__author"><%= $thread->{'author'} %></h5>
+    <% if (299 < length $thread->{'body'}) { %>
+    <details class="post__body">
+      <summary>
+        [Show All]<%== markdown truncate_text $thread->{'body'} =%>
+      </summary>
+      <%== markdown $thread->{'body'} =%>
+    </details>
+    <% } else { =%>
     <div class="post__body">
-      <%== markdown truncate_text $thread->{'body'} =%>
+      <%== markdown $thread->{'body'} =%>
     </div>
+    <% } =%>
     <nav class="post__nav">
       <%= link_to Remark => post_remark => {thread_id => $thread->{'id'}},
           (class => 'click') %>