Add product shortcode

3 files changed, 44 insertions, 17 deletions

diff --git a/assets/theme.scss b/assets/theme.scss
index bc39ce7..ce00158 100644
--- a/assets/theme.scss
+++ b/assets/theme.scss
@@ -154,10 +154,10 @@ blockquote {
 		background-color: lemonchiffon;
 	}
 	&--info {
-		background-color: lightskyblue;
+		background-color: azure;
 	}
 	&--danger {
-		background-color: lightcoral;
+		background-color: #ffcccb;
 	}
 	&__title {
 		font-weight: 700;
@@ -166,18 +166,19 @@ blockquote {
 }
 
 .product {
-	width: max-content;
-	position: relative;
+	width: 100%;
 	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-around;
-	padding: 1em;
+	justify-content: space-between;
+	padding: 1.5em;
+	border: 1px solid #333;
 	&__image {
+		margin: auto;
 		width: 100%;
-		max-height: 300px;
-		max-width: 300px;
+		min-width: 300px;
+		max-width: 400px;
 	}
 	&__content {
+		margin-left: 2em;
 		display:flex;
 		flex-direction: column;
 	}
@@ -185,16 +186,19 @@ blockquote {
 		font-weight: 700;
 		font-size: 1.5rem;
 	}
+	&__description {
+		margin-top: 1em;
+	}
 	&__cta {
-		font-weight: 700;
-		font-size: 1.2em;
+		margin-top: 1em;
 		padding: .5em;
-		color: white;
-		background-color: #333;
-		border-bottom: unset;
-		position: absolute;
-		bottom: -1rem;
-		right: -1rem;
+		font-size: 1.2em;
+		text-align: center;
+		border: 1px solid black;
+		box-shadow: 6px 7px 0 0 #333;
+		&:hover {
+			transform: translateY(-7px);
+		}
 	}
 }
 
@@ -343,4 +347,14 @@ blockquote {
 
 		}
 	}
+	.product {
+		flex-wrap: wrap;
+		&__content {
+			margin-left: unset;
+			text-align: center;
+		}
+		&__title {
+			margin-top: 1em;
+		}
+	}
 }
\ No newline at end of file
diff --git a/layouts/partials/shortcodes/product.html b/layouts/partials/shortcodes/product.html
new file mode 100644
index 0000000..d52aa75
--- /dev/null
+++ b/layouts/partials/shortcodes/product.html
@@ -0,0 +1,12 @@
+<div class="product">
+    <amp-img
+        class="product__image"
+        layout="responsive" width="300" height="300"
+        alt="{{ .title }}"
+        src="{{ .image | absURL}}"></amp-img>
+    <div class="product__content">
+        <p class="product__title">{{ .title }}</p>
+        <p class="product__description">{{ .description }}</p>
+        <a class="product__cta" href="{{ .link | absURL }}" role="button">{{ .cta }}</a>
+    </div>
+</div>
\ No newline at end of file
diff --git a/layouts/shortcodes/product.html b/layouts/shortcodes/product.html
new file mode 100644
index 0000000..23e4222
--- /dev/null
+++ b/layouts/shortcodes/product.html
@@ -0,0 +1 @@
+{{ partial "shortcodes/product.html" .Params }}
\ No newline at end of file