improve desktop readable for article view
This commit is contained in:
@@ -3,3 +3,4 @@
|
|||||||
.claude
|
.claude
|
||||||
CLAUDE.md
|
CLAUDE.md
|
||||||
LEARNINGS.md
|
LEARNINGS.md
|
||||||
|
PLAN.md
|
||||||
|
|||||||
@@ -440,6 +440,21 @@ onMounted(async () => {
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* On desktop the viewport is much wider than the article column, so the
|
||||||
|
full-bleed 100vw treatment above would blow images up far beyond their
|
||||||
|
natural resolution. Keep them at natural size, centered in the text. */
|
||||||
|
@media (min-width: 720px) {
|
||||||
|
.article-feature__content--readable :deep(img),
|
||||||
|
.article-feature__content--readable :deep(video) {
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: 1.5em auto;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.article-feature__content :deep(a) {
|
.article-feature__content :deep(a) {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
text-decoration-color: var(--color-accent-hover);
|
text-decoration-color: var(--color-accent-hover);
|
||||||
|
|||||||
Reference in New Issue
Block a user