'fix' scripts

* Compile rlt styles

* Replace className.indexOf with classList.contains

* Fix the composer comand

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

* Update js/navigation.js

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

Co-authored-by: Ismail El Korchi <ismail.elkorchi@gmail.com>

.eslintrc

@@ -0,0 +1,8 @@
+{
+    "extends": [
+        "plugin:@wordpress/eslint-plugin/es5"
+    ],
+    "env": {
+        "browser": true
+    }
+}

.github/CONTRIBUTING.md

@@ -1,35 +0,0 @@
-Thanks for contributing to `_s` (Underscores) — you rock!
-
-## Maintainers
-
-`_s` is maintained by the [Automattic Theme Team](https://themeshaper.com/about/).
-
-## Submitting issues
-
-Before submitting your issue, make sure it has not been discussed earlier. You can search for existing tickets [here](https://github.com/Automattic/_s/search).
-
-Here are some tips to consider and to help you write a great report:
-
-* `_s` supports Microsoft Internet Explorer 11 and Edge, as well as the latest two versions of all other major browsers.
-* `_s` is backwards compatible with the two versions prior to the current stable version of WordPress.
-* `_s` uses HTML5 markup.
-* We decided not to include translations [[#50](https://github.com/Automattic/_s/pull/50)] beyond the existing `_s.pot` file, a RTL stylesheet [[#263](https://github.com/Automattic/_s/pull/263)], or editor styles [[#225](https://github.com/Automattic/_s/pull/225)], as they are likely to change during development of an `_s` based theme.
-
-## Contributing code
-
-Found a bug you can fix? Fantastic! Patches are always welcome. Here's a few tips for crafting a great pull request:
-
-* Include the purpose of your PR. Be explicit about the issue your PR solves.
-* Reference any existing issues that relate to your PR. This allows everyone to easily see all related discussions.
-* When submitting a change that affects CSS, please make sure that both SCSS sources and output CSS have been updated equally.
-* `_s` complies with the [WordPress Coding Standards](https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/) and any PR should comply as well.
-
-By contributing code to `_s`, you grant its use under the [GNU General Public License v2 (or later)](LICENSE).
-
-## Underscores.me
-
-If your issue is specific to the [Underscores.me](https://underscores.me) website, the [Underscores.me GitHub repo](https://github.com/Automattic/underscores.me) is the right place for you.
-
-The preferred method of generating a new theme based on `_s` is the [Underscores.me](https://underscores.me) website. If you have an alternative method, such as a shell script, write a blog post about it or host it in a separate repo -- and make sure to mention [@underscoresme](https://twitter.com/underscoresme) in your tweets!
-
-Want to have your avatar listed as one of the `_s` contributors [here](https://underscores.me/#contribute)? Just make sure you have an email address added to both GitHub and your local Git installation.

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +0,0 @@
-<!-- Thanks for contributing to Underscores! Please provide as much information as possible with your Pull Request by filling out the following - this helps make reviewing much quicker! -->
-
-#### Changes proposed in this Pull Request:
-
-
-#### Related issue(s):

.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+/vendor
+package-lock.json
+composer.lock
+*.css.map

.jscsrc

@@ -1,7 +0,0 @@
-{
-    "preset": "wordpress",
-    "fileExtensions": [ ".js" ],
-    "excludeFiles": [
-    	"js/**.min.js"
-    ]
-}

.jshintignore

@@ -1 +0,0 @@
-js/**.min.js

.stylelintrc.json

@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "stylelint-config-wordpress/scss"
+  ],
+  "ignoreFiles": [
+    "sass/_normalize.scss"
+  ],
+  "rules": {
+    "block-no-empty": null,
+    "no-duplicate-selectors": null,
+    "no-descending-specificity": null,
+    "font-family-no-duplicate-names": null,
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        "ignore": [
+          "consecutive-duplicates"
+        ]
+      }
+    ]
+  }
+}

.travis.yml

@@ -4,92 +4,68 @@
 # For use with the Underscores WordPress theme.
 # @link https://github.com/Automattic/_s
 
-# Ditch sudo and use containers.
+# Tell Travis CI which OS and which distro to use.
-# @link https://docs.travis-ci.com/user/migrating-from-legacy/#Why-migrate-to-container-based-infrastructure%3F
+os: linux
-# @link https://docs.travis-ci.com/user/workers/container-based-infrastructure/#Routing-your-build-to-container-based-infrastructure
+dist: xenial
-sudo: false
+
-dist: trusty
+# Cache directories between builds.
+# @link https://docs.travis-ci.com/user/caching/#arbitrary-directories
+cache:
+  directories:
+    # Cache directory for npm.
+    - $HOME/.npm
+    # Cache directory for older Composer versions.
+    - $HOME/.composer/cache/files
+    # Cache directory for more recent Composer versions.
+    - $HOME/.cache/composer/files
 
 # Declare project language.
-# @link https://about.travis-ci.org/docs/user/languages/php/
+# @link https://docs.travis-ci.com/user/languages/php/
-language: php
+language:
+  - php
 
-# Declare versions of PHP to use. Use one decimal max.
+php:
-# @link https://docs.travis-ci.com/user/build-configuration/
+  - 5.6
-matrix:
+  - 7.0
-    fast_finish: true
+  - 7.1
+  - 7.2
+  - 7.3
 
-    include:
+jobs:
-        # Current $required_php_version for WordPress: 5.2.4
+  fast_finish: true
-        # aliased to 5.2.17
+  include:
-        - php: '5.2'
+    - php: 7.4
-          dist: precise
+      env: SNIFF=1
-        # aliased to a recent 5.6.x version
-        - php: '5.6'
-          env: SNIFF=1
-        # aliased to a recent 7.0.x version
-        - php: '7.0'
-        # aliased to a recent 7.2.x version
-        - php: '7.2'
-        # bleeding edge PHP
-        - php: 'nightly'
 
-    allow_failures:
+before_install:
-        - php: 'nightly'
+  # Speed up build time by disabling Xdebug.
+  - phpenv config-rm xdebug.ini || echo 'No xdebug config.'
+  # Download and install the latest long-term support release of node.
+  - if [[ "$SNIFF" == 1 ]]; then nvm install --lts; fi
+  # Install Composer dependencies.
+  - composer install
+  # Install NPM dependencies.
+  - if [[ "$SNIFF" == 1 ]]; then npm install; fi
 
-# Use this to prepare the system to install prerequisites or dependencies.
-# e.g. sudo apt-get update.
-# Failures in this section will result in build status 'errored'.
-# before_install:
-
-# Use this to prepare your build for testing.
-# e.g. copy database configurations, environment variables, etc.
-# Failures in this section will result in build status 'errored'.
-before_script:
-    # Speed up build time by disabling Xdebug.
-    - phpenv config-rm xdebug.ini || echo 'No xdebug config.'
-    # Set up temporary paths.
-    - export PHPCS_DIR=/tmp/phpcs
-    - export WPCS_DIR=/tmp/wpcs
-    - export PHPCOMPAT_DIR=/tmp/phpcompatibility
-    # Install CodeSniffer for WordPress Coding Standards checks.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b master --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git $PHPCS_DIR; fi
-    # Install WordPress Coding Standards.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b 0.14.1 --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git $WPCS_DIR; fi
-    # Install PHP Compatibility sniffs.
-    - if [[ "$SNIFF" == "1" ]]; then git clone -b master --depth 1 https://github.com/wimg/PHPCompatibility.git $PHPCOMPAT_DIR; fi
-    # Set install path for PHPCS sniffs.
-    # @link https://github.com/squizlabs/PHP_CodeSniffer/blob/4237c2fc98cc838730b76ee9cee316f99286a2a7/CodeSniffer.php#L1941
-    - if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/bin/phpcs --config-set installed_paths $WPCS_DIR,$PHPCOMPAT_DIR; fi
-    # After CodeSniffer install you should refresh your path.
-    - if [[ "$SNIFF" == "1" ]]; then phpenv rehash; fi
-    # Install JSCS: JavaScript Code Style checker.
-    # @link http://jscs.info/
-    - if [[ "$SNIFF" == "1" ]]; then npm install -g jscs; fi
-    # Install JSHint, a JavaScript Code Quality Tool.
-    # @link http://jshint.com/docs/
-    - if [[ "$SNIFF" == "1" ]]; then npm install -g jshint; fi
-    # Pull in the WP Core jshint rules.
-    - if [[ "$SNIFF" == "1" ]]; then wget https://develop.svn.wordpress.org/trunk/.jshintrc; fi
-
-# Run test script commands.
-# Default is specific to project language.
-# All commands must exit with code 0 on success. Anything else is considered failure.
 script:
-    # Search for PHP syntax errors.
+  # Validate the composer.json file.
-    - find -L . -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l
+  # @link https://getcomposer.org/doc/03-cli.md#validate
-    # Run the theme through JSHint.
+  - composer validate --no-check-all --strict
-    - if [[ "$SNIFF" == "1" ]]; then jshint .; fi
+
-    # Run the theme through JavaScript Code Style checker.
+  # Search for PHP syntax errors using PHP Parallel Lint.
-    - if [[ "$SNIFF" == "1" ]]; then jscs .; fi
+  # @link https://github.com/php-parallel-lint/PHP-Parallel-Lint
-    # WordPress Coding Standards.
+  - composer lint:php
-    # @link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
+
-    # @link https://pear.php.net/package/PHP_CodeSniffer/
+  # Check the PHP files with the coding standards documented in the phpcs.xml.dist file.
-    # Uses a custom ruleset based on WordPress. This ruleset is automatically
+  - if [[ "$SNIFF" == 1 ]]; then composer lint:wpcs; fi
-    # picked up by PHPCS as it's named `phpcs.xml(.dist)`.
+
-    - if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/bin/phpcs --runtime-set ignore_warnings_on_exit 1; fi
+  # Check the JS files with the lint-js script defined in the @wordpress/scripts package.
+  - if [[ "$SNIFF" == 1 ]]; then npm run lint:js; fi
+
+  # Check the SCSS files with the lint-style script defined in the @wordpress/scripts package.
+  - if [[ "$SNIFF" == 1 ]]; then npm run lint:scss; fi
 
 # Receive notifications for build results.
-# @link https://docs.travis-ci.com/user/notifications/#Email-notifications
+# @link https://docs.travis-ci.com/user/notifications/#configuring-email-notifications
 notifications:
     email: false

404.php

@@ -10,16 +10,15 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
-			<section class="error-404 not-found">
+		<section class="error-404 not-found">
-				<header class="page-header">
+			<header class="page-header">
-					<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
+				<h1 class="page-title"><?php esc_html_e( 'Oops! That page can&rsquo;t be found.', '_s' ); ?></h1>
-				</header><!-- .page-header -->
+			</header><!-- .page-header -->
 
-				<div class="page-content">
+			<div class="page-content">
-					<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
+				<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try one of the links below or a search?', '_s' ); ?></p>
 
 					<?php
 					get_search_form();
@@ -31,13 +30,15 @@ get_header();
 						<h2 class="widget-title"><?php esc_html_e( 'Most Used Categories', '_s' ); ?></h2>
 						<ul>
 							<?php
-							wp_list_categories( array(
+							wp_list_categories(
-								'orderby'    => 'count',
+								array(
-								'order'      => 'DESC',
+									'orderby'    => 'count',
-								'show_count' => 1,
+									'order'      => 'DESC',
-								'title_li'   => '',
+									'show_count' => 1,
-								'number'     => 10,
+									'title_li'   => '',
-							) );
+									'number'     => 10,
+								)
+							);
 							?>
 						</ul>
 					</div><!-- .widget -->
@@ -50,11 +51,10 @@ get_header();
 					the_widget( 'WP_Widget_Tag_Cloud' );
 					?>
 
-				</div><!-- .page-content -->
+			</div><!-- .page-content -->
-			</section><!-- .error-404 -->
+		</section><!-- .error-404 -->
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</div><!-- #primary -->
 
 <?php
 get_footer();

README.md

@@ -1,4 +1,10 @@
-[![Build Status](https://travis-ci.org/Automattic/_s.svg?branch=master)](https://travis-ci.org/Automattic/_s)
+Changes from Upstream
+---------------------
+
+* Added 'autoprefixer'.
+* Added 'dev' script - this also watches for `scss` changes - `npm run dev`
+* Run `SETUP` to set theme up with correct name and npm and composer dependencies
+installed.
 
 _s
 ===
@@ -7,40 +13,63 @@ Hi. I'm a starter theme called `_s`, or `underscores`, if you like. I'm a theme
 
 My ultra-minimal CSS might make me look like theme tartare but that means less stuff to get in your way when you're designing your awesome theme. Here are some of the other more interesting things you'll find here:
 
+* A modern workflow with a pre-made command-line interface to turn your project into a more pleasant experience.
 * A just right amount of lean, well-commented, modern, HTML5 templates.
-* A helpful 404 template.
+* A custom header implementation in `inc/custom-header.php`. Just add the code snippet found in the comments of `inc/custom-header.php` to your `header.php` template.
-* A custom header implementation in `inc/custom-header.php` just add the code snippet found in the comments of `inc/custom-header.php` to your `header.php` template.
 * Custom template tags in `inc/template-tags.php` that keep your templates clean and neat and prevent code duplication.
 * Some small tweaks in `inc/template-functions.php` that can improve your theming experience.
 * A script at `js/navigation.js` that makes your menu a toggled dropdown on small screens (like your phone), ready for CSS artistry. It's enqueued in `functions.php`.
-* 2 sample CSS layouts in `layouts/` for a sidebar on either side of your content.
+* 2 sample layouts in `sass/layout/` made using CSS Grid for a sidebar on either side of your content. Just uncomment the layout of your choice in `sass/site/_site.scss`.
-Note: `.no-sidebar` styles are not automatically loaded.
+Note: `.no-sidebar` styles are automatically loaded.
 * Smartly organized starter CSS in `style.css` that will help you to quickly get your design off the ground.
+* Full support for `WooCommerce plugin` integration with hooks in `inc/woocommerce.php`, styling override woocommerce.css with product gallery features (zoom, swipe, lightbox) enabled.
 * Licensed under GPLv2 or later. :) Use it to make something cool.
 
-Getting Started
+Installation
 ---------------
 
-If you want to keep it simple, head over to https://underscores.me and generate your `_s` based theme from there. You just input the name of the theme you want to create, click the "Generate" button, and you get your ready-to-awesomize starter theme.
+### Requirements
 
-If you want to set things up manually, download `_s` from GitHub. The first thing you want to do is copy the `_s` directory and change the name to something else (like, say, `megatherium-is-awesome`), and then you'll need to do a five-step find and replace on the name in all the templates.
+`_s` requires the following dependencies:
 
-1. Search for `'_s'` (inside single quotations) to capture the text domain.
+- [Node.js](https://nodejs.org/)
-2. Search for `_s_` to capture all the function names.
+- [Composer](https://getcomposer.org/)
-3. Search for `Text Domain: _s` in `style.css`.
-4. Search for <code>&nbsp;_s</code> (with a space before it) to capture DocBlocks.
-5. Search for `_s-` to capture prefixed handles.
 
-OR
+### Quick Start
 
-1. Search for: `'_s'` and replace with: `'megatherium-is-awesome'`
+Clone or download this repository, change its name to something else (like, say, `megatherium-is-awesome`), and then you'll need to do a six-step find and replace on the name in all the templates.
-2. Search for: `_s_` and replace with: `megatherium_is_awesome_`
+
-3. Search for: `Text Domain: _s` and replace with: `Text Domain: megatherium-is-awesome` in `style.css`.
+1. Search for `'_s'` (inside single quotations) to capture the text domain and replace with: `'megatherium-is-awesome'`.
-4. Search for: <code>&nbsp;_s</code> and replace with: <code>&nbsp;Megatherium_is_Awesome</code>
+2. Search for `_s_` to capture all the functions names and replace with: `megatherium_is_awesome_`.
-5. Search for: `_s-` and replace with: `megatherium-is-awesome-`
+3. Search for `Text Domain: _s` in `style.css` and replace with: `Text Domain: megatherium-is-awesome`.
+4. Search for <code>&nbsp;_s</code> (with a space before it) to capture DocBlocks and replace with: <code>&nbsp;Megatherium_is_Awesome</code>.
+5. Search for `_s-` to capture prefixed handles and replace with: `megatherium-is-awesome-`.
+6. Search for `_S_` (in uppercase) to capture constants and replace with: `MEGATHERIUM_IS_AWESOME_`.
 
 Then, update the stylesheet header in `style.css`, the links in `footer.php` with your own information and rename `_s.pot` from `languages` folder to use the theme's slug. Next, update or delete this readme.
 
+### Setup
+
+To start using all the tools that comes with `_s`  you need to install the necessary Node.js and Composer dependencies :
+
+```sh
+$ composer install
+$ npm install
+```
+
+### Available CLI commands
+
+`_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.
+- `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/).
+- `npm run lint:js` : checks all JavaScript files against [JavaScript Coding Standards](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/javascript/).
+- `npm run bundle` : generates a .zip archive for distribution, excluding development and system files.
+
 Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :)
 
 Good luck!

SETUP

@@ -0,0 +1,44 @@
+#!/bin/sh
+
+if [ -z "$1" ] ; then
+        _name=${PWD##*/}
+        if [ -z "$_name" ] ; then
+                echo "Error - could not determine theme name"
+                echo "Please rerun and pass theme name as an argument."
+                exit 1
+        fi
+else
+        _name="$1"
+fi
+
+_name_uppercase="$(echo "$_name" | tr '[:lower:]' '[:upper:]')"
+
+# search and replace
+
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e s/\'_s\'/"'$_name'"/g
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e 's/_s_/'"$_name"'_/g'
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e 's/Text Domain: _s/Text Domain: '"$_name"'/g'
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e 's/ _s/ '"$_name"'/g'
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e 's/_s-/'"$_name"'-/g'
+find . -type f -name "*.*" -print0 | xargs -0 sed -i '' -e 's/_S_/'"$_name_uppercase"'_/g'
+
+# install composer
+# https://getcomposer.org/doc/faqs/how-to-install-composer-programmatically.md
+EXPECTED_CHECKSUM="$(wget -q -O - https://composer.github.io/installer.sig)"
+php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
+ACTUAL_CHECKSUM="$(php -r "echo hash_file('sha384', 'composer-setup.php');")"
+
+if [ "$EXPECTED_CHECKSUM" != "$ACTUAL_CHECKSUM" ]
+then
+    >&2 echo 'ERROR: Invalid installer checksum'
+    rm composer-setup.php
+    exit 10
+fi
+
+php composer-setup.php
+
+php composer.phar install
+
+# npm install
+
+npm install

archive.php

@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
 		<?php if ( have_posts() ) : ?>
 
@@ -45,8 +44,7 @@ get_header();
 		endif;
 		?>
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</div><!-- #primary -->
 
 <?php
 get_sidebar();

bin/bundle.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+const path = require( 'path' );
+const fs = require( 'fs' );
+const archiver = require('archiver');
+
+// Contains the excluded files and folders.
+const excludes = [
+	'.DS_Store',
+	'.stylelintrc.json',
+	'.eslintrc',
+	'.git',
+	'.gitattributes',
+	'.github',
+	'.gitignore',
+	'README.md',
+	'bin',
+	'composer.json',
+	'composer.lock',
+	'node_modules',
+	'package-lock.json',
+	'package.json',
+	'vendor',
+	'.travis.yml',
+	'phpcs.xml.dist',
+	'sass',
+];
+
+// The path of the zip file.
+const zipPath = path.join(
+	__dirname,
+	'/../../',
+	path.basename(path.dirname(__dirname))
+) + '.zip';
+
+
+// Create a file to stream archive data to.
+let output = fs.createWriteStream( zipPath );
+let archive = archiver('zip', {
+  zlib: { level: 9 }
+});
+
+/**
+ * Recursively traverse the directory tree and append the files to the archive. 
+ * @param {string} directoryPath - The path of the directory being looped through.
+ */
+function traverseDirectoryTree( directoryPath ) {
+	const files = fs.readdirSync( directoryPath );
+	for ( const i in files ) {
+		const currentPath = directoryPath + '/' + files[i];
+		const stats = fs.statSync( currentPath );
+		let relativePath = path.relative(process.cwd(), currentPath);
+		if ( stats.isFile() && ! excludes.includes( files[i] ) ) {
+			archive.file(currentPath, {
+				name: `${relativePath}`
+			});
+		} else if ( stats.isDirectory() && ! excludes.includes( files[i] ) ) {
+			traverseDirectoryTree( currentPath );
+		}
+	}
+}
+
+// Listen for all archive data to be written.
+output.on('close', function () {
+	console.log(`Created ${path.basename(path.dirname(__dirname))}.zip of ${archive.pointer()} bytes`);
+});
+
+// Catch warnings during archiving.
+archive.on('warning', function(err) {
+	if (err.code === 'ENOENT') {
+		// log warning
+		console.log(err);
+	} else {
+		// throw error
+		throw err;
+	}
+});
+
+// Catch errors during archiving.
+archive.on('error', function(err){
+	throw err;
+});
+
+// Pipe archive data to the file.
+archive.pipe(output);
+
+// Append the files to the archive.
+traverseDirectoryTree( '.' );
+
+// Finalize the archive.
+archive.finalize();

comments.php

@@ -33,14 +33,14 @@ if ( post_password_required() ) {
 				printf(
 					/* translators: 1: title. */
 					esc_html__( 'One thought on “%1$s”', '_s' ),
-					'<span>' . get_the_title() . '</span>'
+					'<span>' . wp_kses_post( get_the_title() ) . '</span>'
 				);
 			} else {
-				printf( // WPCS: XSS OK.
+				printf( 
 					/* translators: 1: comment count number, 2: title. */
 					esc_html( _nx( '%1$s thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', $_s_comment_count, 'comments title', '_s' ) ),
-					number_format_i18n( $_s_comment_count ),
+					number_format_i18n( $_s_comment_count ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
-					'<span>' . get_the_title() . '</span>'
+					'<span>' . wp_kses_post( get_the_title() ) . '</span>'
 				);
 			}
 			?>
@@ -50,10 +50,12 @@ if ( post_password_required() ) {
 
 		<ol class="comment-list">
 			<?php
-			wp_list_comments( array(
+			wp_list_comments(
-				'style'      => 'ol',
+				array(
-				'short_ping' => true,
+					'style'      => 'ol',
-			) );
+					'short_ping' => true,
+				)
+			);
 			?>
 		</ol><!-- .comment-list -->
 

composer.json

@@ -0,0 +1,35 @@
+{
+    "name": "automattic/underscores",
+    "type": "wordpress-theme",
+    "description": "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.",
+    "keywords": [
+        "WordPress",
+        "Themes"
+    ],
+    "homepage": "https://github.com/Automattic/_s",
+    "license": "GPL-2.0-or-later",
+    "authors": [
+        {
+            "name": "Contributors",
+            "homepage": "https://github.com/Automattic/_s/graphs/contributors"
+        }
+    ],
+    "require": {
+        "php": ">=5.6"
+    },
+    "require-dev": {
+        "dealerdirect/phpcodesniffer-composer-installer": "^0.6.2",
+        "wptrt/wpthemereview": "^0.2.1",
+        "php-parallel-lint/php-parallel-lint": "^1.2.0",
+        "wp-cli/i18n-command": "^2.2"
+    },
+    "scripts": {
+        "lint:wpcs": "@php ./vendor/squizlabs/php_codesniffer/bin/phpcs",
+        "lint:php": "@php ./vendor/bin/parallel-lint --exclude .git --exclude vendor .",
+        "make-pot": "wp i18n make-pot . languages/_s.pot"
+    },
+    "support": {
+        "issues": "https://github.com/Automattic/_s/issues",
+        "source": "https://github.com/Automattic/_s"
+    }
+}

footer.php

@@ -11,8 +11,6 @@
 
 ?>
 
-	</div><!-- #content -->
-
 	<footer id="colophon" class="site-footer">
 		<div class="site-info">
 			<a href="<?php echo esc_url( __( 'https://wordpress.org/', '_s' ) ); ?>">

functions.php

@@ -7,6 +7,11 @@
  * @package _s
  */
 
+if ( ! defined( '_S_VERSION' ) ) {
+	// Replace the version number of the theme on each release.
+	define( '_S_VERSION', '1.0.0' );
+}
+
 if ( ! function_exists( '_s_setup' ) ) :
 	/**
 	 * Sets up theme defaults and registers support for various WordPress features.
@@ -43,27 +48,40 @@ if ( ! function_exists( '_s_setup' ) ) :
 		add_theme_support( 'post-thumbnails' );
 
 		// This theme uses wp_nav_menu() in one location.
-		register_nav_menus( array(
+		register_nav_menus(
-			'menu-1' => esc_html__( 'Primary', '_s' ),
+			array(
-		) );
+				'menu-1' => esc_html__( 'Primary', '_s' ),
+			)
+		);
 
 		/*
 		 * Switch default core markup for search form, comment form, and comments
 		 * to output valid HTML5.
 		 */
-		add_theme_support( 'html5', array(
+		add_theme_support(
-			'search-form',
+			'html5',
-			'comment-form',
+			array(
-			'comment-list',
+				'search-form',
-			'gallery',
+				'comment-form',
-			'caption',
+				'comment-list',
-		) );
+				'gallery',
+				'caption',
+				'style',
+				'script',
+			)
+		);
 
 		// Set up the WordPress core custom background feature.
-		add_theme_support( 'custom-background', apply_filters( '_s_custom_background_args', array(
+		add_theme_support(
-			'default-color' => 'ffffff',
+			'custom-background',
-			'default-image' => '',
+			apply_filters(
-		) ) );
+				'_s_custom_background_args',
+				array(
+					'default-color' => 'ffffff',
+					'default-image' => '',
+				)
+			)
+		);
 
 		// Add theme support for selective refresh for widgets.
 		add_theme_support( 'customize-selective-refresh-widgets' );
@@ -73,12 +91,15 @@ if ( ! function_exists( '_s_setup' ) ) :
 		 *
 		 * @link https://codex.wordpress.org/Theme_Logo
 		 */
-		add_theme_support( 'custom-logo', array(
+		add_theme_support(
-			'height'      => 250,
+			'custom-logo',
-			'width'       => 250,
+			array(
-			'flex-width'  => true,
+				'height'      => 250,
-			'flex-height' => true,
+				'width'       => 250,
-		) );
+				'flex-width'  => true,
+				'flex-height' => true,
+			)
+		);
 	}
 endif;
 add_action( 'after_setup_theme', '_s_setup' );
@@ -104,27 +125,48 @@ add_action( 'after_setup_theme', '_s_content_width', 0 );
  * @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
  */
 function _s_widgets_init() {
-	register_sidebar( array(
+	register_sidebar(
-		'name'          => esc_html__( 'Sidebar', '_s' ),
+		array(
-		'id'            => 'sidebar-1',
+			'name'          => esc_html__( 'Sidebar', '_s' ),
-		'description'   => esc_html__( 'Add widgets here.', '_s' ),
+			'id'            => 'sidebar-1',
-		'before_widget' => '<section id="%1$s" class="widget %2$s">',
+			'description'   => esc_html__( 'Add widgets here.', '_s' ),
-		'after_widget'  => '</section>',
+			'before_widget' => '<section id="%1$s" class="widget %2$s">',
-		'before_title'  => '<h2 class="widget-title">',
+			'after_widget'  => '</section>',
-		'after_title'   => '</h2>',
+			'before_title'  => '<h2 class="widget-title">',
-	) );
+			'after_title'   => '</h2>',
+		)
+	);
 }
 add_action( 'widgets_init', '_s_widgets_init' );
 
+function google_fonts() {
+	$google_fonts = apply_filters(
+		'storefront_google_font_families', array(
+			// 'source-sans-pro' => 'Source+Sans+Pro:400,300,300italic,400italic,600,700,900',
+			'montserrat' => 'Montserrat:400,600',
+		)
+	);
+
+	$query_args = array(
+		'family' => implode( '|', $google_fonts ),
+		'subset' => rawurlencode( 'latin,latin-ext' ),
+	);
+
+	$fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
+
+	return $fonts_url;
+}
+
 /**
  * Enqueue scripts and styles.
  */
 function _s_scripts() {
-	wp_enqueue_style( '_s-style', get_stylesheet_uri() );
+	wp_enqueue_style( '_s-style', get_stylesheet_uri(), array(), _S_VERSION );
+	wp_style_add_data( '_s-style', 'rtl', 'replace' );
 
-	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
+	wp_enqueue_style( '_s-google-fonts', google_fonts(), array(), null );
 
-	wp_enqueue_script( '_s-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
+	wp_enqueue_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
 
 	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 		wp_enqueue_script( 'comment-reply' );

header.php

@@ -15,14 +15,15 @@
 <head>
 	<meta charset="<?php bloginfo( 'charset' ); ?>">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<link rel="profile" href="http://gmpg.org/xfn/11">
+	<link rel="profile" href="https://gmpg.org/xfn/11">
 
 	<?php wp_head(); ?>
 </head>
 
 <body <?php body_class(); ?>>
+<?php wp_body_open(); ?>
 <div id="page" class="site">
-	<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
+	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', '_s' ); ?></a>
 
 	<header id="masthead" class="site-header">
 		<div class="site-branding">
@@ -40,19 +41,19 @@
 			$_s_description = get_bloginfo( 'description', 'display' );
 			if ( $_s_description || is_customize_preview() ) :
 				?>
-				<p class="site-description"><?php echo $_s_description; /* WPCS: xss ok. */ ?></p>
+				<p class="site-description"><?php echo $_s_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>
 			<?php endif; ?>
 		</div><!-- .site-branding -->
 
 		<nav id="site-navigation" class="main-navigation">
 			<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', '_s' ); ?></button>
 			<?php
-			wp_nav_menu( array(
+			wp_nav_menu(
-				'theme_location' => 'menu-1',
+				array(
-				'menu_id'        => 'primary-menu',
+					'theme_location' => 'menu-1',
-			) );
+					'menu_id'        => 'primary-menu',
+				)
+			);
 			?>
 		</nav><!-- #site-navigation -->
 	</header><!-- #masthead -->
-
-	<div id="content" class="site-content">

inc/custom-header.php

@@ -17,14 +17,20 @@
  * @uses _s_header_style()
  */
 function _s_custom_header_setup() {
-	add_theme_support( 'custom-header', apply_filters( '_s_custom_header_args', array(
+	add_theme_support(
-		'default-image'          => '',
+		'custom-header',
-		'default-text-color'     => '000000',
+		apply_filters(
-		'width'                  => 1000,
+			'_s_custom_header_args',
-		'height'                 => 250,
+			array(
-		'flex-height'            => true,
+				'default-image'      => '',
-		'wp-head-callback'       => '_s_header_style',
+				'default-text-color' => '000000',
-	) ) );
+				'width'              => 1000,
+				'height'             => 250,
+				'flex-height'        => true,
+				'wp-head-callback'   => '_s_header_style',
+			)
+		)
+	);
 }
 add_action( 'after_setup_theme', '_s_custom_header_setup' );
 
@@ -56,9 +62,9 @@ if ( ! function_exists( '_s_header_style' ) ) :
 			.site-description {
 				position: absolute;
 				clip: rect(1px, 1px, 1px, 1px);
-			}
+				}
-		<?php
+			<?php
-		// If the user has set a custom color for the text use that.
+			// If the user has set a custom color for the text use that.
 		else :
 			?>
 			.site-title a,

inc/customizer.php

@@ -16,14 +16,20 @@ function _s_customize_register( $wp_customize ) {
 	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
 
 	if ( isset( $wp_customize->selective_refresh ) ) {
-		$wp_customize->selective_refresh->add_partial( 'blogname', array(
+		$wp_customize->selective_refresh->add_partial(
-			'selector'        => '.site-title a',
+			'blogname',
-			'render_callback' => '_s_customize_partial_blogname',
+			array(
-		) );
+				'selector'        => '.site-title a',
-		$wp_customize->selective_refresh->add_partial( 'blogdescription', array(
+				'render_callback' => '_s_customize_partial_blogname',
-			'selector'        => '.site-description',
+			)
-			'render_callback' => '_s_customize_partial_blogdescription',
+		);
-		) );
+		$wp_customize->selective_refresh->add_partial(
+			'blogdescription',
+			array(
+				'selector'        => '.site-description',
+				'render_callback' => '_s_customize_partial_blogdescription',
+			)
+		);
 	}
 }
 add_action( 'customize_register', '_s_customize_register' );

inc/jetpack.php

@@ -16,31 +16,37 @@
  */
 function _s_jetpack_setup() {
 	// Add theme support for Infinite Scroll.
-	add_theme_support( 'infinite-scroll', array(
+	add_theme_support(
-		'container' => 'main',
+		'infinite-scroll',
-		'render'    => '_s_infinite_scroll_render',
+		array(
-		'footer'    => 'page',
+			'container' => 'main',
-	) );
+			'render'    => '_s_infinite_scroll_render',
+			'footer'    => 'page',
+		)
+	);
 
 	// Add theme support for Responsive Videos.
 	add_theme_support( 'jetpack-responsive-videos' );
 
 	// Add theme support for Content Options.
-	add_theme_support( 'jetpack-content-options', array(
+	add_theme_support(
-		'post-details'    => array(
+		'jetpack-content-options',
-			'stylesheet' => '_s-style',
+		array(
-			'date'       => '.posted-on',
+			'post-details' => array(
-			'categories' => '.cat-links',
+				'stylesheet' => '_s-style',
-			'tags'       => '.tags-links',
+				'date'       => '.posted-on',
-			'author'     => '.byline',
+				'categories' => '.cat-links',
-			'comment'    => '.comments-link',
+				'tags'       => '.tags-links',
-		),
+				'author'     => '.byline',
-		'featured-images' => array(
+				'comment'    => '.comments-link',
-			'archive'    => true,
+			),
-			'post'       => true,
+			'featured-images' => array(
-			'page'       => true,
+				'archive' => true,
-		),
+				'post'    => true,
-	) );
+				'page'    => true,
+			),
+		)
+	);
 }
 add_action( 'after_setup_theme', '_s_jetpack_setup' );
 

inc/template-functions.php

@@ -31,7 +31,7 @@ add_filter( 'body_class', '_s_body_classes' );
  */
 function _s_pingback_header() {
 	if ( is_singular() && pings_open() ) {
-		echo '<link rel="pingback" href="', esc_url( get_bloginfo( 'pingback_url' ) ), '">';
+		printf( '<link rel="pingback" href="%s">', esc_url( get_bloginfo( 'pingback_url' ) ) );
 	}
 }
 add_action( 'wp_head', '_s_pingback_header' );

inc/template-tags.php

@@ -17,7 +17,8 @@ if ( ! function_exists( '_s_posted_on' ) ) :
 			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
 		}
 
-		$time_string = sprintf( $time_string,
+		$time_string = sprintf(
+			$time_string,
 			esc_attr( get_the_date( DATE_W3C ) ),
 			esc_html( get_the_date() ),
 			esc_attr( get_the_modified_date( DATE_W3C ) ),
@@ -30,7 +31,7 @@ if ( ! function_exists( '_s_posted_on' ) ) :
 			'<a href="' . esc_url( get_permalink() ) . '" rel="bookmark">' . $time_string . '</a>'
 		);
 
-		echo '<span class="posted-on">' . $posted_on . '</span>'; // WPCS: XSS OK.
+		echo '<span class="posted-on">' . $posted_on . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 
 	}
 endif;
@@ -46,7 +47,7 @@ if ( ! function_exists( '_s_posted_by' ) ) :
 			'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) . '">' . esc_html( get_the_author() ) . '</a></span>'
 		);
 
-		echo '<span class="byline"> ' . $byline . '</span>'; // WPCS: XSS OK.
+		echo '<span class="byline"> ' . $byline . '</span>'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 
 	}
 endif;
@@ -62,14 +63,14 @@ if ( ! function_exists( '_s_entry_footer' ) ) :
 			$categories_list = get_the_category_list( esc_html__( ', ', '_s' ) );
 			if ( $categories_list ) {
 				/* translators: 1: list of categories. */
-				printf( '<span class="cat-links">' . esc_html__( 'Posted in %1$s', '_s' ) . '</span>', $categories_list ); // WPCS: XSS OK.
+				printf( '<span class="cat-links">' . esc_html__( 'Posted in %1$s', '_s' ) . '</span>', $categories_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			}
 
 			/* translators: used between list items, there is a space after the comma */
 			$tags_list = get_the_tag_list( '', esc_html_x( ', ', 'list item separator', '_s' ) );
 			if ( $tags_list ) {
 				/* translators: 1: list of tags. */
-				printf( '<span class="tags-links">' . esc_html__( 'Tagged %1$s', '_s' ) . '</span>', $tags_list ); // WPCS: XSS OK.
+				printf( '<span class="tags-links">' . esc_html__( 'Tagged %1$s', '_s' ) . '</span>', $tags_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
 			}
 		}
 
@@ -86,7 +87,7 @@ if ( ! function_exists( '_s_entry_footer' ) ) :
 							),
 						)
 					),
-					get_the_title()
+					wp_kses_post( get_the_title() )
 				)
 			);
 			echo '</span>';
@@ -103,7 +104,7 @@ if ( ! function_exists( '_s_entry_footer' ) ) :
 						),
 					)
 				),
