You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
153 lines
3.0 KiB
153 lines
3.0 KiB
/** |
|
* @file |
|
* Text Content. |
|
*/ |
|
|
|
@import "../base/media-queries.pcss.css"; |
|
|
|
.text-content, |
|
.cke_editable { |
|
color: var(--color-text-neutral-medium); |
|
font-family: var(--font-serif); |
|
line-height: var(--sp1-5); |
|
|
|
/* |
|
@todo |
|
|
|
text-decoration-thickness is supported by FF & Safari |
|
text-underline-offset is supported by Safari |
|
|
|
text-decoration-color supported by Chrome, FF, & Safari |
|
*/ |
|
|
|
& a:where(:not(.button)) { |
|
color: var(--color-text-primary-medium); |
|
text-decoration-color: currentColor; |
|
text-decoration-thickness: 2px; |
|
overflow-wrap: break-word; |
|
|
|
@supports (box-shadow: none) { |
|
transition: box-shadow 0.3s cubic-bezier(0.55, 0.085, 0, 0.99); |
|
text-decoration: none; |
|
box-shadow: inset 0 -2px 0 0 var(--color--primary-50); |
|
|
|
&:hover { |
|
text-decoration: underline; |
|
color: var(--color--black); |
|
box-shadow: inset 0 -2em 0 0 var(--color--primary-80); |
|
text-decoration-color: var(--color--primary-80); |
|
} |
|
} |
|
} |
|
|
|
& p { |
|
margin-block-start: var(--sp); |
|
margin-block-end: var(--sp); |
|
|
|
&:first-child { |
|
margin-block-start: 0; |
|
} |
|
|
|
&:last-child { |
|
margin-block-end: 0; |
|
} |
|
|
|
@media (--md) { |
|
margin-block-start: var(--sp2); |
|
margin-block-end: var(--sp2); |
|
} |
|
} |
|
|
|
& code { |
|
background-color: var(--color--gray-100); |
|
} |
|
|
|
& pre code { |
|
display: block; |
|
overflow: auto; |
|
padding-block: var(--sp); |
|
padding-inline-start: var(--sp); |
|
padding-inline-end: var(--sp); |
|
color: var(--color-text-neutral-soft); |
|
} |
|
|
|
& blockquote { |
|
position: relative; |
|
margin-block: var(--sp2); |
|
margin-inline-start: 0; |
|
margin-inline-end: 0; |
|
padding-inline-start: var(--sp2); |
|
letter-spacing: -0.01em; |
|
font-family: var(--font-serif); |
|
font-size: 21px; |
|
line-height: var(--sp2); |
|
|
|
&::before { |
|
position: absolute; |
|
inset-block-start: 0; |
|
inset-inline-start: 0; |
|
content: "\201C"; |
|
color: var(--color--primary-60); |
|
font-size: 54px; |
|
} |
|
|
|
&::after { |
|
position: absolute; |
|
inset-block-end: 0; |
|
inset-inline-start: 0; |
|
width: var(--sp0-5); |
|
height: calc(100% - 30px); |
|
margin-inline-start: 4px; |
|
content: ""; |
|
background: var(--color--gray-100); |
|
} |
|
|
|
@media (--grid-md) { |
|
font-size: 32px; |
|
line-height: var(--sp3); |
|
} |
|
|
|
@media (--lg) { |
|
font-size: 40px; |
|
line-height: calc(3.5 * var(--sp)); |
|
} |
|
} |
|
|
|
@media (--grid-md) { |
|
font-size: 18px; |
|
line-height: var(--sp2); |
|
} |
|
} |
|
|
|
/** |
|
* Special colors for footer that has a dark background. |
|
*/ |
|
.site-footer .text-content { |
|
color: inherit; |
|
|
|
& * { |
|
color: inherit; |
|
} |
|
|
|
& a { |
|
text-decoration: underline; |
|
color: var(--color--white); |
|
box-shadow: none; |
|
|
|
&:hover { |
|
text-decoration: none; |
|
color: var(--color--white); |
|
box-shadow: none; |
|
} |
|
} |
|
} |
|
|
|
/** |
|
* Decrease font-size for blockquote placed in sidebar region. |
|
*/ |
|
.region--sidebar .text-content blockquote { |
|
@media (--lg) { |
|
font-size: 24px; |
|
line-height: var(--sp2); |
|
} |
|
}
|
|
|