css hack for conversation tags

Signed-off-by: Xe Iaso <me@xeiaso.net>

2 files changed, 40 insertions, 11 deletions

diff --git a/src/tmpl/blog.rs b/src/tmpl/blog.rs
index 2d664a1..f940db4 100644
--- a/src/tmpl/blog.rs
+++ b/src/tmpl/blog.rs
@@ -72,7 +72,9 @@ pub fn blog(post: &Post, body: PreEscaped<&String>, referer: Option<String>) ->
                     (post.read_time_estimate_minutes)
                 }
 
-                (body)
+                div {
+                    (body)
+                }
             }
 
             hr;
diff --git a/static/css/shim.css b/static/css/shim.css
index 53cdc96..716490a 100644
--- a/static/css/shim.css
+++ b/static/css/shim.css
@@ -15,34 +15,61 @@ footer.footer {
 }
 
 img {
-	max-width: 100%;
+  max-width: 100%;
+}
+
+article blockquote {
+  max-width: 70ch;
 }
 
 .conversation {
-  display: flex;
-  background-color: #3c3836;
-  border-radius: 5px;
   margin-top: 0.25rem;
+  display: flex;
+  max-width: calc(65ch + 7rem);
 }
-
 .conversation-standalone {
   flex: 1;
   min-width: 6rem;
   max-width: 6rem;
-  padding: 0.5rem;
+  padding-right: 1rem;
 }
 
 .conversation-smol {
   flex: 1;
   min-width: 4.5rem;
   max-width: 4.5rem;
-  padding: 0.25rem;
+  padding-right: 1rem;
 }
 
 .conversation-chat {
-  align-self: center;
+  background-color: #3c3836;
+  border-radius: 5px;
   min-width: 0;
-  margin: 0.5rem;
+  padding-top: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-bottom: 0.125rem;
+}
+
+.conversation-chat:before {
+  content: "";
+  position: absolute;
+  height: 15px;
+  width: 15px;
+  box-sizing: border-box;
+  transform: rotate(135deg) translate(0.85rem, 50%);
+  z-index: -1;
+  background-color: inherit;
+}
+
+.conversation-chat ul {
+  padding: 0;
+  margin: 0;
+  margin-top: 0.5ch;
+}
+
+.conversation-chat li ~ li {
+  margin-top: 0.5ch;
 }
 
 .gruvbox-dark pre, pre {
@@ -101,7 +128,7 @@ figcaption {
         background-color: #fbf1c7;
     }
 
-    .conversation {
+    .conversation-chat {
         background-color: #ebdbb2;
     };