new watch page widths!!

This commit is contained in:
Ashley 2022-12-16 14:44:57 +00:00
parent 1dd6a65462
commit 5dee6f200d

View file

@ -43,6 +43,12 @@
--video-player-height-max: 720px; --video-player-height-max: 720px;
--video-player-width-max: 1280px; --video-player-width-max: 1280px;
--ptd-margin-6x: 24px;
--ptd-watch-min-player-height: 360px;
--ptd-watch-width-ratio: 16;
--ptd-watch-height-ratio: 9;
--ptd-watch-sidebar-min-width: 300px;
} }
a.class:hover { a.class:hover {
@ -333,11 +339,17 @@ a {
margin-inline: var(--gutter); margin-inline: var(--gutter);
} }
@media screen and (min-width: 1340px) { @media screen and (min-width: 1400px) {
.watch-page { .watch-page {
max-width: 80.9em; max-width: calc(1280px + 3 * var(--ptd-margin-6x));
min-width: calc(
var(--ptd-watch-min-player-height) *
var(--ptd-watch-width-ratio) / var(--ptd-watch-height-ratio) +
3 * var(--ptd-margin-6x) + var(--ptd-watch-sidebar-min-width)
);
justify-content: center; justify-content: center;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
gap: var(--gutter);
} }
} }