Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Define los estilos de los bloques en el front-end
/**
* Gutenberg front end styles
*/
/**
* Block Color Palettes
*/
.has-flesh-background-color {
background-color: #ffe5d1;
}
.has-flesh-color {
color: #ffe5d1;
}
.has-white-background-color {
background-color: #ffffff;
}
.has-white-color {
color: #ffffff;
}
.has-pink-background-color {
background-color: #e53b51;
}
.has-pink-color {
color: #e53b51;
}
.has-black-background-color {
background-color: #352712;
}
.has-black-color {
color: #352712;
}
/**
* Wide Alignments
*/
.entry-content{
padding-left: 0;
padding-right: 0;
}
.entry-content > *:not(.alignwide):not(.alignfull){
max-width: 70%;
margin-left: auto;
margin-right: auto;
}
.entry-content > .alignwide,
.entry-content > .alignfull{
margin-top: 0;
margin-bottom: 2em;
}
.entry-content > .alignwide{
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
/* Audio */
.entry-content > .wp-block-audio.alignwide audio,
.entry-content > .wp-block-audio.alignfull audio{
width: 100%;
}
/* Archivo */
.entry-content > .wp-block-file.alignwide a:first-child,
.entry-content > .wp-block-file.alignfull a:first-child{
display: none;
}
.entry-content > .wp-block-file.alignwide .wp-block-file__button,
.entry-content > .wp-block-file.alignfull .wp-block-file__button{
margin-left: 0;
display: block;
text-align: center;
}
/* Cita (Formatos) */
.entry-content > .wp-block-pullquote.alignfull{
margin-left: 0;
}
/* Ultimas entradas, Categorias */
.entry-content > .wp-block-latest-posts.alignfull,
.entry-content > .wp-block-categories.alignfull{
margin-left: 30px;
}
/* Incrustados Youtube y Vimeo */
.entry-content > .wp-block-embed.is-type-video.alignfull{
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
}
.entry-content > .wp-block-embed.is-type-video.alignfull > iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/**
* Left, Right, Center Alignments
*/
/* Botón, Cita, Imagen, Imagen de fondo */
.entry-content > .wp-block-button.alignleft,
.entry-content > .wp-block-pullquote.alignleft,
.entry-content > .wp-block-image.alignleft,
.entry-content > .wp-block-cover-image.alignleft{
margin-left: 15%;
margin-right: 1em;
margin-bottom: .5em;
}
.entry-content > .wp-block-button.alignright,
.entry-content > .wp-block-pullquote.alignright,
.entry-content > .wp-block-image.alignright,
.entry-content > .wp-block-cover-image.alignright{
margin-left: 1em;
margin-right: 15%;
margin-bottom: .5em;
}
.entry-content > .wp-block-cover-image.alignleft,
.entry-content > .wp-block-cover-image.alignright,
.entry-content > .wp-block-cover-image.aligncenter{
display: flex;
}
.entry-content > .wp-block-cover-image.alignleft,
.entry-content > .wp-block-cover-image.alignright{
max-width: 35%;
}
/**
* Styling blocks
*/
/* Table (Tabla) */
.wp-block-table tr:first-child{
background-color: #e53b51;
color: white;
}
.wp-block-table tr{
background-color: #ffe5d1;
color: #352712;
}
/* Button (Botón) */
.wp-block-button .wp-block-button__link {
border-radius: 0;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Lato', sans-serif;
}
.wp-block-button .wp-block-button__link.has-pink-background-color:hover,
.wp-block-button .wp-block-button__link.has-pink-background-color:active,
.wp-block-button .wp-block-button__link.has-pink-background-color:focus{
background-color: #352712;
color: white;
}
/* Pullquote (Cita formatos) */
.wp-block-pullquote {
background-color: #ffe5d1;
border: 4px solid #e53b51;
padding: 1em;
}
.wp-block-pullquote p{
color: #e53b51;
margin-bottom: 1em;
}
.wp-block-pullquote cite{
color: #352712;
text-transform: uppercase;
letter-spacing: 1px;
font-family: 'Lato', sans-serif;
font-size: 14px;
}
/* Cover Image (Imagen de fondo) */
.wp-block-cover-image .wp-block-cover-image-text {
font-family: 'Lato', sans-serif;
}
/* Paragraph (Párrafo) - p que hayas definido */
p.has-drop-cap:not(:focus):first-letter{
font-size: 2em;
background-color: #352712;
color: white;
padding: .4em;
}
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.