Tweak dialog styles a bit

assets/scss/style.scss

@@ -278,19 +278,14 @@ figure {
 
 .dialog {
     .message {
-        @include bordered-block;
-        display: block;
-        padding: 0.75rem;
         max-width: 0.8*$container-width;
         margin-top: 0.5rem;
         display: flex;
         flex-direction: row;
-        align-items: center;
-        text-align: left;
 
         .message-sender {
             width: 4rem;
-            margin: 0.5rem;
+            margin: 0.75rem;
 
             .feather {
                 width: 2rem;
@@ -298,6 +293,12 @@ figure {
             }
         }
 
+        .message-text {
+            @include bordered-block;
+            display: block;
+            padding: 0.75rem;
+        }
+
         &.side-answer {
             margin-left: auto;
             flex-direction: row-reverse;

layouts/shortcodes/message.html

@@ -1,4 +1,10 @@
 <span class="message side-{{ .Get 0 }}">
-    <span class="message-sender">{{ partial "icon.html" "user" }}</span>
+    <span class="message-sender">
-    <span>{{ .Inner }}</span>
+        {{ if (eq (.Get 1) "reader") }}
+        {{ partial "icon.html" "moon" }}
+        {{ else }}
+        {{ partial "icon.html" "sun" }}
+        {{ end }}
+    </span>
+    <span class="message-text">{{ .Inner }}</span>
 </span>