Skip to content

Instantly share code, notes, and snippets.

@m-e-h
Created November 12, 2018 20:05
Show Gist options
  • Save m-e-h/2e3ab2ee68825bd2728edd52be96be95 to your computer and use it in GitHub Desktop.
Save m-e-h/2e3ab2ee68825bd2728edd52be96be95 to your computer and use it in GitHub Desktop.
Gutenberg front-end stylesheet speceficity audit
@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