toby3d/va
toby3d
/
va
1
0
Fork 0
Code Actions

♻️ Simplifies block styles with widely supported CSS attributes

This commit is contained in:
Maxim Lebedev 2022-02-01 02:45:48 +05:00
parent e18f83a8ab
commit 63a580f869
Signed by: toby3d
GPG Key ID: 1F14E25B7C119FC5
7 changed files with 24 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/center.css
View File

@ -1,10 +1,9 @@
.center { .center {
box-sizing: content-box; box-sizing: content-box;
margin-left: auto; margin-inline: auto;
margin-right: auto; max-inline-size: var(--center-max);
max-width: var(--center-max); padding-inline-end: var(--center-gutters);
padding-left: var(--center-gutters); padding-inline-start: var(--center-gutters);
padding-right: var(--center-gutters);
} }
.center_text { .center_text {

12
assets/css/cover.css
View File

@ -1,24 +1,22 @@
.cover { .cover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-height: var(--cover-min-height); min-block-size: var(--cover-min-height);
padding: var(--cover-space); padding: var(--cover-space);
} }
.cover > * { .cover > * {
margin-bottom: var(--cover-space); margin-block: var(--cover-space);
margin-top: var(--cover-space);
} }
.cover > :first-child:not(.cover__center) { .cover > :first-child:not(.cover__center) {
margin-top: 0; margin-inline-start: 0;
} }
.cover > :last-child:not(.cover__center) { .cover > :last-child:not(.cover__center) {
margin-bottom: 0; margin-inline-end: 0;
} }
.cover > .cover__center { .cover > .cover__center {
margin-bottom: auto; margin-block: auto;
margin-top: auto;
} }

22
assets/css/frame.css
View File

@ -1,30 +1,14 @@
.frame { .frame {
padding-bottom: calc(var(--frame-numerator) / var(--frame-denominator) * 100%);
position: relative;
}
.frame > * {
align-items: center; align-items: center;
bottom: 0; aspect-ratio: var(--frame-denominator) / var(--frame-numerator);
display: flex; display: flex;
justify-content: center; justify-content: center;
left: 0;
overflow: hidden; overflow: hidden;
position: absolute;
right: 0;
top: 0;
} }
.frame > img, .frame > img,
.frame > video { .frame > video {
height: 100%; block-size: 100%;
inline-size: 100%;
object-fit: cover; 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);
}
}

4
assets/css/image.css
View File

@ -9,11 +9,11 @@ picture {
max-width: 100%; max-width: 100%;
} }
img[width] { img:not(.icon)[width] {
width: auto; width: auto;
} }
img[width][height] { img:not(.icon)[width][height] {
height: auto; height: auto;
} }

8
assets/css/imposter.css
View File

@ -1,14 +1,14 @@
.imposter { .imposter {
inset-block-start: 50%;
inset-inline-start: 50%;
position: absolute; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.imposter_container { .imposter_container {
max-block-size: calc(100% - (var(--imposter-margin) * 2));
max-inline-size: calc(100% - (var(--imposter-margin) * 2));
overflow: auto; overflow: auto;
max-width: calc(100% - (var(--imposter-margin) * 2));
max-height: calc(100% - (var(--imposter-margin) * 2));
} }
.imposter_fixed { .imposter_fixed {

8
assets/css/reel.css
View File

@ -1,6 +1,6 @@
.reel { .reel {
display: flex; display: flex;
height: var(--reel-height); block-size: var(--reel-height);
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
scrollbar-color: var(--thumb-color) var(--track-color); scrollbar-color: var(--thumb-color) var(--track-color);
@ -29,14 +29,14 @@
.reel > img { .reel > img {
flex-basis: auto; flex-basis: auto;
height: 100%; block-size: 100%;
width: auto; width: auto;
} }
.reel > * + * { .reel > * + * {
margin-left: var(--reel-space); margin-inline-start: var(--reel-space);
} }
.js-reel_overflowing { .js-reel_overflowing {
padding-bottom: var(--reel-space); padding-block-end: var(--reel-space);
} }

5
assets/css/stack.css
View File

@ -6,11 +6,10 @@
.stack:not(.stack_recursive) > *, .stack:not(.stack_recursive) > *,
.stack.stack_recursive * { .stack.stack_recursive * {
margin-bottom: 0; margin-block: 0;
margin-top: 0;
} }
.stack:not(.stack_recursive) > * + *, .stack:not(.stack_recursive) > * + *,
.stack.stack_recursive * + * { .stack.stack_recursive * + * {
margin-top: var(--stack-space); margin-block-start: var(--stack-space);
} }