From f94fc1e59b790906e14f1a1a55a38241240288f5 Mon Sep 17 00:00:00 2001 From: Ismail El Korchi Date: Sun, 5 Apr 2020 21:49:27 +0100 Subject: [PATCH] Fix PHP, CSS AND JS coding standards --- 404.php | 16 +++--- comments.php | 14 +++-- functions.php | 85 +++++++++++++++++----------- header.php | 12 ++-- inc/custom-header.php | 22 ++++--- inc/customizer.php | 22 ++++--- inc/jetpack.php | 46 ++++++++------- inc/template-tags.php | 36 +++++++----- inc/woocommerce.php | 2 +- js/customizer.js | 14 ++--- js/navigation.js | 11 ++-- js/skip-link-focus-fix.js | 2 +- sass/elements/_elements.scss | 14 +++-- sass/elements/_lists.scss | 5 +- sass/forms/_buttons.scss | 6 +- sass/forms/_forms.scss | 1 - sass/layout/_no-sidebar.scss | 1 + sass/media/_captions.scss | 1 + sass/media/_galleries.scss | 3 +- sass/mixins/_mixins-master.scss | 2 +- sass/modules/_accessibility.scss | 4 +- sass/modules/_alignments.scss | 2 + sass/modules/_clearings.scss | 38 +++++++------ sass/modules/_infinite-scroll.scss | 9 +-- sass/navigation/_links.scss | 3 + sass/navigation/_menus.scss | 3 + sass/shop/_checkout.scss | 3 + sass/shop/_components.scss | 48 +++++++++++----- sass/shop/_products.scss | 10 ++++ sass/shop/_single-product.scss | 13 ++++- sass/shop/_tables.scss | 23 ++++++-- sass/shop/_widgets.scss | 11 ++-- sass/site/primary/_comments.scss | 1 + sass/style.scss | 2 +- sass/typography/_copy.scss | 18 ++++-- sass/typography/_headings.scss | 7 ++- sass/typography/_typography.scss | 2 +- sass/variables-site/_colors.scss | 6 +- sass/variables-site/_typography.scss | 4 +- sass/woocommerce.scss | 2 +- template-parts/content-page.php | 10 ++-- template-parts/content.php | 36 ++++++------ 42 files changed, 357 insertions(+), 213 deletions(-) diff --git a/404.php b/404.php index 62c3e068..ba5d537a 100644 --- a/404.php +++ b/404.php @@ -31,13 +31,15 @@ get_header();

diff --git a/comments.php b/comments.php index adf9b157..364973f5 100644 --- a/comments.php +++ b/comments.php @@ -36,10 +36,10 @@ if ( post_password_required() ) { '' . 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”', $_s_comment_count, 'comments title', '_s' ) ), - number_format_i18n( $_s_comment_count ), + number_format_i18n( $_s_comment_count ), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped '' . wp_kses_post( get_the_title() ) . '' ); } @@ -50,10 +50,12 @@ if ( post_password_required() ) {
    'ol', - 'short_ping' => true, - ) ); + wp_list_comments( + array( + 'style' => 'ol', + 'short_ping' => true, + ) + ); ?>
