diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..961aa9c2 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,8 @@ +{ + "extends": [ + "plugin:@wordpress/eslint-plugin/es5" + ], + "env": { + "browser": true + } +} diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 2d87782b..a8bbf9bb 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -22,13 +22,14 @@ Found a bug you can fix? Fantastic! Patches are always welcome. Here's a few tip * 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](http://underscores.me) website, the [Underscores.me GitHub repo](https://github.com/Automattic/underscores.me) is the right place for you. +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](http://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! +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](http://underscores.me/#contribute)? Just make sure you have an email address added to both GitHub and your local Git installation. \ No newline at end of file +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. \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..fff7c8fa --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +/node_modules +/vendor +package-lock.json +composer.lock diff --git a/.jscsrc b/.jscsrc deleted file mode 100644 index edf97acd..00000000 --- a/.jscsrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "preset": "wordpress", - "fileExtensions": [ ".js" ], - "excludeFiles": [ - "js/**.min.js" - ] -} diff --git a/.jshintignore b/.jshintignore deleted file mode 100644 index eef19b5c..00000000 --- a/.jshintignore +++ /dev/null @@ -1 +0,0 @@ -js/**.min.js diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 00000000..55b598d8 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-wordpress/scss" + ], + "ignoreFiles": [ + "sass/_normalize.scss" + ], + "rules": { + "font-family-no-missing-generic-family-keyword": null, + "no-descending-specificity": null, + "block-no-empty": null, + "no-duplicate-selectors": null, + "font-family-no-duplicate-names": null + } +} diff --git a/.travis.yml b/.travis.yml index 18a0ea73..2a7a556d 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,88 +4,68 @@ # For use with the Underscores WordPress theme. # @link https://github.com/Automattic/_s -# Ditch sudo and use containers. -# @link http://docs.travis-ci.com/user/migrating-from-legacy/#Why-migrate-to-container-based-infrastructure%3F -# @link http://docs.travis-ci.com/user/workers/container-based-infrastructure/#Routing-your-build-to-container-based-infrastructure -sudo: false -dist: trusty +# Tell Travis CI which OS and which distro to use. +os: linux +dist: xenial + +# 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 http://about.travis-ci.org/docs/user/languages/php/ -language: php +# @link https://docs.travis-ci.com/user/languages/php/ +language: + - php -# Declare versions of PHP to use. Use one decimal max. -# @link http://docs.travis-ci.com/user/build-configuration/ -matrix: - fast_finish: true +php: + - 5.6 + - 7.0 + - 7.1 + - 7.2 + - 7.3 - include: - # Current $required_php_version for WordPress: 5.2.4 - # aliased to 5.2.17 - - php: '5.2' - dist: precise - # 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.1.x version - - php: '7.1' - # aliased to a recent hhvm version - - php: 'hhvm' +jobs: + fast_finish: true + include: + - php: 7.4 + env: SNIFF=1 - allow_failures: - - php: 'hhvm' +before_install: + # 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: - - export PHPCS_DIR=/tmp/phpcs - - export SNIFFS_DIR=/tmp/sniffs - # Install CodeSniffer for WordPress Coding Standards checks. - - if [[ "$SNIFF" == "1" ]]; then git clone -b 2.9.1 --depth 1 https://github.com/squizlabs/PHP_CodeSniffer.git $PHPCS_DIR; fi - # Install WordPress Coding Standards. - - if [[ "$SNIFF" == "1" ]]; then git clone -b 0.11.0 --depth 1 https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards.git $SNIFFS_DIR; fi - # Install PHP Compatibility sniffs. - - if [[ "$SNIFF" == "1" ]]; then git clone -b 7.1.5 --depth 1 https://github.com/wimg/PHPCompatibility.git $SNIFFS_DIR/PHPCompatibility; 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/scripts/phpcs --config-set installed_paths $SNIFFS_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. - - find -L . -name '*.php' -print0 | xargs -0 -n 1 -P 4 php -l - # Run the theme through JSHint. - - if [[ "$SNIFF" == "1" ]]; then jshint .; fi - # Run the theme through JavaScript Code Style checker. - - if [[ "$SNIFF" == "1" ]]; then jscs .; fi - # WordPress Coding Standards. - # @link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards - # @link http://pear.php.net/package/PHP_CodeSniffer/ - # Uses a custom ruleset based on WordPress. This ruleset is automatically - # picked up by PHPCS as it's named `phpcs.xml(.dist)`. - - if [[ "$SNIFF" == "1" ]]; then $PHPCS_DIR/scripts/phpcs; fi + # Validate the composer.json file. + # @link https://getcomposer.org/doc/03-cli.md#validate + - composer validate --no-check-all --strict + + # Search for PHP syntax errors using PHP Parallel Lint. + # @link https://github.com/php-parallel-lint/PHP-Parallel-Lint + - composer lint:php + + # Check the PHP files with the coding standards documented in the phpcs.xml.dist file. + - if [[ "$SNIFF" == 1 ]]; then composer lint:wpcs; 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 http://docs.travis-ci.com/user/notifications/#Email-notifications +# @link https://docs.travis-ci.com/user/notifications/#configuring-email-notifications notifications: email: false diff --git a/404.php b/404.php index dc515c3b..ba5d537a 100644 --- a/404.php +++ b/404.php @@ -7,7 +7,8 @@ * @package _s */ -get_header(); ?> +get_header(); +?>
@@ -21,33 +22,34 @@ get_header(); ?>

    - 'count', - 'order' => 'DESC', - 'show_count' => 1, - 'title_li' => '', - 'number' => 10, - ) ); - ?> + 'count', + 'order' => 'DESC', + 'show_count' => 1, + 'title_li' => '', + 'number' => 10, + ) + ); + ?>
' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', '_s' ), convert_smilies( ':)' ) ) . '

'; + the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=$_s_archive_content" ); - /* translators: %1$s: smiley */ - $archive_content = '

' . sprintf( esc_html__( 'Try looking in the monthly archives. %1$s', '_s' ), convert_smilies( ':)' ) ) . '

'; - the_widget( 'WP_Widget_Archives', 'dropdown=1', "after_title=$archive_content" ); - - the_widget( 'WP_Widget_Tag_Cloud' ); + the_widget( 'WP_Widget_Tag_Cloud' ); ?>
diff --git a/README.md b/README.md index 20627c6a..9239747f 100644 --- a/README.md +++ b/README.md @@ -14,31 +14,35 @@ My ultra-minimal CSS might make me look like theme tartare but that means less s * 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. +Note: `.no-sidebar` styles are not 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 --------------- -If you want to keep it simple, head over to http://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. +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. -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. +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 six-step find and replace on the name in all the templates. 1. Search for `'_s'` (inside single quotations) to capture the text domain. 2. Search for `_s_` to capture all the function names. -3. Search for `Text Domain: _s` in style.css. +3. Search for `Text Domain: _s` in `style.css`. 4. Search for  _s (with a space before it) to capture DocBlocks. 5. Search for `_s-` to capture prefixed handles. +6. Search for `_S_` (in uppercase) to capture constants. OR -1. Search for: `'_s'` and replace with: `'megatherium-is-awesome'` -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. -4. Search for:  _s and replace with:  Megatherium_is_Awesome -5. Search for: `_s-` and replace with: `megatherium-is-awesome-` +1. Search for: `'_s'` and replace with: `'megatherium-is-awesome'`. +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`. +4. Search for:  _s and replace with:  Megatherium_is_Awesome. +5. Search for: `_s-` and replace with: `megatherium-is-awesome-`. +6. Search for: `_S_` and replace with: `MEGATHERIUM_IS_AWESOME_`. -Then, update the stylesheet header in `style.css` and the links in `footer.php` with your own information. Next, update or delete this readme. +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. Now you're ready to go! The next step is easy to say, but harder to do: make an awesome WordPress theme. :) diff --git a/archive.php b/archive.php index d5de83de..db1313f3 100644 --- a/archive.php +++ b/archive.php @@ -2,36 +2,37 @@ /** * The template for displaying archive pages * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ -get_header(); ?> +get_header(); +?>
- + get_template_part( 'template-parts/content', 'none' ); - endif; ?> + endif; + ?>
diff --git a/comments.php b/comments.php index 30b2e88b..364973f5 100644 --- a/comments.php +++ b/comments.php @@ -5,7 +5,7 @@ * This is the template that displays the area of the page that contains both the current comments * and the comment form. * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ @@ -24,22 +24,23 @@ if ( post_password_required() ) { + if ( have_comments() ) : + ?>

' . get_the_title() . '' + esc_html__( 'One thought on “%1$s”', '_s' ), + '' . wp_kses_post( get_the_title() ) . '' ); } else { - printf( // WPCS: XSS OK. + printf( /* translators: 1: comment count number, 2: title. */ - esc_html( _nx( '%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $comment_count, 'comments title', '_s' ) ), - number_format_i18n( $comment_count ), - '' . get_the_title() . '' + esc_html( _nx( '%1$s thought on “%2$s”', '%1$s thoughts on “%2$s”', $_s_comment_count, 'comments title', '_s' ) ), + number_format_i18n( $_s_comment_count ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + '' . wp_kses_post( get_the_title() ) . '' ); } ?> @@ -49,19 +50,23 @@ if ( post_password_required() ) {
    'ol', 'short_ping' => true, - ) ); + ) + ); ?>
- + if ( ! comments_open() ) : + ?>

- =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" + } +} diff --git a/footer.php b/footer.php index 5f406bcb..9c0a099e 100644 --- a/footer.php +++ b/footer.php @@ -15,15 +15,17 @@ diff --git a/functions.php b/functions.php index 76bac867..331f1926 100644 --- a/functions.php +++ b/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( - 'menu-1' => esc_html__( 'Primary', '_s' ), - ) ); + register_nav_menus( + 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( - 'search-form', - 'comment-form', - 'comment-list', - 'gallery', - 'caption', - ) ); + add_theme_support( + 'html5', + array( + 'search-form', + 'comment-form', + '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( - 'default-color' => 'ffffff', - 'default-image' => '', - ) ) ); + add_theme_support( + 'custom-background', + 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( - 'height' => 250, - 'width' => 250, - 'flex-width' => true, - 'flex-height' => true, - ) ); + add_theme_support( + 'custom-logo', + array( + 'height' => 250, + 'width' => 250, + 'flex-width' => true, + 'flex-height' => true, + ) + ); } endif; add_action( 'after_setup_theme', '_s_setup' ); @@ -91,6 +112,9 @@ add_action( 'after_setup_theme', '_s_setup' ); * @global int $content_width */ function _s_content_width() { + // This variable is intended to be overruled from themes. + // Open WPCS issue: {@link https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards/issues/1043}. + // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound $GLOBALS['content_width'] = apply_filters( '_s_content_width', 640 ); } add_action( 'after_setup_theme', '_s_content_width', 0 ); @@ -101,15 +125,17 @@ 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( - 'name' => esc_html__( 'Sidebar', '_s' ), - 'id' => 'sidebar-1', - 'description' => esc_html__( 'Add widgets here.', '_s' ), - 'before_widget' => '
', - 'after_widget' => '
', - 'before_title' => '

