Handful of tweaks before all-hands

Author: jzimdars

app/assets/images/bubble-add.svg

@@ -1,19 +1,42 @@
+.comments {
+  hr {
+    block-size: 6cqi;
+    border-inline-start: 1px solid var(--splat-color);
+    display: block;
+    inline-size: 2px;
+    margin: auto;
+    overflow: initial;
+    position: relative;
+
+    &::after {
+      background: var(--color-bg);
+      border: 2px solid var(--splat-color);
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: 1cqi;
+      inline-size: 1cqi;
+      inset: auto auto -0.5cqi auto;
+      margin-inline-start: -0.5cqi;
+      position: absolute;
+    }
+
+    &::before {
+      background: var(--color-bg);
+      border: 2px solid var(--splat-color);
+      border-radius: 50%;
+      content: "";
+      display: block;
+      height: 1cqi;
+      inline-size: 1cqi;
+      inset: -0.5cqi auto auto auto;
+      margin-inline-start: -0.5cqi;
+      position: absolute;
+    }
+  }
+}
+
 .comment {
   inline-size: 100%;
   flex-wrap: wrap;
-  border: 1px solid currentColor;
-  border-radius: 1em;
-  padding: var(--block-space);
-  position: relative;
-
-  &:after {
-    content: "";
-    background: currentColor;
-    block-size: var(--block-space);
-    inline-size: 4px;;
-    margin: auto;
-    position: absolute;
-    inset: auto 50% 0 auto;
-    margin-block-end: calc(var(--block-space) * -1);
-  }
 }

app/assets/stylesheets/comments.css

@@ -20,7 +20,6 @@
   --splat-color: var(--color-ink);
   --splat-rotate: 20deg;
 
-  animation: float-up-left 400ms normal forwards ease-out;
   aspect-ratio: 1;
   block-size: var(--splat-size);
   color: var(--splat-color, currentColor);
@@ -31,13 +30,17 @@
   position: relative;
   transition: all 0.2s ease;
 
-  &:nth-of-type(2n+1) {
-    animation-delay: 50ms;
-    animation: float-down-right 400ms normal forwards ease-out;
-  }
+  .windshield & {
+    animation: float-up-left 400ms normal forwards ease-out;
+
+    &:nth-of-type(2n+1) {
+      animation-delay: 50ms;
+      animation: float-down-right 400ms normal forwards ease-out;
+    }
 
-  &:nth-of-type(3n+1) {
-    animation-delay: 150ms;
+    &:nth-of-type(3n+1) {
+      animation-delay: 150ms;
+    }
   }
 
   .windshield &:nth-of-type(n+5) {
@@ -65,24 +68,6 @@
   }
 }
 
-.splat__link {
-  content: "";
-  inset: 0;
-  position: absolute;
-  z-index: -1;
-}
-
-.splat__svg {
-  fill: var(--color-bg);
-  position: absolute;
-  scale: 1.1;
-  stroke: var(--splat-color);
-  stroke-width: 1.1rem;
-  transform: rotate(var(--splat-rotate));
-  transition: all 200ms ease-out;
-  z-index: -1;
-}
-
 .splat__bubble {
   background-color: var(--color-bg);
   border: 0.3em solid var(--splat-color);
@@ -159,6 +144,28 @@
   }
 }
 
