Markdown image layout hints + AVIF assets
Content-only image control: a markdown image title carries layout — left/right to float text around it, a number for max-width in rem (validated, capped) — translated to md-float-* classes and a numeric inline max-width. No arbitrary CSS reaches the page. Portal also now serves .avif site assets. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
This commit is contained in:
co-authored by
Claude Fable 5
parent
57b70c8445
commit
bf7f2e11e7
@@ -552,6 +552,30 @@ main.not-found {
|
||||
border: 0.06rem solid var(--line);
|
||||
}
|
||||
|
||||
/* Content hint via a markdown image title (``):
|
||||
float and shrink so text wraps around a portrait. */
|
||||
.alt-description img.md-float-left,
|
||||
.item-card-description img.md-float-left,
|
||||
.feature p img.md-float-left,
|
||||
.alt-description img.md-float-right,
|
||||
.item-card-description img.md-float-right,
|
||||
.feature p img.md-float-right {
|
||||
width: auto;
|
||||
max-width: 45%;
|
||||
}
|
||||
.alt-description img.md-float-left,
|
||||
.item-card-description img.md-float-left,
|
||||
.feature p img.md-float-left {
|
||||
float: left;
|
||||
margin: 0.2rem 1.1rem 0.5rem 0;
|
||||
}
|
||||
.alt-description img.md-float-right,
|
||||
.item-card-description img.md-float-right,
|
||||
.feature p img.md-float-right {
|
||||
float: right;
|
||||
margin: 0.2rem 0 0.5rem 1.1rem;
|
||||
}
|
||||
|
||||
.alt-description code,
|
||||
.feature p code {
|
||||
font-size: 0.9em;
|
||||
|
||||
Reference in New Issue
Block a user