Style blockquote with attribution

This commit is contained in:
Helen Chong 2024-05-09 20:27:58 +08:00
parent 80e024afdd
commit 367904f62c
2 changed files with 30 additions and 6 deletions

View File

@ -191,14 +191,17 @@ a:focus img {
outline: 0.2em solid var(--clr-body-txt); outline: 0.2em solid var(--clr-body-txt);
} }
blockquote { :not(.c-blockquote) > blockquote,
.c-blockquote {
padding: 1em 1.4em 1.4em; padding: 1em 1.4em 1.4em;
border-inline-start: 0.1em solid var(--clr-main-heading); border-inline-start: 0.1em solid var(--clr-main-heading);
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
margin-bottom: 1em; margin-bottom: 1em;
} }
blockquote > * + :not([class]) { blockquote > * + :not([class]),
.c-blockquote,
.c-blockquote__attribution {
margin-top: var(--sz-paragraph-margin); margin-top: var(--sz-paragraph-margin);
} }
@ -390,6 +393,16 @@ main {
margin-top: 1.7em; margin-top: 1.7em;
} }
/* BLOCKQUOTES With CITATIONS */
.c-blockquote__attribution {
text-align: left;
}
.c-blockquote__attribution::before {
content: "—";
margin-right: 0.3em;
}
/* SPECIAL ELEMENTS */ /* SPECIAL ELEMENTS */
.text-box { .text-box {
background: var(--clr-quote-bg); background: var(--clr-quote-bg);
@ -417,7 +430,6 @@ main {
gap: 0.5em; gap: 0.5em;
} }
/* Tablet screen size */ /* Tablet screen size */
@media only screen and (min-width: 37.5rem) { @media only screen and (min-width: 37.5rem) {
.mod-entry__downloads { .mod-entry__downloads {

View File

@ -191,14 +191,17 @@ a:focus img {
outline: 0.2em solid var(--clr-body-txt); outline: 0.2em solid var(--clr-body-txt);
} }
blockquote { :not(.c-blockquote) > blockquote,
.c-blockquote {
padding: 1em 1.4em 1.4em; padding: 1em 1.4em 1.4em;
border-inline-start: 0.1em solid var(--clr-main-heading); border-inline-start: 0.1em solid var(--clr-main-heading);
background-color: var(--clr-quote-bg); background-color: var(--clr-quote-bg);
margin-bottom: 1em; margin-bottom: 1em;
} }
blockquote > * + :not([class]) { blockquote > * + :not([class]),
.c-blockquote,
.c-blockquote__attribution {
margin-top: var(--sz-paragraph-margin); margin-top: var(--sz-paragraph-margin);
} }
@ -390,6 +393,16 @@ main {
margin-top: 1.7em; margin-top: 1.7em;
} }
/* BLOCKQUOTES With CITATIONS */
.c-blockquote__attribution {
text-align: left;
}
.c-blockquote__attribution::before {
content: "—";
margin-right: 0.3em;
}
/* SPECIAL ELEMENTS */ /* SPECIAL ELEMENTS */
.text-box { .text-box {
background: var(--clr-quote-bg); background: var(--clr-quote-bg);
@ -417,7 +430,6 @@ main {
gap: 0.5em; gap: 0.5em;
} }
/* Tablet screen size */ /* Tablet screen size */
@media only screen and (min-width: 37.5rem) { @media only screen and (min-width: 37.5rem) {
.mod-entry__downloads { .mod-entry__downloads {