From ca1b8e03e79dfc6701e4e06fb682e2c5c012e7ab Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Thu, 12 Sep 2024 16:08:39 -0500 Subject: [PATCH] Polish - Nicer responsive type for comments threads - Improved responsive layout for bubbles index lists, too - Polished hover state on bubbles list --- app/assets/stylesheets/bubbles.css | 32 ++++++++++++++++++++++++----- app/assets/stylesheets/comments.css | 23 +++++++++++++-------- app/assets/stylesheets/layout.css | 9 +++----- app/views/bubbles/index.html.erb | 8 ++++---- 4 files changed, 48 insertions(+), 24 deletions(-) diff --git a/app/assets/stylesheets/bubbles.css b/app/assets/stylesheets/bubbles.css index 0999007b5..3a3efaa47 100644 --- a/app/assets/stylesheets/bubbles.css +++ b/app/assets/stylesheets/bubbles.css @@ -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; + } +} diff --git a/app/assets/stylesheets/comments.css b/app/assets/stylesheets/comments.css index ad2db03b7..9944621b2 100644 --- a/app/assets/stylesheets/comments.css +++ b/app/assets/stylesheets/comments.css @@ -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); } diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index 80029ad35..5a7bbcbab 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -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; diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb index ddb70987c..126b14719 100644 --- a/app/views/bubbles/index.html.erb +++ b/app/views/bubbles/index.html.erb @@ -32,12 +32,12 @@