diff --git a/README.md b/README.md index 8e2837d0..d2beab0f 100644 --- a/README.md +++ b/README.md @@ -56,8 +56,8 @@ $ npm install `_s` comes packed with CLI commands tailored for WordPress theme development : - `composer lint:wpcs` : checks all PHP files against [PHP Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/php/). -- `Composer lint:php` : checks all PHP files for syntax errors. -- `Composer make-pot` : generates a .pot file in the `language/` directory. +- `composer lint:php` : checks all PHP files for syntax errors. +- `composer make-pot` : generates a .pot file in the `language/` directory. - `npm run compile:css` : compiles SASS files to css. - `npm run compile:rtl` : generates an RTL stylesheet. - `npm run lint:scss` : checks all SASS files against [CSS Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/). diff --git a/js/navigation.js b/js/navigation.js index cf5a0b06..5d7cada0 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -25,12 +25,12 @@ return; } - if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { + if ( ! menu.classList.contains( 'nav-menu' ) ) { menu.className += ' nav-menu'; } button.onclick = function() { - if ( -1 !== container.className.indexOf( 'toggled' ) ) { + if ( container.classList.contains( 'toggled' ) ) { container.className = container.className.replace( ' toggled', '' ); button.setAttribute( 'aria-expanded', 'false' ); } else { @@ -65,10 +65,10 @@ var self = this; // Move up through the ancestors of the current link until we hit .nav-menu. - while ( -1 === self.className.indexOf( 'nav-menu' ) ) { + while ( ! self.classList.contains( 'nav-menu' ) ) { // On li elements toggle the class .focus. if ( 'li' === self.tagName.toLowerCase() ) { - if ( -1 !== self.className.indexOf( 'focus' ) ) { + if ( self.classList.contains( 'focus' ) ) { self.className = self.className.replace( ' focus', '' ); } else { self.className += ' focus'; diff --git a/style-rtl.css b/style-rtl.css index 4d09ae1b..f664744b 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -906,45 +906,46 @@ object { --------------------------------------------------------------*/ .gallery { margin-bottom: 1.5em; + display: grid; + grid-gap: 1.5em; } .gallery-item { display: inline-block; text-align: center; - vertical-align: top; width: 100%; } -.gallery-columns-2 .gallery-item { - max-width: 50%; +.gallery-columns-2 { + grid-template-columns: repeat(2, 1fr); } -.gallery-columns-3 .gallery-item { - max-width: 33.33%; +.gallery-columns-3 { + grid-template-columns: repeat(3, 1fr); } -.gallery-columns-4 .gallery-item { - max-width: 25%; +.gallery-columns-4 { + grid-template-columns: repeat(4, 1fr); } -.gallery-columns-5 .gallery-item { - max-width: 20%; +.gallery-columns-5 { + grid-template-columns: repeat(5, 1fr); } -.gallery-columns-6 .gallery-item { - max-width: 16.66%; +.gallery-columns-6 { + grid-template-columns: repeat(6, 1fr); } -.gallery-columns-7 .gallery-item { - max-width: 14.28%; +.gallery-columns-7 { + grid-template-columns: repeat(7, 1fr); } -.gallery-columns-8 .gallery-item { - max-width: 12.5%; +.gallery-columns-8 { + grid-template-columns: repeat(8, 1fr); } -.gallery-columns-9 .gallery-item { - max-width: 11.11%; +.gallery-columns-9 { + grid-template-columns: repeat(9, 1fr); } .gallery-caption {