-
Notifications
You must be signed in to change notification settings - Fork 4.3k
/
style.scss
74 lines (63 loc) · 2.05 KB
/
style.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// Apply max-width to floated items that have no intrinsic width
.block-editor-block-list__block[data-type="core/embed"][data-align="left"] .block-editor-block-list__block-edit,
.block-editor-block-list__block[data-type="core/embed"][data-align="right"] .block-editor-block-list__block-edit,
.wp-block-embed.alignleft,
.wp-block-embed.alignright {
// Instagram widgets have a min-width of 326px, so go a bit beyond that.
max-width: 360px;
width: 100%;
}
.wp-block-embed {
// The embed block is in a `figure` element, and many themes zero this out.
// This rule explicitly sets it, to ensure at least some bottom-margin in the flow.
margin-bottom: 1em;
}
.wp-embed-responsive {
.wp-block-embed {
// Add responsiveness to common aspect ratios.
&.wp-embed-aspect-21-9 .wp-block-embed__wrapper,
&.wp-embed-aspect-18-9 .wp-block-embed__wrapper,
&.wp-embed-aspect-16-9 .wp-block-embed__wrapper,
&.wp-embed-aspect-4-3 .wp-block-embed__wrapper,
&.wp-embed-aspect-1-1 .wp-block-embed__wrapper,
&.wp-embed-aspect-9-16 .wp-block-embed__wrapper,
&.wp-embed-aspect-1-2 .wp-block-embed__wrapper {
position: relative;
&::before {
content: "";
display: block;
padding-top: 50%; // Default to 2:1 aspect ratio.
}
iframe {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
}
&.wp-embed-aspect-21-9 .wp-block-embed__wrapper::before {
padding-top: 42.85%; // 9 / 21 * 100
}
&.wp-embed-aspect-18-9 .wp-block-embed__wrapper::before {
padding-top: 50%; // 9 / 18 * 100
}
&.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
padding-top: 56.25%; // 9 / 16 * 100
}
&.wp-embed-aspect-4-3 .wp-block-embed__wrapper::before {
padding-top: 75%; // 3 / 4 * 100
}
&.wp-embed-aspect-1-1 .wp-block-embed__wrapper::before {
padding-top: 100%; // 1 / 1 * 100
}
&.wp-embed-aspect-9-6 .wp-block-embed__wrapper::before {
padding-top: 66.66%; // 6 / 9 * 100
}
&.wp-embed-aspect-1-2 .wp-block-embed__wrapper::before {
padding-top: 200%; // 2 / 1 * 100
}
}
}