style: Updated content headers + blockquotes styling

client/scss/components/markdown-content.scss

@@ -24,7 +24,8 @@
 	}
 
 	h1 {
-		background-color: mc('indigo', '50');
+		background-color: mc('blue-grey', '50');
+    background: linear-gradient(to bottom, mc('blue-grey', '50'), mc('indigo', '50'));
 		border-bottom: 2px solid mc('indigo', '100');
 		font-size: 18px;
 		color: mc('indigo', '500');
@@ -46,6 +47,7 @@
 
 	h2 {
 		background-color: lighten(mc('teal', '50'), 5%);
+    background: linear-gradient(to bottom, lighten(mc('teal', '50'), 5%), mc('teal', '50'));
 		border: 1px solid mc('teal', '100');
 		border-right-width: 5px;
 		border-top-left-radius: 3px;
@@ -79,6 +81,7 @@
 
 	h3 {
 		background-color: lighten(mc('blue', '50'), 3%);
+    background: linear-gradient(to bottom, lighten(mc('blue', '50'), 3%), mc('blue', '50'));
 		border: 1px solid mc('blue', '100');
 		border-right-width: 5px;
 		border-top-left-radius: 3px;
@@ -311,8 +314,9 @@
 
 	blockquote {
 		background-color: mc('teal', '50');
+    background: linear-gradient(to bottom right, lighten(mc('teal', '50'), 5%), mc('teal', '50'));
 		border: 1px solid mc('teal', '100');
-		border-bottom-width: 2px;
+		border-left-width: 7px;
 		box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,1);
 		border-radius: 5px;
 		padding: 0 10px;
@@ -334,6 +338,7 @@
 
 		&.is-danger {
 			background-color: mc('red', '100');
+      background: linear-gradient(to bottom right, lighten(mc('red', '50'), 5%), mc('red', '50'));
 			border-color: mc('red', '200');
 			p {
 				color: mc('red', '900');
@@ -342,6 +347,7 @@
 
 		&.is-warning {
 			background-color: mc('amber', '50');
+      background: linear-gradient(to bottom right, lighten(mc('amber', '50'), 5%), mc('amber', '50'));
 			border-color: mc('amber', '200');
 			p {
 				color: darken(mc('amber', '900'), 10%);
@@ -350,6 +356,7 @@
 
 		&.is-success {
 			background-color: mc('green', '50');
+      background: linear-gradient(to bottom right, lighten(mc('green', '50'), 5%), mc('green', '50'));
 			border-color: mc('green', '200');
 			p {
 				color: darken(mc('green', '900'), 10%);
@@ -358,6 +365,7 @@
 
 		&.is-info {
 			background-color: mc('blue', '50');
+      background: linear-gradient(to bottom right, lighten(mc('blue', '50'), 5%), mc('blue', '50'));
 			border-color: mc('blue', '200');
 			p {
 				color: darken(mc('blue', '900'), 10%);