-				get_the_title()
+				wp_kses_post( get_the_title() )
 			),
 			'<span class="edit-link">',
 			'</span>'
@@ -132,17 +133,33 @@ if ( ! function_exists( '_s_post_thumbnail' ) ) :
 
 		<?php else : ?>
 
-		<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true">
+			<a class="post-thumbnail" href="<?php the_permalink(); ?>" aria-hidden="true" tabindex="-1">
-			<?php
+				<?php
-			the_post_thumbnail( 'post-thumbnail', array(
+					the_post_thumbnail(
-				'alt' => the_title_attribute( array(
+						'post-thumbnail',
-					'echo' => false,
+						array(
-				) ),
+							'alt' => the_title_attribute(
-			) );
+								array(
-			?>
+									'echo' => false,
-		</a>
+								)
+							),
+						)
+					);
+				?>
+			</a>
 
-		<?php
+			<?php
 		endif; // End is_singular().
 	}
 endif;
+
+if ( ! function_exists( 'wp_body_open' ) ) :
+	/**
+	 * Shim for sites older than 5.2.
+	 *
+	 * @link https://core.trac.wordpress.org/ticket/12563
+	 */
+	function wp_body_open() {
+		do_action( 'wp_body_open' );
+	}
+endif;

inc/woocommerce.php

