Add block.css - Gutenberg specific stylesheet.
This commit is contained in:
alaczek
parent
8e08f5801b
commit
c06c03168d
2 changed files with 310 additions and 0 deletions
308
radcliffe-2/assets/css/blocks.css
Normal file
308
radcliffe-2/assets/css/blocks.css
Normal file
|
|
@ -0,0 +1,308 @@
|
|||
/*--------------------------------------------------------------
|
||||
## Gutenberg Styles
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
#page {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
*[class^="wp-block-"] {
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
.alignfull,
|
||||
.alignwide,
|
||||
.aligncenter {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.alignfull {
|
||||
margin-left: -4%;
|
||||
margin-right: -4%;
|
||||
max-width: 110%;
|
||||
}
|
||||
|
||||
/* Text-based blocks with alignfull */
|
||||
.wp-block-text-columns.alignfull,
|
||||
.wp-block-preformatted.alignfull,
|
||||
.wp-block-button.alignfull,
|
||||
.wp-block-pullquote.alignfull,
|
||||
.wp-block-latest-posts.alignfull,
|
||||
.wp-block-categories.alignfull,
|
||||
.wp-block-verse.alignfull,
|
||||
p.alignfull {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
.alignfull {
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
width: auto;
|
||||
max-width: 1000%;
|
||||
}
|
||||
|
||||
.alignwide {
|
||||
margin-left: calc(25% - 25vw);
|
||||
margin-right: calc(25% - 25vw);
|
||||
width: auto;
|
||||
max-width: 1000%;
|
||||
}
|
||||
|
||||
/* Let's reduce this a bit for blocks with text */
|
||||
.wp-block-text-columns.alignfull,
|
||||
.wp-block-table.alignfull,
|
||||
.wp-block-preformatted.alignfull,
|
||||
.wp-block-button.alignfull,
|
||||
.wp-block-pullquote.alignfull,
|
||||
.wp-block-latest-posts.alignfull,
|
||||
.wp-block-categories.alignfull,
|
||||
.wp-block-verse.alignfull,
|
||||
p.alignfull {
|
||||
margin-left: calc(50% - 48vw);
|
||||
margin-right: calc(50% - 48vw);
|
||||
}
|
||||
|
||||
.wp-block-text-columns.alignwide,
|
||||
.wp-block-table.alignwide,
|
||||
.wp-block-preformatted.alignwide,
|
||||
.wp-block-button.alignwide,
|
||||
.wp-block-pullquote.alignwide,
|
||||
.wp-block-latest-posts.alignwide,
|
||||
.wp-block-categories.alignwide,
|
||||
p.alignwide {
|
||||
margin-left: calc(25% - 23vw);
|
||||
margin-right: calc(25% - 23vw);
|
||||
}
|
||||
}
|
||||
|
||||
.alignfull > *,
|
||||
.alignwide > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.alignfull img,
|
||||
.alignwide img,
|
||||
.alignfull iframe,
|
||||
.alignwide iframe,
|
||||
.alignfull video,
|
||||
.alignwide video {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alignfull .jetpack-video-wrapper iframe,
|
||||
.alignwide .jetpack-video-wrapper iframe {
|
||||
margin-left: auto !important; /* to override inline styles */
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
/* Dropcaps */
|
||||
.has-drop-cap {}
|
||||
|
||||
/* Images */
|
||||
.wp-block-image {
|
||||
display: inline-block; /* helps with smaller, unaligned images */
|
||||
}
|
||||
.wp-block-image.alignwide {}
|
||||
.wp-block-image.alignfull {}
|
||||
|
||||
.wp-block-image figcaption {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Galleries */
|
||||
ul.wp-block-gallery,
|
||||
ul.wp-block-gallery li {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Blockquotes*/
|
||||
.wp-block-quote {}
|
||||
|
||||
.wp-block-quote.blocks-quote-style-1 {}
|
||||
.wp-block-quote.blocks-quote-style-2 {}
|
||||
.wp-block-quote cite {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Cover Images */
|
||||
@media (min-width: 750px) {
|
||||
.wp-block-cover-image {
|
||||
left: 50%;
|
||||
margin-left: -50vw;
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-cover-image {
|
||||
height: 75vh;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.wp-block-cover-image.has-background-dim {}
|
||||
.wp-block-cover-image.has-parallax {}
|
||||
|
||||
/* Video */
|
||||
.wp-block-video {}
|
||||
|
||||
.wp-block-video video,
|
||||
.wp-block-video iframe {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Audio */
|
||||
.wp-block-audio {}
|
||||
|
||||
/* Embed */
|
||||
.wp-block-embed {}
|
||||
|
||||
/* Pullquotes */
|
||||
.wp-block-pullquote {
|
||||
border: none;
|
||||
color: #666;
|
||||
padding: 1.5em 0.75em;
|
||||
}
|
||||
|
||||
.wp-block-pullquote cite {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.wp-block-table {
|
||||
display: table;
|
||||
}
|
||||
|
||||
.wp-block-table.alignfull {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
/* Preformatted */
|
||||
.wp-block-preformatted {}
|
||||
|
||||
/* Code */
|
||||
.wp-block-code {}
|
||||
|
||||
/* Verse */
|
||||
.wp-block-verse {
|
||||
background-color: transparent;
|
||||
font-family: Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Times,"Times New Roman",serif;
|
||||
font-size: 1.1em;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Separator */
|
||||
.wp-block-separator {
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.wp-block-button {
|
||||
}
|
||||
|
||||
.wp-block-button .wp-block-button__link {
|
||||
border-radius: 3px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.4rem;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wp-block-button a:hover,
|
||||
.wp-block-button a:focus {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.wp-block-button a:not([style]) {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.wp-block-button:not([style]) a:hover,
|
||||
.wp-block-button:not([style]) a:focus {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.wp-block-button.alignwide,
|
||||
.wp-block-button.alignfull,
|
||||
.wp-block-button.aligncenter {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Text Columns */
|
||||
@media only screen and ( max-width: 32em ) {
|
||||
.wp-block-text-columns,
|
||||
.wp-block-text-columns.aligncenter {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-text-columns.columns-2 .wp-block-column,
|
||||
.wp-block-text-columns.columns-3 .wp-block-column,
|
||||
.wp-block-text-columns.columns-4 .wp-block-column {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Latest Posts */
|
||||
.wp-block-latest-posts__post-date {
|
||||
color: inherit;
|
||||
margin-bottom: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts,
|
||||
.wp-block-latest-posts li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts li {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
.wp-block-latest-posts li:not(:last-child) {
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.wp-block-latest-posts.is-grid li {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Categories */
|
||||
.wp-block-categories {}
|
||||
|
||||
.wp-block-categories-list ul,
|
||||
.wp-block-categories-list li {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wp-block-categories-list li {
|
||||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
.wp-block-categories-list li:not(:last-child) {
|
||||
border-bottom: 1px dashed rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.wp-block-categories-list ul ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.wp-block-categories-list ul ul li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.wp-block-categories-dropdown {}
|
||||
|
|
@ -151,6 +151,8 @@ add_action( 'widgets_init', 'radcliffe_2_widgets_init' );
|
|||
function radcliffe_2_scripts() {
|
||||
wp_enqueue_style( 'radcliffe-2-style', get_stylesheet_uri() );
|
||||
|
||||
wp_enqueue_style( 'radcliffe-2-block-styles', get_template_directory_uri() . '/assets/css/blocks.css' );
|
||||
|
||||
wp_enqueue_script( 'radcliffe-2-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '20151215', true );
|
||||
|
||||
wp_localize_script( 'radcliffe-2-navigation', 'screenReaderText', array(
|
||||
|
|
|
|||
Loading…
Reference in a new issue