Skip to content

Commit

Permalink
Merge pull request #101 from INN/53-pullquote-styling
Browse files Browse the repository at this point in the history
Pullquote styling
  • Loading branch information
Josh Darby authored Nov 11, 2019
2 parents 12cf817 + 6923450 commit 7d4d519
Show file tree
Hide file tree
Showing 4 changed files with 228 additions and 1 deletion.
2 changes: 1 addition & 1 deletion wp-content/themes/citylimits/css/child-style.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions wp-content/themes/citylimits/functions.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function largo_child_require_files() {
'/inc/post-templates.php',
'/inc/registration.php',
'/inc/term-meta.php',
'/inc/block-color-palette.php',
// plugin compat
'/inc/acf.php',
'/inc/doubleclick-for-wordpress.php',
Expand Down
89 changes: 89 additions & 0 deletions wp-content/themes/citylimits/inc/block-color-palette.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<?php
/**
* Block color palette information
*/
/**
* Define the block color palette
*
* If updating these colors, please update less/vars.less. Slugs should match LESS var names.
*
* @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/
* @return Array of Arrays
*/
function citylimits_block_colors() {
return array(
array(
'name' => __( 'White', 'citylimits' ),
'slug' => 'white',
'color' => 'white',
),
array(
'name' => __( 'Red', 'citylimits' ),
'slug' => 'red',
'color' => '#D41313',
),
array(
'name' => __( 'Dark Grey', 'citylimits' ),
'slug' => 'darkgrey',
'color' => '#333',
),
array(
'name' => __( 'Grey 1', 'citylimits' ),
'slug' => 'grey1',
'color' => '#c3c3c3',
),
array(
'name' => __( 'Grey 2', 'citylimits' ),
'slug' => 'grey2',
'color' => '#e2e2e2',
),
array(
'name' => __( 'Grey 3', 'citylimits' ),
'slug' => 'grey3',
'color' => '#666',
),
array(
'name' => __( 'Beige', 'citylimits' ),
'slug' => 'beige',
'color' => '#f5f2ed',
),
array(
'name' => __( 'Black', 'citylimits' ),
'slug' => 'black',
'color' => 'black',
),
);
}
add_theme_support( 'editor-color-palette', citylimits_block_colors() );
/**
* Loop over the defined colors and create classes for them
*
* @uses citylimits_block_colors
* @link https://developer.wordpress.org/block-editor/developers/themes/theme-support/
*/
function citylimits_block_colors_styles() {
$colors = citylimits_block_colors();
if ( is_array( $colors ) && ! empty( $colors ) ) {
echo '<style type="text/css" id="citylimits_block_colors_styles">';
foreach ( $colors as $color ) {
if (
is_array( $color )
&& isset( $color['slug'] )
&& isset( $color['color'] )
) {
printf(
'.has-%1$s-background-color { background-color: %2$s; }',
$color['slug'],
$color['color']
);
printf(
'.has-%1$s-color { color: %2$s; }',
$color['slug'],
$color['color']
);
}
}
echo '</style>';
}
}
add_action( 'wp_print_styles', 'citylimits_block_colors_styles' );
137 changes: 137 additions & 0 deletions wp-content/themes/citylimits/less/typography.less
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,140 @@ a:hover, a:active {
}
}

.wp-block-pullquote {
position: relative;
border-color: @grey1;
&:before {
content: "\201C";
display: inline-block;
width: 1ch;
height: 1ch;
margin-left: -1ch;
color: @red;
width: 100%;
height: 1.5rem;
border-top: 1px solid;
border-right: 1px solid;
border-color: inherit;
position: absolute;
top: 0;
font-size: 60px;
margin: -10px;
// padding: 10px 0;
}
&:after {
content: "\201D";
display: inline-block;
width: 1ch;
height: 1ch;
margin-right: -1ch;
color: @red;
width: 100%;
height: 1.5rem;
border-bottom: 1px solid;
border-left: 1px solid;
border-color: inherit;
position: absolute;
bottom: 0;
font-size: 60px;
margin: -10px;
padding: 30px 0;
text-align: right;
}
}

.wp-block-pullquote,
.wp-block-pullquote.alignwide,
.wp-block-pullquote.alignfull,
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
text-align: left;
}

.wp-block-pullquote.alignwide {
width: auto;
margin-right: 0;
margin-left: 0;
}

@media (min-width: 1300px) {
.wp-block-pullquote.alignfull{
width: calc( 100% + ( 0.4 * ( 100vw - 1170px ) ) + ( 1170px * 0.0212765957 ) )!important;
margin-left: calc( -0.45 * ( 100vw - 1170px ) )!important;
}
}
@media (min-width: 1200px) and (max-width: 1299px) {
.wp-block-pullquote.alignfull{
width: calc( 100% + ( 0.2 * ( 100vw - 1170px ) ) + ( 1170px * 0.0212765957 ) )!important;
margin-left: calc( -0.2 * ( 100vw - 1170px ) )!important;
}
}
@media (max-width: 1199px) {
.wp-block-pullquote.alignfull {
margin-left: 0;
margin-right: 0;
width: 103%;
}
}
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
max-width: 50%;
p {
font-size: inherit;
}
}
.wp-block-pullquote blockquote,
.pull-quote,
blockquote.pull-quote,
.type-pull-quote,
blockquote.type-pull-quote {
font-family: @font-sans;
font-style: normal;
line-height: 1.3;
border: none;

padding-top: 2em;
padding-bottom: 2em;
padding-left: 1ch;
padding-right: 1ch;
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}

p,
cite {
font-style: normal;
font-size: inherit;
font-weight: 600;
}

// override Largo; see https://github.com/INN/largo/issues/1748
&::before,
&::after {
display: none;
}

}

// override "is-style-solid-color" styles
.wp-block-pullquote.is-style-solid-color {
border: solid transparent 1px;
&:before {
margin: -10px 10px;
}
blockquote {
max-width: 80%;
margin: 2em auto;
> :first-child::before,
> p:last-of-type::after {
color: @red;
}

p {
font-size: inherit;
}
}
}

0 comments on commit 7d4d519

Please sign in to comment.