71 lines
1.8 KiB
SCSS
71 lines
1.8 KiB
SCSS
#article-list {
|
|
article {
|
|
position: relative;
|
|
|
|
&.draft {
|
|
transform: scale(0.95);
|
|
opacity: 0.6;
|
|
transition: var(--transition-longer);
|
|
outline: 2px dashed var(--fg-muted-2);
|
|
outline-offset: 1rem;
|
|
border-radius: 1rem;
|
|
|
|
&:hover {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
outline: 2px dashed transparent;
|
|
outline-offset: 0;
|
|
}
|
|
}
|
|
|
|
&:has(.draft-badge, .archive-badge) h3 {
|
|
margin-right: 7rem;
|
|
}
|
|
|
|
.draft-badge,
|
|
.archive-badge {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
box-shadow: var(--edge-highlight);
|
|
border-radius: 999px;
|
|
padding: 0.25rem 0.75rem;
|
|
font-weight: bold;
|
|
|
|
.icon {
|
|
vertical-align: -0.125em;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
}
|
|
|
|
.draft-badge {
|
|
background-color: var(--fg-muted-1);
|
|
color: var(--fg-muted-4);
|
|
|
|
.icon {
|
|
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M12.277.832c-.578.008-1.168.23-1.691.754l-9 9A2 2 0 0 0 1 12v3h3c.531 0 1.04-.21 1.414-.586l9-9c1.79-1.789.082-4.39-1.89-4.57-.083-.012-.165-.012-.247-.012M10.5 4.437 11.563 5.5 4.5 12.563 3.438 11.5zm0 0'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: $icon;
|
|
mask-image: $icon;
|
|
background-color: var(--fg-muted-4);
|
|
}
|
|
}
|
|
|
|
.archive-badge {
|
|
background-color: var(--purple-bg);
|
|
color: var(--purple-fg);
|
|
|
|
.icon {
|
|
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M4 1a1 1 0 0 0-.926.625l-2 5A1 1 0 0 0 1 7v7s0 2 2 2h10s2 0 2-2l.004-6.937c0-.149-.004-.297-.074-.438l-2-5A1 1 0 0 0 12 1zm.676 2h6.644l1.203 3h-9.05zM7 8h2v3h2a1 1 0 0 1-.293.707l-2 2a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1-.285-.7L5 11h2zm0 0'/%3E%3C/svg%3E");
|
|
-webkit-mask-image: $icon;
|
|
mask-image: $icon;
|
|
background-color: var(--purple-fg);
|
|
}
|
|
}
|
|
}
|
|
|
|
hr:last-of-type {
|
|
display: none;
|
|
}
|
|
}
|