various typographic tweaks

This commit is contained in:
James Koster 2017-02-07 14:33:17 +00:00
parent c3c5c9fcb6
commit 863f04191e
8 changed files with 227 additions and 75 deletions

View file

@ -81,13 +81,11 @@ h2,
h3,
.gamma {
font-size: ms(3);
font-weight: 600;
}
h4,
.delta {
font-size: ms(2);
font-weight: 700;
}
.alpha,
@ -115,16 +113,16 @@ hr {
background-color: #ccc;
border: 0;
height: 1px;
margin: 0 0 ms(1);
margin: 0 0 ms(2);
}
p {
margin: 0 0 ms(1);
margin: 0 0 ms(2);
}
ul,
ol {
margin: 0 0 ms(1) 3em;
margin: 0 0 ms(2) 3em;
padding: 0;
}
@ -143,7 +141,7 @@ li > ol {
}
dt {
font-weight: 700;
font-weight: 600;
}
dd {
@ -152,7 +150,7 @@ dd {
b,
strong {
font-weight: 700;
font-weight: 600;
}
dfn,
@ -169,7 +167,7 @@ blockquote {
}
address {
margin: 0 0 ms(1);
margin: 0 0 ms(2);
}
pre {
@ -199,7 +197,7 @@ acronym {
mark,
ins {
text-decoration: none;
font-weight: 700;
font-weight: 600;
background: transparent;
}
@ -233,14 +231,10 @@ figure {
}
table {
margin: 0 0 ms(1);
margin: 0 0 ms(2);
width: 100%;
}
th {
font-weight: bold;
}
img {
height: auto; // Make sure images are scaled correctly.
max-width: 100%; // Adhere to container width.
@ -294,6 +288,7 @@ body {
background-position: center center;
position: relative;
z-index: 999;
border-bottom: 1px solid transparent;
.site-logo-anchor,
.site-logo-link,
@ -518,7 +513,7 @@ table {
caption {
padding: 1em 0;
font-weight: 700;
font-weight: 600;
}
td,
@ -532,12 +527,14 @@ table {
}
}
th {
font-weight: 600;
}
thead {
th {
text-transform: uppercase;
padding: ms(2);
vertical-align: middle;
font-weight: 900;
}
}
@ -916,7 +913,7 @@ textarea {
}
label {
font-weight: 600;
font-weight: 400;
}
label.inline {
@ -926,12 +923,17 @@ label.inline {
}
fieldset {
padding: 0;
padding: ms(3);
padding-top: ms(1);
border: 0;
margin: 0;
margin-bottom: ms(3);
margin-top: ms(3);
legend {
font-weight: 700;
font-weight: 600;
padding: ms(-2) ms(1);
margin-left: - ms(1);
}
}
@ -1218,8 +1220,9 @@ button.menu-toggle {
*/
.site-main nav.navigation {
margin: 0 0 ms(1);
@include clearfix;
clear: both;
padding: ms(5) 0;
.nav-previous,
.nav-next {
@ -1267,13 +1270,17 @@ button.menu-toggle {
text-align: center;
clear: both;
ul.page-numbers {
@include clearfix;
}
.page-numbers {
list-style: none;
margin: 0;
@include clearfix;
li {
display: inline-block;
float: left;
.page-numbers {
border-left-width: 0;
@ -1283,10 +1290,8 @@ button.menu-toggle {
color: $color_body;
&.current {
font-weight: 700;
background-color: $color_links;
border-color: $color_links;
color: #fff;
}
&.dots {
@ -1359,12 +1364,7 @@ button.menu-toggle {
font-weight: 300;
a.button {
font-weight: 700 !important;
color: #fff;
&:hover {
color: #fff;
}
font-weight: 600 !important;
}
}
}

View file

@ -2649,6 +2649,65 @@ a.remove {
margin-left: -15px;
margin-top: -15px; }
.woocommerce-pagination .next,
.woocommerce-pagination .prev {
text-indent: -9999px;
display: inline-block;
position: relative; }
.woocommerce-pagination .next:after,
.woocommerce-pagination .prev:after {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f0d9";
text-indent: 0;
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
line-height: 1; }
.woocommerce-pagination .next:after {
content: "\f0da"; }
.woocommerce-breadcrumb .breadcrumb-separator {
text-indent: -9999px;
position: relative;
display: inline-block;
padding: 0 6.8535260698em; }
.woocommerce-breadcrumb .breadcrumb-separator:after {
display: block;
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f105";
font-size: 0.875em;
text-indent: 0;
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
opacity: .25; }
#payment .payment_methods > .wc_payment_method > label:before {
display: inline-block;
font: normal normal normal 14px / 1 FontAwesome;

View file

@ -423,6 +423,59 @@ a.remove {
}
}
.woocommerce-pagination {
.next,
.prev {
text-indent: -9999px;
display: inline-block;
position: relative;
&:after {
@include fa-icon;
content: "\f0d9";
text-indent: 0;
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
@include transform(translateX(-50%) translateY(-50%));
line-height: 1;
}
}
.next {
&:after {
content: "\f0da";
}
}
}
.woocommerce-breadcrumb {
.breadcrumb-separator {
text-indent: -9999px;
position: relative;
display: inline-block;
padding: 0 ms(9);
&:after {
display: block;
@include fa-icon;
content: "\f105";
font-size: ms(-1);
text-indent: 0;
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
@include transform(translateX(-50%) translateY(-50%));
text-align: center;
opacity: .25;
}
}
}
#payment {
.payment_methods {
> .wc_payment_method {

View file

@ -61,7 +61,7 @@
background-color: #fff;
border: 0;
opacity: 0.5;
font-weight: 700;
font-weight: 600;
border-radius: .202em;
&:hover {

View file

@ -35,7 +35,7 @@
}
.sku {
font-weight: 700;
font-weight: 600;
}
}
}

View file

@ -224,7 +224,7 @@ table.shop_table_responsive {
&:before {
content: attr(data-title) ': ';
font-weight: 700;
font-weight: 600;
float: left;
}
@ -281,9 +281,8 @@ ul.products {
text-align: center;
position: relative;
.star-rating,
.price {
margin: 0 auto 1em;
.star-rating {
margin: 0 auto ms(-3);
}
.woocommerce-LoopProduct-link {
@ -294,9 +293,10 @@ ul.products {
display: block;
color: $color_body;
font-weight: 400;
margin-bottom: 1rem;
ins {
font-weight: 700;
font-weight: 600;
margin-left: ms(-2);
background-color: transparent;
}
@ -307,7 +307,7 @@ ul.products {
.woocommerce-loop-product__title {
font-size: 1rem;
font-weight: 400;
margin-bottom: 1em;
margin-bottom: ms(-3);
}
.star-rating {
@ -487,15 +487,13 @@ ul.products {
.quantity {
float: left;
}
.button {
float: right;
margin-right: ms(-1);
}
}
.price {
font-weight: 700;
p.price {
font-size: ms(2);
margin: ms(2) 0;
}
table.variations {
@ -529,8 +527,7 @@ ul.products {
.woocommerce-product-rating {
margin-bottom: ms(3);
@include clearfix;
line-height: 1;
margin-top: -ms(-1);
margin-top: - ms(-1);
a {
@include underlinedLink();
@ -667,8 +664,9 @@ a.reset_variations {
font-size: ms(-1);
padding: 1em 1.387rem;
a {
@include underlinedLink();
.breadcrumb-separator {
display: inline-block;
padding: 0 ms(-3);
}
}
@ -1025,7 +1023,6 @@ form.checkout {
li {
list-style: none !important;
margin-left: 0;
margin-bottom: 1px;
position: relative;
img {
@ -1159,6 +1156,7 @@ form.checkout {
margin-bottom: 0;
float: none;
width: 100%;
margin-top: ms(5);
.button {
font-size: ms(2);
@ -1404,8 +1402,8 @@ ul.order_details {
.star-rating {
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
height: 1.618em;
line-height: 1.618;
font-size: 1em;
width: 5.3em;
font-family: 'star';
@ -1692,13 +1690,15 @@ dl.variation {
* Homepage
*/
.storefront-product-section {
margin-bottom: ms(3);
.section-title {
text-align: center;
margin-bottom: ms(3);
margin-bottom: ms(1);
}
&:last-child {
border-bottom: 0;
margin-bottom: 0;
}
}
@ -1726,10 +1726,10 @@ dl.variation {
* Breadcrumbs
*/
.woocommerce-breadcrumb {
padding: ms(4) 99em ms(2);
padding: ms(2) 99em ms(2);
margin-left: -99em;
margin-right: -99em;
margin-bottom: ms(-1);
margin-bottom: ms(7);
}
/**
@ -2084,7 +2084,11 @@ dl.variation {
.storefront-full-width-content {
.woocommerce-products-header {
text-align: center;
padding: ms(2) 0 ms(4);
padding: 0 0 ms(8);
h1:last-child {
margin-bottom: 0;
}
}
.up-sells,
@ -2277,6 +2281,10 @@ dl.variation {
#ship-to-different-address {
position: relative;
label {
font-weight: 300;
}
.woocommerce-form__input-checkbox {
position: absolute;
top: 50%;

View file

@ -43,22 +43,22 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
*/
public static function get_storefront_default_setting_values() {
return apply_filters( 'storefront_setting_default_values', $args = array(
'storefront_heading_color' => '#484c51',
'storefront_text_color' => '#43454b',
'storefront_heading_color' => '#333333',
'storefront_text_color' => '#6d6d6d',
'storefront_accent_color' => '#96588a',
'storefront_header_background_color' => '#ffffff',
'storefront_header_text_color' => '#73797f',
'storefront_header_link_color' => '#343a3f',
'storefront_header_text_color' => '#6d6d6d',
'storefront_header_link_color' => '#333333',
'storefront_footer_background_color' => '#f0f0f0',
'storefront_footer_heading_color' => '#494c50',
'storefront_footer_text_color' => '#61656b',
'storefront_footer_link_color' => '#2c2d33',
'storefront_button_background_color' => '#96588a',
'storefront_button_text_color' => '#ffffff',
'storefront_button_alt_background_color' => '#2c2d33',
'storefront_footer_heading_color' => '#333333',
'storefront_footer_text_color' => '#6d6d6d',
'storefront_footer_link_color' => '#333333',
'storefront_button_background_color' => '#eeeeee',
'storefront_button_text_color' => '#333333',
'storefront_button_alt_background_color' => '#333333',
'storefront_button_alt_text_color' => '#ffffff',
'storefront_layout' => 'right',
'background_color' => 'f6f6f6',
'background_color' => 'ffffff',
) );
}
@ -526,14 +526,16 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
.site-header-cart .widget_shopping_cart a:hover,
.site-header-cart:hover > li > a,
.site-header ul.menu li.current-menu-item > a {
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 50 ) . ';
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
}
table th {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -7 ) . ';
}
table tbody td {
table tbody td,
fieldset,
fieldset legend {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -2 ) . ';
}
@ -623,7 +625,7 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
color: ' . $storefront_theme_mods['button_text_color'] . ';
}
button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .pagination .page-numbers li .page-numbers.current, .woocommerce-pagination .page-numbers li .page-numbers.current, .widget a.button.checkout {
button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .button.alt, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .widget a.button.checkout {
background-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
border-color: ' . $storefront_theme_mods['button_alt_background_color'] . ';
color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
@ -635,6 +637,11 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
color: ' . $storefront_theme_mods['button_alt_text_color'] . ';
}
.pagination .page-numbers li .page-numbers.current, .woocommerce-pagination .page-numbers li .page-numbers.current {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], $darken_factor ) . ';
color: ' . $storefront_theme_mods['text_color'] . ';
}
#comments .comment-list .comment-content .comment-text {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -7 ) . ';
}
@ -652,19 +659,23 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
color: ' . $storefront_theme_mods['footer_heading_color'] . ';
}
#order_review,
#payment .payment_methods > li .payment_box {
#order_review {
background-color: ' . $storefront_theme_mods['background_color'] . ';
}
#payment .payment_methods > li {
#payment .payment_methods > li .payment_box,
#payment .place-order {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -5 ) . ';
}
#payment .payment_methods > li:hover {
#payment .payment_methods > li {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -10 ) . ';
}
#payment .payment_methods > li:hover {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], -15 ) . ';
}
@media screen and ( min-width: 768px ) {
.secondary-navigation ul.menu a:hover {
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_text_color'], $brighten_factor ) . ';
@ -677,7 +688,16 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
.site-header-cart .widget_shopping_cart,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_background_color'], -8 ) . ';
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_background_color'], -15 ) . ';
}
.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_background_color'], -10 ) . ';
}
.site-header {
border-bottom-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_background_color'], -15 ) . ';
}
}';

View file

@ -31,6 +31,7 @@ if ( ! class_exists( 'Storefront_WooCommerce' ) ) :
add_filter( 'woocommerce_output_related_products_args', array( $this, 'related_products_args' ) );
add_filter( 'woocommerce_product_thumbnails_columns', array( $this, 'thumbnail_columns' ) );
add_filter( 'loop_shop_per_page', array( $this, 'products_per_page' ) );
add_filter( 'woocommerce_breadcrumb_defaults', array( $this,'change_breadcrumb_delimiter' ) );
if ( defined( 'WC_VERSION' ) && version_compare( WC_VERSION, '2.5', '<' ) ) {
add_action( 'wp_footer', array( $this, 'star_rating_script' ) );
@ -182,6 +183,17 @@ if ( ! class_exists( 'Storefront_WooCommerce' ) ) :
return class_exists( $extension ) ? true : false;
}
/**
* Remove the breadcrumb delimiter
* @param array $defaults thre breadcrumb defaults
* @return array thre breadcrumb defaults
* @since 2.2.0
*/
public function change_breadcrumb_delimiter( $defaults ) {
$defaults['delimiter'] = '<span class="breadcrumb-separator"> / </span>';
return $defaults;
}
/**
* Integration Styles & Scripts
*