trwnh.com/unified.test.hugo/assets/styles/components/article.scss
2024-11-16 16:42:05 -06:00

63 lines
No EOL
1.1 KiB
SCSS

.article {
&-footer {
hr {
display: none;
}
}
}
.article[has-toc] {
padding-block-end: 4em;
> .table-of-contents {display: none;}
#toc-toggle {
display: none;
&:checked ~ .table-of-contents {
display: block;
position: fixed;
z-index: 10;
inset-block-end: 6em;
block-size: max-content;
inline-size: 80%;
max-inline-size: 20em;
max-block-size: #{m}in(40em, 70vh);
overflow-block: scroll;
inset-inline-end: 1em;
background: var(--ui-overlay);
border-radius: 1em;
@include shadow-low;
padding-inline: 1em;
> .container {
padding: 0;
}
}
}
label[for="toc-toggle"] {
position: fixed;
inset-block-end: 1em;
inset-inline-end: 1em;
z-index: 5;
background: var(--ui-overlay);
padding: 1em;
border-radius: 100em;
inline-size: 6em;
display: flex;
justify-content: center;
@include shadow-low;
}
#toc-toggle ~ label[for="toc-toggle"] {
}
#toc-toggle:checked ~ label[for="toc-toggle"] {
}
#toc-toggle__label-hide {
display: none;
}
#toc-toggle:checked ~ #toc-toggle__label-hide {
display: flex;
}
#toc-toggle:checked ~ #toc-toggle__label-show {
display: none;
}
}