view: Generate blocks of lines and style the blocks.

This allows us to toggle the display of lines that belong together.

* mumi/web/view/utils.scm (<block>): New record type.
(add-block-line!): New procedure.
(process): Take the list of blocks as an argument; return the new
blocks and the next context.
(prettify): Render blocks with classes derived from the block type.
* assets/css/screen.css: Adjust.

1 files changed, 18 insertions, 8 deletions

diff --git a/assets/css/screen.css b/assets/css/screen.css
index 1d7b764..97b6034 100644
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -221,6 +221,15 @@ details {
     margin-top: .5em;
 }
 
+.message details {
+    border-top: 2px dotted #efefef;
+    border-bottom: 2px dotted #efefef;
+}
+.message details summary {
+    color: #586069;
+    padding: 1em 0;
+}
+
 .message .body pre {
     background: transparent;
     border: none;
@@ -306,24 +315,25 @@ details {
 .message span.line {
     white-space: pre-wrap;
     font-family: monospace;
+    display: block;
 }
 
 /* diff styles */
-.message span.line.diff.file {
+.message .diff span.line.diff.file {
     color: #005cc5;
 }
-.message span.line.diff.separator {
+.message .diff span.line.diff.separator {
     color: #005cc5;
 }
-.message span.line.diff.addition {
+.message .diff span.line.diff.addition {
     color: #22863a;
     background-color: #f0fff4;
 }
-.message span.line.diff.deletion {
+.message .diff span.line.diff.deletion {
     color: #b31d28;
     background-color: #ffeef0;
 }
-.message span.line.diff.range {
+.message .diff span.line.diff.range {
     color: #6f42c1;
     font-weight: bold;
 }
@@ -343,12 +353,12 @@ details {
 }
 
 /* quote styles */
-.message span.line.quote {
+.message .quote span.line {
     color: #3868cc;
 }
 
-.message span.line.cut-here {
-    color: #888;
+.message .snippet {
+    background-color: #fbfbfb;
 }
 
 .filter {