@@ -11,12 +11,26 @@
  * WooCommerce setup function.
  *
  * @link https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
- * @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)-in-3.0.0
+ * @link https://github.com/woocommerce/woocommerce/wiki/Enabling-product-gallery-features-(zoom,-swipe,-lightbox)
+ * @link https://github.com/woocommerce/woocommerce/wiki/Declaring-WooCommerce-support-in-themes
  *
  * @return void
  */
 function _s_woocommerce_setup() {
-	add_theme_support( 'woocommerce' );
+	add_theme_support(
+		'woocommerce',
+		array(
+			'thumbnail_image_width' => 150,
+			'single_image_width'    => 300,
+			'product_grid'          => array(
+				'default_rows'    => 3,
+				'min_rows'        => 1,
+				'default_columns' => 4,
+				'min_columns'     => 1,
+				'max_columns'     => 6,
+			),
+		)
+	);
 	add_theme_support( 'wc-product-gallery-zoom' );
 	add_theme_support( 'wc-product-gallery-lightbox' );
 	add_theme_support( 'wc-product-gallery-slider' );
@@ -29,7 +43,7 @@ add_action( 'after_setup_theme', '_s_woocommerce_setup' );
  * @return void
  */
 function _s_woocommerce_scripts() {
-	wp_enqueue_style( '_s-woocommerce-style', get_template_directory_uri() . '/woocommerce.css' );
+	wp_enqueue_style( '_s-woocommerce-style', get_template_directory_uri() . '/woocommerce.css', array(), _S_VERSION );
 
 	$font_path   = WC()->plugin_url() . '/assets/fonts/';
 	$inline_font = '@font-face {
@@ -70,36 +84,6 @@ function _s_woocommerce_active_body_class( $classes ) {
 }
 add_filter( 'body_class', '_s_woocommerce_active_body_class' );
 
-/**
- * Products per page.
- *
- * @return integer number of products.
- */
-function _s_woocommerce_products_per_page() {
-	return 12;
-}
-add_filter( 'loop_shop_per_page', '_s_woocommerce_products_per_page' );
-
-/**
- * Product gallery thumnbail columns.
- *
- * @return integer number of columns.
- */
-function _s_woocommerce_thumbnail_columns() {
-	return 4;
-}
-add_filter( 'woocommerce_product_thumbnails_columns', '_s_woocommerce_thumbnail_columns' );
-
-/**
- * Default loop columns on product archives.
- *
- * @return integer products per row.
- */
-function _s_woocommerce_loop_columns() {
-	return 3;
-}
-add_filter( 'loop_shop_columns', '_s_woocommerce_loop_columns' );
-
 /**
  * Related Products Args.
  *
@@ -118,31 +102,6 @@ function _s_woocommerce_related_products_args( $args ) {
 }
 add_filter( 'woocommerce_output_related_products_args', '_s_woocommerce_related_products_args' );
 
-if ( ! function_exists( '_s_woocommerce_product_columns_wrapper' ) ) {
-	/**
-	 * Product columns wrapper.
-	 *
-	 * @return  void
-	 */
-	function _s_woocommerce_product_columns_wrapper() {
-		$columns = _s_woocommerce_loop_columns();
-		echo '<div class="columns-' . absint( $columns ) . '">';
-	}
-}
-add_action( 'woocommerce_before_shop_loop', '_s_woocommerce_product_columns_wrapper', 40 );
-
-if ( ! function_exists( '_s_woocommerce_product_columns_wrapper_close' ) ) {
-	/**
-	 * Product columns wrapper close.
-	 *
-	 * @return  void
-	 */
-	function _s_woocommerce_product_columns_wrapper_close() {
-		echo '</div>';
-	}
-}
-add_action( 'woocommerce_after_shop_loop', '_s_woocommerce_product_columns_wrapper_close', 40 );
-
 /**
  * Remove default WooCommerce wrapper.
  */
@@ -159,9 +118,8 @@ if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) {
 	 */
 	function _s_woocommerce_wrapper_before() {
 		?>
-		<div id="primary" class="content-area">
+			<main id="primary" class="site-main">
-			<main id="main" class="site-main" role="main">
+		<?php
-			<?php
 	}
 }
 add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
