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.
- Add default width/height to the `icon` class.
- Improve the look of threads in comments.
- Keep images slightly rounded on hover.
- Make `emoji` class available outside of comments.
- Make the code and styling for article cards much cleaner.
- Make the shortcodes code much cleaner.

40
sass/_comments.scss
View File

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

4
sass/_media.scss
View File

@ -82,7 +82,7 @@ video {
&:hover,
&:active {
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;
}
@ -112,7 +112,7 @@ img {
transform: var(--hover);
z-index: 1;
box-shadow: var(--edge-highlight), var(--shadow-raised);
border-radius: 0;
border-radius: var(--rounded-corner-small);
}
&.start,