82 lines
No EOL
2.2 KiB
SCSS
82 lines
No EOL
2.2 KiB
SCSS
.quote-block { // structure
|
|
box-sizing: border-box;
|
|
&__header {
|
|
display: grid;
|
|
}
|
|
&__attribution { // either an author="" or card=""
|
|
margin: 0;
|
|
display: inline-flex;
|
|
}
|
|
&__card { // avatar and display name
|
|
display: inline-grid;
|
|
place-items: center;
|
|
}
|
|
&__author { // markdown text
|
|
display: inline-grid;
|
|
grid-template-columns: auto 1fr;
|
|
place-items: center;
|
|
a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
&__postpend { // " wrote:" goes after either card or author
|
|
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;
|
|
}
|
|
&__content {
|
|
blockquote {
|
|
margin: 0;
|
|
> *:first-child {
|
|
margin-block-start: 0;
|
|
|
|
}
|
|
> *:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
&__footer {
|
|
&:before {
|
|
content: '— ';
|
|
}
|
|
}
|
|
}
|
|
|
|
.quote-block {
|
|
&__header, &__content, &__footer {
|
|
padding-inline: 1em;
|
|
background: var(--ui-overlay-transparent);
|
|
}
|
|
&__header {
|
|
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;
|
|
// }
|
|
}
|
|
} |