hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New style for comment preview cards

Browse Source
This commit is contained in:
daudix
2024-10-25 04:37:03 +03:00
parent 35382b15b5
commit 5ca711d34a
3 changed files with 33 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers. - **[BREAKING]** Rename the visually hidden `hidden` class to `visually-hidden`. `hidden` is now used to completely hide the elements, including screen readers.
- Add default width/height to the `icon` class. - Add default width/height to the `icon` class.
- Improve the look of threads in comments. - Improve the look of threads in comments.
- Keep images slightly rounded on hover.
- Make `emoji` class available outside of comments. - Make `emoji` class available outside of comments.
- Make the code and styling for article cards much cleaner. - Make the code and styling for article cards much cleaner.
- Make the shortcodes code much cleaner. - Make the shortcodes code much cleaner.

42
sass/_comments.scss
View File

@ -80,7 +80,7 @@
border-end-start-radius: 0; border-end-start-radius: 0;
} }
& + .comment-reply { &+.comment-reply {
margin-block-start: -2rem; margin-block-start: -2rem;
border-start-start-radius: 0; border-start-start-radius: 0;
padding-block-start: 2rem; padding-block-start: 2rem;
@ -250,47 +250,63 @@
.card { .card {
transition: var(--transition); transition: var(--transition);
margin-block-start: 1rem; margin-block-start: 1rem;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
width: min(calc(var(--container-width) / 2), 100%); width: min(calc(var(--container-width) / 2), 100%);
overflow: hidden;
font-weight: normal; font-weight: normal;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
img {
transform: var(--hover);
box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: var(--rounded-corner-small);
}
figcaption {
background-color: var(--fg-muted-2); background-color: var(--fg-muted-2);
} }
}
&:active { &:active {
transform: var(--active); transform: var(--active);
img {
transform: none;
margin: 0;
box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small);
}
} }
figure { figure {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
gap: 0.25rem;
margin: 0; margin: 0;
img { img {
margin: 0; margin: 0;
box-shadow: none; border-radius: var(--rounded-corner) var(--rounded-corner) var(--rounded-corner-small) var(--rounded-corner-small);
border-radius: 0; }
width: min(calc(var(--container-width) / 4), 50%);
img+figcaption {
border-radius: var(--rounded-corner-small) var(--rounded-corner-small) var(--rounded-corner) var(--rounded-corner);
} }
figcaption { figcaption {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; gap: 0.25rem;
gap: 0.5rem; transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem; padding: 1rem;
color: var(--fg-color); color: var(--fg-color);
font-size: var(--font-size-medium); font-size: var(--font-size-medium);
text-align: start; text-align: start;
p { p {
margin-block-start: 0.25rem; margin: 0;
margin-block-end: 0;
color: var(--fg-muted-5); color: var(--fg-muted-5);
font-size: var(--font-size-small); font-size: var(--font-size-small);
} }

4
sass/_media.scss
View File

@ -82,7 +82,7 @@ video {
&:hover, &:hover,
&:active { &:active {
opacity: 1; opacity: 1;
clip-path: inset(-1rem -1rem -1rem -1rem round 0); clip-path: inset(-0.75rem -0.75rem -0.75rem -0.75rem round var(--rounded-corner-small));
filter: none; filter: none;
} }
@ -112,7 +112,7 @@ img {
transform: var(--hover); transform: var(--hover);
z-index: 1; z-index: 1;
box-shadow: var(--edge-highlight), var(--shadow-raised); box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: 0; border-radius: var(--rounded-corner-small);
} }
&.start, &.start,