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

Add support for CWs in comments

Browse Source
This commit is contained in:
daudix
2024-10-25 22:28:34 +03:00
parent e3ee417e7a
commit 65f0fd5159
14 changed files with 148 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
sass/_comments.scss
View File

@ -65,7 +65,8 @@
"avatar name "
"avatar time "
"avatar post "
"avatar media "
"...... media "
"...... card "
"...... interactions";
column-gap: 1rem;
justify-items: start;
@ -221,9 +222,65 @@
}
}
details {
&[open] {
border-radius: var(--rounded-corner-small);
background-image:
linear-gradient(to right,
transparent,
transparent 0.5rem,
var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
linear-gradient(to right,
transparent,
transparent 0.5rem,
var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
repeating-linear-gradient(45deg,
var(--contrast-color),
var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem);
summary {
border-radius: 0;
background-image: none;
}
}
summary {
border-radius: var(--rounded-corner-small);
background-image:
linear-gradient(to right,
transparent,
transparent 0.5rem,
var(--fg-muted-1) 0.5rem,
var(--fg-muted-1) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
linear-gradient(to right,
transparent,
transparent 0.5rem,
var(--bg-color) 0.5rem,
var(--bg-color) calc(100% - 0.5rem),
transparent calc(100% - 0.5rem),
transparent),
repeating-linear-gradient(45deg,
var(--contrast-color),
var(--contrast-color) 0.25rem,
var(--accent-color) 0.25rem,
var(--accent-color) 0.5rem);
}
}
main {
grid-area: post;
margin-block-start: 1rem;
width: 100%;
:first-child {
margin-block-start: 0;
@ -248,6 +305,7 @@
}
.card {
grid-area: card;
transition: var(--transition);
margin-block-start: 1rem;
width: min(calc(var(--container-width) / 2), 100%);

1
sass/_nav.scss
View File

@ -79,6 +79,7 @@
summary {
flex: 1;
transition: var(--transition);
box-shadow: none;
border-radius: 999px;
background-color: transparent;
padding: 0.625rem 0.75rem;

41
sass/_typography.scss
View File

@ -226,13 +226,12 @@ aside {
}
details {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
summary {
cursor: pointer;
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
color: var(--fg-muted-5);
font-weight: bold;
line-height: 1;
@ -262,18 +261,30 @@ details {
margin-block-end: 0;
}
&[open] summary {
&::before {
transform: scaleY(-1);
}
&[open] {
box-shadow: var(--edge-highlight);
border-radius: var(--rounded-corner);
background-color: var(--fg-muted-1);
padding: 1rem;
& ~ * {
animation: details-open var(--transition);
summary {
box-shadow: none;
border-radius: 0;
background-color: transparent;
padding: 0;
@keyframes details-open {
from {
transform: translateY(-1rem);
opacity: 0;
&::before {
transform: scaleY(-1);
}
& ~ * {
animation: details-open var(--transition);
@keyframes details-open {
from {
transform: translateY(-1rem);
opacity: 0;
}
}
}
}