diff --git a/functions.php b/functions.php index b7134e76..c440ca41 100644 --- a/functions.php +++ b/functions.php @@ -7,6 +7,11 @@ * @package _s */ +if ( ! defined( '_S_VERSION' ) ) { + // Replace #.# with the version number of the theme on each release. + define( '_S_VERSION', '#.#' ); +} + if ( ! function_exists( '_s_setup' ) ) : /** * Sets up theme defaults and registers support for various WordPress features. @@ -43,27 +48,38 @@ 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', + ) + ); // 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 +89,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' ); @@ -104,15 +123,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' ); @@ -120,11 +141,11 @@ 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_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' ); diff --git a/header.php b/header.php index 0b9ec523..527ab38b 100644 --- a/header.php +++ b/header.php @@ -41,17 +41,19 @@ $_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 39cb10b0..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' ); 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 38310991..2a82dfb5 100644 --- a/inc/jetpack.php +++ b/inc/jetpack.php @@ -16,31 +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', - ), - 'featured-images' => array( - 'archive' => true, - 'post' => true, - 'page' => true, - ), - ) ); + 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' ); diff --git a/inc/template-tags.php b/inc/template-tags.php index 3c7426af..a9a1f1b0 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -17,7 +17,8 @@ if ( ! function_exists( '_s_posted_on' ) ) : $time_string = ''; } - $time_string = sprintf( $time_string, + $time_string = sprintf( + $time_string, esc_attr( get_the_date( DATE_W3C ) ), esc_html( get_the_date() ), esc_attr( get_the_modified_date( DATE_W3C ) ), @@ -30,7 +31,7 @@ if ( ! function_exists( '_s_posted_on' ) ) : '' . $time_string . '' ); - echo '' . $posted_on . ''; // WPCS: XSS OK. + echo '' . $posted_on . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } endif; @@ -46,7 +47,7 @@ if ( ! function_exists( '_s_posted_by' ) ) : '' . esc_html( get_the_author() ) . '' ); - echo ' ' . $byline . ''; // WPCS: XSS OK. + echo ' ' . $byline . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } endif; @@ -62,14 +63,14 @@ if ( ! function_exists( '_s_entry_footer' ) ) : $categories_list = get_the_category_list( esc_html__( ', ', '_s' ) ); if ( $categories_list ) { /* translators: 1: list of categories. */ - printf( '' . 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 } } @@ -132,17 +133,22 @@ if ( ! function_exists( '_s_post_thumbnail' ) ) : - + - plugin_url() . '/assets/fonts/'; $inline_font = '@font-face { 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..fa926517 100644 --- a/js/navigation.js +++ b/js/navigation.js @@ -43,7 +43,7 @@ }; // 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 +59,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 +75,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 +102,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/sass/elements/_elements.scss b/sass/elements/_elements.scss index 2f688149..cf93249a 100644 --- a/sass/elements/_elements.scss +++ b/sass/elements/_elements.scss @@ -1,11 +1,13 @@ -html { - box-sizing: border-box; +/* 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; } -*, -*:before, -*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - box-sizing: inherit; +html { + box-sizing: border-box; } body { 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/_no-sidebar.scss b/sass/layout/_no-sidebar.scss index ae44e48c..07cce07c 100644 --- a/sass/layout/_no-sidebar.scss +++ b/sass/layout/_no-sidebar.scss @@ -1,4 +1,5 @@ .no-sidebar { + .content-area { float: none; margin-left: auto; 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 c1773b8c..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: map-get( $columns, $i ); + max-width: map-get($columns, $i); } } } diff --git a/sass/mixins/_mixins-master.scss b/sass/mixins/_mixins-master.scss index 2578a21c..54ff5336 100644 --- a/sass/mixins/_mixins-master.scss +++ b/sass/mixins/_mixins-master.scss @@ -25,5 +25,5 @@ // Column width with margin @mixin column-width($numberColumns: 3) { - width: map-get( $columns, $numberColumns ) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns ); + width: map-get($columns, $numberColumns) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / $numberColumns ); } diff --git a/sass/modules/_accessibility.scss b/sass/modules/_accessibility.scss index 469887cc..13617885 100644 --- a/sass/modules/_accessibility.scss +++ b/sass/modules/_accessibility.scss @@ -19,8 +19,10 @@ 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; diff --git a/sass/modules/_alignments.scss b/sass/modules/_alignments.scss index 853df289..c74338d9 100644 --- a/sass/modules/_alignments.scss +++ b/sass/modules/_alignments.scss @@ -14,6 +14,8 @@ .aligncenter { clear: both; + @include center-block; + margin-bottom: 1.5em; } diff --git a/sass/modules/_clearings.scss b/sass/modules/_clearings.scss index 444b6b60..facc0934 100644 --- a/sass/modules/_clearings.scss +++ b/sass/modules/_clearings.scss @@ -1,23 +1,25 @@ -.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 { + @include clearfix; } -.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 { + @include clearfix-after; } diff --git a/sass/modules/_infinite-scroll.scss b/sass/modules/_infinite-scroll.scss index 11721379..87a79869 100644 --- a/sass/modules/_infinite-scroll.scss +++ b/sass/modules/_infinite-scroll.scss @@ -1,10 +1,11 @@ -/* 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 Older / Newer Posts Navigation when Infinite Scroll is in use. */ +.infinite-scroll .posts-navigation, +/* Hide the Theme Footer (when set to scrolling) */ +.infinite-scroll.neverending .site-footer { display: none; } -/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */ +/* Re-display the Theme Footer when Infinite Scroll has reached its end. */ .infinity-end.neverending .site-footer { display: block; } 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 index 3aebbcc9..fbd8d4af 100644 --- a/sass/shop/_checkout.scss +++ b/sass/shop/_checkout.scss @@ -2,7 +2,9 @@ * Checkout */ @media screen and (min-width: 768px) { + .col2-set { + .form-row-first { float: left; margin-right: $columns__margin; @@ -15,6 +17,7 @@ .form-row-first, .form-row-last { + @include column-width(2); } } diff --git a/sass/shop/_components.scss b/sass/shop/_components.scss index 996116a8..9a4633d7 100644 --- a/sass/shop/_components.scss +++ b/sass/shop/_components.scss @@ -5,6 +5,7 @@ position: relative; margin: 0; padding: 0; + @include clearfix; .cart-contents { @@ -31,12 +32,12 @@ line-height: 1.618; font-size: 1em; width: 5.3em; - font-family: 'star'; + font-family: star; font-weight: 400; - &:before { + &::before { content: "\53\53\53\53\53"; - opacity: .25; + opacity: 0.25; float: left; top: 0; left: 0; @@ -52,7 +53,7 @@ padding-top: 1.5em; } - span:before { + span::before { content: "\53\53\53\53\53"; top: 0; position: absolute; @@ -62,6 +63,7 @@ } p.stars { + a { position: relative; height: 1em; @@ -72,7 +74,8 @@ p.stars { margin-right: 1px; font-weight: 400; - &:before { + &::before { + display: block; position: absolute; top: 0; @@ -80,25 +83,28 @@ p.stars { width: 1em; height: 1em; line-height: 1; - font-family: "star"; + font-family: star; content: "\53"; color: $color__text-main; text-indent: 0; - opacity: .25; + opacity: 0.25; } &:hover { - ~ a:before { + + ~ a::before { content: "\53"; color: $color__text-main; - opacity: .25; + opacity: 0.25; } } } &:hover { + a { - &:before { + + &::before { content: "\53"; color: $color__link; opacity: 1; @@ -107,22 +113,25 @@ p.stars { } &.selected { + a.active { - &:before { + + &::before { content: "\53"; color: $color__link; opacity: 1; } - ~ a:before { + ~ a::before { content: "\53"; color: $color__text-main; - opacity: .25; + opacity: 0.25; } } a:not(.active) { - &:before { + + &::before { content: "\53"; color: $color__link; opacity: 1; @@ -135,6 +144,7 @@ p.stars { * Tabs */ .woocommerce-tabs { + ul.tabs { list-style: none; margin: 0; @@ -154,6 +164,7 @@ p.stars { } .panel { + h2:first-of-type { margin-bottom: 1em; } @@ -187,13 +198,16 @@ p.stars { * Forms */ .form-row { + &.woocommerce-validated { + input.input-text { box-shadow: inset 2px 0 0 $woocommerce__color-success; } } &.woocommerce-invalid { + input.input-text { box-shadow: inset 2px 0 0 $woocommerce__color-error; } @@ -201,7 +215,7 @@ p.stars { } .required { - color: red; + color: #f00; } /** @@ -212,6 +226,7 @@ p.stars { .woocommerce-error, .woocommerce-noreviews, p.no-comments { + @include clearfix; background-color: $woocommerce__color-success; clear: both; @@ -239,10 +254,12 @@ p.no-comments { } @media screen and (min-width: 48em) { + /** * Header cart */ .site-header-cart { + .widget_shopping_cart { position: absolute; top: 100%; @@ -255,6 +272,7 @@ p.no-comments { &:hover, &.focus { + .widget_shopping_cart { left: 0; display: block; diff --git a/sass/shop/_products.scss b/sass/shop/_products.scss index 3d4dd985..ddbe13c1 100644 --- a/sass/shop/_products.scss +++ b/sass/shop/_products.scss @@ -2,6 +2,7 @@ * Products */ ul.products { + @include clearfix; margin: 0; padding: 0; @@ -26,8 +27,11 @@ ul.products { } @media screen and (min-width: 48em) { + ul.products { + li.product { + @include column-width(3); float: left; margin-right: $columns__margin; @@ -43,7 +47,9 @@ ul.products { } .columns-1 { + ul.products { + li.product { float: none; width: 100%; @@ -52,9 +58,13 @@ ul.products { } @for $i from 2 through 6 { + .columns-#{$i} { + ul.products { + li.product { + @include column-width( $i ); } } diff --git a/sass/shop/_single-product.scss b/sass/shop/_single-product.scss index 7c0fe1c3..db1e7231 100644 --- a/sass/shop/_single-product.scss +++ b/sass/shop/_single-product.scss @@ -2,7 +2,9 @@ * Single Product */ .single-product { + div.product { + @include clearfix; position: relative; @@ -22,6 +24,7 @@ } .flex-control-thumbs { + @include clearfix; margin: 0; padding: 0; @@ -32,7 +35,7 @@ float: left; img { - opacity: .5; + opacity: 0.5; &.flex-active { opacity: 1; @@ -40,6 +43,7 @@ } &:hover { + img { opacity: 1; } @@ -48,9 +52,13 @@ } @for $i from 2 through 5 { + &.woocommerce-product-gallery--columns-#{$i} { + .flex-control-thumbs { + li { + @include column-width($i); &:nth-child(#{$i}n) { @@ -69,7 +77,8 @@ } .stock { - &:empty:before { + + &:empty::before { display: none; } diff --git a/sass/shop/_tables.scss b/sass/shop/_tables.scss index 0b282811..7b76ceed 100644 --- a/sass/shop/_tables.scss +++ b/sass/shop/_tables.scss @@ -2,45 +2,51 @@ * Shop tables */ 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) ': '; + &::before { + content: attr(data-title) ": "; float: left; } &.product-remove { + a { text-align: left; } - &:before { + &::before { display: none; } } &.actions, &.download-actions { - &:before { + + &::before { display: none; } } &.download-actions { + .button { display: block; text-align: center; @@ -51,26 +57,31 @@ table.shop_table_responsive { } @media screen and (min-width: 48em) { + table.shop_table_responsive { + thead { display: table-header-group; } tbody { + th { display: table-cell; } } tr { - th, td { + + th, + td { text-align: left; } td { display: table-cell; - &:before { + &::before { display: none; } } diff --git a/sass/shop/_widgets.scss b/sass/shop/_widgets.scss index 63324b2d..2336d79d 100644 --- a/sass/shop/_widgets.scss +++ b/sass/shop/_widgets.scss @@ -2,13 +2,14 @@ * WooCommerce Price Filter */ .widget_price_filter { + .price_slider { margin-bottom: 1.5em; } .price_slider_amount { text-align: right; - line-height: 2.4em; + line-height: 2.4; .button { float: left; @@ -29,7 +30,7 @@ outline: none; background: $color__link; box-sizing: border-box; - margin-top: -.25em; + margin-top: -0.25em; opacity: 1; &:last-child { @@ -38,7 +39,7 @@ &:hover, &.ui-state-active { - box-shadow: 0 0 0 .25em rgba(#000, 0.1); + box-shadow: 0 0 0 0.25em rgba(#000, 0.1); } } @@ -51,11 +52,11 @@ } .price_slider_wrapper .ui-widget-content { - background: rgba(0,0,0,0.1); + background: rgba(0, 0, 0, 0.1); } .ui-slider-horizontal { - height: .5em; + height: 0.5em; } .ui-slider-horizontal .ui-slider-range { 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/style.scss b/sass/style.scss index 1d5190d3..e3fd9d74 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -11,7 +11,7 @@ Text Domain: _s Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. -Use it to make something cool, have fun, and share what you've learned with others. +Use it to make something cool, have fun, and share what you've learned. _s is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. 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/_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/woocommerce.scss b/sass/woocommerce.scss index e8b987eb..80bc7422 100644 --- a/sass/woocommerce.scss +++ b/sass/woocommerce.scss @@ -9,7 +9,7 @@ WooCommerce styles override */ $woocommerce__color-error: #e2401c; $woocommerce__color-success: #0f834d; -$woocommerce__color-info: #3D9CD2; +$woocommerce__color-info: #3d9cd2; /** * Imports diff --git a/template-parts/content-page.php b/template-parts/content-page.php index 7339a9c3..3d34fc34 100644 --- a/template-parts/content-page.php +++ b/template-parts/content-page.php @@ -20,10 +20,12 @@ '
' . esc_html__( 'Pages:', '_s' ), - 'after' => '
', - ) ); + wp_link_pages( + array( + 'before' => '
' . esc_html__( 'Pages:', '_s' ), + 'after' => '
', + ) + ); ?> diff --git a/template-parts/content.php b/template-parts/content.php index 2e58962e..4f7ee77d 100644 --- a/template-parts/content.php +++ b/template-parts/content.php @@ -33,23 +33,27 @@
"%s"', '_s' ), - array( - 'span' => array( - 'class' => array(), - ), - ) - ), - wp_kses_post( get_the_title() ) - ) ); + the_content( + sprintf( + wp_kses( + /* translators: %s: Name of current post. Only visible to screen readers */ + __( 'Continue reading "%s"', '_s' ), + array( + 'span' => array( + 'class' => array(), + ), + ) + ), + wp_kses_post( get_the_title() ) + ) + ); - wp_link_pages( array( - 'before' => '
' . esc_html__( 'Pages:', '_s' ), - 'after' => '
', - ) ); + wp_link_pages( + array( + 'before' => '
' . esc_html__( 'Pages:', '_s' ), + 'after' => '
', + ) + ); ?>