Enhance homepage responsiveness

Tom Rutgers committed Aug 18, 2018

commit 2fa14f254fd6de445e33b977ec41b475beee1e9f

Showing 4 changed files with 69 additions and 14 deletions

source/stylesheets/demo/base/_typography.scss +42 -1

@@	@@ -8,4 +8,45 @@ body {
	p {
	font-size: 18px;
	line-height: 28px;
-	}
	\ No newline at end of file
+	}
+
+
+	h1 {
+	font-size: 64px;
+	font-weight: 700;
+	}
+
+
+	h2 {
+	font-size: 32px;
+	font-weight: 700;
+	}
+
+	h3 {
+	font-size: 24px;
+	font-weight: 700;
+	}
+
+	@media screen and (max-width: $screen-md-max){
+	h1 {
+	font-size: 48px;
+	padding-top: 15%;
+	}
+	}
+
+	@media screen and (max-width: $screen-sm-max){
+	h3 {
+	font-size: 18px;
+	}
+	}
+
+	@media screen and (max-width: $screen-xs-max){
+	h1 {
+	font-size: 32px;
+	}
+
+	h2 {
+	font-size: 24px;
+	}
+	}
+

source/stylesheets/demo/homepage/_hero.scss +1 -4

@@	@@ -5,6 +5,7 @@
	padding-bottom: 42.1875%;
	background-size: cover;
	background-position: center right;
+	background-color: rgba(214,227,227, 1);
	.caption {
	@extend %container;
	}
@@	@@ -14,15 +15,11 @@
	@extend %col-xs-8;
	margin: 0;
	padding-top: 20%;
-	font-size: 64px;
-	font-weight: 700;

	@media screen and (max-width: $screen-md-max){
-	font-size: 48px;
	padding-top: 15%;
	}
	@media screen and (max-width: $screen-xs-max){
-	font-size: 32px;
	padding-top: 10%;
	}
	}

source/stylesheets/demo/homepage/_products.scss +7 -5

@@	@@ -5,18 +5,20 @@

	h2 {
	margin: 0 0 30px;
-	font-size: 32px;
-	font-weight: 700;
	}

	.product {
	@extend %column;
	@extend %col-sm-4;
	@extend %product;
-	margin-bottom: 30px;
+	}
+
+	@media screen and (max-width: $screen-xs-max) {
+	padding-top: 15px;
+	padding-bottom: 15px;

-	@media screen and (max-width: $screen-xs-max) {
-	margin-bottom: 15px;
+	h2 {
+	margin: 0 0 15px;
	}
	}
	}
	\ No newline at end of file

source/stylesheets/demo/products/_product.scss +19 -4

@@	@@ -1,5 +1,19 @@
	%product {
	color: $text-color;
+	margin-bottom: 30px;
+
+	&:hover, &:focus {
+	.product-content {
+	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.10);
+	}
+	}
+
+	.product-content {
+	padding: 10px 30px;
+	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+	transition: box-shadow 400ms ease-in-out;
+	}
+

	img {
	@extend %img-responsive;
@@	@@ -9,15 +23,12 @@
	background-color: #fff;
	}

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

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

-	.price p, h3 {
+	.price p {
	font-size: 24px;
	font-weight: 700;
	}
@@	@@ -31,4 +42,8 @@
	h3 {
	margin: 0;
	}
+
+	@media screen and (max-width: $screen-xs-max) {
+	margin-bottom: 15px;
+	}
	}
	\ No newline at end of file