@@ -175,9 +133,8 @@ if ( ! function_exists( '_s_woocommerce_wrapper_after' ) ) {
 	 * @return void
 	 */
 	function _s_woocommerce_wrapper_after() {
-			?>
+		?>
 			</main><!-- #main -->
-		</div><!-- #primary -->
 		<?php
 	}
 }

index.php

@@ -15,8 +15,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
 		<?php
 		if ( have_posts() ) :
@@ -51,8 +50,7 @@ get_header();
 		endif;
 		?>
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</div><!-- #primary -->
 
 <?php
 get_sidebar();

js/customizer.js

@@ -1,3 +1,4 @@
+/* global wp, jQuery */
 /**
  * File customizer.js.
  *
@@ -7,7 +8,6 @@
  */
 
 ( function( $ ) {
-
 	// Site title and description.
 	wp.customize( 'blogname', function( value ) {
 		value.bind( function( to ) {
@@ -25,18 +25,18 @@
 		value.bind( function( to ) {
 			if ( 'blank' === to ) {
 				$( '.site-title, .site-description' ).css( {
-					'clip': 'rect(1px, 1px, 1px, 1px)',
+					clip: 'rect(1px, 1px, 1px, 1px)',
-					'position': 'absolute'
+					position: 'absolute',
 				} );
 			} else {
 				$( '.site-title, .site-description' ).css( {
-					'clip': 'auto',
+					clip: 'auto',
-					'position': 'relative'
+					position: 'relative',
 				} );
 				$( '.site-title a, .site-description' ).css( {
-					'color': to
+					color: to,
 				} );
 			}
 		} );
 	} );
-} )( jQuery );
+}( jQuery ) );

js/navigation.js

@@ -25,25 +25,32 @@
 		return;
 	}
 
-	menu.setAttribute( 'aria-expanded', 'false' );
+	if ( ! menu.classList.contains( 'nav-menu' ) ) {
-	if ( -1 === menu.className.indexOf( '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' );
-			menu.setAttribute( 'aria-expanded', 'false' );
 		} else {
 			container.className += ' toggled';
 			button.setAttribute( 'aria-expanded', 'true' );
-			menu.setAttribute( 'aria-expanded', 'true' );
 		}
 	};
 
+	// Close small menu when user clicks outside
+	document.addEventListener( 'click', function( event ) {
+		var isClickInside = container.contains( event.target );
+
+		if ( ! isClickInside ) {
+			container.className = container.className.replace( ' toggled', '' );
+			button.setAttribute( 'aria-expanded', 'false' );
+		}
+	} );
+
 	// Get all the link elements within the menu.
-	links    = menu.getElementsByTagName( 'a' );
+	links = menu.getElementsByTagName( 'a' );
 
 	// Each time a menu link is focused or blurred, toggle focus.
 	for ( i = 0, len = links.length; i < len; i++ ) {
@@ -58,11 +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';
@@ -76,13 +82,13 @@
 	/**
 	 * Toggles `focus` class to allow submenu access on tablets.
 	 */
-	( function( container ) {
+	( function() {
-		var touchStartFn, i,
+		var touchStartFn,
 			parentLink = container.querySelectorAll( '.menu-item-has-children > a, .page_item_has_children > a' );
 
 		if ( 'ontouchstart' in window ) {
 			touchStartFn = function( e ) {
-				var menuItem = this.parentNode, i;
+				var menuItem = this.parentNode;
 
 				if ( ! menuItem.classList.contains( 'focus' ) ) {
 					e.preventDefault();
@@ -103,4 +109,4 @@
 			}
 		}
 	}( container ) );
-} )();
+}() );

js/skip-link-focus-fix.js

@@ -1,31 +0,0 @@
-/**
- * File skip-link-focus-fix.js.
- *
- * Helps with accessibility for keyboard only users.
- *
- * Learn more: https://git.io/vWdr2
- */
-( function() {
-	var isIe = /(trident|msie)/i.test( navigator.userAgent );
-
-	if ( isIe && document.getElementById && window.addEventListener ) {
-		window.addEventListener( 'hashchange', function() {
-			var id = location.hash.substring( 1 ),
-				element;
-
-			if ( ! ( /^[A-z0-9_-]+$/.test( id ) ) ) {
-				return;
-			}
-
-			element = document.getElementById( id );
-
-			if ( element ) {
-				if ( ! ( /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) ) {
-					element.tabIndex = -1;
-				}
-
-				element.focus();
-			}
-		}, false );
-	}
-} )();

languages/_s.pot

@@ -1,43 +1,70 @@
-# Copyright (C) 2017 Automattic
+# Copyright (C) 2020 Automattic
 # This file is distributed under the GNU General Public License v2 or later.
 msgid ""
 msgstr ""
 "Project-Id-Version: _s 1.0.0\n"
-"Report-Msgid-Bugs-To: https://wordpress.org/tags/_s\n"
+"Report-Msgid-Bugs-To: https://wordpress.org/support/theme/_s\n"
-"POT-Creation-Date: 2016-12-23 16:00+0100\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
-"PO-Revision-Date: 2017-MO-DA HO:MI+ZONE\n"
+"POT-Creation-Date: 2020-04-17T21:03:15+00:00\n"
-"Last-Translator:\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
-"Language-Team: LANGUAGE <LL@li.org>\n"
+"X-Generator: WP-CLI 2.4.0\n"
-"X-Generator: grunt-wp-i18n 0.5.4\n"
+"X-Domain: _s\n"
 
