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

44
sass/_comments.scss
View File

@ -80,7 +80,7 @@
border-end-start-radius: 0;
}
& + .comment-reply {
&+.comment-reply {
margin-block-start: -2rem;
border-start-start-radius: 0;
padding-block-start: 2rem;
@ -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 {
background-color: var(--fg-muted-2);
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,