diff --git a/changelog.txt b/changelog.txt index 403a0f4..d3ff5b3 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,4 +1,5 @@ = 1.2.21 = +* Fixed the back-to-top arrow sitting off-centre in its button. The 36px button's content box was 22px tall and 10px wide after border and padding, so a 18px glyph with a 27px line box could not centre on either axis; measured 2.8px right and 1.9px high before, sub-pixel after * Fixed one-page section links in the menu, and the page-builder customizer, using site_url() where home_url() was meant. On installs with WordPress in its own subdirectory those pointed at /wp/ instead of the site address * Added add_theme_support( 'wp-block-styles' ) and add_editor_style(), so core block styles apply on the front end and the editor canvas matches the theme's typography * Added three block styles (two button styles and a short rule) and two block patterns, built from the theme's own button and colour values diff --git a/readme.txt b/readme.txt index 2d791da..cbd2f02 100644 --- a/readme.txt +++ b/readme.txt @@ -68,6 +68,7 @@ This page template is used to create the Parallax homepage from our demo : https == Changelog == = 1.2.21 = +* Fixed the back-to-top arrow sitting off-centre in its button. The 36px button's content box was 22px tall and 10px wide after border and padding, so a 18px glyph with a 27px line box could not centre on either axis; measured 2.8px right and 1.9px high before, sub-pixel after * Fixed one-page section links in the menu, and the page-builder customizer, using site_url() where home_url() was meant. On installs with WordPress in its own subdirectory those pointed at /wp/ instead of the site address * Added add_theme_support( 'wp-block-styles' ) and add_editor_style(), so core block styles apply on the front end and the editor canvas matches the theme's typography * Added three block styles (two button styles and a short rule) and two block patterns, built from the theme's own button and colour values diff --git a/style.css b/style.css index 42f8f8e..b1a7011 100644 --- a/style.css +++ b/style.css @@ -3563,7 +3563,22 @@ footer.bg-dark a { -webkit-transform: translateX(-50%); height: 36px; width: 36px; - padding: 5px 11px; + /* + * Centred with flex rather than padding + line-height. The button is a fixed + * 36px box, so with a 2px border and 5px/11px padding the content box was + * 22px tall and 10px wide -- while the glyph is 18px with a 27px line box + * inherited from .btn-sm. Neither axis could centre: the arrow sat 1px high + * and 3.4px right of centre, measured on the rendered button. + * + * letter-spacing is reset because .btn adds 1px after every character, + * including the last, which offsets any centred single glyph by half that. + */ + display: flex; + align-items: center; + justify-content: center; + padding: 0; + line-height: 1; + letter-spacing: 0; } .back-to-top .fa {