-#: 404.php:17
+#. Theme Name of the theme
+msgid "_s"
+msgstr ""
+
+#. Theme URI of the theme
+msgid "https://underscores.me/"
+msgstr ""
+
+#. Description of the theme
+msgid "Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if you like. I'm a theme meant for hacking so don't use me as a <em>Parent Theme</em>. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for."
+msgstr ""
+
+#. Author of the theme
+msgid "Automattic"
+msgstr ""
+
+#. Author URI of the theme
+msgid "https://automattic.com/"
+msgstr ""
+
+#: 404.php:18
 msgid "Oops! That page can&rsquo;t be found."
 msgstr ""
 
-#: 404.php:21
+#: 404.php:22
-msgid ""
+msgid "It looks like nothing was found at this location. Maybe try one of the links below or a search?"
-"It looks like nothing was found at this location. Maybe try one of the "
-"links below or a search?"
 msgstr ""
 
-#: 404.php:30
+#: 404.php:31
 msgid "Most Used Categories"
 msgstr ""
 
-#: 404.php:47
 #. translators: %1$s: smiley
+#: 404.php:49
 msgid "Try looking in the monthly archives. %1$s"
 msgstr ""
 
-#: comments.php:34
 #. translators: 1: title.
+#: comments.php:35
 msgid "One thought on &ldquo;%1$s&rdquo;"
 msgstr ""
 
-#: comments.php:67
+#. translators: 1: comment count number, 2: title.
+#: comments.php:41
+msgctxt "comments title"
+msgid "%1$s thought on &ldquo;%2$s&rdquo;"
+msgid_plural "%1$s thoughts on &ldquo;%2$s&rdquo;"
+msgstr[0] ""
+msgstr[1] ""
+
+#: comments.php:68
 msgid "Comments are closed."
 msgstr ""
 
@@ -45,142 +72,127 @@ msgstr ""
 msgid "https://wordpress.org/"
 msgstr ""
 
-#: footer.php:20
 #. translators: %s: CMS name, i.e. WordPress.
+#: footer.php:21
 msgid "Proudly powered by %s"
 msgstr ""
 
-#: footer.php:25
 #. translators: 1: Theme name, 2: Theme author.
+#: footer.php:27
 msgid "Theme: %1$s by %2$s."
 msgstr ""
 
-#: functions.php:47
+#: functions.php:53
 msgid "Primary"
 msgstr ""
 
-#: functions.php:105
+#: functions.php:130
 msgid "Sidebar"
 msgstr ""
 
-#: functions.php:107
+#: functions.php:132
 msgid "Add widgets here."
 msgstr ""
 
-#: header.php:24
+#: header.php:26
 msgid "Skip to content"
 msgstr ""
 
-#: header.php:45
+#: header.php:49
 msgid "Primary Menu"
 msgstr ""
 
-#: inc/template-tags.php:52
+#. translators: %s: post date.
+#: inc/template-tags.php:30
+msgctxt "post date"
+msgid "Posted on %s"
+msgstr ""
+
+#. translators: %s: post author.
+#: inc/template-tags.php:46
+msgctxt "post author"
+msgid "by %s"
+msgstr ""
+
 #. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:63
 msgid ", "
 msgstr ""
 
-#: inc/template-tags.php:55
 #. translators: 1: list of categories.
+#: inc/template-tags.php:66
 msgid "Posted in %1$s"
 msgstr ""
 
-#: inc/template-tags.php:62
+#. translators: used between list items, there is a space after the comma
+#: inc/template-tags.php:70
+msgctxt "list item separator"
+msgid ", "
+msgstr ""
+
 #. translators: 1: list of tags.
+#: inc/template-tags.php:73
 msgid "Tagged %1$s"
 msgstr ""
 
-#: inc/template-tags.php:72
 #. translators: %s: post title
+#: inc/template-tags.php:83
 msgid "Leave a Comment<span class=\"screen-reader-text\"> on %s</span>"
 msgstr ""
 
-#: inc/template-tags.php:89 template-parts/content-page.php:35
 #. translators: %s: Name of current post. Only visible to screen readers
+#: inc/template-tags.php:100
+#: template-parts/content-page.php:39
 msgid "Edit <span class=\"screen-reader-text\">%s</span>"
 msgstr ""
 
-#: search.php:21
+#: inc/woocommerce.php:186
+msgid "View your shopping cart"
+msgstr ""
+
+#. translators: number of items in the mini cart.
+#: inc/woocommerce.php:190
+msgid "%d item"
+msgid_plural "%d items"
+msgstr[0] ""
+msgstr[1] ""
+
 #. translators: %s: search query.
+#: search.php:22
 msgid "Search Results for: %s"
 msgstr ""
 
+#: single.php:23
+msgid "Previous:"
+msgstr ""
+
+#: single.php:24
+msgid "Next:"
+msgstr ""
+
 #: template-parts/content-none.php:14
 msgid "Nothing Found"
 msgstr ""
 
-#: template-parts/content-none.php:25
 #. translators: 1: link to WP admin new post page.
+#: template-parts/content-none.php:24
 msgid "Ready to publish your first post? <a href=\"%1$s\">Get started here</a>."
 msgstr ""
 
-#: template-parts/content-none.php:38
+#: template-parts/content-none.php:37
-msgid ""
+msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords."
-"Sorry, but nothing matched your search terms. Please try again with some "
-"different keywords."
 msgstr ""
 
 #: template-parts/content-none.php:44
-msgid ""
+msgid "It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps searching can help."
-"It seems we can&rsquo;t find what you&rsquo;re looking for. Perhaps "
-"searching can help."
 msgstr ""
 
-#: template-parts/content-page.php:22 template-parts/content.php:45
+#: template-parts/content-page.php:25
+#: template-parts/content.php:53
 msgid "Pages:"
 msgstr ""
 
-#: template-parts/content.php:34
 #. translators: %s: Name of current post. Only visible to screen readers
+#: template-parts/content.php:40
 msgid "Continue reading<span class=\"screen-reader-text\"> \"%s\"</span>"
 msgstr ""
-
-#. Theme Name of the plugin/theme
-msgid "_s"
-msgstr ""
-
-#. Theme URI of the plugin/theme
-msgid "https://underscores.me/"
-msgstr ""
-
-#. Description of the plugin/theme
-msgid ""
-"Hi. I'm a starter theme called <code>_s</code>, or <em>underscores</em>, if "
-"you like. I'm a theme meant for hacking so don't use me as a <em>Parent "
-"Theme</em>. Instead try turning me into the next, most awesome, WordPress "
-"theme out there. That's what I'm here for."
-msgstr ""
-
-#. Author of the plugin/theme
-msgid "Automattic"
-msgstr ""
-
-#. Author URI of the plugin/theme
-msgid "https://automattic.com/"
-msgstr ""
-
-#: comments.php:40
-#. translators: 1: comment count number, 2: title.
-msgctxt "comments title"
-msgid "%1$s thought on &ldquo;%2$s&rdquo;"
-msgid_plural "%1$s thoughts on &ldquo;%2$s&rdquo;"
-msgstr[0] ""
-msgstr[1] ""
-
-#: inc/template-tags.php:29
-#. translators: %s: post date.
-msgctxt "post date"
-msgid "Posted on %s"
-msgstr ""
-
-#: inc/template-tags.php:35
-#. translators: %s: post author.
-msgctxt "post author"
-msgid "by %s"
-msgstr ""
-
-#: inc/template-tags.php:59
-#. translators: used between list items, there is a space after the comma
-msgctxt "list item separator"
-msgid ", "
-msgstr ""

layouts/content-sidebar.css

@@ -1,34 +0,0 @@
-/*
- * Theme Name: _s
- *
- * Layout: Content-Sidebar
- *
- * Learn more: https://developer.wordpress.org/themes/basics/template-files/
-*/
-
-.content-area {
-	float: left;
-	margin: 0 -25% 0 0;
-	width: 100%;
-}
-.site-main {
-	margin: 0 25% 0 0;
-}
-.site-content .widget-area {
-	float: right;
-	overflow: hidden;
-	width: 25%;
-}
-.site-footer {
-	clear: both;
-	width: 100%;
-}
-
-.no-sidebar .content-area {
-	float: none;
-	margin-left: auto;
-	margin-right: auto;
-}
-.no-sidebar .site-main {
-	margin-right: 0;
-}

layouts/sidebar-content.css

@@ -1,34 +0,0 @@
-/*
- * Theme Name: _s
- *
- * Layout: Sidebar-Content
- *
- * Learn more: https://developer.wordpress.org/themes/basics/template-files/
-*/
-
-.content-area {
-	float: right;
-	margin: 0 0 0 -25%;
-	width: 100%;
-}
-.site-main {
-	margin: 0 0 0 25%;
-}
-.site-content .widget-area {
-	float: left;
-	overflow: hidden;
-	width: 25%;
-}
-.site-footer {
-	clear: both;
-	width: 100%;
-}
-
-.no-sidebar .content-area {
-	float: none;
-	margin-left: auto;
-	margin-right: auto;
-}
-.no-sidebar .site-main {
-	margin-right: 0;
-}

package.json

@@ -0,0 +1,54 @@
+{
+  "name": "underscores",
+  "version": "1.0.0",
+  "description": "Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme meant for hacking so don't use me as a Parent Theme. Instead try turning me into the next, most awesome, WordPress theme out there. That's what I'm here for.",
+  "author": "Automattic Theme Team",
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "WordPress",
+    "Theme"
+  ],
+  "homepage": "https://github.com/Automattic/_s#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/_s.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Automattic/_s/issues"
+  },
+  "devDependencies": {
+    "@wordpress/scripts": "^9.0.0",
+    "archiver": "^4.0.1",
+    "node-sass": "^4.14.0",
+    "rtlcss": "^2.5.0",
+    "autoprefixer": "^9.7.6",
+    "chokidar-cli": "^2.1.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^7.1.1"
+  },
+  "rtlcssConfig": {
+    "options": {
+      "autoRename": false,
+      "autoRenameStrict": false,
+      "blacklist": {},
+      "clean": true,
+      "greedy": false,
+      "processUrls": false,
+      "stringMap": []
+    },
+    "plugins": [],
+    "map": false
+  },
+  "scripts": {
+    "compile:css": "node-sass --source-map true sass/style.scss style.css && node-sass --source-map true sass/woocommerce.scss woocommerce.css",
+    "lint:css": "stylelint '*.css' --fix",
+    "compile:rtl": "rtlcss style.css style-rtl.css",
+    "lint:scss": "wp-scripts lint-style 'sass/**/*.scss'",
+    "lint:js": "wp-scripts lint-js 'js/*.js'",
+    "bundle": "node bin/bundle.js",
+    "postcss": "postcss *.css --use autoprefixer --replace",
+    "sass:build": "npm-run-all -s compile:css postcss",
+    "sass:watch": "chokidar 'sass/**/*.scss' -c 'npm run sass:build'",
+    "dev": "npm-run-all -p sass:*"
+  }
+}

page.php

@@ -15,8 +15,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
 		<?php
 		while ( have_posts() ) :
@@ -32,8 +31,7 @@ get_header();
 		endwhile; // End of the loop.
 		?>
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</div><!-- #primary -->
 
 <?php
 get_sidebar();

phpcs.xml.dist

@@ -1,9 +1,9 @@
 <?xml version="1.0"?>
 <ruleset name="WordPress Theme Coding Standards">
 	<!-- See https://github.com/squizlabs/PHP_CodeSniffer/wiki/Annotated-ruleset.xml -->
-	<!-- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards -->
+	<!-- See https://github.com/WordPress/WordPress-Coding-Standards -->
-	<!-- See https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/wiki -->
+	<!-- See https://github.com/WPTRT/WPThemeReview -->
-	<!-- See https://github.com/wimg/PHPCompatibility -->
+	<!-- See https://github.com/PHPCompatibility/PHPCompatibilityWP -->
 
 	<!-- Set a description for this ruleset. -->
 	<description>A custom set of code standard rules to check for WordPress themes.</description>
@@ -28,21 +28,28 @@
 	<!-- Check up to 8 files simultanously. -->
 	<arg name="parallel" value="8"/>
 
