style: Bubbles and details style updates

Author: pham

_includes/session/bubble.html

@@ -1,4 +1,3 @@
-
 <div class="bubble-container {{ include.side }}">
   <div class="talk-bubble {{ include.side }} tri-right {{ include.side }}-in border round">
     <div class="talktext">

_sass/_bubbles.scss

@@ -281,23 +281,24 @@ html {
   font-size: calc(20px + (30 - 10) * ((100vw - 500px) / (1600 - 300)));
   line-height: calc(30px + (12 - 0) * ((100vw - 500px) / (600 - 10)));
   font-family: var(--font-tertiary);
-}
-.talktext .index {
-  position: absolute;
-  top: -14px;
-  display: flex;
-  width: 30px;
-  font-size: 20px;
-  line-height: 29px;
+  .index {
+    position: absolute;
+    top: -14px;
+    display: flex;
+    width: 30px;
+    font-size: 20px;
+    line-height: 29px;
+    white-space: nowrap;
+  }
 }
 .left .talktext .index {
   color: var(--color1);
-  left: -40px;
+  left: -37px;
   justify-content: flex-end;
 }
 .right .talktext .index {
   color: var(--color2);
-  right: -40px;
+  right: -37px;
   justify-content: flex-begin;
 }
 u {

_sass/_bullets.scss

@@ -32,3 +32,36 @@ ul > li > ul > li {
     list-style-type: initial;
   }
 }
+
+details {
+  summary {
+    cursor: pointer;
+    list-style: none;
+    &::-webkit-details-marker,
+    &::marker {
+      display: none;
+    }
+    &::before {
+      content: "\25B6\FE0E";
+      margin-right: 5px;
+      font-size: 0.9em;
+      color: var(--color-bullet);
+    }
+  }
+  &[open] {
+    summary {
+      &::before {
+        content: "\25BC\FE0E";
+      }
+    }
+  }
+}
+
+details > *:not(summary) {
+  animation: fadeIn 0.3s ease-in;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; margin-top: -10px; }
+  to   { opacity: 1; margin-top: 0;    }
+}