diff --git a/assets/css/pages/_single.scss b/assets/css/pages/_single.scss index 0f48be6..2882684 100644 --- a/assets/css/pages/_single.scss +++ b/assets/css/pages/_single.scss @@ -302,78 +302,80 @@ font-weight: bold; } - .article-body__content > blockquote { - padding-inline-start: 1em; - border-inline-start: 2px outset $dark; - display: inline-block; - max-inline-size: 85%; - - & footer { - text-align: end; - font-style: normal; + .article-body__content { + & > blockquote { + padding-inline-start: 1em; + border-inline-start: 2px outset $dark; display: inline-block; - margin-inline-start: 5em; - - &::before { - content: "—"; - } - } - - & p:first-child { - margin-block-start: 0; - } - - & p:last-of-type { - margin-block-end: 0.5em; - } - - &.script { - display: grid; - grid-template-columns: auto 1fr 0.2fr; - padding-block-end: 0.4em; - text-align: end; - - & > p::before, - & > p::after { - content: none !important; - } - - & > .script-line__character { - grid-column: 1; - margin: 0.5em 2em 0.5em 0.5em; - font-style: italic; - } - - & > .script-line__text { - grid-column-start: 2; - grid-column-end: 4; - margin: 0.5em; - } + max-inline-size: 85%; & footer { - grid-column-start: 1; - grid-column-end: 3; + text-align: end; + font-style: normal; + display: inline-block; + margin-inline-start: 5em; + + &::before { + content: "—"; + } + } + + & p:first-child { + margin-block-start: 0; + } + + & p:last-of-type { + margin-block-end: 0.5em; + } + + &.script { + display: grid; + grid-template-columns: auto 1fr 0.2fr; + padding-block-end: 0.4em; + text-align: end; + + & > p::before, + & > p::after { + content: none !important; + } + + & > .script-line__character { + grid-column: 1; + margin: 0.5em 2em 0.5em 0.5em; + font-style: italic; + } + + & > .script-line__text { + grid-column-start: 2; + grid-column-end: 4; + margin: 0.5em; + } + + & footer { + grid-column-start: 1; + grid-column-end: 3; + } } } - } - .article-body__content > blockquote:not(.blockquote):first-child { - font-size: 1.2em; - text-align: center; - display: block; - margin: 0 auto; - border-inline-start: 0; - padding-inline-start: 0; - inline-size: 100%; - padding-block-start: 1em; - padding-block-end: 1.2em; - border-block-start: 2px outset $dark; - border-block-end: 2px inset $dark; - } + & > blockquote:not(.blockquote):first-child { + font-size: 1.2em; + text-align: center; + display: block; + margin: 0 auto; + border-inline-start: 0; + padding-inline-start: 0; + inline-size: 100%; + padding-block-start: 1em; + padding-block-end: 1.2em; + border-block-start: 2px outset $dark; + border-block-end: 2px inset $dark; + } - @media only screen and (min-width: 1024px) { - blockquote { - margin: 1em 2em; + @media only screen and (min-width: 1024px) { + blockquote { + margin: 1em 2em; + } } } }