Created
November 12, 2018 20:05
-
-
Save m-e-h/2e3ab2ee68825bd2728edd52be96be95 to your computer and use it in GitHub Desktop.
Gutenberg front-end stylesheet speceficity audit
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@keyframes fade-in { | |
0% { | |
opacity: 0; | |
} | |
to { | |
opacity: 1; | |
} | |
} | |
@keyframes editor_region_focus { | |
0% { | |
box-shadow: inset 0 0 0 0 #33b3db; | |
} | |
to { | |
box-shadow: inset 0 0 0 4px #33b3db; | |
} | |
} | |
@keyframes rotation { | |
0% { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(1turn); | |
} | |
} | |
@keyframes modal-appear { | |
0% { | |
margin-top: 32px; | |
} | |
to { | |
margin-top: 0; | |
} | |
} | |
.wp-block-audio figcaption { | |
color: #555d66; | |
font-size: 13px; | |
margin-bottom: 1em; | |
margin-top: 0.5em; | |
text-align: center; | |
} | |
.wp-block-audio audio { | |
min-width: 300px; | |
width: 100%; | |
} | |
.editor-block-list__layout .reusable-block-edit-panel { | |
align-items: center; | |
background: #f8f9f9; | |
color: #555d66; | |
display: flex; | |
flex-wrap: wrap; | |
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, | |
Ubuntu, Cantarell, Helvetica Neue, sans-serif; | |
font-size: 13px; | |
margin: 0 -14px; | |
padding: 8px 14px; | |
position: relative; | |
top: -14px; | |
z-index: 7; | |
} | |
.editor-block-list__layout | |
.editor-block-list__layout | |
.reusable-block-edit-panel { | |
margin: 0 -14px; | |
padding: 8px 14px; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.reusable-block-edit-panel__spinner { | |
margin: 0 5px; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.reusable-block-edit-panel__info { | |
margin-right: auto; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.reusable-block-edit-panel__label { | |
font-weight: 600; | |
margin-right: 8px; | |
white-space: nowrap; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.reusable-block-edit-panel__title { | |
flex: 1 1 100%; | |
font-size: 14px; | |
height: 30px; | |
margin: 4px 0 8px; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.components-button.reusable-block-edit-panel__button { | |
flex-shrink: 0; | |
} | |
@media (min-width: 960px) { | |
.editor-block-list__layout .reusable-block-edit-panel { | |
flex-wrap: nowrap; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.reusable-block-edit-panel__title { | |
margin: 0; | |
} | |
.editor-block-list__layout | |
.reusable-block-edit-panel | |
.components-button.reusable-block-edit-panel__button { | |
margin: 0 0 0 5px; | |
} | |
} | |
.editor-block-list__layout .reusable-block-indicator { | |
background: #fff; | |
border-bottom: 1px dashed #e2e4e7; | |
border-left: 1px dashed #e2e4e7; | |
color: #555d66; | |
height: 30px; | |
padding: 4px; | |
position: absolute; | |
right: -14px; | |
top: -14px; | |
width: 30px; | |
z-index: 1; | |
} | |
.wp-block-button { | |
margin-bottom: 1.5em; | |
} | |
.wp-block-button .wp-block-button__link { /*#### nesting necessary? ####*/ | |
border: none; | |
border-radius: 23px; | |
box-shadow: none; | |
cursor: pointer; | |
display: inline-block; | |
font-size: 18px; | |
line-height: 24px; | |
margin: 0; | |
padding: 11px 24px; | |
text-align: center; | |
text-decoration: none; | |
white-space: normal; | |
word-break: break-all; | |
} | |
.wp-block-button.is-style-squared .wp-block-button__link { /*#### .wp-block-button qualifier ####*/ | |
border-radius: 0; | |
} | |
.wp-block-button.aligncenter { | |
text-align: center; | |
} | |
.wp-block-button.alignright { | |
text-align: right; | |
} | |
.wp-block-button__link:not(.has-background), | |
.wp-block-button__link:not(.has-background):active, | |
.wp-block-button__link:not(.has-background):focus, | |
.wp-block-button__link:not(.has-background):hover { /*#### source order should already handle this without using `:not`. ####*/ | |
background-color: #32373c; | |
} | |
.wp-block-button.is-style-outline .wp-block-button__link { /*#### .wp-block-button qualifier ####*/ | |
background: transparent; | |
border: 2px solid currentcolor; | |
} | |
.wp-block-button.is-style-outline .wp-block-button__link:active, | |
.wp-block-button.is-style-outline .wp-block-button__link:focus, | |
.wp-block-button.is-style-outline .wp-block-button__link:hover { /*#### Already defined ####*/ | |
border-color: currentcolor; | |
} | |
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color), /*#### .wp-block-button qualifier ####*/ | |
.wp-block-button.is-style-outline | |
.wp-block-button__link:not(.has-text-color):active, | |
.wp-block-button.is-style-outline | |
.wp-block-button__link:not(.has-text-color):focus, | |
.wp-block-button.is-style-outline | |
.wp-block-button__link:not(.has-text-color):hover { /*#### source order should already handle this without using `:not`. ####*/ | |
color: #32373c; | |
} | |
.wp-block-button__link:not(.has-text-color), | |
.wp-block-button__link:not(.has-text-color):active, | |
.wp-block-button__link:not(.has-text-color):focus, | |
.wp-block-button__link:not(.has-text-color):hover { /*#### should be before .is-style-outline ####*/ | |
color: #fff; | |
} | |
.wp-block-categories.alignleft { | |
margin-right: 2em; | |
} | |
.wp-block-categories.alignright { | |
margin-left: 2em; | |
} | |
.wp-block-columns { | |
display: flex; | |
flex-wrap: wrap; | |
} | |
@media (min-width: 782px) { | |
.wp-block-columns { | |
flex-wrap: nowrap; | |
} | |
} | |
.wp-block-column { | |
flex: 1; | |
flex-basis: 100%; | |
margin-bottom: 1em; | |
} | |
@media (min-width: 600px) { | |
.wp-block-column { | |
flex-basis: 50%; | |
flex-grow: 0; | |
padding-left: 16px; | |
padding-right: 16px; | |
} | |
} | |
@media (min-width: 600px) { | |
.wp-block-column:nth-child(odd) { | |
padding-left: 0; | |
} | |
.wp-block-column:nth-child(2n) { | |
padding-right: 0; | |
} | |
} | |
@media (min-width: 782px) { | |
.wp-block-column:not(:first-child) { | |
padding-left: 16px; | |
} | |
.wp-block-column:not(:last-child) { | |
padding-right: 16px; | |
} | |
} | |
.wp-block-cover, | |
.wp-block-cover-image { | |
align-items: center; | |
background-color: #000; | |
background-position: 50%; | |
background-size: cover; | |
display: flex; | |
justify-content: center; | |
margin: 0 0 1.5em; | |
min-height: 430px; | |
position: relative; | |
width: 100%; | |
} | |
.wp-block-cover-image.has-left-content, | |
.wp-block-cover.has-left-content { | |
justify-content: flex-start; | |
} | |
.wp-block-cover-image.has-left-content .wp-block-cover-image-text, | |
.wp-block-cover-image.has-left-content .wp-block-cover-text, | |
.wp-block-cover-image.has-left-content h2, | |
.wp-block-cover.has-left-content .wp-block-cover-image-text, | |
.wp-block-cover.has-left-content .wp-block-cover-text, | |
.wp-block-cover.has-left-content h2 { /*#### .wp-block-cover qualifier ####*/ | |
margin-left: 0; | |
text-align: left; | |
} | |
.wp-block-cover-image.has-right-content, | |
.wp-block-cover.has-right-content { | |
justify-content: flex-end; | |
} | |
.wp-block-cover-image.has-right-content .wp-block-cover-image-text, | |
.wp-block-cover-image.has-right-content .wp-block-cover-text, | |
.wp-block-cover-image.has-right-content h2, | |
.wp-block-cover.has-right-content .wp-block-cover-image-text, | |
.wp-block-cover.has-right-content .wp-block-cover-text, | |
.wp-block-cover.has-right-content h2 { /*#### .wp-block-cover qualifier ####*/ | |
margin-right: 0; | |
text-align: right; | |
} | |
.wp-block-cover-image .wp-block-cover-image-text, | |
.wp-block-cover-image .wp-block-cover-text, | |
.wp-block-cover-image h2, | |
.wp-block-cover .wp-block-cover-image-text, | |
.wp-block-cover .wp-block-cover-text, | |
.wp-block-cover h2 { | |
color: #fff; | |
font-size: 2em; | |
line-height: 1.25; | |
margin-bottom: 0; | |
max-width: 610px; | |
padding: 14px; | |
text-align: center; | |
z-index: 1; | |
} | |
.wp-block-cover-image .wp-block-cover-image-text a, | |
.wp-block-cover-image .wp-block-cover-image-text a:active, | |
.wp-block-cover-image .wp-block-cover-image-text a:focus, | |
.wp-block-cover-image .wp-block-cover-image-text a:hover, | |
.wp-block-cover-image .wp-block-cover-text a, | |
.wp-block-cover-image .wp-block-cover-text a:active, | |
.wp-block-cover-image .wp-block-cover-text a:focus, | |
.wp-block-cover-image .wp-block-cover-text a:hover, | |
.wp-block-cover-image h2 a, | |
.wp-block-cover-image h2 a:active, | |
.wp-block-cover-image h2 a:focus, | |
.wp-block-cover-image h2 a:hover, | |
.wp-block-cover .wp-block-cover-image-text a, | |
.wp-block-cover .wp-block-cover-image-text a:active, | |
.wp-block-cover .wp-block-cover-image-text a:focus, | |
.wp-block-cover .wp-block-cover-image-text a:hover, | |
.wp-block-cover .wp-block-cover-text a, | |
.wp-block-cover .wp-block-cover-text a:active, | |
.wp-block-cover .wp-block-cover-text a:focus, | |
.wp-block-cover .wp-block-cover-text a:hover, | |
.wp-block-cover h2 a, | |
.wp-block-cover h2 a:active, | |
.wp-block-cover h2 a:focus, | |
.wp-block-cover h2 a:hover { /*#### pseudo states needed? ####*/ | |
color: #fff; | |
} | |
.wp-block-cover-image.has-parallax, | |
.wp-block-cover.has-parallax { | |
background-attachment: fixed; | |
} | |
@supports (-webkit-overflow-scrolling: touch) { | |
.wp-block-cover-image.has-parallax, | |
.wp-block-cover.has-parallax { | |
background-attachment: scroll; | |
} | |
} | |
.wp-block-cover-image.has-background-dim::before, | |
.wp-block-cover.has-background-dim::before { | |
background-color: inherit; | |
bottom: 0; | |
content: ""; | |
left: 0; | |
opacity: 0.5; | |
position: absolute; | |
right: 0; | |
top: 0; | |
z-index: 1; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-10::before, | |
.wp-block-cover.has-background-dim.has-background-dim-10::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.1; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-20::before, | |
.wp-block-cover.has-background-dim.has-background-dim-20::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.2; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-30::before, | |
.wp-block-cover.has-background-dim.has-background-dim-30::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.3; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-40::before, | |
.wp-block-cover.has-background-dim.has-background-dim-40::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.4; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-50::before, | |
.wp-block-cover.has-background-dim.has-background-dim-50::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.5; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-60::before, | |
.wp-block-cover.has-background-dim.has-background-dim-60::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.6; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-70::before, | |
.wp-block-cover.has-background-dim.has-background-dim-70::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.7; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-80::before, | |
.wp-block-cover.has-background-dim.has-background-dim-80::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.8; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-90::before, | |
.wp-block-cover.has-background-dim.has-background-dim-90::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 0.9; | |
} | |
.wp-block-cover-image.has-background-dim.has-background-dim-100::before, | |
.wp-block-cover.has-background-dim.has-background-dim-100::before { /*#### .has-background-dim qualifier ####*/ | |
opacity: 1; | |
} | |
.wp-block-cover-image.components-placeholder, | |
.wp-block-cover.components-placeholder { /*#### what? ####*/ | |
height: inherit; | |
} | |
.wp-block-cover-image.alignleft, | |
.wp-block-cover-image.alignright, | |
.wp-block-cover.alignleft, | |
.wp-block-cover.alignright, | |
[data-align="left"] .wp-block-cover, | |
[data-align="left"] .wp-block-cover-image, | |
[data-align="right"] .wp-block-cover, | |
[data-align="right"] .wp-block-cover-image { | |
max-width: 305px; | |
width: 100%; | |
} | |
.wp-block-cover__video-background { | |
-o-object-fit: fill; | |
height: 100%; | |
left: 50%; | |
object-fit: fill; | |
position: absolute; | |
top: 50%; | |
transform: translateX(-50%) translateY(-50%); | |
width: 100%; | |
z-index: 0; | |
} | |
.editor-block-list__block[data-type="core/embed"][data-align="left"] | |
.editor-block-list__block-edit, | |
.editor-block-list__block[data-type="core/embed"][data-align="right"] | |
.editor-block-list__block-edit, | |
.wp-block-embed.alignleft, | |
.wp-block-embed.alignright { | |
max-width: 360px; | |
width: 100%; | |
} | |
.wp-block-embed { | |
margin-bottom: 1em; | |
} | |
.wp-block-embed figcaption { | |
color: #555d66; | |
font-size: 13px; | |
margin-bottom: 1em; | |
margin-top: 0.5em; | |
text-align: center; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-1 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-2 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-4-3 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-9-16 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-16-9 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-18-9 | |
.wp-block-embed__wrapper, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-21-9 | |
.wp-block-embed__wrapper { /*#### .wp-block-embed.wp-embed-aspect-* qualifier ####*/ | |
position: relative; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-1 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-2 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-4-3 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-9-16 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-16-9 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-18-9 | |
.wp-block-embed__wrapper::before, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-21-9 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed.wp-embed-aspect-* qualifier ####*/ | |
content: ""; | |
display: block; | |
padding-top: 50%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-1 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-2 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-4-3 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-9-16 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-16-9 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-18-9 | |
.wp-block-embed__wrapper | |
iframe, | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-21-9 | |
.wp-block-embed__wrapper | |
iframe { /*#### .wp-block-embed.wp-embed-aspect-* qualifier ####*/ | |
bottom: 0; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
width: 100%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-21-9 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 42.85%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-18-9 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 50%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-16-9 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 56.25%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-4-3 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 75%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-1 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 100%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-9-6 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 66.66%; | |
} | |
.wp-embed-responsive | |
.wp-block-embed.wp-embed-aspect-1-2 | |
.wp-block-embed__wrapper::before { /*#### .wp-block-embed qualifier ####*/ | |
padding-top: 200%; | |
} | |
.wp-block-file { | |
margin-bottom: 1.5em; | |
} | |
.wp-block-file.aligncenter { | |
text-align: center; | |
} | |
.wp-block-file.alignright { | |
text-align: right; | |
} | |
.wp-block-file .wp-block-file__button { /*#### nesting necessary? ####*/ | |
background: #32373c; | |
border-radius: 2em; | |
color: #fff; | |
font-size: 13px; | |
padding: 0.5em 1em; | |
} | |
.wp-block-file a.wp-block-file__button { /*#### nesting necessary? ####*/ | |
text-decoration: none; | |
} | |
.wp-block-file a.wp-block-file__button:active, | |
.wp-block-file a.wp-block-file__button:focus, | |
.wp-block-file a.wp-block-file__button:hover, | |
.wp-block-file a.wp-block-file__button:visited { /*#### nesting necessary? visited? ####*/ | |
box-shadow: none; | |
color: #fff; | |
opacity: 0.85; | |
text-decoration: none; | |
} | |
.wp-block-file * + .wp-block-file__button { | |
margin-left: 0.75em; | |
} | |
.wp-block-gallery { | |
display: flex; | |
flex-wrap: wrap; | |
list-style-type: none; | |
padding: 0; | |
} | |
.wp-block-gallery .blocks-gallery-image, | |
.wp-block-gallery .blocks-gallery-item { /*#### nesting necessary? ####*/ | |
display: flex; | |
flex-direction: column; | |
flex-grow: 1; | |
justify-content: center; | |
margin: 0 16px 16px 0; | |
position: relative; | |
} | |
.wp-block-gallery .blocks-gallery-image figure, | |
.wp-block-gallery .blocks-gallery-item figure { /*#### nesting necessary? ####*/ | |
height: 100%; | |
margin: 0; | |
} | |
@supports ((position: -webkit-sticky) or (position: sticky)) { | |
.wp-block-gallery .blocks-gallery-image figure, | |
.wp-block-gallery .blocks-gallery-item figure { /*#### nesting necessary? ####*/ | |
align-items: flex-end; | |
display: flex; | |
justify-content: flex-start; | |
} | |
} | |
.wp-block-gallery .blocks-gallery-image img, | |
.wp-block-gallery .blocks-gallery-item img { /*#### nesting necessary? ####*/ | |
display: block; | |
height: auto; | |
max-width: 100%; | |
width: 100%; | |
} | |
@supports ((position: -webkit-sticky) or (position: sticky)) { | |
.wp-block-gallery .blocks-gallery-image img, | |
.wp-block-gallery .blocks-gallery-item img { /*#### nesting necessary? ####*/ | |
width: auto; | |
} | |
} | |
.wp-block-gallery .blocks-gallery-image figcaption, | |
.wp-block-gallery .blocks-gallery-item figcaption { /*#### nesting necessary? ####*/ | |
background: linear-gradient( | |
0deg, | |
rgba(0, 0, 0, 0.7), | |
rgba(0, 0, 0, 0.3) 60%, | |
transparent | |
); | |
bottom: 0; | |
color: #fff; | |
font-size: 13px; | |
max-height: 100%; | |
overflow: auto; | |
padding: 40px 10px 5px; | |
position: absolute; | |
text-align: center; | |
width: 100%; | |
} | |
.wp-block-gallery .blocks-gallery-image figcaption img, | |
.wp-block-gallery .blocks-gallery-item figcaption img { /*#### nesting necessary? ####*/ | |
display: inline; | |
} | |
.wp-block-gallery.is-cropped .blocks-gallery-image a, | |
.wp-block-gallery.is-cropped .blocks-gallery-image img, | |
.wp-block-gallery.is-cropped .blocks-gallery-item a, | |
.wp-block-gallery.is-cropped .blocks-gallery-item img { /*#### .wp-block-gallery qualifier ####*/ | |
width: 100%; | |
} | |
@supports ((position: -webkit-sticky) or (position: sticky)) { | |
.wp-block-gallery.is-cropped .blocks-gallery-image a, | |
.wp-block-gallery.is-cropped .blocks-gallery-image img, | |
.wp-block-gallery.is-cropped .blocks-gallery-item a, | |
.wp-block-gallery.is-cropped .blocks-gallery-item img { /*#### .wp-block-gallery qualifier ####*/ | |
-o-object-fit: cover; | |
flex: 1; | |
height: 100%; | |
object-fit: cover; | |
} | |
} | |
.wp-block-gallery .blocks-gallery-image, | |
.wp-block-gallery .blocks-gallery-item { /*#### nesting necessary? ####*/ | |
width: calc(50% - 8px); | |
} | |
.wp-block-gallery .blocks-gallery-image:nth-of-type(2n), | |
.wp-block-gallery .blocks-gallery-item:nth-of-type(2n) { /*#### nesting necessary? ####*/ | |
margin-right: 0; | |
} | |
.wp-block-gallery.columns-1 .blocks-gallery-image, | |
.wp-block-gallery.columns-1 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 0; | |
width: 100%; | |
} | |
@media (min-width: 600px) { | |
.wp-block-gallery.columns-3 .blocks-gallery-image, | |
.wp-block-gallery.columns-3 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(33.33333% - 10.66667px); | |
} | |
.wp-block-gallery.columns-4 .blocks-gallery-image, | |
.wp-block-gallery.columns-4 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(25% - 12px); | |
} | |
.wp-block-gallery.columns-5 .blocks-gallery-image, | |
.wp-block-gallery.columns-5 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(20% - 12.8px); | |
} | |
.wp-block-gallery.columns-6 .blocks-gallery-image, | |
.wp-block-gallery.columns-6 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(16.66667% - 13.33333px); | |
} | |
.wp-block-gallery.columns-7 .blocks-gallery-image, | |
.wp-block-gallery.columns-7 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(14.28571% - 13.71429px); | |
} | |
.wp-block-gallery.columns-8 .blocks-gallery-image, | |
.wp-block-gallery.columns-8 .blocks-gallery-item { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 16px; | |
width: calc(12.5% - 14px); | |
} | |
.wp-block-gallery.columns-1 .blocks-gallery-image:nth-of-type(1n), | |
.wp-block-gallery.columns-1 .blocks-gallery-item:nth-of-type(1n), | |
.wp-block-gallery.columns-2 .blocks-gallery-image:nth-of-type(2n), | |
.wp-block-gallery.columns-2 .blocks-gallery-item:nth-of-type(2n), | |
.wp-block-gallery.columns-3 .blocks-gallery-image:nth-of-type(3n), | |
.wp-block-gallery.columns-3 .blocks-gallery-item:nth-of-type(3n), | |
.wp-block-gallery.columns-4 .blocks-gallery-image:nth-of-type(4n), | |
.wp-block-gallery.columns-4 .blocks-gallery-item:nth-of-type(4n), | |
.wp-block-gallery.columns-5 .blocks-gallery-image:nth-of-type(5n), | |
.wp-block-gallery.columns-5 .blocks-gallery-item:nth-of-type(5n), | |
.wp-block-gallery.columns-6 .blocks-gallery-image:nth-of-type(6n), | |
.wp-block-gallery.columns-6 .blocks-gallery-item:nth-of-type(6n), | |
.wp-block-gallery.columns-7 .blocks-gallery-image:nth-of-type(7n), | |
.wp-block-gallery.columns-7 .blocks-gallery-item:nth-of-type(7n), | |
.wp-block-gallery.columns-8 .blocks-gallery-image:nth-of-type(8n), | |
.wp-block-gallery.columns-8 .blocks-gallery-item:nth-of-type(8n) { /*#### .wp-block-gallery qualifier ####*/ | |
margin-right: 0; | |
} | |
} | |
.is-selected .wp-block-gallery .blocks-gallery-image:nth-last-child(2), | |
.is-selected .wp-block-gallery .blocks-gallery-item:nth-last-child(2), | |
.is-typing .wp-block-gallery .blocks-gallery-image:nth-last-child(2), | |
.is-typing .wp-block-gallery .blocks-gallery-item:nth-last-child(2), | |
.wp-block-gallery .blocks-gallery-image:last-child, | |
.wp-block-gallery .blocks-gallery-item:last-child { /*#### nesting necessary? `is-selected`, `is-typeing` needed on the front-end? ####*/ | |
margin-right: 0; | |
} | |
.wp-block-gallery .blocks-gallery-item.has-add-item-button { /*#### nesting necessary? ####*/ | |
width: 100%; | |
} | |
.wp-block-gallery.alignleft, | |
.wp-block-gallery.alignright { | |
max-width: 305px; | |
width: 100%; | |
} | |
.wp-block-gallery.aligncenter, | |
.wp-block-gallery.alignleft, | |
.wp-block-gallery.alignright { | |
display: flex; | |
} | |
.wp-block-gallery.aligncenter .blocks-gallery-item figure { /*#### .wp-block-gallery qualifier ####*/ | |
justify-content: center; | |
} | |
.wp-block-image { | |
margin-bottom: 1em; | |
margin-left: 0; | |
margin-right: 0; | |
max-width: 100%; | |
} | |
.wp-block-image img { | |
max-width: 100%; | |
} | |
.wp-block-image.aligncenter { | |
text-align: center; | |
} | |
.wp-block-image.alignfull img, | |
.wp-block-image.alignwide img { | |
width: 100%; | |
} | |
.wp-block-image .aligncenter, | |
.wp-block-image .alignleft, | |
.wp-block-image .alignright, | |
.wp-block-image.is-resized { | |
display: table; | |
margin-left: 0; | |
margin-right: 0; | |
} | |
.wp-block-image .aligncenter > figcaption, | |
.wp-block-image .alignleft > figcaption, | |
.wp-block-image .alignright > figcaption, | |
.wp-block-image.is-resized > figcaption { /*#### So in other words `.wp-block-image figcaption`? ####*/ | |
caption-side: bottom; | |
display: table-caption; | |
} | |
.wp-block-image .alignleft { | |
float: left; | |
margin-right: 1em; | |
} | |
.wp-block-image .alignright { | |
float: right; | |
margin-left: 1em; | |
} | |
.wp-block-image .aligncenter { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.wp-block-image figcaption { | |
color: #555d66; | |
font-size: 13px; | |
margin-bottom: 1em; | |
margin-top: 0.5em; | |
text-align: center; | |
} | |
.wp-block-latest-comments__comment { | |
font-size: 15px; | |
line-height: 1.1; | |
list-style: none; | |
margin-bottom: 1em; | |
} | |
.has-avatars .wp-block-latest-comments__comment { | |
list-style: none; | |
min-height: 36px; | |
} | |
.has-avatars | |
.wp-block-latest-comments__comment | |
.wp-block-latest-comments__comment-excerpt, | |
.has-avatars | |
.wp-block-latest-comments__comment | |
.wp-block-latest-comments__comment-meta { /*#### .wp-block-latest-comments__comment necessary? ####*/ | |
margin-left: 52px; | |
} | |
.has-dates .wp-block-latest-comments__comment, | |
.has-excerpts .wp-block-latest-comments__comment { | |
line-height: 1.5; | |
} | |
.wp-block-latest-comments__comment-excerpt p { | |
font-size: 14px; | |
line-height: 1.8; | |
margin: 5px 0 20px; | |
} | |
.wp-block-latest-comments__comment-date { | |
color: #8f98a1; | |
display: block; | |
font-size: 12px; | |
} | |
.wp-block-latest-comments .avatar, | |
.wp-block-latest-comments__comment-avatar { | |
border-radius: 24px; | |
display: block; | |
float: left; | |
height: 40px; | |
margin-right: 12px; | |
width: 40px; | |
} | |
.wp-block-latest-posts.alignleft { | |
margin-right: 2em; | |
} | |
.wp-block-latest-posts.alignright { | |
margin-left: 2em; | |
} | |
.wp-block-latest-posts.is-grid { | |
display: flex; | |
flex-wrap: wrap; | |
list-style: none; | |
padding: 0; | |
} | |
.wp-block-latest-posts.is-grid li { | |
margin: 0 16px 16px 0; | |
width: 100%; | |
} | |
@media (min-width: 600px) { | |
.wp-block-latest-posts.columns-2 li { | |
width: calc(50% - 16px); | |
} | |
.wp-block-latest-posts.columns-3 li { | |
width: calc(33.33333% - 16px); | |
} | |
.wp-block-latest-posts.columns-4 li { | |
width: calc(25% - 16px); | |
} | |
.wp-block-latest-posts.columns-5 li { | |
width: calc(20% - 16px); | |
} | |
.wp-block-latest-posts.columns-6 li { | |
width: calc(16.66667% - 16px); | |
} | |
} | |
.wp-block-latest-posts__post-date { | |
color: #6c7781; | |
display: block; | |
font-size: 13px; | |
} | |
.wp-block-media-text { | |
align-items: center; | |
display: grid; | |
grid-template-areas: "media-text-media media-text-content"; | |
grid-template-columns: 50% auto; | |
grid-template-rows: auto; | |
} | |
.wp-block-media-text.has-media-on-the-right { /*#### .wp-block-media-text qualifier ####*/ | |
grid-template-areas: "media-text-content media-text-media"; | |
grid-template-columns: auto 50%; | |
} | |
.wp-block-media-text .wp-block-media-text__media { /*#### nesting necessary? ####*/ | |
grid-area: media-text-media; | |
margin: 0; | |
} | |
.wp-block-media-text .wp-block-media-text__content { /*#### nesting necessary? ####*/ | |
grid-area: media-text-content; | |
padding: 0 8%; | |
word-break: break-word; | |
} | |
.wp-block-media-text > figure > img, | |
.wp-block-media-text > figure > video { | |
max-width: unset; | |
vertical-align: middle; | |
width: 100%; | |
} | |
@media (max-width: 600px) { | |
.wp-block-media-text.is-stacked-on-mobile { | |
grid-template-areas: "media-text-media" "media-text-content"; | |
grid-template-columns: 100% !important; | |
} | |
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right { /*#### qualifier ####*/ | |
grid-template-areas: "media-text-content" "media-text-media"; | |
} | |
} | |
p.is-small-text { /*#### qualifier ####*/ | |
font-size: 14px; | |
} | |
p.is-regular-text { /*#### qualifier ####*/ | |
font-size: 16px; | |
} | |
p.is-large-text { /*#### qualifier ####*/ | |
font-size: 36px; | |
} | |
p.is-larger-text { /*#### qualifier ####*/ | |
font-size: 48px; | |
} | |
p.has-drop-cap:not(:focus)::first-letter { /*#### remove `not`. Reset :focus styles after. ####*/ | |
float: left; | |
font-size: 8.4em; | |
font-style: normal; | |
font-weight: 100; | |
line-height: 0.68; | |
margin: 0.05em 0.1em 0 0; | |
text-transform: uppercase; | |
} | |
p.has-background { | |
padding: 20px 30px; | |
} | |
p.has-text-color a { /*#### qualifier. `p` specific? ####*/ | |
color: inherit; | |
} | |
.wp-block-pullquote { | |
margin-left: 0; | |
margin-right: 0; | |
padding: 3em 0; | |
text-align: center; | |
} | |
.wp-block-pullquote.alignleft, | |
.wp-block-pullquote.alignright { | |
max-width: 305px; | |
} | |
.wp-block-pullquote.alignleft p, | |
.wp-block-pullquote.alignright p { | |
font-size: 20px; | |
} | |
.wp-block-pullquote p { | |
font-size: 28px; | |
line-height: 1.6; | |
} | |
.wp-block-pullquote cite, | |
.wp-block-pullquote footer { | |
position: relative; | |
} | |
.wp-block-pullquote .has-text-color a { /*#### nesting necessary? Pullquote specific? ####*/ | |
color: inherit; | |
} | |
.wp-block-pullquote:not(.is-style-solid-color) { /*#### Why would this ever get a background? ####*/ | |
background: none; | |
} | |
.wp-block-pullquote.is-style-solid-color { | |
border: none; | |
} | |
.wp-block-pullquote.is-style-solid-color blockquote { /*#### .wp-block-pullquote qualifier ####*/ | |
margin-left: auto; | |
margin-right: auto; | |
max-width: 60%; | |
text-align: left; | |
} | |
.wp-block-pullquote.is-style-solid-color blockquote p { /*#### .wp-block-pullquote qualifier ####*/ | |
font-size: 32px; | |
margin-bottom: 0; | |
margin-top: 0; | |
} | |
.wp-block-pullquote.is-style-solid-color blockquote cite { /*#### .wp-block-pullquote qualifier ####*/ | |
font-style: normal; | |
text-transform: none; | |
} | |
.wp-block-pullquote cite { | |
color: inherit; | |
} | |
.wp-block-quote.is-large, | |
.wp-block-quote.is-style-large { | |
margin: 0 0 16px; | |
padding: 0 1em; | |
} | |
.wp-block-quote.is-large p, | |
.wp-block-quote.is-style-large p { | |
font-size: 24px; | |
font-style: italic; | |
line-height: 1.6; | |
} | |
.wp-block-quote.is-large cite, | |
.wp-block-quote.is-large footer, | |
.wp-block-quote.is-style-large cite, | |
.wp-block-quote.is-style-large footer { | |
font-size: 18px; | |
text-align: right; | |
} | |
.wp-block-separator.is-style-wide { /*#### .wp-block-separator qualifier. If needed how about using `hr` instead ####*/ | |
border-bottom-width: 1px; | |
} | |
.wp-block-separator.is-style-dots { /*#### .wp-block-separator qualifier. If needed how about using `hr` instead ####*/ | |
background: none; | |
border: none; | |
height: auto; | |
line-height: 1; | |
max-width: none; | |
text-align: center; | |
} | |
.wp-block-separator.is-style-dots::before { /*#### qualifier. If needed how about using `hr` instead ####*/ | |
color: #191e23; | |
content: "\00b7 \00b7 \00b7"; | |
font-family: serif; | |
font-size: 20px; | |
letter-spacing: 2em; | |
padding-left: 2em; | |
} | |
p.wp-block-subhead { /*#### qualifier ####*/ | |
font-size: 1.1em; | |
font-style: italic; | |
opacity: 0.75; | |
} | |
.wp-block-table.has-fixed-layout { /*#### .wp-block-table qualifier. Use `table` if needed? ####*/ | |
table-layout: fixed; | |
width: 100%; | |
} | |
.wp-block-table.aligncenter, | |
.wp-block-table.alignleft, | |
.wp-block-table.alignright { /*#### Can't these styles just be on `.wp-block-table` without alignment qualifiers? ####*/ | |
display: table; | |
width: auto; | |
} | |
.wp-block-table.is-style-stripes { /*#### qualifier. Use `table` if needed? ####*/ | |
border-bottom: 1px solid #f3f4f5; | |
border-collapse: inherit; | |
border-spacing: 0; | |
} | |
.wp-block-table.is-style-stripes tr:nth-child(odd) { /*#### qualifier. Use `table` if needed? ####*/ | |
background-color: #f3f4f5; | |
} | |
.wp-block-table.is-style-stripes td { /*#### qualifier. Use `table` if needed? ####*/ | |
border-color: transparent; | |
} | |
.wp-block-text-columns, | |
.wp-block-text-columns.aligncenter { | |
display: flex; | |
} | |
.wp-block-text-columns .wp-block-column { | |
margin: 0 16px; | |
padding: 0; | |
} | |
.wp-block-text-columns .wp-block-column:first-child { /*#### nesting necessary? ####*/ | |
margin-left: 0; | |
} | |
.wp-block-text-columns .wp-block-column:last-child { /*#### nesting necessary? ####*/ | |
margin-right: 0; | |
} | |
.wp-block-text-columns.columns-2 .wp-block-column { /*#### .wp-block-text-columns qualifier ####*/ | |
width: 50%; | |
} | |
.wp-block-text-columns.columns-3 .wp-block-column { /*#### .wp-block-text-columns qualifier ####*/ | |
width: 33.33333%; | |
} | |
.wp-block-text-columns.columns-4 .wp-block-column { /*#### .wp-block-text-columns qualifier ####*/ | |
width: 25%; | |
} | |
pre.wp-block-verse { /*#### pre qualifier ####*/ | |
overflow: auto; | |
white-space: nowrap; | |
} | |
.wp-block-video { | |
margin-left: 0; | |
margin-right: 0; | |
} | |
.wp-block-video video { | |
max-width: 100%; | |
} | |
@supports ((position: -webkit-sticky) or (position: sticky)) { | |
.wp-block-video [poster] { | |
-o-object-fit: cover; | |
object-fit: cover; | |
} | |
} | |
.wp-block-video.aligncenter { | |
text-align: center; | |
} | |
.wp-block-video figcaption { | |
color: #555d66; | |
font-size: 13px; | |
margin-bottom: 1em; | |
margin-top: 0.5em; | |
text-align: center; | |
} | |
.has-pale-pink-background-color { | |
background-color: #f78da7; | |
} | |
.has-vivid-red-background-color { | |
background-color: #cf2e2e; | |
} | |
.has-luminous-vivid-orange-background-color { | |
background-color: #ff6900; | |
} | |
.has-luminous-vivid-amber-background-color { | |
background-color: #fcb900; | |
} | |
.has-light-green-cyan-background-color { | |
background-color: #7bdcb5; | |
} | |
.has-vivid-green-cyan-background-color { | |
background-color: #00d084; | |
} | |
.has-pale-cyan-blue-background-color { | |
background-color: #8ed1fc; | |
} | |
.has-vivid-cyan-blue-background-color { | |
background-color: #0693e3; | |
} | |
.has-very-light-gray-background-color { | |
background-color: #eee; | |
} | |
.has-cyan-bluish-gray-background-color { | |
background-color: #abb8c3; | |
} | |
.has-very-dark-gray-background-color { | |
background-color: #313131; | |
} | |
.has-pale-pink-color { | |
color: #f78da7; | |
} | |
.has-vivid-red-color { | |
color: #cf2e2e; | |
} | |
.has-luminous-vivid-orange-color { | |
color: #ff6900; | |
} | |
.has-luminous-vivid-amber-color { | |
color: #fcb900; | |
} | |
.has-light-green-cyan-color { | |
color: #7bdcb5; | |
} | |
.has-vivid-green-cyan-color { | |
color: #00d084; | |
} | |
.has-pale-cyan-blue-color { | |
color: #8ed1fc; | |
} | |
.has-vivid-cyan-blue-color { | |
color: #0693e3; | |
} | |
.has-very-light-gray-color { | |
color: #eee; | |
} | |
.has-cyan-bluish-gray-color { | |
color: #abb8c3; | |
} | |
.has-very-dark-gray-color { | |
color: #313131; | |
} | |
.has-small-font-size { | |
font-size: 13px; | |
} | |
.has-normal-font-size, | |
.has-regular-font-size { | |
font-size: 16px; | |
} | |
.has-medium-font-size { | |
font-size: 20px; | |
} | |
.has-large-font-size { | |
font-size: 36px; | |
} | |
.has-huge-font-size, | |
.has-larger-font-size { | |
font-size: 42px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment