diff --git a/assets/css/center.css b/assets/css/center.css index 99b9111..ec4b48d 100644 --- a/assets/css/center.css +++ b/assets/css/center.css @@ -1,10 +1,9 @@ .center { box-sizing: content-box; - margin-left: auto; - margin-right: auto; - max-width: var(--center-max); - padding-left: var(--center-gutters); - padding-right: var(--center-gutters); + margin-inline: auto; + max-inline-size: var(--center-max); + padding-inline-end: var(--center-gutters); + padding-inline-start: var(--center-gutters); } .center_text { diff --git a/assets/css/cover.css b/assets/css/cover.css index b2e9222..f690dbd 100644 --- a/assets/css/cover.css +++ b/assets/css/cover.css @@ -1,24 +1,22 @@ .cover { display: flex; flex-direction: column; - min-height: var(--cover-min-height); + min-block-size: var(--cover-min-height); padding: var(--cover-space); } .cover > * { - margin-bottom: var(--cover-space); - margin-top: var(--cover-space); + margin-block: var(--cover-space); } .cover > :first-child:not(.cover__center) { - margin-top: 0; + margin-inline-start: 0; } .cover > :last-child:not(.cover__center) { - margin-bottom: 0; + margin-inline-end: 0; } .cover > .cover__center { - margin-bottom: auto; - margin-top: auto; + margin-block: auto; } diff --git a/assets/css/frame.css b/assets/css/frame.css index 2a463bf..130f25e 100644 --- a/assets/css/frame.css +++ b/assets/css/frame.css @@ -1,30 +1,14 @@ .frame { - padding-bottom: calc(var(--frame-numerator) / var(--frame-denominator) * 100%); - position: relative; -} - -.frame > * { align-items: center; - bottom: 0; + aspect-ratio: var(--frame-denominator) / var(--frame-numerator); display: flex; justify-content: center; - left: 0; overflow: hidden; - position: absolute; - right: 0; - top: 0; } .frame > img, .frame > video { - height: 100%; + block-size: 100%; + inline-size: 100%; object-fit: cover; - width: 100%; } - -@supports(aspect-ratio: var(--frame-denominator) / var(--frame-numerator)) { - .frame { - aspect-ratio: var(--frame-denominator) / var(--frame-numerator); - padding-bottom: var(--off); - } -} \ No newline at end of file diff --git a/assets/css/image.css b/assets/css/image.css index a703a60..7d17f64 100644 --- a/assets/css/image.css +++ b/assets/css/image.css @@ -9,11 +9,11 @@ picture { max-width: 100%; } -img[width] { +img:not(.icon)[width] { width: auto; } -img[width][height] { +img:not(.icon)[width][height] { height: auto; } diff --git a/assets/css/imposter.css b/assets/css/imposter.css index 2203cf1..93edda4 100644 --- a/assets/css/imposter.css +++ b/assets/css/imposter.css @@ -1,14 +1,14 @@ .imposter { + inset-block-start: 50%; + inset-inline-start: 50%; position: absolute; - top: 50%; - left: 50%; transform: translate(-50%, -50%); } .imposter_container { + max-block-size: calc(100% - (var(--imposter-margin) * 2)); + max-inline-size: calc(100% - (var(--imposter-margin) * 2)); overflow: auto; - max-width: calc(100% - (var(--imposter-margin) * 2)); - max-height: calc(100% - (var(--imposter-margin) * 2)); } .imposter_fixed { diff --git a/assets/css/reel.css b/assets/css/reel.css index 00a3710..bb61041 100644 --- a/assets/css/reel.css +++ b/assets/css/reel.css @@ -1,6 +1,6 @@ .reel { display: flex; - height: var(--reel-height); + block-size: var(--reel-height); overflow-x: auto; overflow-y: hidden; scrollbar-color: var(--thumb-color) var(--track-color); @@ -29,14 +29,14 @@ .reel > img { flex-basis: auto; - height: 100%; + block-size: 100%; width: auto; } .reel > * + * { - margin-left: var(--reel-space); + margin-inline-start: var(--reel-space); } .js-reel_overflowing { - padding-bottom: var(--reel-space); + padding-block-end: var(--reel-space); } diff --git a/assets/css/stack.css b/assets/css/stack.css index b0230d6..2b6c5b7 100644 --- a/assets/css/stack.css +++ b/assets/css/stack.css @@ -6,11 +6,10 @@ .stack:not(.stack_recursive) > *, .stack.stack_recursive * { - margin-bottom: 0; - margin-top: 0; + margin-block: 0; } .stack:not(.stack_recursive) > * + *, .stack.stack_recursive * + * { - margin-top: var(--stack-space); + margin-block-start: var(--stack-space); }