css: Make space for avatars on wide screens.
[software/mumi.git] / assets / css / screen.css
index 7ebdf3850292602cc9a1bd3e0d5497a42b2f6f60..fbf0e59fd2d5569a16be6a2dcc452858d79a0f2c 100644 (file)
@@ -124,21 +124,34 @@ table {
 }
 
 .conversation .avatar {
-    height: 64px;
-    width: 64px;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    color: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 58px;
+    display: none;
+}
+
+@media (min-width: 768px) {
+    .conversation .avatar {
+        height: 64px;
+        width: 64px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        color: #fff;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 58px;
+        position: absolute;
+    }
 }
 
 .address + .address:before {
     content: ", ";
 }
 
+@media (min-width: 768px) {
+    .message {
+        margin-left: 80px;
+    }
+}
+
 .message .body pre {
     background: transparent;
     border: none;