-	<!-- Only check the PHP, CSS and SCSS files. JS files are checked separately with JSCS and JSHint. -->
+	<!-- Only check the PHP files. JS, and CSS files are checked separately with @wordpress/scripts package. -->
-	<arg name="extensions" value="php,css,scss/css"/>
+	<arg name="extensions" value="php"/>
 
 	<!-- Check all files in this directory and the directories below it. -->
 	<file>.</file>
 
+	<!-- Exclude patterns. -->
+	<exclude-pattern>/vendor/*</exclude-pattern>
+	<exclude-pattern>/node_modules/*</exclude-pattern>
+
 
 	<!--
 	#############################################################################
-	USE THE WordPress RULESET
+	USE THE WordPress AND THE Theme Review RULESET
 	#############################################################################
 	-->
 
-	<rule ref="WordPress"/>
+	<rule ref="WordPress">
-
+		<!-- This rule does not apply here since the _s prefix should be changed by the theme author. -->
+		<exclude name="WordPress.NamingConventions.PrefixAllGlobals.ShortPrefixPassed"/>
+	</rule>
+	<rule ref="WPThemeReview"/>
 
 	<!--
 	#############################################################################
@@ -97,36 +104,7 @@
 	#############################################################################
 	-->
 
-
+	<config name="testVersion" value="5.6-"/>
-	<config name="testVersion" value="5.2-99.0"/>
+	<rule ref="PHPCompatibilityWP"/>
-	<rule ref="PHPCompatibility">
-		<!-- Whitelist PHP native classes, interfaces, functions and constants which
-			 are back-filled by WP.
-
-			 Based on:
-			 * /wp-includes/compat.php
-			 * /wp-includes/random_compat/random.php
-		-->
-		<exclude name="PHPCompatibility.PHP.NewClasses.errorFound"/>
-		<exclude name="PHPCompatibility.PHP.NewClasses.typeerrorFound"/>
-
-		<exclude name="PHPCompatibility.PHP.NewConstants.json_pretty_printFound"/>
-		<exclude name="PHPCompatibility.PHP.NewConstants.php_version_idFound"/>
-
-		<exclude name="PHPCompatibility.PHP.NewFunctions.hash_equalsFound"/>
-		<exclude name="PHPCompatibility.PHP.NewFunctions.json_last_error_msgFound"/>
-		<exclude name="PHPCompatibility.PHP.NewFunctions.random_intFound"/>
-		<exclude name="PHPCompatibility.PHP.NewFunctions.random_bytesFound"/>
-		<exclude name="PHPCompatibility.PHP.NewFunctions.array_replace_recursiveFound"/>
-
-		<exclude name="PHPCompatibility.PHP.NewInterfaces.jsonserializableFound"/>
-	</rule>
-
-	<!-- Whitelist the WP Core mysql_to_rfc3339() function. -->
-	<rule ref="PHPCompatibility.PHP.RemovedExtensions">
-		<properties>
-			<property name="functionWhitelist" type="array" value="mysql_to_rfc3339"/>
-		</properties>
-	</rule>
 
 </ruleset>

readme.txt

@@ -4,7 +4,8 @@ Contributors: automattic
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 
 Requires at least: 4.5
-Tested up to: 4.8
+Tested up to: 5.4
+Requires PHP: 5.6
 Stable tag: 1.0.0
 License: GNU General Public License v2 or later
 License URI: LICENSE
@@ -25,7 +26,7 @@ Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme mean
 
 = Does this theme support any plugins? =
 
-_s includes support for Infinite Scroll in Jetpack.
+_s includes support for WooCommerce and for Infinite Scroll in Jetpack.
 
 == Changelog ==
 
@@ -34,5 +35,5 @@ _s includes support for Infinite Scroll in Jetpack.
 
 == Credits ==
 
-* Based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html)
+* Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html)
-* normalize.css https://necolas.github.io/normalize.css/, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](https://opensource.org/licenses/MIT)
+* normalize.css https://necolas.github.io/normalize.css/, (C) 2012-2018 Nicolas Gallagher and Jonathan Neal, [MIT](https://opensource.org/licenses/MIT)

rtl.css

@@ -1,17 +0,0 @@
-/*
-Theme Name: _s
-
-Adding support for languages written in a Right To Left (RTL) direction is easy -
-it's just a matter of overwriting all the horizontal positioning attributes
-of your CSS stylesheet in a separate stylesheet file named rtl.css.
-
-https://codex.wordpress.org/Right-to-Left_Language_Support
-
-*/
-
-/*
-body {
-	direction: rtl;
-	unicode-bidi: embed;
-}
-*/

sass/_normalize.scss

@@ -1,4 +1,4 @@
-/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
 	 ========================================================================== */
