Lotus CIandClaude Opus 5
e9a59336c7
- lotusTransparent without lotusTheme warns and applies the theme anyway; name tags/header/footer get a subtle text-shadow + backdrop blur under body.lotus-transparent (#21). - Landscape filmstrip shrink requires (pointer: coarse) so a short desktop/PiP window isn't reflowed as a phone (#32). - lotusParam re-reads window.location on every call (#33). Fixes #21 Fixes #32 Fixes #33 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA
64 lines
1.6 KiB
CSS
64 lines
1.6 KiB
CSS
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
.layer {
|
|
block-size: 100%;
|
|
display: grid;
|
|
--gap: 20px;
|
|
gap: var(--gap);
|
|
--grid-slot-width: 180px;
|
|
grid-template-columns: 1fr var(--grid-slot-width);
|
|
grid-template-rows: minmax(1fr, auto);
|
|
padding-inline: var(--gap);
|
|
}
|
|
|
|
.spotlight {
|
|
container: spotlight / size;
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
/* CSS makes us put a condition here, even though all we want to do is
|
|
unconditionally select the container so we can use cq units */
|
|
@container spotlight (width > 0) {
|
|
.spotlight > .slot {
|
|
inline-size: min(100cqi, 100cqb * (17 / 9));
|
|
block-size: min(100cqb, 100cqi / (4 / 3));
|
|
}
|
|
}
|
|
|
|
.grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--gap);
|
|
justify-content: center;
|
|
align-content: center;
|
|
}
|
|
|
|
.grid > .slot {
|
|
inline-size: 180px;
|
|
block-size: 135px;
|
|
}
|
|
|
|
/* On a landscape phone the fixed 180px filmstrip rail squeezes the spotlight to
|
|
a sliver; shrink the rail (keeping the 4:3 tile ratio) to give the spotlight
|
|
room. Desktop landscape (height > 400px) is unaffected.
|
|
[lotus #32] `max-height: 400px` alone also matches a short-but-wide desktop
|
|
or PiP window that has nothing to do with a phone, so require a coarse
|
|
(touch) pointer too — a resized desktop/PiP window kept its mouse pointer,
|
|
so it won't match this and keeps the full-size rail. */
|
|
@media (max-height: 400px) and (pointer: coarse) {
|
|
.layer {
|
|
--grid-slot-width: 132px;
|
|
}
|
|
|
|
.grid > .slot {
|
|
inline-size: 132px;
|
|
block-size: 99px;
|
|
}
|
|
}
|