bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Polish

Browse Source 
- Nicer responsive type for comments threads
- Improved responsive layout for bubbles index lists, too
- Polished hover state on bubbles list
This commit is contained in:
Jason Zimdars
2024-09-12 16:08:39 -05:00
parent 957a0d70b1
commit ca1b8e03e7
4 changed files with 48 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/bubbles.css
+27 -5
View File
@@ -261,9 +261,12 @@
}
.bubbles-list {
--bubble-size: 1.2em;
--bubble-shift: 15deg;
--hover-size: 0;
max-inline-size: 90ch;
font-size: clamp(1rem, 1.8cqi, 2rem);
max-inline-size: 80ch;
.bubble__title-link {
color: var(--color-txt);
@@ -273,11 +276,30 @@
li {
border-radius: 0.6em;
list-style: none;
padding: 0.5em 1em;
transition: background-color 200ms ease;
padding: 0.5em var(--inline-space);
transition: background-color 200ms ease-out;
&:hover{
background-color: var(--color-selected);
@media (hover: hover) {
&:hover {
background-color: color(from var(--bubble-color) srgb r g b / 0.15);
.bubble__svg {
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(1.2);
}
}
}
}
}
.bubble__title-text {
font-weight: 600;
flex-grow: 1;
white-space: nowrap;
&::after {
border-block-end: 1px dotted var(--color-subtle-dark);
content: "";
flex-grow: 1;
margin-block-end: 0.25em;
}
}
app/assets/stylesheets/comments.css
+14 -9
View File
@@ -1,17 +1,21 @@
.comments {
--avatar-size: 2.33em;
--comment-padding-block: 1.2em;
--comment-padding-inline: 1.5em;
max-inline-size: 90ch;
font-size: clamp(1rem, 1.6cqi, 2rem);
max-inline-size: 70ch;
row-gap: var(--comment-padding-block);
}
.comment__avatar {
margin-block-start: var(--block-space-half);
margin-inline: auto calc(var(--block-space) * -0.5);
margin-block-start: calc(var(--comment-padding-block) * 0.5);
margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
position: relative;
z-index: 1;
.comment--mine & {
margin-inline: calc(var(--block-space) * -0.5) auto;
margin-inline: calc(var(--comment-padding-inline) * -0.75) auto;
}
}
@@ -29,7 +33,7 @@
.comment__content {
margin-inline: 0 var(--avatar-size);
padding: var(--block-space);
padding: var(--comment-padding-block) var(--comment-padding-inline);
.comment--mine & {
background-color: var(--color-selected);
@@ -37,7 +41,7 @@
}
.comment:has(+ .comment--upvotes) & {
padding-block-end: calc(var(--block-space) * 1.33);
padding-block-end: calc(var(--comment-padding-block) * 1.5);
}
}
@@ -54,7 +58,8 @@
opacity: 0.5;
}
.comment--upvotes{
margin-block: calc(var(--block-space) * -1.33);
padding: var(--block-space-half) var(--inline-space-double);
.comment--upvotes {
font-weight: 600;
margin-block: calc(var(--comment-padding-block) * -1);
padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
}
app/assets/stylesheets/layout.css
+3 -6
View File
@@ -4,17 +4,14 @@ body {
}
:where(#main) {
container-type: inline-size;
inline-size: 100vw;
margin-inline: auto;
max-inline-size: 100vw;
padding-block-end: clamp(var(--block-space), 5%, calc(var(--block-space) * 3));
padding-inline: clamp(var(--inline-space), 10%, calc(var(--inline-space) * 3));
padding-block: 0 clamp(var(--block-space), 3cqmin, calc(var(--block-space) * 3));
padding-inline: clamp(var(--inline-space), 3cqmin, calc(var(--inline-space) * 3));
text-align: center;
@media (max-width: 70ch) {
padding-inline: calc(var(--inline-space) * 2);
}
@media print {
font-size: 11pt;
inline-size: unset;
app/views/bubbles/index.html.erb
+4 -4
View File
@@ -32,12 +32,12 @@
<section class="bubbles-list unpad-inline center margin-block-start">
<ul class="unpad margin-none flex flex-column txt-align-start center">
<% @bubbles.each do | bubble | %>
<li class="flex align-center gap margin-none">
<div class="bubble" style="--bubble-color: <%= bubble.color %>; --bubble-size: 2cqi; <%= bubble_rotation(bubble) %>">
<svg class="bubble__svg" style="fill: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
<div class="bubble">
<svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg"><path d="m0 0h990v990h-990z" fill="none" stroke="none" /><path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/></svg>
</div>
<%= link_to bubble, class: "bubble__title-link flex align-center gap flex-item-grow" do %>
<strong><%= bubble.title %></strong>
<strong class="bubble__title-text flex gap-half"><%= bubble.title %></strong>
<% end %>
<small class="flex align-center gap flex-item-no-shrink">
<% bubble.tags.each do |tag| %>