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

Sort styles using "Sort CSS" VSCode extension

Browse Source
This commit is contained in:
daudix
2024-04-03 02:19:54 +03:00
parent c0a43b83f9
commit 0fa24c2d7c
13 changed files with 171 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
sass/_comments.scss
View File

@ -12,13 +12,13 @@ section#comments {
.comment {
display: grid;
column-gap: 1rem;
grid-template-columns: min-content;
grid-template-areas:
"avatar name "
"avatar time "
"avatar post "
"...... interactions";
grid-template-columns: min-content;
column-gap: 1rem;
justify-items: start;
&.comment-reply {
@ -28,51 +28,51 @@ section#comments {
}
.avatar-link {
grid-area: avatar;
height: 4rem;
position: relative;
grid-area: avatar;
width: 4rem;
height: 4rem;
.avatar {
all: unset;
background-color: var(--fg-muted-1);
transition: var(--transition);
box-shadow: var(--edge-highlight), var(--shadow);
border-radius: var(--rounded-corner);
background-position: 50%;
background-size: cover;
border-radius: var(--rounded-corner);
box-shadow: var(--edge-highlight), var(--shadow);
background-color: var(--fg-muted-1);
width: 100%;
height: 100%;
overflow: hidden;
transition: var(--transition);
width: 100%;
&:hover {
box-shadow: var(--edge-highlight), var(--shadow-raised);
transform: rotate(10deg) scale(1.1);
box-shadow: var(--edge-highlight), var(--shadow-raised);
}
&:active {
box-shadow: var(--edge-highlight), var(--shadow);
transform: scale(var(--active));
box-shadow: var(--edge-highlight), var(--shadow);
}
}
}
.author {
align-items: center;
display: flex;
font-weight: bold;
gap: 0.25rem;
grid-area: name;
align-items: center;
gap: 0.25rem;
font-weight: bold;
.instance {
background-color: var(--fg-muted-1);
border-radius: 999px;
transition: var(--transition);
box-shadow: var(--edge-highlight);
border-radius: 999px;
background-color: var(--fg-muted-1);
padding: 0.25rem 0.75rem;
color: var(--fg-color);
font-size: 0.8rem;
padding: 0.25rem 0.75rem;
text-decoration: none;
transition: var(--transition);
&:hover {
background-color: var(--fg-muted-2);
@ -86,18 +86,18 @@ section#comments {
&.op {
-webkit-backdrop-filter: unset;
backdrop-filter: unset;
background-color: transparent;
box-shadow: none;
background-color: transparent;
color: var(--primary-color);
&:hover {
background-color: var(--primary-color-alpha);
box-shadow: var(--edge-highlight);
background-color: var(--primary-color-alpha);
}
&::before {
content: "✔";
margin-inline-end: 0.25rem;
content: "✔";
}
}
}
@ -106,15 +106,15 @@ section#comments {
.emoji {
all: unset;
display: inline;
height: 1.5em;
vertical-align: middle;
width: 1.5em;
height: 1.5em;
}
time {
grid-area: time;
color: var(--fg-muted-5);
font-size: 0.8rem;
grid-area: time;
}
main {
@ -131,19 +131,19 @@ section#comments {
.boosts,
.faves {
background-color: transparent;
border-radius: 999px;
display: inline-block;
font-variant-numeric: tabular-nums;
margin-right: 0.25rem;
padding: 0.25rem 0.75rem;
text-decoration: none;
transition: var(--transition);
margin-right: 0.25rem;
border-radius: 999px;
background-color: transparent;
padding: 0.25rem 0.75rem;
font-variant-numeric: tabular-nums;
text-decoration: none;
svg {
margin-inline-end: 0.25rem;
transition: var(--transition-long);
vertical-align: -0.125em;
transition: var(--transition-long);
margin-inline-end: 0.25rem;
}
&:hover {