+.splat__link {
+  content: "";
+  inset: 0;
+  position: absolute;
+  z-index: -1;
+}
+
+.splat__notes {
+  position: relative;
+}
+
+.splat__svg {
+  fill: var(--color-bg);
+  position: absolute;
+  scale: 1.1;
+  stroke: var(--splat-color);
+  stroke-width: 1.1rem;
+  transform: rotate(var(--splat-rotate));
+  transition: all 200ms ease-out;
+  z-index: -1;
+}
+
 .splat__title {
   -webkit-line-clamp: var(--lines, 5);
   -webkit-box-orient: vertical;

app/assets/stylesheets/splats.css

@@ -10,7 +10,7 @@
   <time class="splat__bubble splat__meta splat__date"><%= splat.created_at.strftime("%b <br> %d").html_safe %></time>
 
   <% splat.categories.each do | category | %>
-    <%= link_to category.title, splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %>
+    <%= link_to "##{category.title}", splats_path(category_id: category.id), class: "splat__bubble splat__meta splat__category" %>
   <% end %>
 
   <% if splat.categories.count < 3 %>

app/views/splats/_splat.html.erb

@@ -18,8 +18,8 @@
       <% end %>
     </h1>
 
-    <%= link_to new_splat_path, class: "btn flex-item-justify-end" do %>
-      <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
+    <%= link_to new_splat_path, class: "btn btn--plain flex-item-justify-end" do %>
+      <%= image_tag "bubble-add.svg", aria: { hidden: true }, size: 24 %>
       <span class="for-screen-reader">Create a new splat</span>
     <% end %>
   </nav>
@@ -41,10 +41,9 @@
         <% end %>
         <small class="flex align-center gap flex-item-no-shrink">
           <% splat.categories.each do |category| %>
-            <%= link_to "# #{ category.title }", splats_path(category_id: category.id) %>
+            <%= link_to "# #{ category.title }", splats_path(category_id: category.id), style: "color: #{ splat.color }" %>
           <% end %>
-          <span class="avatar txt-small txt-nowrap fill-shade"><strong>JZ</strong></span>
-          <time class="txt-nowrap flex-item-justify-end"><%= splat.updated_at.strftime("%B %d").html_safe %></time>
+          <time class="txt-nowrap flex-item-justify-end"><%= splat.created_at.strftime("%b %d").html_safe %></time>
         </small>
       </li>
     <% end %>

app/views/splats/index.html.erb

@@ -24,7 +24,7 @@
   <%= render @splat %>
 </div>
 
-<div class="splat__notes txt-align-start panel center pad-block-half pad-inline-end fill-shade border-radius border margin-block-start-double flex align-start" style="--border-color: <%= @splat.color %>; background-color: <%= @splat.color -%>20">
+<div class="splat__notes fill-transparent txt-align-start panel center pad-block-half pad-inline-end borderless margin-block-start-double flex align-start" style="--splat-color: <%= @splat.color %>;">
   <div class="full-width">
     <%= simple_format @splat.body %>
   </div>
@@ -35,13 +35,18 @@
   <% end %>
 </div>
 
-<section class="comments panel center borderless margin-block flex flex-column gap">
+<section class="comments panel center borderless margin-block flex flex-column gap" style="--splat-color: <%= @splat.color %>;">
+
+  <hr />
+
   <div class="comment flex align-start gap">
     <header class="full-width margin-block">
-      Added by <strong>Jason Zimdars</strong> <%= time_ago_in_words @splat.created_at %> ago.
+      Added by <strong>Jason Zimdars</strong> on <%= @splat.created_at.strftime("%B %d") %> (<%= time_ago_in_words @splat.created_at %> ago).
     </header>
   </div>
 
+  <hr />
+
   <div class="comment flex align-start gap">
     <div class="flex align-center gap">
       <span class="avatar fill-shade flex-item-no-shrink"><strong>JZ</strong></span>
@@ -54,6 +59,8 @@
     </div>
   </div>
 
+  <hr />
+
   <div class="comment flex align-start gap">
     <div class="flex align-center gap">
       <span class="avatar fill-selected flex-item-no-shrink"><strong>JF</strong></span>
@@ -66,6 +73,8 @@
     </div>
   </div>
 
+  <hr />
+
   <div class="comment flex align-start gap">
     <div class="flex align-center gap">
       <span class="avatar fill-black txt-reversed flex-item-no-shrink"><strong>JF</strong></span>
@@ -78,6 +87,9 @@
       <p>But if you hear about something similar happening to anyone else, please flag it here and I'll look more urgently.</p>
     </div>
   </div>
+
+  <hr />
+
   <button class="btn btn--positive center">
     <%= image_tag "add.svg", aria: { hidden: true }, size: 24 %>
     <span class="for-screen-reader">Add a comment</span>