rendered_markdown: Remove now-unnecessary layout adjustments.

This commit is contained in:
Karl Stolley 2025-07-30 13:26:28 -05:00 committed by Tim Abbott
parent 2d68beda07
commit b87d22c9fa

View File

@ -562,82 +562,6 @@
}
}
/* In browsers that support `:has()`, we pull
`.rendered_markdown` out of the baseline group
formed with EDITED/MOVED markers and the
timestamp when the first child of the rendered
markdown is a horizontal rule, a media element,
or KaTeX. */
/*
&:has(> hr:first-child),
&:has(> .message-thumbnail-gallery:first-child),
&:has(> p:first-child > audio),
&:has(> p:first-child > .katex-display) {
align-self: center;
}
*/
/* But for browsers that don't support :has(),
we provide a small layout hack using an
inline grid. */
@supports not selector(:has(*)) {
p:first-child > .katex-display {
/* KaTeX should take up 100% of the message box,
so that KaTeX's own CSS for centering still works. */
width: 100%;
}
> audio:first-child,
p:first-child > audio,
p:first-child > .katex-display,
.message_inline_image {
/* We'll display this bit of media as
an inline grid. That will allow us
to put beneath the image a piece of
invisible ::before content that we'll
generate to participate in the
messagebox-content grid's baseline
group. */
display: inline-grid;
/* We create a grid area called
"media", so that both the inner
<a> element and the ::before content
can sit there. `auto` will take on
the height and width otherwise assigned
to the .message_inline_image. Setting
the min value to 0 on minmax() ensures
that media larger than those dimensions
don't cause a grid blowout. */
grid-template: "media" minmax(0, auto) / minmax(0, auto);
}
p:first-child > audio,
p:first-child > .katex-display > .katex,
.message_inline_image .media-anchor-element,
.message_inline_image .media-video-element {
/* We explicitly place the containing
media element in the thumbnail area. */
grid-area: media;
}
p:first-child > audio::before,
p:first-child > .katex-display::before,
.message_inline_image::before {
/* We generate a single . here to create
text content enough for a baseline.
Generated content is not generally
read aloud to screen readers. */
content: ".";
/* We color the generated . transparently,
so it won't be visible when the media
doesn't cover the entire area. */
color: transparent;
/* And we explicitly place the . in the thumbnail
area, too. Otherwise, grid would generate a new
column track for it to sit in. */
grid-area: media;
}
}
.twitter-tweet {
border: 1px solid hsl(0deg 0% 87%);
padding: 0.5em 0.75em;