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.
205 lines
3.9 KiB
205 lines
3.9 KiB
/** |
|
* Article Component |
|
* Article-specific styling (content, actions, metadata) |
|
*/ |
|
|
|
article { |
|
margin-bottom: var(--spacing-5); |
|
} |
|
|
|
.article-main { |
|
margin-top: var(--spacing-5); |
|
} |
|
|
|
.article-main h2, .article-main h3, |
|
.article-main h4, .article-main h5, .article-main h6 { |
|
margin-top: var(--spacing-5); |
|
} |
|
|
|
.article-actions { |
|
display: flex; |
|
justify-content: flex-start; |
|
gap: var(--spacing-3); |
|
margin: var(--spacing-3) 0; |
|
} |
|
|
|
.article-main p, |
|
.article-main ul, |
|
.article-main ol, |
|
.article-main blockquote, |
|
.article-main table, |
|
#editor .ql-editor p, |
|
#editor .ql-editor ul, |
|
#editor .ql-editor ol, |
|
#editor .ql-editor blockquote, |
|
#editor .ql-editor table { |
|
font-family: var(--main-body-font), serif; |
|
color: var(--color-text-mid); |
|
font-size: 1.4rem; |
|
line-height: 1.75; |
|
} |
|
|
|
#editor .ql-editor p, |
|
#editor .ql-editor ul, |
|
#editor .ql-editor ol, |
|
#editor .ql-editor blockquote, |
|
#editor .ql-editor table { |
|
font-family: var(--main-body-font), serif; |
|
color: var(--color-text-mid); |
|
font-size: 1.4rem; |
|
line-height: 1.5; |
|
} |
|
|
|
#editor .ql-editor li { |
|
line-height: 1.4; |
|
} |
|
|
|
#editor .ql-editor p, |
|
#editor .ql-editor ul, |
|
#editor .ql-editor ol { |
|
margin-bottom: var(--spacing-3); |
|
} |
|
|
|
#editor .ql-editor h1, |
|
#editor .ql-editor h2, |
|
#editor .ql-editor h3 { |
|
margin-top: var(--spacing-4); |
|
margin-bottom: var(--spacing-3); |
|
} |
|
|
|
.article-main table { |
|
font-size: 1.3rem; |
|
} |
|
|
|
.article-main table th, |
|
.article-main table td { |
|
border-bottom: 1px solid var(--color-text); |
|
} |
|
|
|
.byline { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: baseline; |
|
margin: var(--spacing-5) 0; |
|
padding-top: var(--spacing-2); |
|
border-top: 1px solid var(--color-border); |
|
font-size: 1rem; |
|
} |
|
|
|
blockquote { |
|
border-left: 6px solid var(--color-bg-light); |
|
padding-left: var(--spacing-1); |
|
margin: var(--spacing-6) 0 var(--spacing-6) var(--spacing-1); |
|
} |
|
|
|
blockquote p { |
|
font-size: 1.6rem; |
|
font-style: italic; |
|
color: var(--color-text-mid); |
|
padding-left: var(--spacing-5); |
|
} |
|
|
|
.table-of-contents { |
|
border-left: var(--color-secondary) 6px solid; |
|
margin: var(--spacing-5) 0; |
|
} |
|
|
|
.table-of-contents li { |
|
list-style: none; |
|
margin-left: 0; |
|
} |
|
|
|
.heading-permalink { |
|
margin-right: var(--spacing-1); |
|
} |
|
|
|
.heading-permalink:hover { |
|
text-decoration: none; |
|
font-weight: bold; |
|
} |
|
|
|
.embedded-content iframe { |
|
width: 100%; |
|
height: auto; |
|
aspect-ratio: 16/9; |
|
} |
|
|
|
.ql-toolbar { |
|
position: sticky; |
|
top: 80px; |
|
background-color: var(--color-bg); |
|
z-index: 10; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip { |
|
white-space: nowrap; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip .ql-tooltip-editor { |
|
display: inline-flex; |
|
gap: .5rem; |
|
align-items: center; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip input { |
|
width: 220px; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip .ql-action::before { |
|
content: 'Insert'; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip .ql-cancel::before { |
|
content: 'Cancel'; |
|
} |
|
|
|
.ql-snow .ql-tooltip.ql-image-tooltip::before { |
|
content: 'Image:'; |
|
} |
|
|
|
/* Article tags/topics */ |
|
.tags { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: var(--spacing-2); |
|
margin: var(--spacing-4) 0; |
|
} |
|
|
|
.tag { |
|
display: inline-block; |
|
padding: var(--spacing-1) var(--spacing-3); |
|
background-color: var(--color-primary); |
|
color: var(--color-text-contrast); |
|
border-radius: 1.5rem; |
|
font-size: 0.875rem; |
|
font-weight: 500; |
|
text-decoration: none; |
|
transition: background-color 0.2s ease, transform 0.2s ease; |
|
} |
|
|
|
.tag:hover { |
|
background-color: var(--color-secondary); |
|
transform: translateY(-1px); |
|
text-decoration: none; |
|
} |
|
|
|
/* Hashtag styling (for inline hashtags in content) */ |
|
.hashtag { |
|
color: var(--color-secondary); |
|
font-weight: 500; |
|
} |
|
|
|
.hashtag:hover { |
|
color: var(--color-primary); |
|
text-decoration: underline; |
|
} |
|
|
|
article .card { |
|
margin: 0; |
|
} |
|
|
|
.comments { |
|
display: flex; |
|
flex-direction: column; |
|
gap: var(--spacing-2); |
|
}
|
|
|