@@ -9,8 +9,8 @@
  */
 
 html {
-	line-height: 1.15; /* 1 */
+	line-height: 1.15;
-	-webkit-text-size-adjust: 100%; /* 2 */
+	-webkit-text-size-adjust: 100%;
 }
 
 /* Sections
@@ -24,6 +24,14 @@ body {
 	margin: 0;
 }
 
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+	display: block;
+}
+
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
@@ -43,9 +51,9 @@ h1 {
  */
 
 hr {
-	box-sizing: content-box; /* 1 */
+	box-sizing: content-box;
-	height: 0; /* 1 */
+	height: 0;
-	overflow: visible; /* 2 */
+	overflow: visible;
 }
 
 /**
@@ -54,8 +62,8 @@ hr {
  */
 
 pre {
-	font-family: monospace, monospace; /* 1 */
+	font-family: monospace, monospace;
-	font-size: 1em; /* 2 */
+	font-size: 1em;
 }
 
 /* Text-level semantics
@@ -75,9 +83,9 @@ a {
  */
 
 abbr[title] {
-	border-bottom: none; /* 1 */
+	border-bottom: none;
-	text-decoration: underline; /* 2 */
+	text-decoration: underline;
-	text-decoration: underline dotted; /* 2 */
+	text-decoration: underline dotted;
 }
 
 /**
@@ -97,8 +105,8 @@ strong {
 code,
 kbd,
 samp {
-	font-family: monospace, monospace; /* 1 */
+	font-family: monospace, monospace;
-	font-size: 1em; /* 2 */
+	font-size: 1em;
 }
 
 /**
@@ -154,10 +162,10 @@ input,
 optgroup,
 select,
 textarea {
-	font-family: inherit; /* 1 */
+	font-family: inherit;
-	font-size: 100%; /* 1 */
+	font-size: 100%;
-	line-height: 1.15; /* 1 */
+	line-height: 1.15;
-	margin: 0; /* 2 */
+	margin: 0;
 }
 
 /**
@@ -166,7 +174,7 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
 	overflow: visible;
 }
 
@@ -176,7 +184,7 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
 	text-transform: none;
 }
 
@@ -230,12 +238,12 @@ fieldset {
  */
 
 legend {
-	box-sizing: border-box; /* 1 */
+	box-sizing: border-box;
-	color: inherit; /* 2 */
+	color: inherit;
-	display: table; /* 1 */
+	display: table;
-	max-width: 100%; /* 1 */
+	max-width: 100%;
-	padding: 0; /* 3 */
+	padding: 0;
-	white-space: normal; /* 1 */
+	white-space: normal;
 }
 
 /**
@@ -261,8 +269,8 @@ textarea {
 
 [type="checkbox"],
 [type="radio"] {
-	box-sizing: border-box; /* 1 */
+	box-sizing: border-box;
-	padding: 0; /* 2 */
+	padding: 0;
 }
 
 /**
@@ -280,8 +288,8 @@ textarea {
  */
 
 [type="search"] {
-	-webkit-appearance: textfield; /* 1 */
+	-webkit-appearance: textfield;
-	outline-offset: -2px; /* 2 */
+	outline-offset: -2px;
 }
 
 /**
@@ -298,8 +306,8 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-	-webkit-appearance: button; /* 1 */
+	-webkit-appearance: button;
-	font: inherit; /* 2 */
+	font: inherit;
 }
 
 /* Interactive

sass/elements/_elements.scss

@@ -1,15 +1,17 @@
+/* Inherit box-sizing to more easily change it's value on a component level.
+@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
 html {
 	box-sizing: border-box;
 }
 
-*,
-*:before,
-*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-	box-sizing: inherit;
-}
-
 body {
-	background: $color__background-body; /* Fallback for when there is no custom background color defined. */
+	background: $color__background-body; // Fallback for when there is no custom background color defined.
 }
 
 hr {
@@ -22,12 +24,12 @@ hr {
 @import "lists";
 
 img {
-	height: auto; /* Make sure images are scaled correctly. */
+	height: auto; // Make sure images are scaled correctly.
-	max-width: 100%; /* Adhere to container width. */
+	max-width: 100%; // Adhere to container width.
 }
 
 figure {
-	margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
+	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
 }
 
 @import "tables";

sass/elements/_lists.scss

@@ -1,4 +1,5 @@
-ul, ol {
+ul,
+ol {
 	margin: 0 0 1.5em 3em;
 }
 
@@ -17,7 +18,7 @@ li > ol {
 }
 
 dt {
-	font-weight: bold;
+	font-weight: 700;
 }
 
 dd {

sass/forms/_buttons.scss

@@ -6,10 +6,10 @@ input[type="submit"] {
 	border-color: $color__border-button;
 	border-radius: 3px;
 	background: $color__background-button;
-	color: rgba(0, 0, 0, .8);
+	color: rgba(0, 0, 0, 0.8);
-	@include font-size(0.75);
+	font-size: 0.75rem;
 	line-height: 1;
-	padding: .6em 1em .4em;
+	padding: 0.6em 1em 0.4em;
 
 	&:hover {
 		border-color: $color__border-button-hover;

sass/forms/_forms.scss

@@ -1,3 +1,2 @@
 @import "buttons";
-
 @import "fields";

sass/layout/_content-sidebar.scss

@@ -1,22 +1,27 @@
-.content-area {
+.site {
-	float: left;
+	display: grid;
-	margin: 0 (-$size__site-sidebar) 0 0;
+	grid-template-columns: auto ($size__site-sidebar);
-	width: $size__site-main;
+	grid-template-areas:
+		"header header"
+		"main sidebar"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 $size__site-sidebar 0 0;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
+.widget-area {
-	float: right;
+	grid-area: sidebar;
-	overflow: hidden;
-	width: $size__site-sidebar;
 }
 
 .site-footer {
-	clear: both;
+	grid-area: footer;
-	width: $size__site-main;
 }
 
 @import "no-sidebar";

sass/layout/_no-sidebar.scss

@@ -1,11 +1,11 @@
 .no-sidebar {
-	.content-area {
-		float: none;
-		margin-left: auto;
-		margin-right: auto;
-	}
 
-	.site-main {
+	.site {
-		margin-right: 0;
+		display: grid;
+		grid-template-columns: auto;
+		grid-template-areas:
+			"header"
+			"main"
+			"footer";
 	}
 }

sass/layout/_sidebar-content.scss

@@ -1,22 +1,27 @@
-.content-area {
+.site {
-	float: right;
+	display: grid;
-	margin: 0 0 0 (-$size__site-sidebar);
+	grid-template-columns: ($size__site-sidebar) auto;
-	width: $size__site-main;
+	grid-template-areas:
+		"header header"
+		"sidebar main"
+		"footer footer";
+}
+
+.site-header {
+	grid-area: header;
 }
 
 .site-main {
-	margin: 0 0 0 $size__site-sidebar;
+	grid-area: main;
+	overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
 }
 
-.site-content .widget-area {
+.widget-area {
-	float: left;
+	grid-area: sidebar;
-	overflow: hidden;
-	width: $size__site-sidebar;
 }
 
 .site-footer {
-	clear: both;
+	grid-area: footer;
-	width: $size__site-main;
 }
 
 @import "no-sidebar";

sass/media/_captions.scss

@@ -3,6 +3,7 @@
 	max-width: 100%;
 
 	img[class*="wp-image-"] {
+
 		@include center-block;
 	}
 

sass/media/_galleries.scss

@@ -1,18 +1,20 @@
 .gallery {
 	margin-bottom: 1.5em;
+	display: grid;
+	grid-gap: 1.5em;
 }
 
 .gallery-item {
 	display: inline-block;
 	text-align: center;
-	vertical-align: top;
 	width: 100%;
+}
 
-	// Loops to enumerate the classes for gallery columns.
+// Loops to enumerate the classes for gallery columns.
-	@for $i from 2 through 9 {
+@for $i from 2 through 9 {
-		.gallery-columns-#{$i} & {
+
-			max-width: map-get( $columns, $i );
+	.gallery-columns-#{$i} {
-		}
+		grid-template-columns: repeat($i, 1fr);
 	}
 }
 

sass/mixins/_mixins-master.scss

@@ -1,7 +1,53 @@
-// Rem output with px fallback
+@mixin font-1($weight) {
-@mixin font-size($sizeValue: 1) {
+	// see functions.php->google_fonts()
-	font-size: ($sizeValue * 16) * 1px;
+	// and functions.php->_s_scripts()
-	font-size: $sizeValue * 1rem;
+	font-family:
+		Montserrat,
+		-apple-system,
+		BlinkMacSystemFont,
+		"Segoe UI",
+		Roboto,
+		Oxygen-Sans,
+		Ubuntu,
+		Cantarell,
+		"Helvetica Neue",
+		sans-serif;
+
+	@if $weight == regular {
+		font-weight: 400;
+	} @else if $weight == bold {
+		font-weight: 600;
+	} @else if $weight == extra-bold {
+		font-weight: 700;
+	} @else {
+
+		@error "font-weight #{$weight} not in valid font-weights for font-1: 'Montserrat'.";
+	}
+}
+
+@mixin font-body($weight: regular) {
+
+	@include font-1($weight);
+}
+
+@mixin font-title($weight: regular) {
+
+	@include font-1($weight);
+}
+
+@mixin font-link($weight: regular) {
+
+	@include font-1($weight);
+}
+
+@mixin font-code($weight: regular) {
+	font-family: $font__code;
+	font-weight: $weight;
+}
+
+@mixin font-pre($weight: regular) {
+	font-family: $font__pre;
+	font-weight: $weight;
 }
 
 // Center block
@@ -11,19 +57,9 @@
 	margin-right: auto;
 }
 
-// Clearfix
-@mixin clearfix() {
-	content: "";
-	display: table;
-	table-layout: fixed;
-}
-
-// Clear after (not all clearfix need this also)
-@mixin clearfix-after() {
-	clear: both;
-}
-
 // Column width with margin
 @mixin column-width($numberColumns: 3) {
-	width: map-get( $columns, $numberColumns ) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns );
+	width:
+		map-get($columns, $numberColumns) -
+		(($columns__margin * ($numberColumns - 1)) / $numberColumns);
 }

sass/modules/_accessibility.scss

@@ -9,7 +9,7 @@
 	padding: 0;
 	position: absolute !important;
 	width: 1px;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+	word-wrap: normal !important; // Many screen reader and browser combinations announce broken words as they would appear visually.
 
 	&:focus {
 		background-color: $color__background-screen;
@@ -19,8 +19,8 @@
 		clip-path: none;
 		color: $color__text-screen;
 		display: block;
-		@include font-size(0.875);
+		font-size: 0.875rem;
-		font-weight: bold;
+		font-weight: 700;
 		height: auto;
 		left: 5px;
 		line-height: normal;
@@ -28,11 +28,11 @@
 		text-decoration: none;
 		top: 5px;
 		width: auto;
-		z-index: 100000; /* Above WP toolbar. */
+		z-index: 100000; // Above WP toolbar.
 	}
 }
 
 /* Do not show the outline on the skip link target. */
-#content[tabindex="-1"]:focus {
+#primary[tabindex="-1"]:focus {
 	outline: 0;
 }

sass/modules/_alignments.scss

@@ -1,16 +1,19 @@
 .alignleft {
-	display: inline;
 	float: left;
 	margin-right: 1.5em;
+	margin-bottom: 1.5em;
 }
 
 .alignright {
-	display: inline;
 	float: right;
 	margin-left: 1.5em;
+	margin-bottom: 1.5em;
 }
 
 .aligncenter {
 	clear: both;
+
 	@include center-block;
+
+	margin-bottom: 1.5em;
 }

sass/modules/_clearings.scss

@@ -1,23 +0,0 @@
-.clear:before,
-.clear:after,
-.entry-content:before,
-.entry-content:after,
-.comment-content:before,
-.comment-content:after,
-.site-header:before,
-.site-header:after,
-.site-content:before,
-.site-content:after,
-.site-footer:before,
-.site-footer:after {
-	@include clearfix;
-}
-
-.clear:after,
-.entry-content:after,
-.comment-content:after,
-.site-header:after,
-.site-content:after,
-.site-footer:after {
-	@include clearfix-after;
-}

sass/modules/_infinite-scroll.scss

@@ -1,10 +1,10 @@
-/* Globally hidden elements when Infinite Scroll is supported and in use. */
+/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
-.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
+.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
+.infinite-scroll.neverending .site-footer {
 	display: none;
 }
 
-/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
+/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
 .infinity-end.neverending .site-footer {
 	display: block;
 }

sass/navigation/_links.scss

@@ -4,14 +4,17 @@ a {
 	&:visited {
 		color: $color__link-visited;
 	}
+
 	&:hover,
 	&:focus,
 	&:active {
 		color: $color__link-hover;
 	}
+
 	&:focus {
 		outline: thin dotted;
 	}
+
 	&:hover,
 	&:active {
 		outline: 0;

sass/navigation/_menus.scss

@@ -1,7 +1,5 @@
 .main-navigation {
-	clear: both;
 	display: block;
-	float: left;
 	width: 100%;
 
 	ul {
@@ -24,9 +22,11 @@
 			}
 
 			li {
+
 				&:hover > ul,
 				&.focus > ul {
-					left: 100%;
+					display: block;
+					left: auto;
 				}
 			}
 
@@ -50,7 +50,6 @@
 	}
 
 	li {
-		float: left;
 		position: relative;
 
 		&:hover > a,
@@ -77,11 +76,13 @@
 }
 
 @media screen and (min-width: 37.5em) {
+
 	.menu-toggle {
 		display: none;
 	}
+
 	.main-navigation ul {
-		display: block;
+		display: flex;
 	}
 }
 
@@ -91,17 +92,18 @@
 
 	.site-main & {
 		margin: 0 0 1.5em;
-		overflow: hidden;
+	}
+
+	.nav-links {
+		display: flex;
 	}
 
 	.nav-previous {
-		float: left;
+		flex: 1 0 50%;
-		width: 50%;
 	}
 
 	.nav-next {
-		float: right;
+		text-align: end;
-		text-align: right;
+		flex: 1 0 50%;
-		width: 50%;
 	}
 }

sass/shop/_checkout.scss

@@ -1,8 +1,7 @@
-/**
- * Checkout
- */
 @media screen and (min-width: 768px) {
+
 	.col2-set {
+
 		.form-row-first {
 			float: left;
 			margin-right: $columns__margin;
@@ -15,6 +14,7 @@
 
 		.form-row-first,
 		.form-row-last {
+
 			@include column-width(2);
 		}
 	}

sass/shop/_components.scss

@@ -5,7 +5,6 @@
 	position: relative;
 	margin: 0;
 	padding: 0;
-	@include clearfix;
 
 	.cart-contents {
 		text-decoration: none;
@@ -31,12 +30,14 @@
 	line-height: 1.618;
 	font-size: 1em;
 	width: 5.3em;
-	font-family: 'star';
+	/* stylelint-disable font-family-no-missing-generic-family-keyword */
+	font-family: star;
+	/* stylelint-enable */
 	font-weight: 400;
 
-	&:before {
+	&::before {
 		content: "\53\53\53\53\53";
-		opacity: .25;
+		opacity: 0.25;
 		float: left;
 		top: 0;
 		left: 0;
@@ -52,7 +53,7 @@
 		padding-top: 1.5em;
 	}
 
-	span:before {
+	span::before {
 		content: "\53\53\53\53\53";
 		top: 0;
 		position: absolute;
@@ -62,6 +63,7 @@
 }
 
 p.stars {
+
 	a {
 		position: relative;
 		height: 1em;
@@ -72,7 +74,8 @@ p.stars {
 		margin-right: 1px;
 		font-weight: 400;
 
-		&:before {
+		&::before {
+
 			display: block;
 			position: absolute;
 			top: 0;
@@ -80,25 +83,30 @@ p.stars {
 			width: 1em;
 			height: 1em;
 			line-height: 1;
-			font-family: "star";
+			/* stylelint-disable font-family-no-missing-generic-family-keyword */
+			font-family: star;
+			/* stylelint-enable */
 			content: "\53";
 			color: $color__text-main;
 			text-indent: 0;
-			opacity: .25;
+			opacity: 0.25;
 		}
 
 		&:hover {
-			~ a:before {
+
+			~ a::before {
 				content: "\53";
 				color: $color__text-main;
-				opacity: .25;
+				opacity: 0.25;
 			}
 		}
 	}
 
 	&:hover {
+
 		a {
-			&:before {
+
+			&::before {
 				content: "\53";
 				color: $color__link;
 				opacity: 1;
@@ -107,22 +115,25 @@ p.stars {
 	}
 
 	&.selected {
+
 		a.active {
-			&:before {
+
+			&::before {
 				content: "\53";
 				color: $color__link;
 				opacity: 1;
 			}
 
-			~ a:before {
+			~ a::before {
 				content: "\53";
 				color: $color__text-main;
-				opacity: .25;
+				opacity: 0.25;
 			}
 		}
 
 		a:not(.active) {
-			&:before {
+
+			&::before {
 				content: "\53";
 				color: $color__link;
 				opacity: 1;
@@ -135,6 +146,7 @@ p.stars {
  * Tabs
  */
 .woocommerce-tabs {
+
 	ul.tabs {
 		list-style: none;
 		margin: 0;
@@ -154,6 +166,7 @@ p.stars {
 	}
 
 	.panel {
+
 		h2:first-of-type {
 			margin-bottom: 1em;
 		}
@@ -187,13 +200,16 @@ p.stars {
  * Forms
  */
 .form-row {
+
 	&.woocommerce-validated {
+
 		input.input-text {
 			box-shadow: inset 2px 0 0 $woocommerce__color-success;
 		}
 	}
 
 	&.woocommerce-invalid {
+
 		input.input-text {
 			box-shadow: inset 2px 0 0 $woocommerce__color-error;
 		}
@@ -201,7 +217,7 @@ p.stars {
 }
 
 .required {
-	color: red;
+	color: #f00;
 }
 
 /**
@@ -212,7 +228,6 @@ p.stars {
 .woocommerce-error,
 .woocommerce-noreviews,
 p.no-comments {
-	@include clearfix;
 	background-color: $woocommerce__color-success;
 	clear: both;
 }
@@ -239,10 +254,12 @@ p.no-comments {
 }
 
 @media screen and (min-width: 48em) {
+
 	/**
 	 * Header cart
 	 */
 	.site-header-cart {
+
 		.widget_shopping_cart {
 			position: absolute;
 			top: 100%;
@@ -255,6 +272,7 @@ p.no-comments {
 
 		&:hover,
 		&.focus {
+
 			.widget_shopping_cart {
 				left: 0;
 				display: block;

sass/shop/_products.scss

@@ -1,8 +1,4 @@
-/**
- * Products
- */
 ul.products {
-	@include clearfix;
 	margin: 0;
 	padding: 0;
 
@@ -26,8 +22,11 @@ ul.products {
 }
 
 @media screen and (min-width: 48em) {
+
 	ul.products {
+
 		li.product {
+
 			@include column-width(3);
 			float: left;
 			margin-right: $columns__margin;
@@ -42,22 +41,24 @@ ul.products {
 		}
 	}
 
-	.columns-1 {
+	ul.products.columns-1 {
-		ul.products {
+
-			li.product {
+		li.product {
-				float: none;
+			float: none;
-				width: 100%;
+			width: 100%;
-			}
 		}
+
 	}
 
 	@for $i from 2 through 6 {
-		.columns-#{$i} {
+
-			ul.products {
+		ul.products.columns-#{$i} {
-				li.product {
+
-					@include column-width( $i );
+			li.product {
-				}
+
+				@include column-width( $i );
 			}
+
 		}
 	}
 }

sass/shop/_single-product.scss

@@ -1,17 +1,15 @@
-/**
- * Single Product
- */
 .single-product {
+
 	div.product {
-		@include clearfix;
 		position: relative;
 
 		.woocommerce-product-gallery {
 			position: relative;
+			float: left;
 
 			.woocommerce-product-gallery__trigger {
 				position: absolute;
-				top: 1em;
+				top: 2em;
 				right: 1em;
 				display: block;
 				z-index: 99;
@@ -22,7 +20,6 @@
 			}
 
 			.flex-control-thumbs {
-				@include clearfix;
 				margin: 0;
 				padding: 0;
 
@@ -32,7 +29,7 @@
 					float: left;
 
 					img {
-						opacity: .5;
+						opacity: 0.5;
 
 						&.flex-active {
 							opacity: 1;
@@ -40,6 +37,7 @@
 					}
 
 					&:hover {
+
 						img {
 							opacity: 1;
 						}
@@ -48,9 +46,13 @@
 			}
 
 			@for $i from 2 through 5 {
+
 				&.woocommerce-product-gallery--columns-#{$i} {
+
 					.flex-control-thumbs {
+
 						li {
+
 							@include column-width($i);
 
 							&:nth-child(#{$i}n) {
@@ -69,7 +71,8 @@
 }
 
 .stock {
-	&:empty:before {
+
+	&:empty::before {
 		display: none;
 	}
 

sass/shop/_tables.scss

@@ -1,46 +1,49 @@
-/**
- * Shop tables
- */
 table.shop_table_responsive {
+
 	thead {
 		display: none;
 	}
 
 	tbody {
+
 		th {
 			display: none;
 		}
 	}
 
 	tr {
+
 		td {
 			display: block;
 			text-align: right;
 			clear: both;
 
-			&:before {
+			&::before {
-				content: attr(data-title) ': ';
+				content: attr(data-title) ": ";
 				float: left;
 			}
 
 			&.product-remove {
+
 				a {
 					text-align: left;
 				}
 
-				&:before {
+				&::before {
 					display: none;
 				}
 			}
 
 			&.actions,
 			&.download-actions {
-				&:before {
+
+				&::before {
 					display: none;
 				}
 			}
 
 			&.download-actions {
+
 				.button {
 					display: block;
 					text-align: center;
@@ -51,26 +54,31 @@ table.shop_table_responsive {
 }
 
 @media screen and (min-width: 48em) {
+
 	table.shop_table_responsive {
+
 		thead {
 			display: table-header-group;
 		}
 
 		tbody {
+
 			th {
 				display: table-cell;
 			}
 		}
 
 		tr {
-			th, td {
+
+			th,
+			td {
 				text-align: left;
 			}
 
 			td {
 				display: table-cell;
 
-				&:before {
+				&::before {
 					display: none;
 				}
 			}

sass/shop/_widgets.scss

@@ -2,13 +2,14 @@
  * WooCommerce Price Filter
  */
 .widget_price_filter {
+
 	.price_slider {
 		margin-bottom: 1.5em;
 	}
 
 	.price_slider_amount {
 		text-align: right;
-		line-height: 2.4em;
+		line-height: 2.4;
 
 		.button {
 			float: left;
@@ -29,7 +30,7 @@
 		outline: none;
 		background: $color__link;
 		box-sizing: border-box;
-		margin-top: -.25em;
+		margin-top: -0.25em;
 		opacity: 1;
 
 		&:last-child {
@@ -38,7 +39,7 @@
 
 		&:hover,
 		&.ui-state-active {
-			box-shadow: 0 0 0 .25em rgba(#000, 0.1);
+			box-shadow: 0 0 0 0.25em rgba(#000, 0.1);
 		}
 	}
 
@@ -51,11 +52,11 @@
 	}
 
 	.price_slider_wrapper .ui-widget-content {
-		background: rgba(0,0,0,0.1);
+		background: rgba(0, 0, 0, 0.1);
 	}
 
 	.ui-slider-horizontal {
-		height: .5em;
+		height: 0.5em;
 	}
 
 	.ui-slider-horizontal .ui-slider-range {

sass/site/primary/_comments.scss

@@ -1,6 +1,7 @@
 .comment-content a {
 	word-wrap: break-word;
 }
+
 .bypostauthor {
 	display: block;
 }

sass/site/primary/_posts-and-pages.scss

@@ -2,7 +2,8 @@
 	display: block;
 }
 
-.hentry {
+.post,
+.page {
 	margin: 0 0 1.5em;
 }
 

sass/site/secondary/_widgets.scss

@@ -1,7 +1,7 @@
 .widget {
 	margin: 0 0 1.5em;
 
-	/* Make sure select elements fit in widgets. */
+	// Make sure select elements fit in widgets.
 	select {
 		max-width: 100%;
 	}

sass/style.scss

@@ -11,9 +11,9 @@ Text Domain: _s
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 
 This theme, like WordPress, is licensed under the GPL.
-Use it to make something cool, have fun, and share what you've learned with others.
+Use it to make something cool, have fun, and share what you've learned.
 
-_s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
+_s is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
 Underscores is distributed under the terms of the GNU GPL v2 or later.
 
 Normalizing styles have been helped along thanks to the fine work of
@@ -32,7 +32,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 	## Menus
 # Accessibility
 # Alignments
-# Clearings
 # Widgets
 # Content
 	## Posts and pages
@@ -80,11 +79,6 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
 --------------------------------------------------------------*/
 @import "modules/alignments";
 
-/*--------------------------------------------------------------
-# Clearings
---------------------------------------------------------------*/
-@import "modules/clearings";
-
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/

sass/typography/_copy.scss

@@ -2,7 +2,10 @@ p {
 	margin-bottom: 1.5em;
 }
 
-dfn, cite, em, i {
+dfn,
+cite,
+em,
+i {
 	font-style: italic;
 }
 
@@ -16,8 +19,9 @@ address {
 
 pre {
 	background: $color__background-pre;
-	font-family: $font__pre;
+
-	@include font-size(0.9375);
+	@include font-pre;
+	font-size: 0.9375rem;
 	line-height: $font__line-height-pre;
 	margin-bottom: 1.6em;
 	max-width: 100%;
@@ -25,17 +29,23 @@ pre {
 	padding: 1.6em;
 }
 
-code, kbd, tt, var {
+code,
-	font-family: $font__code;
+kbd,
-	@include font-size(0.9375);
+tt,
+var {
+
+	@include font-code;
+	font-size: 0.9375rem;
 }
 
-abbr, acronym {
+abbr,
+acronym {
 	border-bottom: 1px dotted $color__border-abbr;
 	cursor: help;
 }
 
-mark, ins {
+mark,
+ins {
 	background: $color__background-ins;
 	text-decoration: none;
 }

sass/typography/_headings.scss

@@ -1,3 +1,8 @@
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	clear: both;
 }

sass/typography/_typography.scss

@@ -5,11 +5,11 @@ select,
 optgroup,
 textarea {
 	color: $color__text-main;
-	font-family: $font__main;
+
-	@include font-size(1);
+	@include font-body;
+	font-size: 1rem;
 	line-height: $font__line-height-body;
 }
 
 @import "headings";
-
 @import "copy";

sass/variables-site/_colors.scss

@@ -8,9 +8,9 @@ $color__background-ins: #fff9c0;
 $color__text-screen: #21759b;
 $color__text-input: #666;
 $color__text-input-focus: #111;
-$color__link: royalblue;
+$color__link: #4169e1; //royalblue
-$color__link-visited: purple;
+$color__link-visited: #800080; //purple
-$color__link-hover: midnightblue;
+$color__link-hover: #191970; //midnightblue
 $color__text-main: #404040;
 
 $color__border-button: #ccc #ccc #bbb;

sass/variables-site/_typography.scss

@@ -1,5 +1,8 @@
-$font__main: sans-serif;
+// stylelint-disable value-keyword-case
-$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+$font__main: -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen-sans,
-$font__pre: "Courier 10 Pitch", Courier, monospace;
+	ubuntu, cantarell, "Helvetica Neue", sans-serif;
+// stylelint-enable value-keyword-case
+$font__code: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+$font__pre: "Courier 10 Pitch", courier, monospace;
 $font__line-height-body: 1.5;
 $font__line-height-pre: 1.6;

sass/woocommerce.scss

@@ -4,16 +4,12 @@ Theme Name: _s
 WooCommerce styles override
 */
 
-/**
+// WooCommerce color variables
- * WooCommerce color variables
- */
 $woocommerce__color-error: #e2401c;
 $woocommerce__color-success: #0f834d;
-$woocommerce__color-info: #3D9CD2;
+$woocommerce__color-info: #3d9cd2;
 
-/**
+// Imports
- * Imports
- */
 @import "variables-site/variables-site";
 @import "mixins/mixins-master";
 

search.php

@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<section id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
 		<?php if ( have_posts() ) : ?>
 
@@ -47,8 +46,7 @@ get_header();
 		endif;
 		?>
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</section><!-- #primary -->
 
 <?php
 get_sidebar();

single.php

@@ -10,8 +10,7 @@
 get_header();
 ?>
 
-	<div id="primary" class="content-area">
+	<main id="primary" class="site-main">
-		<main id="main" class="site-main">
 
 		<?php
 		while ( have_posts() ) :
@@ -19,7 +18,12 @@ get_header();
 
 			get_template_part( 'template-parts/content', get_post_type() );
 
-			the_post_navigation();
+			the_post_navigation(
+				array(
+					'prev_text' => '<span class="nav-subtitle">' . esc_html__( 'Previous:', '_s' ) . '</span> <span class="nav-title">%title</span>',
+					'next_text' => '<span class="nav-subtitle">' . esc_html__( 'Next:', '_s' ) . '</span> <span class="nav-title">%title</span>',
+				)
+			);
 
 			// If comments are open or we have at least one comment, load up the comment template.
 			if ( comments_open() || get_comments_number() ) :
@@ -29,8 +33,7 @@ get_header();
 		endwhile; // End of the loop.
 		?>
 
-		</main><!-- #main -->
+	</main><!-- #main -->
-	</div><!-- #primary -->
 
 <?php
 get_sidebar();

template-parts/content-page.php

@@ -20,10 +20,12 @@
 		<?php
 		the_content();
 
-		wp_link_pages( array(
+		wp_link_pages(
-			'before' => '<div class="page-links">' . esc_html__( 'Pages:', '_s' ),
+			array(
-			'after'  => '</div>',
+				'before' => '<div class="page-links">' . esc_html__( 'Pages:', '_s' ),
-		) );
+				'after'  => '</div>',
+			)
+		);
 		?>
 	</div><!-- .entry-content -->
 
@@ -41,7 +43,7 @@
 							),
 						)
 					),
-					get_the_title()
+					wp_kses_post( get_the_title() )
 				),
 				'<span class="edit-link">',
 				'</span>'

template-parts/content.php

@@ -33,23 +33,27 @@
 
 	<div class="entry-content">
 		<?php
-		the_content( sprintf(
+		the_content(
-			wp_kses(
+			sprintf(
-				/* translators: %s: Name of current post. Only visible to screen readers */
+				wp_kses(
-				__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', '_s' ),
+					/* translators: %s: Name of current post. Only visible to screen readers */
-				array(
+					__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', '_s' ),
-					'span' => array(
+					array(
-						'class' => array(),
+						'span' => array(
-					),
+							'class' => array(),
-				)
+						),
-			),
+					)
-			get_the_title()
+				),
-		) );
+				wp_kses_post( get_the_title() )
+			)
+		);
 
-		wp_link_pages( array(
+		wp_link_pages(
-			'before' => '<div class="page-links">' . esc_html__( 'Pages:', '_s' ),
+			array(
-			'after'  => '</div>',
+				'before' => '<div class="page-links">' . esc_html__( 'Pages:', '_s' ),
-		) );
+				'after'  => '</div>',
+			)
+		);
 		?>
 	</div><!-- .entry-content -->