Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Some Gutenberg block styles for the frontend using SASS and some internal mixins
/*
breakpoint(intern) is a mixin to show this block only on screen sizez bigger than 768px
*/
.alignfull {
@include breakpoint(intern){
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
width: auto;
max-width: 1000%;
}
}
.alignwide {
@include breakpoint(intern){
margin-left: calc(25% - 25vw);
margin-right: calc(25% - 25vw);
width: auto;
max-width: 1000%;
}
}
.alignwide img,
.alignfull img {
@include breakpoint(intern){
display: block;
margin: 0 auto;
width: 100% !important;
}
}
blockquote{
background: transparent;
margin: 0 0 1em;
@include font-size(18);
font-style: italic;
padding: 0;
text-align: center;
cite {
display: block;
@include font-size(16);
margin-top: 17px;
}
p:last-of-type {
margin-bottom: 0;
}
&.is-large.wp-block-quote {
@include font-size(22);
margin: 0 0 1em;
padding: 0;
cite {
text-align: center;
}
}
&.wp-block-pullquote {
border-top: 2px solid $basecolor;
border-bottom: 2px solid $basecolor;
padding: 1em 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.