trwnh.com/unified.test.hugo/assets/styles/components/quote-block.scss

82 lines
2.2 KiB
SCSS
Raw Normal View History

.quote-block { // structure
2024-10-12 18:45:14 +00:00
box-sizing: border-box;
2024-10-18 07:33:33 +00:00
&__header {
display: grid;
2024-10-12 18:45:14 +00:00
}
&__attribution { // either an author="" or card=""
2024-10-12 18:45:14 +00:00
margin: 0;
2024-10-18 07:33:33 +00:00
display: inline-flex;
}
&__card { // avatar and display name
2024-10-18 07:33:33 +00:00
display: inline-grid;
place-items: center;
}
&__author { // markdown text
2024-10-18 07:33:33 +00:00
display: inline-grid;
grid-template-columns: auto 1fr;
2024-10-18 07:33:33 +00:00
place-items: center;
a {
display: inline-flex;
align-items: center;
2024-10-12 18:45:14 +00:00
}
}
&__postpend { // " wrote:" goes after either card or author
2024-10-18 07:33:33 +00:00
display: inline-grid;
align-items: center;
white-space: pre;
}
&__prepend { // when there is no attribution, "quote:"
margin-block: 0;
display: inline-grid;
grid-template-columns: auto 1fr;
place-items: center start;
}
2024-10-18 07:33:33 +00:00
&__content {
blockquote {
margin: 0;
> *:first-child {
margin-block-start: 0;
2024-10-18 07:33:33 +00:00
}
> *:last-child {
margin-block-end: 0;
}
}
}
&__footer {
&:before {
content: '';
}
2024-10-12 18:45:14 +00:00
}
}
.quote-block {
&__header, &__content, &__footer {
padding-inline: 1em;
background: var(--ui-overlay-transparent);
}
&__header {
2024-11-13 17:24:48 +00:00
padding-block-start: 1em;
}
&__header:has(&__card) {
padding-block-end: 1em;
}
&__content, &__footer {
padding-block-end: 1em;
}
&__author, &__prepend {
font-weight: bold;
// position: relative;
// &:before {
// content: '';
// display: inline;
// width: 3em;
// height: 3em;
// background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIwMCAxMjAwIj48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTYwMCAxMjAwYzMzMS4zNzEgMCA2MDAtMjY4LjYyOSA2MDAtNjAwUzkzMS4zNzEgMCA2MDAgMFMwIDI2OC42MjkgMCA2MDBzMjY4LjYyOSA2MDAgNjAwIDYwMG00NS45MjMtMjgyLjQyMkw2MjAuMTQyIDc5OC44NWM3NS41NDEtMTYuNzIxIDE0NS4wMDUtMzguNDY4IDEzOS4zOC0xMjIuODI1aC04OC43N1YzNjAuMDU3aDI2Ny40MDd2Mjk1LjMxNGMtLjA5NSAyMzQuNjkxLTE3Mi40MDEgMjUzLjc4Ni0yOTIuMjM2IDI2Mi4yMDdtLTM1OC4yMjggMEwyNjEuODQxIDc5OC44NWM3NS41NDEtMTYuNzIxIDE0NS4wMDUtMzguNDY4IDEzOS4zOC0xMjIuODI1aC04OC43N1YzNjAuMDU3aDI2Ny40MDd2Mjk1LjMxNGMtLjA5NCAyMzQuNjkxLTE3Mi4zMjggMjUzLjc4Ni0yOTIuMTYzIDI2Mi4yMDciLz48L3N2Zz4=);
// background-size: 75%;
// background-repeat: no-repeat;
// background-position: center;
// margin-right: 0.5em;
// }
}
2024-10-12 18:45:14 +00:00
}