Last active
September 3, 2018 15:11
-
-
Save graylaurenm/f676189d0345f534fe9c2e12bfc24bc5 to your computer and use it in GitHub Desktop.
Gutenberg
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
| /* Support column layouts. */ | |
| .wp-block-columns .wp-block-column { | |
| margin-left: 12px; | |
| } | |
| .has-2-columns .wp-block-column:nth-of-type(2n+1), | |
| .has-3-columns .wp-block-column:nth-of-type(3n+1), | |
| .has-4-columns .wp-block-column:nth-of-type(4n+1), | |
| .has-5-columns .wp-block-column:nth-of-type(5n+1), | |
| .has-6-columns .wp-block-column:nth-of-type(6n+1) { | |
| margin-left: 0; | |
| } | |
| .wp-block-column > p:first-of-type { | |
| margin-top: 0; | |
| } | |
| .wp-block-column > p:last-of-type { | |
| margin-bottom: 0; | |
| } |
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
| /* Style code blocks to look like boring ol' code. */ | |
| .wp-block-code code { | |
| display: block; | |
| padding: 4px 8px; | |
| background: #000; | |
| color: #fff; | |
| } |
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
| /* Force most embeds to display centered. */ | |
| .wp-block-embed { | |
| text-align: center; | |
| } | |
| /* Force Facebook embeds to display centered. */ | |
| .fb_iframe_widget { | |
| display: block; | |
| text-align: center; | |
| } | |
| /* Force Instagram embeds to display centered. */ | |
| .instagram-media { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| /* Force Twitter embeds to display centered. */ | |
| .twitter-tweet { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
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
| /* Force audio players to display at the full width of the content area. */ | |
| audio { | |
| width: 100%; | |
| } | |
| /* Force videos to display at the full width of the content area. */ | |
| .wp-block-video video { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* Force image embeds to display at the full width of the content area. */ | |
| .wp-block-embed img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* Force Facebook embeds to display at the full width of the content area. */ | |
| .fb_iframe_widget > span, | |
| .fb_iframe_widget > span > iframe { | |
| width: 100% !important; | |
| } | |
| /* Force Instagram & Reddit embeds to display at the full width of the content area. */ | |
| .instagram-media, | |
| .embedly-card-hug { | |
| max-width: 100% !important; | |
| } | |
| /* Force Reddit embeds to display at the full width of the content area. */ | |
| .embedly-card-hug { | |
| max-width: 100% !important; | |
| } | |
| .embedly-card-hug > iframe { | |
| width: 100%; | |
| } | |
| /* Force SoundCloud embeds to display at the full width of the content area. */ | |
| .wp-block-embed-soundcloud iframe { | |
| width: 100%; | |
| } | |
| /* Force Spotify embeds to display at the full width of the content area. */ | |
| .wp-block-embed-spotify iframe { | |
| width: 100%; | |
| } | |
| /* Force URL embeds to display at the full width of the content area. */ | |
| .wp-embedded-content { | |
| width: 100%; | |
| } | |
| /* Force YouTube embeds to display at the full width of the content area. */ | |
| .wp-block-embed-youtube > iframe { | |
| width: 100%; | |
| } |
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
| /* Remove webkit margins so images display at full width. */ | |
| figure { | |
| margin: 0; | |
| } |
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
| /* Force audio players to display at the full width of the content area. */ | |
| audio { | |
| width: 100%; | |
| } | |
| /* Increase button color specificity so links remain the default color: white. */ | |
| .wp-block-file a.wp-block-file__button { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| /* Remove webkit margins so images display at full width. */ | |
| figure { | |
| margin: 0; | |
| } | |
| /* Remove spacing in nested lists. */ | |
| ul ul, | |
| ul ol, | |
| ol ol, | |
| ol ul { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } | |
| /* Force videos to display at the full width of the content area. */ | |
| .wp-block-video video { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* Force most embeds to display centered. */ | |
| .wp-block-embed { | |
| text-align: center; | |
| } | |
| /* Force Facebook embeds to display centered. */ | |
| .fb_iframe_widget { | |
| display: block; | |
| text-align: center; | |
| } | |
| /* Force Instagram embeds to display centered. */ | |
| .instagram-media { | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| /* Force Twitter embeds to display centered. */ | |
| .twitter-tweet { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Force image embeds to display at the full width of the content area. */ | |
| .wp-block-embed img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| /* Force Facebook embeds to display at the full width of the content area. */ | |
| .fb_iframe_widget > span, | |
| .fb_iframe_widget > span > iframe { | |
| width: 100% !important; | |
| } | |
| /* Force Instagram & Reddit embeds to display at the full width of the content area. */ | |
| .instagram-media, | |
| .embedly-card-hug { | |
| max-width: 100% !important; | |
| } | |
| /* Force Reddit embeds to display at the full width of the content area. */ | |
| .embedly-card-hug { | |
| max-width: 100% !important; | |
| } | |
| .embedly-card-hug > iframe { | |
| width: 100%; | |
| } | |
| /* Force SoundCloud embeds to display at the full width of the content area. */ | |
| .wp-block-embed-soundcloud iframe { | |
| width: 100%; | |
| } | |
| /* Force Spotify embeds to display at the full width of the content area. */ | |
| .wp-block-embed-spotify iframe { | |
| width: 100%; | |
| } | |
| /* Force URL embeds to display at the full width of the content area. */ | |
| .wp-embedded-content { | |
| width: 100%; | |
| } | |
| /* Force YouTube embeds to display at the full width of the content area. */ | |
| .wp-block-embed-youtube > iframe { | |
| width: 100%; | |
| } | |
| /* Style code blocks to look like boring ol' code. */ | |
| .wp-block-code code { | |
| display: block; | |
| padding: 4px 8px; | |
| background: #000; | |
| color: #fff; | |
| } | |
| /* Style preformatted code (and therefore also code blocks and verses) with typewriter-like text. */ | |
| pre { | |
| font-family: monospace; | |
| } | |
| /* Style preformatted code (and therefore also code blocks and verses) with a text-wrap. */ | |
| pre { | |
| white-space: pre-wrap; | |
| } | |
| /* Add white space to cluttered tables. */ | |
| td { | |
| padding: 4px 8px; | |
| } | |
| /* Ditch common <pre> styles for verses (which are wrapped in <pre> tags). */ | |
| .wp-block-verse { | |
| font-family: inherit; | |
| background: inherit; | |
| color: inherit; | |
| padding: 0; | |
| } | |
| /* Add hover effect to buttons. */ | |
| .wp-block-button a:hover { | |
| box-shadow: 0 2px 2px #ccc; | |
| transition: 400ms; | |
| } | |
| /* Support column layouts. */ | |
| .wp-block-columns .wp-block-column { | |
| margin-left: 12px; | |
| } | |
| .has-2-columns .wp-block-column:nth-of-type(2n+1), | |
| .has-3-columns .wp-block-column:nth-of-type(3n+1), | |
| .has-4-columns .wp-block-column:nth-of-type(4n+1), | |
| .has-5-columns .wp-block-column:nth-of-type(5n+1), | |
| .has-6-columns .wp-block-column:nth-of-type(6n+1) { | |
| margin-left: 0; | |
| } | |
| .wp-block-column > p:first-of-type { | |
| margin-top: 0; | |
| } | |
| .wp-block-column > p:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| /* Add style for short line hr. */ | |
| .wp-block-separator:not(.is-style-wide) { | |
| width: 40%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| /* Remove spacing between items when category lists have hierarchy. */ | |
| .wp-block-categories .children { | |
| margin-top: 0; | |
| } |
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
| /* Remove spacing in nested lists. */ | |
| ul ul, | |
| ul ol, | |
| ol ol, | |
| ol ul { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; | |
| } |
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
| /* Style preformatted code (and therefore also code blocks and verses) with typewriter-like text. */ | |
| pre { | |
| font-family: monospace; | |
| } |
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
| /* Style preformatted code (and therefore also code blocks and verses) with a text-wrap. */ | |
| pre { | |
| white-space: pre-wrap; | |
| } |
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
| /* Add style for short line hr. */ | |
| .wp-block-separator:not(.is-style-wide) { | |
| width: 40%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } |
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
| /* Add white space to cluttered tables. */ | |
| td { | |
| padding: 4px 8px; | |
| } |
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
| /* Ditch common <pre> styles for verses (which are wrapped in <pre> tags). */ | |
| .wp-block-verse { | |
| font-family: inherit; | |
| background: inherit; | |
| color: inherit; | |
| padding: 0; | |
| } |
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
| /* Remove spacing between items when category lists have hierarchy. */ | |
| .wp-block-categories .children { | |
| margin-top: 0; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment