Last active
April 7, 2020 20:28
-
-
Save misfist/9090d811bacef97f6cee6a3db0e4b69b to your computer and use it in GitHub Desktop.
Gutenberg Base Styles
This file contains hidden or 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
| /** | |
| * Starter styling for core blocks | |
| * @see https://wordpress.org/support/article/blocks/ | |
| */ | |
| //colors | |
| $color__primary: #0073aa; | |
| //... | |
| $size__site-small-content: 580px; | |
| $size__site-medium-content: 1140px; | |
| $size__site-large-content: $size__site-small-content; | |
| /*-------------------------------------------------------------- | |
| ## General Structure | |
| --------------------------------------------------------------*/ | |
| .site-main .entry-content { | |
| > * { | |
| margin: 36px auto; | |
| max-width: $size__site-small-content; | |
| padding-left: 14px; | |
| padding-right: 14px; | |
| } | |
| > { | |
| .alignwide { | |
| max-width: $size__site-large-content; | |
| } | |
| .alignfull { | |
| margin: 1.5em 0; | |
| max-width: 100%; | |
| } | |
| } | |
| ul { | |
| margin: 1.5em auto; | |
| max-width: $size__site-small-content; | |
| list-style-position: outside; | |
| ul { | |
| margin: 0 auto; | |
| li { | |
| margin-left: 0; | |
| } | |
| } | |
| ol { | |
| margin: 0 auto; | |
| li { | |
| margin-left: 0; | |
| } | |
| } | |
| } | |
| ol { | |
| margin: 1.5em auto; | |
| max-width: $size__site-small-content; | |
| list-style-position: outside; | |
| ol { | |
| margin: 0 auto; | |
| li { | |
| margin-left: 0; | |
| } | |
| } | |
| ul { | |
| margin: 0 auto; | |
| li { | |
| margin-left: 0; | |
| } | |
| } | |
| } | |
| li { | |
| margin-left: 2.5em; | |
| } | |
| } | |
| @include breakpoint( medium ) { | |
| .site-main .entry-content > * { | |
| padding-left: 0; | |
| padding-right: 0; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Group | |
| core/group | |
| --------------------------------------------------------------*/ | |
| .wp-block-group { | |
| > .wp-block-group__inner-container { | |
| > * { | |
| max-width: $size__site-small-content; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| > { | |
| .alignwide { | |
| max-width: $size__site-large-content; | |
| } | |
| .alignfull { | |
| max-width: 100%; | |
| } | |
| } | |
| } | |
| &.has-background > .wp-block-group__inner-container > { | |
| :first-child { | |
| margin-top: 0; | |
| } | |
| .alignfull { | |
| width: calc(100% + 60px ); | |
| max-width: calc(100% + 60px ); | |
| position: relative; | |
| left: -30px; | |
| } | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Columns | |
| core/columns | |
| --------------------------------------------------------------*/ | |
| .wp-block-columns { | |
| .wp-block-column {} | |
| } | |
| @include breakpoint( medium ) { | |
| .wp-block-columns { | |
| .wp-block-column {} | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Cover | |
| core/cover | |
| --------------------------------------------------------------*/ | |
| .wp-block-cover-text p { | |
| padding: 1.5em 14px; | |
| } | |
| @include breakpoint( medium ) { | |
| .wp-block-cover-text p { | |
| padding: 1.5em 0; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| # Gallery | |
| core/gallery | |
| --------------------------------------------------------------*/ | |
| .wp-block-gallery:not(.components-placeholder) { | |
| margin: 1.5em auto; | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Embeds | |
| core/embed | |
| --------------------------------------------------------------*/ | |
| .wp-block-embed { | |
| &.type-video { | |
| > .wp-block-embed__wrapper { | |
| position: relative; | |
| width: 100%; | |
| height: 0; | |
| padding-top: 56.25%; | |
| > iframe { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| } | |
| } | |
| } | |
| } | |
| .wp-block-video video { | |
| max-width: $size__site-small-content; | |
| } | |
| /*-------------------------------------------------------------- | |
| # Image | |
| core/image | |
| --------------------------------------------------------------*/ | |
| .wp-block-image { | |
| img { | |
| display: block; | |
| } | |
| &.alignleft { | |
| width: 100%; | |
| } | |
| &.alignright { | |
| width: 100%; | |
| } | |
| .alignleft { | |
| img { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| figcaption { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| .alignright { | |
| img { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| figcaption { | |
| max-width: 100%; | |
| width: 100%; | |
| } | |
| } | |
| &.alignfull img { | |
| width: 100vw; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| # Quote | |
| core/quote | |
| --------------------------------------------------------------*/ | |
| .wp-block-quote { | |
| margin-left: 14px; | |
| margin-right: 14px; | |
| padding: 0; | |
| > * { | |
| margin-left: 1rem; | |
| } | |
| &.is-large { | |
| margin: 36px auto; | |
| padding: 0; | |
| cite { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| } | |
| footer { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| } | |
| } | |
| &.is-style-large { | |
| margin: 36px auto; | |
| padding: 0; | |
| cite { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| } | |
| footer { | |
| font-size: 13px; | |
| font-size: 0.8125rem; | |
| } | |
| } | |
| } | |
| @include breakpoint( medium ) { | |
| .wp-block-quote { | |
| margin: 36px auto; | |
| } | |
| } | |
| .wp-block-pullquote > p:first-child { | |
| margin-top: 0; | |
| } | |
| /*-------------------------------------------------------------- | |
| # Table | |
| core/table | |
| --------------------------------------------------------------*/ | |
| .wp-block-table { | |
| overflow-x: auto; | |
| margin-left: 14px; | |
| margin-right: 14px; | |
| width: calc(100% - 28px ); | |
| table { | |
| border-collapse: collapse; | |
| width: 100%; | |
| } | |
| td { | |
| padding: .5em; | |
| } | |
| th { | |
| padding: .5em; | |
| } | |
| } | |
| @include breakpoint( medium ) { | |
| .wp-block-table { | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 100%; | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| # Social Links | |
| core/social-links | |
| --------------------------------------------------------------*/ | |
| .wp-block-social-links { | |
| &.is-style-logos-only {} | |
| .wp-social-link { | |
| &.wp-social-link-facebook {} | |
| &.wp-social-link-twitter {} | |
| &.wp-social-link-linkedin {} | |
| &.wp-social-link-vimeo {} | |
| &.wp-social-link-youtube {} | |
| &.wp-social-link-instagram {} | |
| &.wp-social-link-mail {} | |
| } | |
| } | |
| /*-------------------------------------------------------------- | |
| # Separator | |
| core/separator | |
| --------------------------------------------------------------*/ | |
| .wp-block-separator { | |
| margin: 3em auto; | |
| padding: 0; | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Colors | |
| .has-{color}-background-color | |
| .has-{color}-color | |
| @see file ./citris/inc/gutenberg.php | |
| --------------------------------------------------------------*/ | |
| .has-background {} | |
| .has-primary-background-color { | |
| background-color: $color__primary; | |
| } | |
| .has-secondary-background-color { | |
| background-color: $color__secondary; | |
| } | |
| .has-accent-background-color { | |
| background-color: $color__accent; | |
| } | |
| .has-light-blue-background-color { | |
| background-color: $color__light-blue; | |
| } | |
| .has-dark-gray-background-color { | |
| background-color: $color__dark-gray; | |
| } | |
| .has-light-gray-background-color { | |
| background-color: $color__light-gray; | |
| } | |
| .has-text-color {} | |
| .has-primary-color { | |
| color: $color__primary; | |
| } | |
| .has-secondary-color { | |
| color: $color__secondary; | |
| } | |
| .has-accent-color { | |
| color: $color__accent; | |
| } | |
| .has-light-blue-color { | |
| color: $color__light-blue; | |
| } | |
| .has-dark-gray-color { | |
| color: $color__dark-gray; | |
| } | |
| .has-light-gray-color { | |
| color: $color__light-gray; | |
| } | |
| ul.wp-block-latest-posts { | |
| &.alignwide { | |
| padding: 0 14px; | |
| } | |
| &.alignfull { | |
| padding: 0 14px; | |
| } | |
| &.is-grid.alignwide { | |
| padding: 0 14px; | |
| padding: 0 14px; | |
| } | |
| } | |
| .more-link { | |
| display: block; | |
| } | |
| /*-------------------------------------------------------------- | |
| ## Code | |
| --------------------------------------------------------------*/ | |
| .wp-block-code { | |
| padding: 0.8em 1em; | |
| margin-left: 14px; | |
| margin-right: 14px; | |
| } | |
| @include breakpoint( medium ) { | |
| .wp-block-code { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment