Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-13 01:18:50 +01:00
Code Issues Projects Releases Packages Wiki Activity

First attempt of CSS container query

Browse source
This commit is contained in:
Lim Chee Aun 2023-09-03 18:10:47 +08:00
parent 6cbbd0aa1b
commit 8cc85ecb1a
1 changed files with 13 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app.css
View file

@ -747,6 +747,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
transparent 150% transparent 150%
); );
position: relative; position: relative;
container-type: inline-size;
} }
.status-carousel:after { .status-carousel:after {
content: ''; content: '';
@ -806,11 +807,22 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
.status-carousel > ul > li:is(:empty, :has(> a:empty)) { .status-carousel > ul > li:is(:empty, :has(> a:empty)) {
display: none; display: none;
} }
/*
Assume that browsers that do support inline-size property also support container queries.
https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/#progressive-enhancement-polyfills
*/
@supports not (contain: inline-size) {
@media (hover: hover) or (pointer: fine) or (min-width: 40em) { @media (hover: hover) or (pointer: fine) or (min-width: 40em) {
.status-carousel > ul { .status-carousel > ul {
scroll-snap-type: none; scroll-snap-type: none;
} }
} }
}
@container (min-width: 640px) {
.status-carousel > ul {
scroll-snap-type: none;
}
}
.status-carousel .content-container .content:only-child { .status-carousel .content-container .content:only-child {
font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0)); font-size: calc(100% + 25% * max(2 - var(--content-text-weight), 0));
} }