Merge pull request #15 from henrydays/filipe

Filipe

api/wwwroot/index_old.html

@@ -108,7 +108,7 @@
 
     <section id="precos">
         <div class="container">
-            <div class="col-lg-10 col-lg-offset-1">
+            <div class="col-lg-10 col-lg-offset-1 col-sm-12 col-xs-12">
                 <div class="pre-h1">ENEI 2019</div>
                 <h1>Preços</h1>
                 <hr>

api/wwwroot/main.css

@@ -159,6 +159,12 @@ h1 {
   }
 }
 
+@media (max-width: 769px) {
+  h1 {
+    font-size: 30px;
+  }
+}
+
 h3 {
   letter-spacing: 1px;
   font-weight: normal;
@@ -730,6 +736,12 @@ hr::after {
   position: relative;
 }
 
+@media (max-width: 1024px) {
+  #precos {
+    padding-bottom: 100px;
+  }
+}
+
 #precos hr {
   display: table;
   margin: 0 auto 60px;
@@ -766,6 +778,24 @@ hr::after {
   -webkit-transition: transform 150ms ease-out;
 }
 
+@media (max-width: 1024px) {
+  #precos .price-block {
+    max-width: 210px;
+    padding: 0 15px 40px;
+    margin: 0 10px;
+  }
+}
+
+@media (max-width: 769px) {
+  #precos .price-block {
+    max-width: 350px;
+    min-height: inherit;
+    padding: 0 15px 40px;
+    margin: 0 auto 35px;
+    display: table;
+  }
+}
+
 #precos .price-block:hover {
   transform: scale(1.05);
   -webkit-transform: scale(1.05);
@@ -792,6 +822,12 @@ hr::after {
   font-weight: 400;
 }
 
+@media (max-width: 769px) {
+  #precos .price-block .price {
+    margin: 20px 0;
+  }
+}
+
 #precos .price-block .price span {
   font-size: 30px;
   vertical-align: super;
@@ -845,6 +881,13 @@ hr::after {
   color: #ffffff;
 }
 
+@media (max-width: 769px) {
+  #precos .price-block .buy-button {
+    display: inline-block;
+    margin-top: 30px;
+  }
+}
+
 #precos .ps {
   position: absolute;
   right: 20px;
@@ -903,6 +946,14 @@ hr::after {
   -webkit-transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out;
 }
 
+@media (max-width: 769px) {
+  #accordion li .toggle {
+    font-size: 19px;
+    line-height: 24px;
+    padding: 20px;
+  }
+}
+
 #accordion li .content-accordion {
   display: none;
   padding: 45px 35px;
@@ -911,6 +962,12 @@ hr::after {
   border-top: 0;
 }
 
+@media (max-width: 769px) {
+  #accordion li .content-accordion {
+    padding: 25px;
+  }
+}
+
 #accordion li .content-accordion p {
   margin-bottom: 5px;
 }

api/wwwroot/main.scss

@@ -198,6 +198,9 @@ h1 {
 		font-size: 34px;
 		margin-bottom: 10px;
 	}
+	@include mobile {
+		font-size: 30px;
+	}
 }
 
 h3 {
@@ -605,6 +608,9 @@ hr {
 #precos {
 	text-align: center;
 	position: relative;
+	@include portable {
+		padding-bottom: 100px;
+	}
 	hr {
 		display: table;
 		margin: 0 auto 60px;
@@ -627,6 +633,18 @@ hr {
 		margin: 0 15px;
 		transition: transform $transition-time ease-out;
 		-webkit-transition: transform $transition-time ease-out;
+		@include portable {
+			max-width: 210px;
+			padding: 0 15px 40px;
+			margin: 0 10px;
+		}
+		@include mobile {
+			max-width: 350px;
+			min-height: inherit;
+			padding: 0 15px 40px;
+			margin: 0 auto 35px;
+			display: table;
+		}
 		&:hover {
 			transform: scale(1.05);
 			-webkit-transform: scale(1.05);
@@ -645,6 +663,9 @@ hr {
 		.price {
 			@include font($bai-font, 58px, 58px, $dark-grey);
 			font-weight: 400;
+			@include mobile {
+				margin: 20px 0;
+			}
 			span {
 				font-size: 30px;
 				vertical-align: super;
@@ -689,6 +710,10 @@ hr {
 				background-color: $red;
 				color: $white;
 			}
+			@include mobile {
+				display: inline-block;
+				margin-top: 30px;
+			}
 		}
 	}
 	.ps {
@@ -745,6 +770,11 @@ hr {
 			-webkit-transition: border-color $transition-time ease-out,
 				background-color $transition-time ease-out,
 				color $transition-time ease-out;
+			@include mobile {
+				font-size: 19px;
+				line-height: 24px;
+				padding: 20px;
+			}
 		}
 		.content-accordion {
 			display: none;
@@ -752,6 +782,9 @@ hr {
 			background-color: $white;
 			border: 1px dashed $light-grey;
 			border-top: 0;
+			@include mobile {
+				padding: 25px;
+			}
 			p {
 				margin-bottom: 5px;
 			}
@@ -877,8 +910,8 @@ footer {
 				color $transition-time ease,
 				background-color $transition-time ease;
 			margin-right: -1px;
-			@include portable{
-				padding:15px;
+			@include portable {
+				padding: 15px;
 			}
 		}
 	}