ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix image height in certain contexts

This commit is contained in:
k00b 2024-09-13 19:14:36 -05:00
parent 7c68eafa56
commit 2018cc1f0b
1 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/text.module.css
View File

@ -149,23 +149,7 @@
white-space: normal; white-space: normal;
} }
.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) { .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child),
display: inline-block;
width: min-content;
max-width: calc(100% - var(--grid-gap));
margin-bottom: 0;
}
.mediaContainer ~ .mediaContainer {
display: inline-block;
width: min-content;
margin-right: var(--grid-gap);
}
.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child {
margin-right: var(--grid-gap);
}
.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) { .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
display: inline-block; display: inline-block;
width: min-content; width: min-content;
@ -173,18 +157,27 @@
margin-bottom: 0; margin-bottom: 0;
} }
.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child { .mediaContainer ~ .mediaContainer, .mediaContainer:has(+ .mediaContainer) {
margin-right: var(--grid-gap);
}
.mediaContainer:has(+ .mediaContainer) {
display: inline-block; display: inline-block;
width: min-content; width: min-content;
margin-right: var(--grid-gap); margin-right: var(--grid-gap);
} }
.mediaContainer:first-child:has(+ .mediaContainer) { .p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child,
margin-top: var(--grid-gap); .p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child,
.mediaContainer:first-child:has(+ .mediaContainer) {
margin-right: var(--grid-gap);
}
.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child img,
.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child img,
.mediaContainer ~ .mediaContainer img,
.mediaContainer:has(+ .mediaContainer) img,
.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child video,
.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child video,
.mediaContainer ~ .mediaContainer video,
.mediaContainer:has(+ .mediaContainer) video {
block-size: stretch;
} }
.mediaContainer img, .mediaContainer video { .mediaContainer img, .mediaContainer video {
@ -194,7 +187,6 @@
max-height: inherit; max-height: inherit;
height: 100%; height: 100%;
aspect-ratio: var(--aspect-ratio); aspect-ratio: var(--aspect-ratio);
block-size: stretch;
} }
.mediaContainer img { .mediaContainer img {