Add hover effects

Author: Lars

PatchPeek/public/styles.css

@@ -205,6 +205,14 @@ summary {
   -moz-user-select: none;
 }
 
+summary:hover {
+  background: #3a3a3a;
+}
+
+summary:hover.flagged {
+  background: #542c2c !important;
+}
+
 summary::-webkit-details-marker {
   display: none;
 }
@@ -233,11 +241,17 @@ summary::-webkit-details-marker {
   line-height: 1;
 }
 
-.flagged {
+.releaseCount.flagged {
   color: #ff4d4d !important;
   font-weight: 700;
 }
 
+.markdown-body.flagged,
+.release.flagged,
+summary.flagged {
+  background: #3c2020 !important;
+}
+
 .releaseDiv {
   padding: 0 15px 1px;
 }

PatchPeek/views/index.ejs

@@ -84,12 +84,12 @@
                 const normal = feed.releases.filter(release => !release.flagged);
                 [...breaking, ...normal].forEach(release => { 
               %>
-                <details class="release" open>
-                  <summary>
+                <details class="release <%= release.flagged ? 'flagged' : '' %>" open>
+                  <summary class="<%= release.flagged ? 'flagged' : '' %>">
                     <%= release.title %> (<%= release.date %>)
-                    <% if (release.flagged) { %><span class="flagged">🚨</span><% } %>
+                    <% if (release.flagged) { %><span>🚨</span><% } %>
                   </summary>
-                  <div class="markdown-body"><%- release.html %></div>
+                  <div class="markdown-body <%= release.flagged ? 'flagged' : '' %>"><%- release.html %></div>
                 </details>
               <% }) %>
             </div>