Handful of tweaks before all-hands
This commit is contained in:
Jason Zimdars
@@ -0,0 +1 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m6.5 12c0 .4.3.7.7.7h4s.1 0 .1.1v4c0 .4.3.7.7.7s.7-.3.7-.7v-4s0-.1.1-.1h4c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-4s-.1 0-.1-.1v-4c0-.4-.3-.7-.7-.7s-.7.3-.7.7v4s0 .1-.1.1h-4c-.4 0-.7.3-.7.7z"/><path d="m11.2 2.6h.5c3.5.2 7.6 2.9 9.4 6.4 1.2 2.4 1.1 4.7-.1 6.8-2 3.3-7 5.7-11.7 5.7s-4.6-.3-6.1-2.4c-1.3-1.7-1.3-4.5-.2-7.9s0 0 0 0c.3-1 .7-2 1.2-3.2.5-1 .9-1.7 1.3-2.3 1.3-1.8 3.6-2.9 5.7-2.9m-0-2.3c-2.8 0-5.7 1.5-7.4 3.8-.6.8-1.1 1.7-1.5 2.7-.5 1.1-1 2.3-1.4 3.5-3 9.3 2.1 13.1 8.3 13.1s18.1-6.5 13.7-15.5c-2.1-3.9-6.7-7.2-11.1-7.5-.2 0-.4 0-.6 0z"/></svg>
|
||||
|
After Width: | Height: | Size: 614 B |
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(3n+1) {
|
||||
animation-delay: 150ms;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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 %>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user