Enhance product semantics

Tom Rutgers committed Aug 18, 2018

commit ff531ded8d1d294d3f204612d0abecc12e963aef

Showing 2 changed files with 10 additions and 5 deletions

source/partials/homepage/_products.slim +2 -2

@@	@@ -11,8 +11,8 @@ section.homepage-products
	- product = product[1]

	//link to product by converting the title to a slug
-	= link_to '/products/' + product.title.parameterize
-	.product
+	.product
+	= link_to '/products/' + product.title.parameterize
	.product-image
	= image_tag product.image
	.product-content

source/stylesheets/demo/products/_product.scss +8 -3

@@	@@ -3,13 +3,15 @@
	margin-bottom: 30px;

	&:hover, &:focus {
-	.product-content {
+	a {
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.10);
+	text-decoration: none;
	}
	}

-	.product-content {
-	padding: 10px 30px;
+	a {
+	display: block;
+	color: $text-color;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
	transition: box-shadow 400ms ease-in-out;
	}
@@	@@ -23,6 +25,9 @@
	background-color: #fff;
	}

+	.product-content {
+	padding: 10px 30px;
+	}

	.title, .price {
	display: inline-block;