mirror of
https://github.com/woocommerce/storefront.git
synced 2025-08-20 04:00:29 +08:00
various typography / design tweaks
This commit is contained in:
James Koster
parent
520e4d4438
commit
edf3eaa510
12 changed files with 240 additions and 92 deletions
|
|
@ -33,12 +33,12 @@ h4,
|
|||
h5,
|
||||
h6 {
|
||||
clear: both;
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
margin: 0 0 .53em;
|
||||
color: darken( $color_body, 20% );
|
||||
|
||||
a {
|
||||
font-weight: 900;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -51,15 +51,19 @@ h1,
|
|||
|
||||
h2,
|
||||
.beta {
|
||||
font-size: 2.244em;
|
||||
letter-spacing: -1px;
|
||||
font-size: 2em;
|
||||
line-height: 1.214;
|
||||
|
||||
& + h3 {
|
||||
border-top: 1px solid $color_border;
|
||||
padding-top: .53em;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
.gamma {
|
||||
font-size: 1.618em;
|
||||
font-weight: 700;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4,
|
||||
|
|
@ -68,6 +72,20 @@ h4,
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
table,
|
||||
blockquote,
|
||||
form {
|
||||
& + h2,
|
||||
& + header h2,
|
||||
& + h3,
|
||||
& + h4 {
|
||||
margin-top: 2.244em;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
background-color: #ccc;
|
||||
border: 0;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
padding-top: 2.618em;
|
||||
|
||||
.comments-title {
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
padding-bottom: .53em;
|
||||
margin-bottom: 1.618em;
|
||||
}
|
||||
|
|
@ -27,17 +27,13 @@
|
|||
.comment-meta {
|
||||
.avatar {
|
||||
margin-bottom: 1em;
|
||||
max-width: 32px;
|
||||
max-width: 64px;
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
a.comment-date {
|
||||
opacity: 0.8;
|
||||
font-size: .857em;
|
||||
|
||||
&:hover {
|
||||
color: $color_body;
|
||||
}
|
||||
}
|
||||
|
||||
cite {
|
||||
|
|
@ -53,28 +49,30 @@
|
|||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
margin-left: .53em;
|
||||
content: "\f097";
|
||||
content: "\f0f6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply {
|
||||
@include clearfix;
|
||||
font-size: .857em;
|
||||
margin-bottom: 1.618em;
|
||||
|
||||
.comment-edit-link {
|
||||
border-left: 1px solid $color_border;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color_body;
|
||||
background-color: rgba(0,0,0,0.025);
|
||||
padding: .53em 1em;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-right: 1em;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0,0,0,0.05);
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
content: "\f112";
|
||||
margin-right: .53em;
|
||||
}
|
||||
|
||||
&.comment-edit-link {
|
||||
&:before {
|
||||
content: "\f040";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,13 +87,11 @@
|
|||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.bypostauthor {}
|
||||
|
||||
#respond {
|
||||
clear: both;
|
||||
padding: 1.618em;
|
||||
background-color: rgba(0,0,0,0.0125);
|
||||
border-top: .236em solid rgba(0,0,0,0.025);
|
||||
position: relative;
|
||||
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
|
|
@ -109,6 +105,26 @@
|
|||
form {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#cancel-comment-reply-link {
|
||||
position: absolute;
|
||||
top: -.53em;
|
||||
right: -.53em;
|
||||
display: block;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
overflow: hidden;
|
||||
line-height: 1;
|
||||
font-size: 1.387em;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
content: "\f057";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -150,6 +166,7 @@
|
|||
|
||||
.reply {
|
||||
clear: both;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
ol.children {
|
||||
|
|
@ -207,6 +224,8 @@
|
|||
}
|
||||
|
||||
#respond {
|
||||
padding: 2.618em;
|
||||
|
||||
.comment-form-author,
|
||||
.comment-form-email,
|
||||
.comment-form-url {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,10 @@
|
|||
.posted-on,
|
||||
.byline {
|
||||
font-size: .857em;
|
||||
|
||||
a {
|
||||
@include underlinedLink();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ input[type="submit"],
|
|||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: 0.5 !important;
|
||||
cursor: not-allowed;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.5 !important;
|
||||
|
|
|
|||
|
|
@ -9,12 +9,26 @@
|
|||
.nav-previous {
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
a:before {
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
content: "\f177";
|
||||
margin-right: .53em;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-next {
|
||||
float: right;
|
||||
text-align: right;
|
||||
width: 50%;
|
||||
|
||||
a:after {
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
content: "\f178";
|
||||
margin-left: .53em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
.widget-area {
|
||||
.widget {
|
||||
font-weight: 300;
|
||||
|
||||
|
||||
a.button {
|
||||
font-weight: 700 !important;
|
||||
color: #fff;
|
||||
|
|
@ -199,6 +199,12 @@
|
|||
|
||||
.widget_rating_filter {
|
||||
.wc-layered-nav-rating {
|
||||
margin-bottom: .618em;
|
||||
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -213,12 +219,8 @@
|
|||
font-size: 1.387em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color_body;
|
||||
|
||||
&:hover {
|
||||
color: $color_links;
|
||||
}
|
||||
a:not(.button) {
|
||||
@include underlinedLink();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -20,6 +20,15 @@
|
|||
position: absolute !important;
|
||||
}
|
||||
|
||||
@mixin underlinedLink() {
|
||||
font-weight: 400;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin message($glyph: "\f05a", $color: $info)
|
||||
{
|
||||
padding: 1em 1.618em 1em 3.631em;
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ $header-font: $base-font;
|
|||
$body-background: #f5f5f5;
|
||||
$color_body: #60646c;
|
||||
$color_links: #2c2d33;
|
||||
$color_border: rgba(0,0,0,0.1);
|
||||
$color_border: rgba(0,0,0,0.05);
|
||||
$error: #e2401c;
|
||||
$success: #0f834d;
|
||||
$info: #3D9CD2;
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
}
|
||||
|
||||
.photography-sku {
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
}
|
||||
|
||||
.sku {
|
||||
|
|
|
|||
|
|
@ -448,7 +448,6 @@ ul.products {
|
|||
.variations_button {
|
||||
@include clearfix;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $color_border;
|
||||
}
|
||||
|
||||
.woocommerce-product-rating {
|
||||
|
|
@ -457,13 +456,20 @@ ul.products {
|
|||
line-height: 1;
|
||||
margin-top: -.857em;
|
||||
|
||||
a {
|
||||
@include underlinedLink();
|
||||
}
|
||||
|
||||
.star-rating {
|
||||
float: right;
|
||||
float: left;
|
||||
margin-right: .618em;
|
||||
}
|
||||
}
|
||||
|
||||
.product_meta {
|
||||
font-size: .857em;
|
||||
padding-top: 1em;
|
||||
border-top: 1px solid $color_border;
|
||||
|
||||
.sku_wrapper,
|
||||
.posted_in,
|
||||
|
|
@ -474,6 +480,10 @@ ul.products {
|
|||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@include underlinedLink();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -525,7 +535,7 @@ a.reset_variations {
|
|||
font-weight: 300;
|
||||
|
||||
span {
|
||||
font-weight: 800;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -587,12 +597,16 @@ a.reset_variations {
|
|||
font-size: .857em;
|
||||
padding: 1em 999em;
|
||||
|
||||
a.home {
|
||||
&:before {
|
||||
content: "\f015";
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
margin-right: .53em;
|
||||
a {
|
||||
@include underlinedLink();
|
||||
|
||||
&:first-of-type {
|
||||
&:before {
|
||||
content: "\f015";
|
||||
font-family: "FontAwesome";
|
||||
font-weight: 400;
|
||||
margin-right: .53em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -606,7 +620,7 @@ a.reset_variations {
|
|||
|
||||
li {
|
||||
padding: 1em 0;
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
@include clearfix;
|
||||
|
||||
img {
|
||||
|
|
@ -905,7 +919,7 @@ table.cart {
|
|||
.coupon {
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -1199,11 +1213,11 @@ form.checkout {
|
|||
.my-account-navigation {
|
||||
ul {
|
||||
margin-left: 0;
|
||||
border-top: 1px dotted $color_border;
|
||||
border-top: 1px solid $color_border;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
position: relative;
|
||||
|
||||
&.current-item {
|
||||
|
|
@ -1269,19 +1283,40 @@ form.checkout {
|
|||
ul.order_details {
|
||||
@include clearfix;
|
||||
list-style: none;
|
||||
border: 1px solid $color_border;
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
margin: 3.631em 0;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-size: 0px 100%, 16px 16px, 16px 16px;
|
||||
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: auto;
|
||||
bottom: -16px;
|
||||
@include transform(rotate(180deg));
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
padding: 1em 1.618em;
|
||||
border-right: 1px solid $color_border;
|
||||
font-size: .8em;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:first-child {
|
||||
padding-top: 1.618em;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right: 0;
|
||||
border: 0;
|
||||
padding-bottom: 1.618em;
|
||||
}
|
||||
|
||||
strong {
|
||||
|
|
@ -1292,32 +1327,43 @@ ul.order_details {
|
|||
}
|
||||
}
|
||||
|
||||
ul.digital-downloads {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
|
||||
li {
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 1em;
|
||||
border-bottom: 1px dotted $color_border;
|
||||
|
||||
&:before {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f1c6";
|
||||
margin-right: .53em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my_account_orders {
|
||||
.my_account_orders,
|
||||
.account-downloads-table {
|
||||
.button {
|
||||
padding: .53em 1em;
|
||||
padding: .53em .857em;
|
||||
font-size: .857em;
|
||||
margin-right: .236em;
|
||||
}
|
||||
}
|
||||
|
||||
.my_account_orders {
|
||||
.button.view {
|
||||
&:after {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f06e";
|
||||
margin-left: .53em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-downloads-table {
|
||||
.button {
|
||||
&:after {
|
||||
font-family: "FontAwesome";
|
||||
content: "\f0ed";
|
||||
margin-left: .53em;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.my-account-content {
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#payment {
|
||||
.payment_methods {
|
||||
margin-bottom: 1.618em !important;
|
||||
|
|
@ -1534,12 +1580,12 @@ p.stars {
|
|||
list-style: none;
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
border-top: 1px dotted $color_border;
|
||||
border-top: 1px solid $color_border;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0;
|
||||
border-bottom: 1px dotted $color_border;
|
||||
border-bottom: 1px solid $color_border;
|
||||
position: relative;
|
||||
|
||||
a {
|
||||
|
|
@ -1560,6 +1606,21 @@ p.stars {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
h2:first-of-type {
|
||||
font-size: 1.618em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.related,
|
||||
.upsells {
|
||||
> h2:first-child {
|
||||
font-size: 1.618em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-message,
|
||||
|
|
@ -2336,7 +2397,12 @@ dl.variation {
|
|||
/**
|
||||
* My Account
|
||||
*/
|
||||
.col2-set#customer_login {
|
||||
table + .addresses {
|
||||
margin-top: 1.618em;
|
||||
}
|
||||
|
||||
.col2-set#customer_login,
|
||||
.col2-set.addresses {
|
||||
@include span( full );
|
||||
|
||||
.col-1 {
|
||||
|
|
@ -2350,6 +2416,7 @@ dl.variation {
|
|||
|
||||
.my-account-navigation {
|
||||
@include span( 3 of 9 );
|
||||
float: right;
|
||||
}
|
||||
|
||||
.my-account-content {
|
||||
|
|
@ -2369,7 +2436,8 @@ dl.variation {
|
|||
}
|
||||
|
||||
.page-template-template-fullwidth-php {
|
||||
.col2-set#customer_login {
|
||||
.col2-set#customer_login,
|
||||
.col2-set.addresses {
|
||||
.col-1 {
|
||||
@include span( 6 of 12 );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,9 +53,9 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
'storefront_footer_heading_color' => '#494c50',
|
||||
'storefront_footer_text_color' => '#61656b',
|
||||
'storefront_footer_link_color' => '#2c2d33',
|
||||
'storefront_button_background_color' => '#60646c',
|
||||
'storefront_button_background_color' => '#96588a',
|
||||
'storefront_button_text_color' => '#ffffff',
|
||||
'storefront_button_alt_background_color' => '#96588a',
|
||||
'storefront_button_alt_background_color' => '#60646c',
|
||||
'storefront_button_alt_text_color' => '#ffffff',
|
||||
'storefront_layout' => 'right',
|
||||
'background_color' => '#f5f5f5',
|
||||
|
|
@ -544,13 +544,17 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
|
||||
body,
|
||||
.secondary-navigation a,
|
||||
.widget-area .widget a,
|
||||
.onsale,
|
||||
#comments .comment-list .reply a,
|
||||
.pagination .page-numbers li .page-numbers:not(.current), .woocommerce-pagination .page-numbers li .page-numbers:not(.current) {
|
||||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.widget-area .widget a,
|
||||
.hentry .entry-header .posted-on a,
|
||||
.hentry .entry-header .byline a {
|
||||
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['text_color'], 50 ) . ';
|
||||
}
|
||||
|
||||
a {
|
||||
color: ' . $storefront_theme_mods['accent_color'] . ';
|
||||
}
|
||||
|
|
@ -666,21 +670,17 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.woocommerce-breadcrumb a {
|
||||
.woocommerce-breadcrumb a,
|
||||
a.woocommerce-review-link,
|
||||
.product_meta a {
|
||||
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['text_color'], 50 ) . ';
|
||||
}
|
||||
|
||||
.woocommerce-breadcrumb a:hover {
|
||||
color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.onsale {
|
||||
border-color: ' . $storefront_theme_mods['text_color'] . ';
|
||||
}
|
||||
|
||||
.star-rating span:before,
|
||||
.widget-area .widget a:hover,
|
||||
.product_list_widget a:hover,
|
||||
.quantity .plus, .quantity .minus,
|
||||
p.stars a:hover:after,
|
||||
p.stars a:after,
|
||||
|
|
@ -697,6 +697,19 @@ if ( ! class_exists( 'Storefront_Customizer' ) ) :
|
|||
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], 7 ) . ';
|
||||
}
|
||||
|
||||
.order_details {
|
||||
background-color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], 7 ) . ';
|
||||
}
|
||||
|
||||
.order_details li {
|
||||
border-bottom: 2px dotted ' . $storefront_theme_mods['background_color'] . ';
|
||||
}
|
||||
|
||||
.order_details:before,
|
||||
.order_details:after {
|
||||
background: -webkit-linear-gradient(transparent 0,transparent 0),-webkit-linear-gradient(135deg,' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], 7 ) . ' 33.33%,transparent 33.33%),-webkit-linear-gradient(45deg,' . storefront_adjust_color_brightness( $storefront_theme_mods['background_color'], 7 ) . ' 33.33%,transparent 33.33%)
|
||||
}
|
||||
|
||||
@media screen and ( min-width: 768px ) {
|
||||
.site-header-cart .widget_shopping_cart,
|
||||
.site-header .product_list_widget li .quantity {
|
||||
|
|
|
|||
|
|
@ -488,8 +488,8 @@ if ( ! function_exists( 'storefront_paging_nav' ) ) {
|
|||
|
||||
$args = array(
|
||||
'type' => 'list',
|
||||
'next_text' => _x( 'Next', 'Next post', 'storefront' ) . ' <span class="meta-nav">→</span>',
|
||||
'prev_text' => '<span class="meta-nav">←</span> ' . _x( 'Previous', 'Previous post', 'storefront' ),
|
||||
'next_text' => _x( 'Next', 'Next post', 'storefront' ),
|
||||
'prev_text' => _x( 'Previous', 'Previous post', 'storefront' ),
|
||||
);
|
||||
|
||||
the_posts_pagination( $args );
|
||||
|
|
@ -502,8 +502,8 @@ if ( ! function_exists( 'storefront_post_nav' ) ) {
|
|||
*/
|
||||
function storefront_post_nav() {
|
||||
$args = array(
|
||||
'next_text' => '%title <span class="meta-nav">→</span>',
|
||||
'prev_text' => '<span class="meta-nav">←</span> %title',
|
||||
'next_text' => '%title',
|
||||
'prev_text' => '%title',
|
||||
);
|
||||
the_post_navigation( $args );
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