', - 'after_title' => '

', - ) ); + register_sidebar( + array( + 'name' => esc_html__( 'Sidebar', '_s' ), + 'id' => 'sidebar-1', + 'description' => esc_html__( 'Add widgets here.', '_s' ), + 'before_widget' => '
', + 'after_widget' => '
', + 'before_title' => '

', + 'after_title' => '

', + ) + ); } add_action( 'widgets_init', '_s_widgets_init' ); @@ -117,11 +143,12 @@ add_action( 'widgets_init', '_s_widgets_init' ); * 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_script( '_s-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true ); - 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-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), _S_VERSION, true ); if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { wp_enqueue_script( 'comment-reply' ); @@ -155,3 +182,10 @@ require get_template_directory() . '/inc/customizer.php'; if ( defined( 'JETPACK__VERSION' ) ) { require get_template_directory() . '/inc/jetpack.php'; } + +/** + * Load WooCommerce compatibility file. + */ +if ( class_exists( 'WooCommerce' ) ) { + require get_template_directory() . '/inc/woocommerce.php'; +} diff --git a/header.php b/header.php index 8f020723..527ab38b 100644 --- a/header.php +++ b/header.php @@ -15,12 +15,13 @@ - + > +
@@ -28,27 +29,31 @@
+ if ( is_front_page() && is_home() ) : + ?>

- +

- -

- + $_s_description = get_bloginfo( 'description', 'display' ); + if ( $_s_description || is_customize_preview() ) : + ?> +

+
diff --git a/inc/custom-header.php b/inc/custom-header.php index 97b1db28..5176f171 100644 --- a/inc/custom-header.php +++ b/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( - 'default-image' => '', - 'default-text-color' => '000000', - 'width' => 1000, - 'height' => 250, - 'flex-height' => true, - 'wp-head-callback' => '_s_header_style', - ) ) ); + add_theme_support( + 'custom-header', + apply_filters( + '_s_custom_header_args', + array( + 'default-image' => '', + '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' ); @@ -51,16 +57,16 @@ if ( ! function_exists( '_s_header_style' ) ) : + ?> .site-title, .site-description { position: absolute; clip: rect(1px, 1px, 1px, 1px); - } - + else : + ?> .site-title a, .site-description { color: #; diff --git a/inc/customizer.php b/inc/customizer.php index 190c3d9f..10e277d1 100644 --- a/inc/customizer.php +++ b/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( - 'selector' => '.site-title a', - 'render_callback' => '_s_customize_partial_blogname', - ) ); - $wp_customize->selective_refresh->add_partial( 'blogdescription', array( - 'selector' => '.site-description', - 'render_callback' => '_s_customize_partial_blogdescription', - ) ); + $wp_customize->selective_refresh->add_partial( + 'blogname', + array( + 'selector' => '.site-title a', + 'render_callback' => '_s_customize_partial_blogname', + ) + ); + $wp_customize->selective_refresh->add_partial( + 'blogdescription', + array( + 'selector' => '.site-description', + 'render_callback' => '_s_customize_partial_blogdescription', + ) + ); } } add_action( 'customize_register', '_s_customize_register' ); diff --git a/inc/jetpack.php b/inc/jetpack.php index fda2615b..2a82dfb5 100644 --- a/inc/jetpack.php +++ b/inc/jetpack.php @@ -16,26 +16,37 @@ */ function _s_jetpack_setup() { // Add theme support for Infinite Scroll. - add_theme_support( 'infinite-scroll', array( - 'container' => 'main', - 'render' => '_s_infinite_scroll_render', - 'footer' => 'page', - ) ); + add_theme_support( + 'infinite-scroll', + array( + '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( - 'post-details' => array( - 'stylesheet' => '_s-style', - 'date' => '.posted-on', - 'categories' => '.cat-links', - 'tags' => '.tags-links', - 'author' => '.byline', - 'comment' => '.comments-link', - ), - ) ); + add_theme_support( + 'jetpack-content-options', + array( + 'post-details' => array( + 'stylesheet' => '_s-style', + 'date' => '.posted-on', + 'categories' => '.cat-links', + 'tags' => '.tags-links', + 'author' => '.byline', + 'comment' => '.comments-link', + ), + 'featured-images' => array( + 'archive' => true, + 'post' => true, + 'page' => true, + ), + ) + ); } add_action( 'after_setup_theme', '_s_jetpack_setup' ); @@ -48,7 +59,7 @@ function _s_infinite_scroll_render() { if ( is_search() ) : get_template_part( 'template-parts/content', 'search' ); else : - get_template_part( 'template-parts/content', get_post_format() ); + get_template_part( 'template-parts/content', get_post_type() ); endif; } } diff --git a/inc/template-functions.php b/inc/template-functions.php index 340e6775..4ab2f54b 100644 --- a/inc/template-functions.php +++ b/inc/template-functions.php @@ -17,16 +17,21 @@ function _s_body_classes( $classes ) { $classes[] = 'hfeed'; } + // Adds a class of no-sidebar when there is no sidebar present. + if ( ! is_active_sidebar( 'sidebar-1' ) ) { + $classes[] = 'no-sidebar'; + } + return $classes; } add_filter( 'body_class', '_s_body_classes' ); /** - * Add a pingback url auto-discovery header for singularly identifiable articles. + * Add a pingback url auto-discovery header for single posts, pages, or attachments. */ function _s_pingback_header() { if ( is_singular() && pings_open() ) { - echo ''; + printf( '', esc_url( get_bloginfo( 'pingback_url' ) ) ); } } add_action( 'wp_head', '_s_pingback_header' ); diff --git a/inc/template-tags.php b/inc/template-tags.php index 3260c44e..a9a1f1b0 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -9,7 +9,7 @@ if ( ! function_exists( '_s_posted_on' ) ) : /** - * Prints HTML with meta information for the current post-date/time and author. + * Prints HTML with meta information for the current post-date/time. */ function _s_posted_on() { $time_string = ''; @@ -17,10 +17,11 @@ if ( ! function_exists( '_s_posted_on' ) ) : $time_string = ''; } - $time_string = sprintf( $time_string, - esc_attr( get_the_date( 'c' ) ), + $time_string = sprintf( + $time_string, + esc_attr( get_the_date( DATE_W3C ) ), esc_html( get_the_date() ), - esc_attr( get_the_modified_date( 'c' ) ), + esc_attr( get_the_modified_date( DATE_W3C ) ), esc_html( get_the_modified_date() ) ); @@ -30,13 +31,23 @@ if ( ! function_exists( '_s_posted_on' ) ) : '' . $time_string . '' ); + echo '' . $posted_on . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + + } +endif; + +if ( ! function_exists( '_s_posted_by' ) ) : + /** + * Prints HTML with meta information for the current author. + */ + function _s_posted_by() { $byline = sprintf( /* translators: %s: post author. */ esc_html_x( 'by %s', 'post author', '_s' ), '' . esc_html( get_the_author() ) . '' ); - echo '' . $posted_on . ' ' . $byline . ''; // WPCS: XSS OK. + echo ' ' . $byline . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } endif; @@ -52,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( '' . esc_html__( 'Posted in %1$s', '_s' ) . '', $categories_list ); // WPCS: XSS OK. + printf( '' . esc_html__( 'Posted in %1$s', '_s' ) . '', $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( '' . esc_html__( 'Tagged %1$s', '_s' ) . '', $tags_list ); // WPCS: XSS OK. + printf( '' . esc_html__( 'Tagged %1$s', '_s' ) . '', $tags_list ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } } @@ -76,7 +87,7 @@ if ( ! function_exists( '_s_entry_footer' ) ) : ), ) ), - get_the_title() + wp_kses_post( get_the_title() ) ) ); echo ''; @@ -93,10 +104,62 @@ if ( ! function_exists( '_s_entry_footer' ) ) : ), ) ), - get_the_title() + wp_kses_post( get_the_title() ) ), '', '' ); } endif; + +if ( ! function_exists( '_s_post_thumbnail' ) ) : + /** + * Displays an optional post thumbnail. + * + * Wraps the post thumbnail in an anchor element on index views, or a div + * element when on single views. + */ + function _s_post_thumbnail() { + if ( post_password_required() || is_attachment() || ! has_post_thumbnail() ) { + return; + } + + if ( is_singular() ) : + ?> + +
+ +
+ + + + + + 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' ); +} +add_action( 'after_setup_theme', '_s_woocommerce_setup' ); + +/** + * WooCommerce specific scripts & stylesheets. + * + * @return void + */ +function _s_woocommerce_scripts() { + 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 { + font-family: "star"; + src: url("' . $font_path . 'star.eot"); + src: url("' . $font_path . 'star.eot?#iefix") format("embedded-opentype"), + url("' . $font_path . 'star.woff") format("woff"), + url("' . $font_path . 'star.ttf") format("truetype"), + url("' . $font_path . 'star.svg#star") format("svg"); + font-weight: normal; + font-style: normal; + }'; + + wp_add_inline_style( '_s-woocommerce-style', $inline_font ); +} +add_action( 'wp_enqueue_scripts', '_s_woocommerce_scripts' ); + +/** + * Disable the default WooCommerce stylesheet. + * + * Removing the default WooCommerce stylesheet and enqueing your own will + * protect you during WooCommerce core updates. + * + * @link https://docs.woocommerce.com/document/disable-the-default-stylesheet/ + */ +add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); + +/** + * Add 'woocommerce-active' class to the body tag. + * + * @param array $classes CSS classes applied to the body tag. + * @return array $classes modified to include 'woocommerce-active' class. + */ +function _s_woocommerce_active_body_class( $classes ) { + $classes[] = 'woocommerce-active'; + + return $classes; +} +add_filter( 'body_class', '_s_woocommerce_active_body_class' ); + +/** + * Related Products Args. + * + * @param array $args related products args. + * @return array $args related products args. + */ +function _s_woocommerce_related_products_args( $args ) { + $defaults = array( + 'posts_per_page' => 3, + 'columns' => 3, + ); + + $args = wp_parse_args( $defaults, $args ); + + return $args; +} +add_filter( 'woocommerce_output_related_products_args', '_s_woocommerce_related_products_args' ); + +/** + * Remove default WooCommerce wrapper. + */ +remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 ); +remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 ); + +if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) { + /** + * Before Content. + * + * Wraps all WooCommerce content in wrappers which match the theme markup. + * + * @return void + */ + function _s_woocommerce_wrapper_before() { + ?> +
+
+ +
+
+ + */ + +if ( ! function_exists( '_s_woocommerce_cart_link_fragment' ) ) { + /** + * Cart Fragments. + * + * Ensure cart contents update when products are added to the cart via AJAX. + * + * @param array $fragments Fragments to refresh via AJAX. + * @return array Fragments to refresh via AJAX. + */ + function _s_woocommerce_cart_link_fragment( $fragments ) { + ob_start(); + _s_woocommerce_cart_link(); + $fragments['a.cart-contents'] = ob_get_clean(); + + return $fragments; + } +} +add_filter( 'woocommerce_add_to_cart_fragments', '_s_woocommerce_cart_link_fragment' ); + +if ( ! function_exists( '_s_woocommerce_cart_link' ) ) { + /** + * Cart Link. + * + * Displayed a link to the cart including the number of items present and the cart total. + * + * @return void + */ + function _s_woocommerce_cart_link() { + ?> + + cart->get_cart_contents_count(), '_s' ), + WC()->cart->get_cart_contents_count() + ); + ?> + cart->get_cart_subtotal() ); ?> + + + + '', 'border' => '', diff --git a/index.php b/index.php index c9d96f7a..cf3c487a 100644 --- a/index.php +++ b/index.php @@ -7,12 +7,13 @@ * It is used to display a page when nothing more specific matches a query. * E.g., it puts together the home page when no home.php file exists. * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ -get_header(); ?> +get_header(); +?>
@@ -20,23 +21,24 @@ get_header(); ?> + if ( is_home() && ! is_front_page() ) : + ?>

- - get_template_part( 'template-parts/content', 'none' ); - endif; ?> + endif; + ?>
diff --git a/js/customizer.js b/js/customizer.js index 757367a2..94c739b6 100644 --- a/js/customizer.js +++ b/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)', - 'position': 'absolute' + clip: 'rect(1px, 1px, 1px, 1px)', + position: 'absolute', } ); } else { $( '.site-title, .site-description' ).css( { - 'clip': 'auto', - 'position': 'relative' + clip: 'auto', + position: 'relative', } ); $( '.site-title a, .site-description' ).css( { - 'color': to + color: to, } ); } } ); } ); -} )( jQuery ); +}( jQuery ) ); diff --git a/js/navigation.js b/js/navigation.js index 3ffa7cc8..cf5a0b06 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -25,7 +25,6 @@ return; } - menu.setAttribute( 'aria-expanded', 'false' ); if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { menu.className += ' nav-menu'; } @@ -34,16 +33,24 @@ if ( -1 !== container.className.indexOf( '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++ ) { @@ -59,7 +66,6 @@ // Move up through the ancestors of the current link until we hit .nav-menu. while ( -1 === self.className.indexOf( 'nav-menu' ) ) { - // On li elements toggle the class .focus. if ( 'li' === self.tagName.toLowerCase() ) { if ( -1 !== self.className.indexOf( 'focus' ) ) { @@ -76,13 +82,13 @@ /** * Toggles `focus` class to allow submenu access on tablets. */ - ( function( container ) { - var touchStartFn, i, + ( function() { + 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 ) ); -} )(); +}() ); diff --git a/js/skip-link-focus-fix.js b/js/skip-link-focus-fix.js index 0037752e..bf9367e0 100644 --- a/js/skip-link-focus-fix.js +++ b/js/skip-link-focus-fix.js @@ -28,4 +28,4 @@ } }, false ); } -} )(); +}() ); diff --git a/languages/_s.pot b/languages/_s.pot index ef9fb8a0..33006483 100644 --- a/languages/_s.pot +++ b/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" -"POT-Creation-Date: 2016-12-23 16:00+0100\n" +"Report-Msgid-Bugs-To: https://wordpress.org/support/theme/_s\n" +"Last-Translator: FULL NAME \n" +"Language-Team: LANGUAGE \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" -"Last-Translator:\n" -"Language-Team: LANGUAGE \n" -"X-Generator: grunt-wp-i18n 0.5.4\n" +"POT-Creation-Date: 2020-04-17T21:03:15+00:00\n" +"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" +"X-Generator: WP-CLI 2.4.0\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 _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." +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’t be found." msgstr "" -#: 404.php:21 -msgid "" -"It looks like nothing was found at this location. Maybe try one of the " -"links below or a search?" +#: 404.php:22 +msgid "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 “%1$s”" msgstr "" -#: comments.php:67 +#. translators: 1: comment count number, 2: title. +#: comments.php:41 +msgctxt "comments title" +msgid "%1$s thought on “%2$s”" +msgid_plural "%1$s thoughts on “%2$s”" +msgstr[0] "" +msgstr[1] "" + +#: comments.php:68 msgid "Comments are closed." msgstr "" @@ -45,150 +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 "" -#: single.php:21 -msgid "Previous:" +#. translators: %s: post date. +#: inc/template-tags.php:30 +msgctxt "post date" +msgid "Posted on %s" msgstr "" -#: single.php:22 -msgid "Next:" +#. translators: %s: post author. +#: inc/template-tags.php:46 +msgctxt "post author" +msgid "by %s" msgstr "" -#: inc/template-tags.php:52 #. 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 on %s" 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 %s" 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? Get started here." msgstr "" -#: template-parts/content-none.php:38 -msgid "" -"Sorry, but nothing matched your search terms. Please try again with some " -"different keywords." +#: template-parts/content-none.php:37 +msgid "Sorry, but nothing matched your search terms. Please try again with some different keywords." msgstr "" #: template-parts/content-none.php:44 -msgid "" -"It seems we can’t find what you’re looking for. Perhaps " -"searching can help." +msgid "It seems we can’t find what you’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 \"%s\"" msgstr "" - -#. Theme Name of the plugin/theme -msgid "_s" -msgstr "" - -#. Theme URI of the plugin/theme -msgid "http://underscores.me/" -msgstr "" - -#. Description of the plugin/theme -msgid "" -"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." -msgstr "" - -#. Author of the plugin/theme -msgid "Automattic" -msgstr "" - -#. Author URI of the plugin/theme -msgid "http://automattic.com/" -msgstr "" - -#: comments.php:40 -#. translators: 1: comment count number, 2: title. -msgctxt "comments title" -msgid "%1$s thought on “%2$s”" -msgid_plural "%1$s thoughts on “%2$s”" -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 "" diff --git a/layouts/content-sidebar.css b/layouts/content-sidebar.css index 1e25ae8b..60b85d0b 100644 --- a/layouts/content-sidebar.css +++ b/layouts/content-sidebar.css @@ -23,3 +23,12 @@ clear: both; width: 100%; } + +.no-sidebar .content-area { + float: none; + margin-left: auto; + margin-right: auto; +} +.no-sidebar .site-main { + margin-right: 0; +} diff --git a/layouts/sidebar-content.css b/layouts/sidebar-content.css index 66342d0f..0dda00ee 100644 --- a/layouts/sidebar-content.css +++ b/layouts/sidebar-content.css @@ -23,3 +23,12 @@ clear: both; width: 100%; } + +.no-sidebar .content-area { + float: none; + margin-left: auto; + margin-right: auto; +} +.no-sidebar .site-main { + margin-right: 0; +} diff --git a/package.json b/package.json new file mode 100644 index 00000000..98be82e5 --- /dev/null +++ b/package.json @@ -0,0 +1,43 @@ +{ + "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": "^8.0.1", + "node-sass": "^4.13.1", + "rtlcss": "^2.5.0" + }, + "rtlcssConfig": { + "options": { + "autoRename": false, + "autoRenameStrict": false, + "blacklist": {}, + "clean": true, + "greedy": false, + "processUrls": false, + "stringMap": [] + }, + "plugins": [], + "map": false + }, + "scripts": { + "compile:css": "node-sass sass/style.scss style.css && node-sass sass/woocommerce.scss woocommerce.css && stylelint '*.css' --fix || true && 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'" + } +} diff --git a/page.php b/page.php index f41e4455..9c840673 100644 --- a/page.php +++ b/page.php @@ -7,28 +7,30 @@ * and that other 'pages' on your WordPress site may use a * different template. * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ -get_header(); ?> +get_header(); +?>
- + endwhile; // End of the loop. + ?>
diff --git a/phpcs.xml.dist b/phpcs.xml.dist index 5a4ab66b..2105118f 100644 --- a/phpcs.xml.dist +++ b/phpcs.xml.dist @@ -1,39 +1,67 @@ - - - + + + A custom set of code standard rules to check for WordPress themes. + + + - + - - + + + + + + + + . - + + /vendor/* + /node_modules/* + + + + - - - + + + + + - + @@ -41,20 +69,42 @@ on the theme hierarchy. --> - + - - + + + - + + + + + + - - - + + + + + + + + + + + + + diff --git a/readme.txt b/readme.txt index 0beaaefd..5248be21 100644 --- a/readme.txt +++ b/readme.txt @@ -3,8 +3,9 @@ Contributors: automattic Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready -Requires at least: 4.0 -Tested up to: 4.8 +Requires at least: 4.5 +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 @@ -18,14 +19,14 @@ Hi. I'm a starter theme called _s, or underscores, if you like. I'm a theme mean == Installation == 1. In your admin panel, go to Appearance > Themes and click the Add New button. -2. Click Upload and Choose File, then select the theme's .zip file. Click Install Now. +2. Click Upload Theme and Choose File, then select the theme's .zip file. Click Install Now. 3. Click Activate to use your new theme right away. == Frequently Asked Questions == = 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 http://underscores.me/, (C) 2012-2017 Automattic, Inc., [GPLv2 or later](https://www.gnu.org/licenses/gpl-2.0.html) -* normalize.css http://necolas.github.io/normalize.css/, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, [MIT](http://opensource.org/licenses/MIT) +* 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-2018 Nicolas Gallagher and Jonathan Neal, [MIT](https://opensource.org/licenses/MIT) diff --git a/rtl.css b/rtl.css deleted file mode 100644 index c59ed61e..00000000 --- a/rtl.css +++ /dev/null @@ -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; -} -*/ diff --git a/sass/_normalize.scss b/sass/_normalize.scss index 3046bebc..a7301ab6 100644 --- a/sass/_normalize.scss +++ b/sass/_normalize.scss @@ -1,82 +1,119 @@ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + html { - font-family: sans-serif; + line-height: 1.15; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + body { margin: 0; } -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden], -template { - display: none; -} - -a { - background-color: transparent; -} - -a:active, -a:hover { - outline: 0; -} - -abbr[title] { - border-bottom: 1px dotted; -} - -b, -strong { - font-weight: bold; -} - -dfn { - font-style: italic; -} +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ h1 { font-size: 2em; margin: 0.67em 0; } -mark { - background: #ff0; - color: #000; +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/** + * Add the correct font size in all browsers. + */ + small { font-size: 80%; } +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + sub, sup { font-size: 75%; @@ -85,126 +122,220 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + img { - border: 0; + border-style: none; } -svg:not(:root) { - overflow: hidden; -} +/* Forms + ========================================================================== */ -figure { - margin: 1em 40px; -} - -hr { - box-sizing: content-box; - height: 0; -} - -pre { - overflow: auto; -} - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ button, input, optgroup, select, textarea { - color: inherit; - font: inherit; + font-family: inherit; + font-size: 100%; + line-height: 1.15; margin: 0; } -button { +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { overflow: visible; } +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + button, select { text-transform: none; } +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +[type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - cursor: pointer; } -button[disabled], -html input[disabled] { - cursor: default; -} +/** + * Remove the inner border and padding in Firefox. + */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } -input { - line-height: normal; +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} +/** + * Correct the padding in Firefox. + */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + padding: 0.35em 0.75em 0.625em; } +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + legend { - border: 0; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; padding: 0; + white-space: normal; } +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + textarea { overflow: auto; } -optgroup { - font-weight: bold; -} +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; padding: 0; } + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/sass/elements/_elements.scss b/sass/elements/_elements.scss index 38f91c4a..51ebb301 100644 --- a/sass/elements/_elements.scss +++ b/sass/elements/_elements.scss @@ -1,24 +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 http://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. */ -} - -blockquote, q { - quotes: "" ""; - - &:before, - &:after { - content: ""; - } + background: $color__background-body; // Fallback for when there is no custom background color defined. } hr { @@ -31,12 +24,12 @@ hr { @import "lists"; img { - height: auto; /* Make sure images are scaled correctly. */ - max-width: 100%; /* Adhere to container width. */ + height: auto; // Make sure images are scaled correctly. + 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"; diff --git a/sass/elements/_lists.scss b/sass/elements/_lists.scss index fcda0c11..f1263664 100644 --- a/sass/elements/_lists.scss +++ b/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 { diff --git a/sass/forms/_buttons.scss b/sass/forms/_buttons.scss index cc54f951..cdd89c32 100644 --- a/sass/forms/_buttons.scss +++ b/sass/forms/_buttons.scss @@ -6,10 +6,12 @@ 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); + line-height: 1; - padding: .6em 1em .4em; + padding: 0.6em 1em 0.4em; &:hover { border-color: $color__border-button-hover; diff --git a/sass/forms/_forms.scss b/sass/forms/_forms.scss index 2036ef92..94fd5bd8 100644 --- a/sass/forms/_forms.scss +++ b/sass/forms/_forms.scss @@ -1,3 +1,2 @@ @import "buttons"; - @import "fields"; diff --git a/sass/layout/_content-sidebar.scss b/sass/layout/_content-sidebar.scss index 2af13c9a..507cc595 100644 --- a/sass/layout/_content-sidebar.scss +++ b/sass/layout/_content-sidebar.scss @@ -18,3 +18,5 @@ clear: both; width: $size__site-main; } + +@import "no-sidebar"; diff --git a/sass/layout/_no-sidebar.scss b/sass/layout/_no-sidebar.scss new file mode 100644 index 00000000..07cce07c --- /dev/null +++ b/sass/layout/_no-sidebar.scss @@ -0,0 +1,12 @@ +.no-sidebar { + + .content-area { + float: none; + margin-left: auto; + margin-right: auto; + } + + .site-main { + margin-right: 0; + } +} diff --git a/sass/layout/_sidebar-content.scss b/sass/layout/_sidebar-content.scss index 03eb2d84..e765590e 100644 --- a/sass/layout/_sidebar-content.scss +++ b/sass/layout/_sidebar-content.scss @@ -18,3 +18,5 @@ clear: both; width: $size__site-main; } + +@import "no-sidebar"; diff --git a/sass/media/_captions.scss b/sass/media/_captions.scss index c299bfe8..1f7f60c3 100644 --- a/sass/media/_captions.scss +++ b/sass/media/_captions.scss @@ -3,6 +3,7 @@ max-width: 100%; img[class*="wp-image-"] { + @include center-block; } diff --git a/sass/media/_galleries.scss b/sass/media/_galleries.scss index c3801ab2..f42aa463 100644 --- a/sass/media/_galleries.scss +++ b/sass/media/_galleries.scss @@ -10,8 +10,9 @@ // Loops to enumerate the classes for gallery columns. @for $i from 2 through 9 { + .gallery-columns-#{$i} & { - max-width: ( 100% / $i ); + max-width: map-get($columns, $i); } } } diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss index 578cdcee..54ff5336 100644 --- a/sass/mixins/_mixins-master.scss +++ b/sass/mixins/_mixins-master.scss @@ -22,3 +22,8 @@ @mixin clearfix-after() { clear: both; } + +// Column width with margin +@mixin column-width($numberColumns: 3) { + width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns ); +} diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss index f71106bd..b935555b 100644 --- a/sass/modules/_accessibility.scss +++ b/sass/modules/_accessibility.scss @@ -1,21 +1,28 @@ /* Text meant only for screen readers. */ .screen-reader-text { + border: 0; clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; + clip-path: inset(50%); height: 1px; - width: 1px; + margin: -1px; overflow: hidden; - word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ + 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. &:focus { background-color: $color__background-screen; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; + clip-path: none; color: $color__text-screen; display: block; + @include font-size(0.875); - font-weight: bold; + + font-weight: 700; height: auto; left: 5px; line-height: normal; @@ -23,7 +30,7 @@ text-decoration: none; top: 5px; width: auto; - z-index: 100000; /* Above WP toolbar. */ + z-index: 100000; // Above WP toolbar. } } diff --git a/sass/modules/_alignments.scss b/sass/modules/_alignments.scss index 5db6ab4e..c74338d9 100644 --- a/sass/modules/_alignments.scss +++ b/sass/modules/_alignments.scss @@ -2,15 +2,20 @@ 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; } diff --git a/sass/modules/_clearings.scss b/sass/modules/_clearings.scss index 444b6b60..7654d769 100644 --- a/sass/modules/_clearings.scss +++ b/sass/modules/_clearings.scss @@ -1,23 +1,18 @@ -.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, +.entry-content, +.comment-content, +.site-header, +.site-content, +.site-footer { -.clear:after, -.entry-content:after, -.comment-content:after, -.site-header:after, -.site-content:after, -.site-footer:after { - @include clearfix-after; + &::before, + &::after { + + @include clearfix; + } + + &::after { + + @include clearfix-after; + } } diff --git a/sass/modules/_infinite-scroll.scss b/sass/modules/_infinite-scroll.scss index 11721379..88674446 100644 --- a/sass/modules/_infinite-scroll.scss +++ b/sass/modules/_infinite-scroll.scss @@ -1,10 +1,10 @@ -/* Globally hidden elements when Infinite Scroll is supported and in use. */ -.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ -.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ +/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ +.infinite-scroll .posts-navigation, +.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; } diff --git a/sass/navigation/_links.scss b/sass/navigation/_links.scss index 95a5b4d2..2e59a073 100644 --- a/sass/navigation/_links.scss +++ b/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; diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss index 1a2b0402..d88b0a68 100644 --- a/sass/navigation/_menus.scss +++ b/sass/navigation/_menus.scss @@ -24,6 +24,7 @@ } li { + &:hover > ul, &.focus > ul { left: 100%; @@ -77,9 +78,11 @@ } @media screen and (min-width: 37.5em) { + .menu-toggle { display: none; } + .main-navigation ul { display: block; } diff --git a/sass/shop/_checkout.scss b/sass/shop/_checkout.scss new file mode 100644 index 00000000..abe52aa9 --- /dev/null +++ b/sass/shop/_checkout.scss @@ -0,0 +1,21 @@ +@media screen and (min-width: 768px) { + + .col2-set { + + .form-row-first { + float: left; + margin-right: $columns__margin; + } + + .form-row-last { + float: right; + margin-right: 0; + } + + .form-row-first, + .form-row-last { + + @include column-width(2); + } + } +} diff --git a/sass/shop/_components.scss b/sass/shop/_components.scss new file mode 100644 index 00000000..9a4633d7 --- /dev/null +++ b/sass/shop/_components.scss @@ -0,0 +1,282 @@ +/** + * Header cart + */ +.site-header-cart { + position: relative; + margin: 0; + padding: 0; + + @include clearfix; + + .cart-contents { + text-decoration: none; + } + + .widget_shopping_cart { + display: none; + } + + .product_list_widget { + margin: 0; + padding: 0; + } +} + +/** + * Star rating + */ +.star-rating { + overflow: hidden; + position: relative; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + width: 5.3em; + font-family: star; + font-weight: 400; + + &::before { + content: "\53\53\53\53\53"; + opacity: 0.25; + float: left; + top: 0; + left: 0; + position: absolute; + } + + span { + overflow: hidden; + float: left; + top: 0; + left: 0; + position: absolute; + padding-top: 1.5em; + } + + span::before { + content: "\53\53\53\53\53"; + top: 0; + position: absolute; + left: 0; + color: $color__link; + } +} + +p.stars { + + a { + position: relative; + height: 1em; + width: 1em; + text-indent: -999em; + display: inline-block; + text-decoration: none; + margin-right: 1px; + font-weight: 400; + + &::before { + + display: block; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + line-height: 1; + font-family: star; + content: "\53"; + color: $color__text-main; + text-indent: 0; + opacity: 0.25; + } + + &:hover { + + ~ a::before { + content: "\53"; + color: $color__text-main; + opacity: 0.25; + } + } + } + + &:hover { + + a { + + &::before { + content: "\53"; + color: $color__link; + opacity: 1; + } + } + } + + &.selected { + + a.active { + + &::before { + content: "\53"; + color: $color__link; + opacity: 1; + } + + ~ a::before { + content: "\53"; + color: $color__text-main; + opacity: 0.25; + } + } + + a:not(.active) { + + &::before { + content: "\53"; + color: $color__link; + opacity: 1; + } + } + } +} + +/** + * Tabs + */ +.woocommerce-tabs { + + ul.tabs { + list-style: none; + margin: 0; + padding: 0; + text-align: left; + + li { + display: block; + margin: 0; + position: relative; + + a { + padding: 1em 0; + display: block; + } + } + } + + .panel { + + h2:first-of-type { + margin-bottom: 1em; + } + } +} + +/** + * Password strength meter + */ +.woocommerce-password-strength { + text-align: right; + + &.strong { + color: $woocommerce__color-success; + } + + &.short { + color: $woocommerce__color-error; + } + + &.bad { + color: $woocommerce__color-error; + } + + &.good { + color: $woocommerce__color-info; + } +} + +/** + * 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; + } + } +} + +.required { + color: #f00; +} + +/** + * Notices + */ +.woocommerce-message, +.woocommerce-info, +.woocommerce-error, +.woocommerce-noreviews, +p.no-comments { + + @include clearfix; + background-color: $woocommerce__color-success; + clear: both; +} + +.woocommerce-info, +.woocommerce-noreviews, +p.no-comments { + background-color: $woocommerce__color-info; +} + +.woocommerce-error { + background-color: $woocommerce__color-error; +} + +.demo_store { + position: fixed; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 1em; + background-color: $woocommerce__color-info; + z-index: 9999; +} + +@media screen and (min-width: 48em) { + + /** + * Header cart + */ + .site-header-cart { + + .widget_shopping_cart { + position: absolute; + top: 100%; + width: 100%; + z-index: 999999; + left: -999em; + display: block; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + } + + &:hover, + &.focus { + + .widget_shopping_cart { + left: 0; + display: block; + } + } + } +} diff --git a/sass/shop/_products.scss b/sass/shop/_products.scss new file mode 100644 index 00000000..5d39372e --- /dev/null +++ b/sass/shop/_products.scss @@ -0,0 +1,66 @@ +ul.products { + + @include clearfix; + margin: 0; + padding: 0; + + li.product { + list-style: none; + position: relative; + margin-bottom: 2em; + + .woocommerce-loop-product__title { + font-size: 1rem; + } + + img { + display: block; + } + + .button { + display: block; + } + } +} + +@media screen and (min-width: 48em) { + + ul.products { + + li.product { + + @include column-width(3); + float: left; + margin-right: $columns__margin; + + &.first { + clear: both; + } + + &.last { + margin-right: 0; + } + } + } + + ul.products.columns-1 { + + li.product { + float: none; + width: 100%; + } + + } + + @for $i from 2 through 6 { + + ul.products.columns-#{$i} { + + li.product { + + @include column-width( $i ); + } + + } + } +} diff --git a/sass/shop/_single-product.scss b/sass/shop/_single-product.scss new file mode 100644 index 00000000..e8bb8676 --- /dev/null +++ b/sass/shop/_single-product.scss @@ -0,0 +1,90 @@ +.single-product { + + div.product { + + @include clearfix; + position: relative; + + .woocommerce-product-gallery { + position: relative; + float: left; + + .woocommerce-product-gallery__trigger { + position: absolute; + top: 2em; + right: 1em; + display: block; + z-index: 99; + } + + .flex-viewport { + margin-bottom: 1em; + } + + .flex-control-thumbs { + + @include clearfix; + margin: 0; + padding: 0; + + li { + list-style: none; + cursor: pointer; + float: left; + + img { + opacity: 0.5; + + &.flex-active { + opacity: 1; + } + } + + &:hover { + + img { + opacity: 1; + } + } + } + } + + @for $i from 2 through 5 { + + &.woocommerce-product-gallery--columns-#{$i} { + + .flex-control-thumbs { + + li { + + @include column-width($i); + + &:nth-child(#{$i}n) { + margin-right: 0; + } + + &:nth-child(#{$i}n+1) { + clear: both; + } + } + } + } + } + } + } +} + +.stock { + + &:empty::before { + display: none; + } + + &.in-stock { + color: $woocommerce__color-success; + } + + &.out-of-stock { + color: $woocommerce__color-error; + } +} diff --git a/sass/shop/_tables.scss b/sass/shop/_tables.scss new file mode 100644 index 00000000..36a0ffd8 --- /dev/null +++ b/sass/shop/_tables.scss @@ -0,0 +1,87 @@ +table.shop_table_responsive { + + thead { + display: none; + } + + tbody { + + th { + display: none; + } + } + + tr { + + td { + display: block; + text-align: right; + clear: both; + + &::before { + content: attr(data-title) ": "; + float: left; + } + + &.product-remove { + + a { + text-align: left; + } + + &::before { + display: none; + } + } + + &.actions, + &.download-actions { + + &::before { + display: none; + } + } + + &.download-actions { + + .button { + display: block; + text-align: center; + } + } + } + } +} + +@media screen and (min-width: 48em) { + + table.shop_table_responsive { + + thead { + display: table-header-group; + } + + tbody { + + th { + display: table-cell; + } + } + + tr { + + th, + td { + text-align: left; + } + + td { + display: table-cell; + + &::before { + display: none; + } + } + } + } +} diff --git a/sass/shop/_widgets.scss b/sass/shop/_widgets.scss new file mode 100644 index 00000000..2336d79d --- /dev/null +++ b/sass/shop/_widgets.scss @@ -0,0 +1,65 @@ +/** + * WooCommerce Price Filter + */ +.widget_price_filter { + + .price_slider { + margin-bottom: 1.5em; + } + + .price_slider_amount { + text-align: right; + line-height: 2.4; + + .button { + float: left; + } + } + + .ui-slider { + position: relative; + text-align: left; + } + + .ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1em; + height: 1em; + cursor: ew-resize; + outline: none; + background: $color__link; + box-sizing: border-box; + margin-top: -0.25em; + opacity: 1; + + &:last-child { + margin-left: -1em; + } + + &:hover, + &.ui-state-active { + box-shadow: 0 0 0 0.25em rgba(#000, 0.1); + } + } + + .ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + display: block; + border: 0; + background: $color__link; + } + + .price_slider_wrapper .ui-widget-content { + background: rgba(0, 0, 0, 0.1); + } + + .ui-slider-horizontal { + height: 0.5em; + } + + .ui-slider-horizontal .ui-slider-range { + height: 100%; + } +} diff --git a/sass/site/_site.scss b/sass/site/_site.scss index 9e4b9db4..23408f0c 100644 --- a/sass/site/_site.scss +++ b/sass/site/_site.scss @@ -1,5 +1,6 @@ // @import "../layout/content-sidebar"; // @import "../layout/sidebar-content"; + /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ diff --git a/sass/site/primary/_comments.scss b/sass/site/primary/_comments.scss index 13760c5c..df8485a0 100644 --- a/sass/site/primary/_comments.scss +++ b/sass/site/primary/_comments.scss @@ -1,6 +1,7 @@ .comment-content a { word-wrap: break-word; } + .bypostauthor { display: block; } diff --git a/sass/site/primary/_posts-and-pages.scss b/sass/site/primary/_posts-and-pages.scss index ceed29f1..9d6100d0 100644 --- a/sass/site/primary/_posts-and-pages.scss +++ b/sass/site/primary/_posts-and-pages.scss @@ -2,7 +2,8 @@ display: block; } -.hentry { +.post, +.page { margin: 0 0 1.5em; } diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss index 09b3d742..418343e5 100644 --- a/sass/site/secondary/_widgets.scss +++ b/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%; } diff --git a/sass/style.scss b/sass/style.scss index a53fef63..445764d2 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,8 +1,8 @@ /*! Theme Name: _s -Theme URI: http://underscores.me/ +Theme URI: https://underscores.me/ Author: Automattic -Author URI: http://automattic.com/ +Author URI: https://automattic.com/ 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. Version: 1.0.0 License: GNU General Public License v2 or later @@ -11,13 +11,13 @@ 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 http://underscores.me/, (C) 2012-2016 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 -Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- diff --git a/sass/typography/_copy.scss b/sass/typography/_copy.scss index db7411f3..31b11f4d 100644 --- a/sass/typography/_copy.scss +++ b/sass/typography/_copy.scss @@ -2,7 +2,10 @@ p { margin-bottom: 1.5em; } -dfn, cite, em, i { +dfn, +cite, +em, +i { font-style: italic; } @@ -17,6 +20,7 @@ address { pre { background: $color__background-pre; font-family: $font__pre; + @include font-size(0.9375); line-height: $font__line-height-pre; margin-bottom: 1.6em; @@ -25,17 +29,23 @@ pre { padding: 1.6em; } -code, kbd, tt, var { +code, +kbd, +tt, +var { font-family: $font__code; + @include font-size(0.9375); } -abbr, acronym { +abbr, +acronym { border-bottom: 1px dotted $color__border-abbr; cursor: help; } -mark, ins { +mark, +ins { background: $color__background-ins; text-decoration: none; } diff --git a/sass/typography/_headings.scss b/sass/typography/_headings.scss index 8333692d..2c41a742 100644 --- a/sass/typography/_headings.scss +++ b/sass/typography/_headings.scss @@ -1,3 +1,8 @@ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { clear: both; } diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss index b25e6cc2..db6f863a 100644 --- a/sass/typography/_typography.scss +++ b/sass/typography/_typography.scss @@ -6,10 +6,10 @@ optgroup, textarea { color: $color__text-main; font-family: $font__main; + @include font-size(1); line-height: $font__line-height-body; } @import "headings"; - @import "copy"; diff --git a/sass/variables-site/_colors.scss b/sass/variables-site/_colors.scss index f2dba39a..3b9e719e 100644 --- a/sass/variables-site/_colors.scss +++ b/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-visited: purple; -$color__link-hover: midnightblue; +$color__link: #4169e1; //royalblue +$color__link-visited: #800080; //purple +$color__link-hover: #191970; //midnightblue $color__text-main: #404040; $color__border-button: #ccc #ccc #bbb; diff --git a/sass/variables-site/_columns.scss b/sass/variables-site/_columns.scss new file mode 100644 index 00000000..27918b3e --- /dev/null +++ b/sass/variables-site/_columns.scss @@ -0,0 +1,13 @@ +$columns: ( + 1: 100%, + 2: 50%, + 3: 33.33%, + 4: 25%, + 5: 20%, + 6: 16.66%, + 7: 14.28%, + 8: 12.5%, + 9: 11.11% +); + +$columns__margin: 3.8%; diff --git a/sass/variables-site/_typography.scss b/sass/variables-site/_typography.scss index 302891ea..324432fd 100644 --- a/sass/variables-site/_typography.scss +++ b/sass/variables-site/_typography.scss @@ -1,5 +1,5 @@ $font__main: sans-serif; -$font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; -$font__pre: "Courier 10 Pitch", Courier, monospace; +$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; diff --git a/sass/variables-site/_variables-site.scss b/sass/variables-site/_variables-site.scss index 72ab8847..1b23d510 100644 --- a/sass/variables-site/_variables-site.scss +++ b/sass/variables-site/_variables-site.scss @@ -1,3 +1,4 @@ @import "colors"; @import "typography"; @import "structure"; +@import "columns"; diff --git a/sass/woocommerce.scss b/sass/woocommerce.scss new file mode 100644 index 00000000..0a442c0b --- /dev/null +++ b/sass/woocommerce.scss @@ -0,0 +1,44 @@ +/* +Theme Name: _s + +WooCommerce styles override +*/ + +// WooCommerce color variables +$woocommerce__color-error: #e2401c; +$woocommerce__color-success: #0f834d; +$woocommerce__color-info: #3d9cd2; + +// Imports +@import "variables-site/variables-site"; +@import "mixins/mixins-master"; + +/** + * Shop tables + */ +@import "shop/tables"; + +/** + * Products + */ +@import "shop/products"; + +/** + * Single product + */ +@import "shop/single-product"; + +/** + * Checkout + */ +@import "shop/checkout"; + +/** + * General WooCommerce components + */ +@import "shop/components"; + +/** + * WooCommerce widgets + */ +@import "shop/widgets"; diff --git a/search.php b/search.php index 9f6b79df..d0914266 100644 --- a/search.php +++ b/search.php @@ -7,24 +7,27 @@ * @package _s */ -get_header(); ?> +get_header(); +?>
- + get_template_part( 'template-parts/content', 'none' ); - endif; ?> + endif; + ?>
diff --git a/single.php b/single.php index d096016b..0abfd0f2 100644 --- a/single.php +++ b/single.php @@ -7,13 +7,15 @@ * @package _s */ -get_header(); ?> +get_header(); +?>
_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. +Version: 1.0.0 +License: GNU General Public License v2 or later +License URI: LICENSE +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. + +_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 +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +# Normalize +# Typography +# Elements +# Forms +# Navigation + ## Links + ## Menus +# Accessibility +# Alignments +# Clearings +# Widgets +# Content + ## Posts and pages + ## Comments +# Infinite scroll +# Media + ## Captions + ## Galleries +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +# Normalize +--------------------------------------------------------------*/ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/** + * Add the correct font size in all browsers. + */ +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ +button, +select { + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + +/*-------------------------------------------------------------- +# Typography +--------------------------------------------------------------*/ +body, +button, +input, +select, +optgroup, +textarea { + color: #404040; + font-family: sans-serif; + font-size: 16px; + font-size: 1rem; + line-height: 1.5; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; +} + +p { + margin-bottom: 1.5em; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +blockquote { + margin: 0 1.5em; +} + +address { + margin: 0 0 1.5em; +} + +pre { + background: #eee; + font-family: "Courier 10 Pitch", courier, monospace; + font-size: 15px; + font-size: 0.9375rem; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} + +code, +kbd, +tt, +var { + font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + font-size: 15px; + font-size: 0.9375rem; +} + +abbr, +acronym { + border-bottom: 1px dotted #666; + cursor: help; +} + +mark, +ins { + background: #fff9c0; + text-decoration: none; +} + +big { + font-size: 125%; +} + +/*-------------------------------------------------------------- +# Elements +--------------------------------------------------------------*/ + +/* 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; +} + +body { + background: #fff; +} + +hr { + background-color: #ccc; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} + +ul, +ol { + margin: 0 3em 1.5em 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li > ul, +li > ol { + margin-bottom: 0; + margin-right: 1.5em; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 1.5em 1.5em; +} + +img { + height: auto; + max-width: 100%; +} + +figure { + margin: 1em 0; +} + +table { + margin: 0 0 1.5em; + width: 100%; +} + +/*-------------------------------------------------------------- +# Forms +--------------------------------------------------------------*/ +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-radius: 3px; + background: #e6e6e6; + color: rgba(0, 0, 0, 0.8); + font-size: 12px; + font-size: 0.75rem; + line-height: 1; + padding: 0.6em 1em 0.4em; +} + +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + border-color: #ccc #bbb #aaa; +} + +button:active, +button:focus, +input[type="button"]:active, +input[type="button"]:focus, +input[type="reset"]:active, +input[type="reset"]:focus, +input[type="submit"]:active, +input[type="submit"]:focus { + border-color: #aaa #bbb #bbb; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + color: #666; + border: 1px solid #ccc; + border-radius: 3px; + padding: 3px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: #111; +} + +select { + border: 1px solid #ccc; +} + +textarea { + width: 100%; +} + +/*-------------------------------------------------------------- +# Navigation +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +## Links +--------------------------------------------------------------*/ +a { + color: #4169e1; +} + +a:visited { + color: #800080; +} + +a:hover, +a:focus, +a:active { + color: #191970; +} + +a:focus { + outline: thin dotted; +} + +a:hover, +a:active { + outline: 0; +} + +/*-------------------------------------------------------------- +## Menus +--------------------------------------------------------------*/ +.main-navigation { + clear: both; + display: block; + float: right; + width: 100%; +} + +.main-navigation ul { + display: none; + list-style: none; + margin: 0; + padding-right: 0; +} + +.main-navigation ul ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + float: right; + position: absolute; + top: 100%; + right: -999em; + z-index: 99999; +} + +.main-navigation ul ul ul { + right: -999em; + top: 0; +} + +.main-navigation ul ul li:hover > ul, +.main-navigation ul ul li.focus > ul { + right: 100%; +} + +.main-navigation ul ul a { + width: 200px; +} + +.main-navigation ul li:hover > ul, +.main-navigation ul li.focus > ul { + right: auto; +} + +.main-navigation li { + float: right; + position: relative; +} + +.main-navigation a { + display: block; + text-decoration: none; +} + +/* Small menu. */ +.menu-toggle, +.main-navigation.toggled ul { + display: block; +} + +@media screen and (min-width: 37.5em) { + + .menu-toggle { + display: none; + } + + .main-navigation ul { + display: block; + } +} + +.site-main .comment-navigation, +.site-main +.posts-navigation, +.site-main +.post-navigation { + margin: 0 0 1.5em; + overflow: hidden; +} + +.comment-navigation .nav-previous, +.posts-navigation .nav-previous, +.post-navigation .nav-previous { + float: right; + width: 50%; +} + +.comment-navigation .nav-next, +.posts-navigation .nav-next, +.post-navigation .nav-next { + float: left; + text-align: left; + width: 50%; +} + +/*-------------------------------------------------------------- +# Accessibility +--------------------------------------------------------------*/ + +/* Text meant only for screen readers. */ +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: #21759b; + display: block; + font-size: 14px; + font-size: 0.875rem; + font-weight: 700; + height: auto; + right: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} + +/* Do not show the outline on the skip link target. */ +#content[tabindex="-1"]:focus { + outline: 0; +} + +/*-------------------------------------------------------------- +# Alignments +--------------------------------------------------------------*/ +.alignleft { + display: inline; + float: right; + margin-left: 1.5em; + margin-bottom: 1.5em; +} + +.alignright { + display: inline; + float: left; + margin-right: 1.5em; + margin-bottom: 1.5em; +} + +.aligncenter { + clear: both; + display: block; + margin-right: auto; + margin-left: auto; + margin-bottom: 1.5em; +} + +/*-------------------------------------------------------------- +# Clearings +--------------------------------------------------------------*/ +.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 { + content: ""; + display: table; + table-layout: fixed; +} + +.clear::after, +.entry-content::after, +.comment-content::after, +.site-header::after, +.site-content::after, +.site-footer::after { + clear: both; +} + +/*-------------------------------------------------------------- +# Widgets +--------------------------------------------------------------*/ +.widget { + margin: 0 0 1.5em; +} + +.widget select { + max-width: 100%; +} + +/*-------------------------------------------------------------- +# Content +--------------------------------------------------------------*/ + +/*-------------------------------------------------------------- +## Posts and pages +--------------------------------------------------------------*/ +.sticky { + display: block; +} + +.post, +.page { + margin: 0 0 1.5em; +} + +.updated:not(.published) { + display: none; +} + +.page-content, +.entry-content, +.entry-summary { + margin: 1.5em 0 0; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} + +/*-------------------------------------------------------------- +## Comments +--------------------------------------------------------------*/ +.comment-content a { + word-wrap: break-word; +} + +.bypostauthor { + display: block; +} + +/*-------------------------------------------------------------- +# Infinite scroll +--------------------------------------------------------------*/ + +/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ +.infinite-scroll .posts-navigation, +.infinite-scroll.neverending .site-footer { + display: none; +} + +/* Re-display the Theme Footer when Infinite Scroll has reached its end. */ +.infinity-end.neverending .site-footer { + display: block; +} + +/*-------------------------------------------------------------- +# Media +--------------------------------------------------------------*/ +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + +/* Make sure embeds and iframes fit their containers. */ +embed, +iframe, +object { + max-width: 100%; +} + +/* Make sure logo link wraps around logo image. */ +.custom-logo-link { + display: inline-block; +} + +/*-------------------------------------------------------------- +## Captions +--------------------------------------------------------------*/ +.wp-caption { + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-right: auto; + margin-left: auto; +} + +.wp-caption .wp-caption-text { + margin: 0.8075em 0; +} + +.wp-caption-text { + text-align: center; +} + +/*-------------------------------------------------------------- +## Galleries +--------------------------------------------------------------*/ +.gallery { + margin-bottom: 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-3 .gallery-item { + max-width: 33.33%; +} + +.gallery-columns-4 .gallery-item { + max-width: 25%; +} + +.gallery-columns-5 .gallery-item { + max-width: 20%; +} + +.gallery-columns-6 .gallery-item { + max-width: 16.66%; +} + +.gallery-columns-7 .gallery-item { + max-width: 14.28%; +} + +.gallery-columns-8 .gallery-item { + max-width: 12.5%; +} + +.gallery-columns-9 .gallery-item { + max-width: 11.11%; +} + +.gallery-caption { + display: block; +} diff --git a/style.css b/style.css index a4c8f096..ca1e0eaf 100644 --- a/style.css +++ b/style.css @@ -1,8 +1,8 @@ -/* +/*! Theme Name: _s -Theme URI: http://underscores.me/ +Theme URI: https://underscores.me/ Author: Automattic -Author URI: http://automattic.com/ +Author URI: https://automattic.com/ 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. Version: 1.0.0 License: GNU General Public License v2 or later @@ -11,13 +11,13 @@ 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 http://underscores.me/, (C) 2012-2016 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 -Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ */ /*-------------------------------------------------------------- @@ -46,85 +46,112 @@ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/ /*-------------------------------------------------------------- # Normalize --------------------------------------------------------------*/ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ html { - font-family: sans-serif; + line-height: 1.15; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; } +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ body { margin: 0; } -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -audio, -canvas, -progress, -video { - display: inline-block; - vertical-align: baseline; -} - -audio:not([controls]) { - display: none; - height: 0; -} - -[hidden], -template { - display: none; -} - -a { - background-color: transparent; -} - -a:active, -a:hover { - outline: 0; -} - -abbr[title] { - border-bottom: 1px dotted; -} - -b, -strong { - font-weight: bold; -} - -dfn { - font-style: italic; -} - +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ h1 { font-size: 2em; margin: 0.67em 0; } -mark { - background: #ff0; - color: #000; +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +pre { + font-family: monospace, monospace; + font-size: 1em; +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +/** + * Add the correct font size in all browsers. + */ small { font-size: 80%; } +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ sub, sup { font-size: 75%; @@ -133,130 +160,204 @@ sup { vertical-align: baseline; } -sup { - top: -0.5em; -} - sub { bottom: -0.25em; } +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ img { - border: 0; + border-style: none; } -svg:not(:root) { - overflow: hidden; -} - -figure { - margin: 1em 40px; -} - -hr { - box-sizing: content-box; - height: 0; -} - -pre { - overflow: auto; -} - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} +/* Forms + ========================================================================== */ +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ button, input, optgroup, select, textarea { - color: inherit; - font: inherit; + font-family: inherit; + font-size: 100%; + line-height: 1.15; margin: 0; } -button { +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ +button, +input { overflow: visible; } +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ button, select { text-transform: none; } +/** + * Correct the inability to style clickable types in iOS and Safari. + */ button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { +[type="button"], +[type="reset"], +[type="submit"] { -webkit-appearance: button; - cursor: pointer; -} - -button[disabled], -html input[disabled] { - cursor: default; } +/** + * Remove the inner border and padding in Firefox. + */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } -input { - line-height: normal; -} - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - padding: 0; -} - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; +/** + * Restore the focus styles unset by the previous rule. + */ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } +/** + * Correct the padding in Firefox. + */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; + padding: 0.35em 0.75em 0.625em; } +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ legend { - border: 0; + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; padding: 0; + white-space: normal; } +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ textarea { overflow: auto; } -optgroup { - font-weight: bold; -} - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; padding: 0; } +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ +[hidden] { + display: none; +} + /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ @@ -303,7 +404,7 @@ address { pre { background: #eee; - font-family: "Courier 10 Pitch", Courier, monospace; + font-family: "Courier 10 Pitch", courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; @@ -317,7 +418,7 @@ code, kbd, tt, var { - font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; + font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } @@ -341,30 +442,21 @@ big { /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ + +/* 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 http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - box-sizing: inherit; -} - body { - background: #fff; /* Fallback for when there is no custom background color defined. */ -} - -blockquote:before, -blockquote:after, -q:before, -q:after { - content: ""; -} - -blockquote, -q { - quotes: "" ""; + background: #fff; } hr { @@ -394,7 +486,7 @@ li > ol { } dt { - font-weight: bold; + font-weight: 700; } dd { @@ -402,12 +494,12 @@ dd { } img { - height: auto; /* Make sure images are scaled correctly. */ - max-width: 100%; /* Adhere to container width. */ + height: auto; + max-width: 100%; } figure { - margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */ + margin: 1em 0; } table { @@ -426,11 +518,11 @@ input[type="submit"] { border-color: #ccc #ccc #bbb; border-radius: 3px; background: #e6e6e6; - color: rgba(0, 0, 0, .8); + color: rgba(0, 0, 0, 0.8); font-size: 12px; font-size: 0.75rem; line-height: 1; - padding: .6em 1em .4em; + padding: 0.6em 1em 0.4em; } button:hover, @@ -440,14 +532,14 @@ input[type="submit"]:hover { border-color: #ccc #bbb #aaa; } -button:focus, -input[type="button"]:focus, -input[type="reset"]:focus, -input[type="submit"]:focus, button:active, +button:focus, input[type="button"]:active, +input[type="button"]:focus, input[type="reset"]:active, -input[type="submit"]:active { +input[type="reset"]:focus, +input[type="submit"]:active, +input[type="submit"]:focus { border-color: #aaa #bbb #bbb; } @@ -473,10 +565,6 @@ textarea { padding: 3px; } -select { - border: 1px solid #ccc; -} - input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, @@ -496,6 +584,10 @@ textarea:focus { color: #111; } +select { + border: 1px solid #ccc; +} + textarea { width: 100%; } @@ -503,21 +595,22 @@ textarea { /*-------------------------------------------------------------- # Navigation --------------------------------------------------------------*/ + /*-------------------------------------------------------------- ## Links --------------------------------------------------------------*/ a { - color: royalblue; + color: #4169e1; } a:visited { - color: purple; + color: #800080; } a:hover, a:focus, a:active { - color: midnightblue; + color: #191970; } a:focus { @@ -546,16 +639,6 @@ a:active { padding-left: 0; } -.main-navigation li { - float: left; - position: relative; -} - -.main-navigation a { - display: block; - text-decoration: none; -} - .main-navigation ul ul { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; @@ -570,40 +653,28 @@ a:active { top: 0; } +.main-navigation ul ul li:hover > ul, +.main-navigation ul ul li.focus > ul { + left: 100%; +} + .main-navigation ul ul a { width: 200px; } -.main-navigation ul ul li { - -} - -.main-navigation li:hover > a, -.main-navigation li.focus > a { -} - -.main-navigation ul ul :hover > a, -.main-navigation ul ul .focus > a { -} - -.main-navigation ul ul a:hover, -.main-navigation ul ul a.focus { -} - .main-navigation ul li:hover > ul, .main-navigation ul li.focus > ul { left: auto; } -.main-navigation ul ul li:hover > ul, -.main-navigation ul ul li.focus > ul { - left: 100%; +.main-navigation li { + float: left; + position: relative; } -.main-navigation .current_page_item > a, -.main-navigation .current-menu-item > a, -.main-navigation .current_page_ancestor > a, -.main-navigation .current-menu-ancestor > a { +.main-navigation a { + display: block; + text-decoration: none; } /* Small menu. */ @@ -613,17 +684,21 @@ a:active { } @media screen and (min-width: 37.5em) { + .menu-toggle { display: none; } + .main-navigation ul { display: block; } } .site-main .comment-navigation, -.site-main .posts-navigation, -.site-main .post-navigation { +.site-main +.posts-navigation, +.site-main +.post-navigation { margin: 0 0 1.5em; overflow: hidden; } @@ -646,14 +721,19 @@ a:active { /*-------------------------------------------------------------- # Accessibility --------------------------------------------------------------*/ + /* Text meant only for screen readers. */ .screen-reader-text { + border: 0; clip: rect(1px, 1px, 1px, 1px); - position: absolute !important; + clip-path: inset(50%); height: 1px; - width: 1px; + margin: -1px; overflow: hidden; - word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */ + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; } .screen-reader-text:focus { @@ -661,11 +741,12 @@ a:active { border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; + clip-path: none; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; - font-weight: bold; + font-weight: 700; height: auto; left: 5px; line-height: normal; @@ -673,7 +754,7 @@ a:active { text-decoration: none; top: 5px; width: auto; - z-index: 100000; /* Above WP toolbar. */ + z-index: 100000; } /* Do not show the outline on the skip link target. */ @@ -688,12 +769,14 @@ a:active { 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 { @@ -701,34 +784,35 @@ a:active { display: block; margin-left: auto; margin-right: auto; + margin-bottom: 1.5em; } /*-------------------------------------------------------------- # Clearings --------------------------------------------------------------*/ -.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 { +.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 { content: ""; display: table; table-layout: fixed; } -.clear:after, -.entry-content:after, -.comment-content:after, -.site-header:after, -.site-content:after, -.site-footer:after { +.clear::after, +.entry-content::after, +.comment-content::after, +.site-header::after, +.site-content::after, +.site-footer::after { clear: both; } @@ -739,7 +823,6 @@ a:active { margin: 0 0 1.5em; } -/* Make sure select elements fit in widgets. */ .widget select { max-width: 100%; } @@ -747,6 +830,7 @@ a:active { /*-------------------------------------------------------------- # Content --------------------------------------------------------------*/ + /*-------------------------------------------------------------- ## Posts and pages --------------------------------------------------------------*/ @@ -754,7 +838,8 @@ a:active { display: block; } -.hentry { +.post, +.page { margin: 0 0 1.5em; } @@ -787,13 +872,14 @@ a:active { /*-------------------------------------------------------------- # Infinite scroll --------------------------------------------------------------*/ -/* Globally hidden elements when Infinite Scroll is supported and in use. */ -.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */ -.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */ + +/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ +.infinite-scroll .posts-navigation, +.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; } @@ -863,7 +949,7 @@ object { } .gallery-columns-3 .gallery-item { - max-width: 33.33333%; + max-width: 33.33%; } .gallery-columns-4 .gallery-item { @@ -875,11 +961,11 @@ object { } .gallery-columns-6 .gallery-item { - max-width: 16.66667%; + max-width: 16.66%; } .gallery-columns-7 .gallery-item { - max-width: 14.28571%; + max-width: 14.28%; } .gallery-columns-8 .gallery-item { @@ -887,7 +973,7 @@ object { } .gallery-columns-9 .gallery-item { - max-width: 11.11111%; + max-width: 11.11%; } .gallery-caption { diff --git a/template-parts/content-none.php b/template-parts/content-none.php index 50c2c21b..7da518ff 100644 --- a/template-parts/content-none.php +++ b/template-parts/content-none.php @@ -2,7 +2,7 @@ /** * Template part for displaying a message that posts cannot be found * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ @@ -16,35 +16,36 @@
+ if ( is_home() && current_user_can( 'publish_posts' ) ) : -

Get started here.', '_s' ), - array( - 'a' => array( - 'href' => array(), - ), - ) - ), - esc_url( admin_url( 'post-new.php' ) ) - ); - ?>

+ printf( + '

' . wp_kses( + /* translators: 1: link to WP admin new post page. */ + __( 'Ready to publish your first post? Get started here.', '_s' ), + array( + 'a' => array( + 'href' => array(), + ), + ) + ) . '

', + esc_url( admin_url( 'post-new.php' ) ) + ); - + elseif ( is_search() ) : + ?>

+ else : + ?>

+ endif; + ?>
diff --git a/template-parts/content-page.php b/template-parts/content-page.php index 0c8ad09b..3d34fc34 100644 --- a/template-parts/content-page.php +++ b/template-parts/content-page.php @@ -2,7 +2,7 @@ /** * Template part for displaying page content in page.php * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ @@ -14,36 +14,40 @@ ', '' ); ?> + +
'', - ) ); + ) + ); ?>
%s', '_s' ), - array( - 'span' => array( - 'class' => array(), - ), - ) - ), - get_the_title() + edit_post_link( + sprintf( + wp_kses( + /* translators: %s: Name of current post. Only visible to screen readers */ + __( 'Edit %s', '_s' ), + array( + 'span' => array( + 'class' => array(), + ), + ) ), - '', - '' - ); + wp_kses_post( get_the_title() ) + ), + '', + '' + ); ?>
diff --git a/template-parts/content-search.php b/template-parts/content-search.php index b7ac2ff9..b25dadf2 100644 --- a/template-parts/content-search.php +++ b/template-parts/content-search.php @@ -2,7 +2,7 @@ /** * Template part for displaying results in search pages * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ @@ -15,11 +15,16 @@ + +
diff --git a/template-parts/content.php b/template-parts/content.php index 6e3b38f0..4f7ee77d 100644 --- a/template-parts/content.php +++ b/template-parts/content.php @@ -2,7 +2,7 @@ /** * Template part for displaying posts * - * @link https://codex.wordpress.org/Template_Hierarchy + * @link https://developer.wordpress.org/themes/basics/template-hierarchy/ * * @package _s */ @@ -18,17 +18,23 @@ the_title( '

', '

' ); endif; - if ( 'post' === get_post_type() ) : ?> - - + if ( 'post' === get_post_type() ) : + ?> + + + +
"%s"', '_s' ), @@ -38,13 +44,16 @@ ), ) ), - get_the_title() - ) ); + wp_kses_post( get_the_title() ) + ) + ); - wp_link_pages( array( + wp_link_pages( + array( 'before' => '', - ) ); + ) + ); ?>
diff --git a/woocommerce.css b/woocommerce.css new file mode 100644 index 00000000..0d5c41b6 --- /dev/null +++ b/woocommerce.css @@ -0,0 +1,587 @@ +/* +Theme Name: _s + +WooCommerce styles override +*/ + +/** + * Shop tables + */ +table.shop_table_responsive thead { + display: none; +} + +table.shop_table_responsive tbody th { + display: none; +} + +table.shop_table_responsive tr td { + display: block; + text-align: right; + clear: both; +} + +table.shop_table_responsive tr td::before { + content: attr(data-title) ": "; + float: left; +} + +table.shop_table_responsive tr td.product-remove a { + text-align: left; +} + +table.shop_table_responsive tr td.product-remove::before { + display: none; +} + +table.shop_table_responsive tr td.actions::before, +table.shop_table_responsive tr td.download-actions::before { + display: none; +} + +table.shop_table_responsive tr td.download-actions .button { + display: block; + text-align: center; +} + +@media screen and (min-width: 48em) { + + table.shop_table_responsive thead { + display: table-header-group; + } + + table.shop_table_responsive tbody th { + display: table-cell; + } + + table.shop_table_responsive tr th, + table.shop_table_responsive tr td { + text-align: left; + } + + table.shop_table_responsive tr td { + display: table-cell; + } + + table.shop_table_responsive tr td::before { + display: none; + } +} + +/** + * Products + */ +ul.products { + content: ""; + display: table; + table-layout: fixed; + margin: 0; + padding: 0; +} + +ul.products li.product { + list-style: none; + position: relative; + margin-bottom: 2em; +} + +ul.products li.product .woocommerce-loop-product__title { + font-size: 1rem; +} + +ul.products li.product img { + display: block; +} + +ul.products li.product .button { + display: block; +} + +@media screen and (min-width: 48em) { + + ul.products li.product { + width: 30.79667%; + float: left; + margin-right: 3.8%; + } + + ul.products li.product.first { + clear: both; + } + + ul.products li.product.last { + margin-right: 0; + } + + ul.products.columns-1 li.product { + float: none; + width: 100%; + } + + ul.products.columns-2 li.product { + width: 48.1%; + } + + ul.products.columns-3 li.product { + width: 30.79667%; + } + + ul.products.columns-4 li.product { + width: 22.15%; + } + + ul.products.columns-5 li.product { + width: 16.96%; + } + + ul.products.columns-6 li.product { + width: 13.49333%; + } +} + +/** + * Single product + */ +.single-product div.product { + content: ""; + display: table; + table-layout: fixed; + position: relative; +} + +.single-product div.product .woocommerce-product-gallery { + position: relative; + float: left; +} + +.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger { + position: absolute; + top: 2em; + right: 1em; + display: block; + z-index: 99; +} + +.single-product div.product .woocommerce-product-gallery .flex-viewport { + margin-bottom: 1em; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs { + content: ""; + display: table; + table-layout: fixed; + margin: 0; + padding: 0; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li { + list-style: none; + cursor: pointer; + float: left; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img { + opacity: 0.5; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { + opacity: 1; +} + +.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img { + opacity: 1; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li { + width: 48.1%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li { + width: 30.79667%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li { + width: 22.15%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) { + clear: both; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li { + width: 16.96%; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) { + margin-right: 0; +} + +.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) { + clear: both; +} + +.stock:empty::before { + display: none; +} + +.stock.in-stock { + color: #0f834d; +} + +.stock.out-of-stock { + color: #e2401c; +} + +/** + * Checkout + */ +@media screen and (min-width: 768px) { + + .col2-set .form-row-first { + float: left; + margin-right: 3.8%; + } + + .col2-set .form-row-last { + float: right; + margin-right: 0; + } + + .col2-set .form-row-first, + .col2-set .form-row-last { + width: 48.1%; + } +} + +/** + * General WooCommerce components + */ + +/** + * Header cart + */ +.site-header-cart { + position: relative; + margin: 0; + padding: 0; + content: ""; + display: table; + table-layout: fixed; +} + +.site-header-cart .cart-contents { + text-decoration: none; +} + +.site-header-cart .widget_shopping_cart { + display: none; +} + +.site-header-cart .product_list_widget { + margin: 0; + padding: 0; +} + +/** + * Star rating + */ +.star-rating { + overflow: hidden; + position: relative; + height: 1.618em; + line-height: 1.618; + font-size: 1em; + width: 5.3em; + font-family: star; + font-weight: 400; +} + +.star-rating::before { + content: "\53\53\53\53\53"; + opacity: 0.25; + float: left; + top: 0; + left: 0; + position: absolute; +} + +.star-rating span { + overflow: hidden; + float: left; + top: 0; + left: 0; + position: absolute; + padding-top: 1.5em; +} + +.star-rating span::before { + content: "\53\53\53\53\53"; + top: 0; + position: absolute; + left: 0; + color: #4169e1; +} + +p.stars a { + position: relative; + height: 1em; + width: 1em; + text-indent: -999em; + display: inline-block; + text-decoration: none; + margin-right: 1px; + font-weight: 400; +} + +p.stars a::before { + display: block; + position: absolute; + top: 0; + left: 0; + width: 1em; + height: 1em; + line-height: 1; + font-family: star; + content: "\53"; + color: #404040; + text-indent: 0; + opacity: 0.25; +} + +p.stars a:hover ~ a::before { + content: "\53"; + color: #404040; + opacity: 0.25; +} + +p.stars:hover a::before { + content: "\53"; + color: #4169e1; + opacity: 1; +} + +p.stars.selected a.active::before { + content: "\53"; + color: #4169e1; + opacity: 1; +} + +p.stars.selected a.active ~ a::before { + content: "\53"; + color: #404040; + opacity: 0.25; +} + +p.stars.selected a:not(.active)::before { + content: "\53"; + color: #4169e1; + opacity: 1; +} + +/** + * Tabs + */ +.woocommerce-tabs ul.tabs { + list-style: none; + margin: 0; + padding: 0; + text-align: left; +} + +.woocommerce-tabs ul.tabs li { + display: block; + margin: 0; + position: relative; +} + +.woocommerce-tabs ul.tabs li a { + padding: 1em 0; + display: block; +} + +.woocommerce-tabs .panel h2:first-of-type { + margin-bottom: 1em; +} + +/** + * Password strength meter + */ +.woocommerce-password-strength { + text-align: right; +} + +.woocommerce-password-strength.strong { + color: #0f834d; +} + +.woocommerce-password-strength.short { + color: #e2401c; +} + +.woocommerce-password-strength.bad { + color: #e2401c; +} + +.woocommerce-password-strength.good { + color: #3d9cd2; +} + +/** + * Forms + */ +.form-row.woocommerce-validated input.input-text { + box-shadow: inset 2px 0 0 #0f834d; +} + +.form-row.woocommerce-invalid input.input-text { + box-shadow: inset 2px 0 0 #e2401c; +} + +.required { + color: #f00; +} + +/** + * Notices + */ +.woocommerce-message, +.woocommerce-info, +.woocommerce-error, +.woocommerce-noreviews, +p.no-comments { + content: ""; + display: table; + table-layout: fixed; + background-color: #0f834d; + clear: both; +} + +.woocommerce-info, +.woocommerce-noreviews, +p.no-comments { + background-color: #3d9cd2; +} + +.woocommerce-error { + background-color: #e2401c; +} + +.demo_store { + position: fixed; + left: 0; + bottom: 0; + right: 0; + margin: 0; + padding: 1em; + background-color: #3d9cd2; + z-index: 9999; +} + +@media screen and (min-width: 48em) { + + /** + * Header cart + */ + .site-header-cart .widget_shopping_cart { + position: absolute; + top: 100%; + width: 100%; + z-index: 999999; + left: -999em; + display: block; + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + } + + .site-header-cart:hover .widget_shopping_cart, + .site-header-cart.focus .widget_shopping_cart { + left: 0; + display: block; + } +} + +/** + * WooCommerce widgets + */ + +/** + * WooCommerce Price Filter + */ +.widget_price_filter .price_slider { + margin-bottom: 1.5em; +} + +.widget_price_filter .price_slider_amount { + text-align: right; + line-height: 2.4; +} + +.widget_price_filter .price_slider_amount .button { + float: left; +} + +.widget_price_filter .ui-slider { + position: relative; + text-align: left; +} + +.widget_price_filter .ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1em; + height: 1em; + cursor: ew-resize; + outline: none; + background: #4169e1; + box-sizing: border-box; + margin-top: -0.25em; + opacity: 1; +} + +.widget_price_filter .ui-slider .ui-slider-handle:last-child { + margin-left: -1em; +} + +.widget_price_filter .ui-slider .ui-slider-handle:hover, +.widget_price_filter .ui-slider .ui-slider-handle.ui-state-active { + box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); +} + +.widget_price_filter .ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + display: block; + border: 0; + background: #4169e1; +} + +.widget_price_filter .price_slider_wrapper .ui-widget-content { + background: rgba(0, 0, 0, 0.1); +} + +.widget_price_filter .ui-slider-horizontal { + height: 0.5em; +} + +.widget_price_filter .ui-slider-horizontal .ui-slider-range { + height: 100%; +}