From a762bd76f7457945981f5cc81ca624bc4a9f26fd Mon Sep 17 00:00:00 2001
From: Emil Baehr <emil.baehr@gmail.com>
Date: Sun, 6 Jan 2019 20:51:40 +0100
Subject: [PATCH] Adding main app icon image, name and price

---
 docs/_sass/layout.scss      | 32 +++++++++++++++++++++++++++++++-
 docs/assets/squircle120.svg | 10 ++++++++++
 docs/index.html             | 17 +++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 docs/assets/squircle120.svg

diff --git a/docs/_sass/layout.scss b/docs/_sass/layout.scss
index f1c4e04..b1cf035 100644
--- a/docs/_sass/layout.scss
+++ b/docs/_sass/layout.scss
@@ -39,7 +39,7 @@ body {
 	grid-column-gap: 30px;
 	grid-template-areas: 
 		"h h h h h h h h h h h h"
-		"p p p p p p p p p p p p"
+		"p p p p p p i i i i i i"
 		"c c c c c c c c c c c c"
 		"f f f f f f f f f f f f";
 }
@@ -100,6 +100,36 @@ nav > ul li a {
 	grid-area: p;
 }
 
+.appInfo {
+	grid-area: i;
+	display: flex;
+}
+
+.appIconLarge {
+	width: 120px;
+	height: 120px;
+	-webkit-clip-path: url(#shape120);
+	clip-path: url(#shape120);
+}
+
+.appNamePriceContainer {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: row;
+}
+
+.appName {
+	display: flex;
+	margin-top: 0px;
+	color: #fff;
+}
+
+.appPrice {
+	display: flex;
+	color: #fff;
+	font-weight: normal;
+}
+
 .features {
 	grid-area: c;
 	background-color:rgb(255, 208, 0);
diff --git a/docs/assets/squircle120.svg b/docs/assets/squircle120.svg
new file mode 100644
index 0000000..1ef9a90
--- /dev/null
+++ b/docs/assets/squircle120.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <defs>
+    <style>
+      .cls-1 {
+        fill-rule: evenodd;
+      }
+    </style>
+  </defs>
+  <path id="Background" class="cls-1" d="M6821,495.533v-4.281c0-1.2-.04-2.4-0.04-3.642a57.7,57.7,0,0,0-.68-7.882,26.144,26.144,0,0,0-2.48-7.483,25.115,25.115,0,0,0-11.04-11.044,26.118,26.118,0,0,0-7.49-2.481,47.28,47.28,0,0,0-7.88-.68c-1.2-.04-2.4-0.04-3.64-0.04h-53.5c-1.2,0-2.4.04-3.64,0.04a57.813,57.813,0,0,0-7.88.68,26.323,26.323,0,0,0-7.49,2.481,25.115,25.115,0,0,0-11.04,11.044,26.144,26.144,0,0,0-2.48,7.483,47.313,47.313,0,0,0-.68,7.882c-0.04,1.2-.04,2.4-0.04,3.642v53.5c0,1.2.04,2.4,0.04,3.641a57.7,57.7,0,0,0,.68,7.883,26.137,26.137,0,0,0,2.48,7.482,25.115,25.115,0,0,0,11.04,11.044,26.261,26.261,0,0,0,7.49,2.481,47.28,47.28,0,0,0,7.88.68c1.2,0.04,2.4.04,3.64,0.04h53.5c1.2,0,2.4-.04,3.64-0.04a57.654,57.654,0,0,0,7.88-.68,26.057,26.057,0,0,0,7.49-2.481,25.115,25.115,0,0,0,11.04-11.044,26.137,26.137,0,0,0,2.48-7.482,47.316,47.316,0,0,0,.68-7.883c0.04-1.2.04-2.4,0.04-3.641V495.533h0Z" transform="translate(-6701 -458)"/>
+</svg>
diff --git a/docs/index.html b/docs/index.html
index 4fbeb19..2d5e55f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -16,6 +16,23 @@ title: Your App – Subtitle
 				</div>
 	
 				<div class="appInfo">
+					<svg width="0" height="0">
+						<defs>
+							<clipPath id="shape120">
+								<path id="Background" class="cls-1" d="M6821,495.533v-4.281c0-1.2-.04-2.4-0.04-3.642a57.7,57.7,0,0,0-.68-7.882,26.144,26.144,0,0,0-2.48-7.483,25.115,25.115,0,0,0-11.04-11.044,26.118,26.118,0,0,0-7.49-2.481,47.28,47.28,0,0,0-7.88-.68c-1.2-.04-2.4-0.04-3.64-0.04h-53.5c-1.2,0-2.4.04-3.64,0.04a57.813,57.813,0,0,0-7.88.68,26.323,26.323,0,0,0-7.49,2.481,25.115,25.115,0,0,0-11.04,11.044,26.144,26.144,0,0,0-2.48,7.483,47.313,47.313,0,0,0-.68,7.882c-0.04,1.2-.04,2.4-0.04,3.642v53.5c0,1.2.04,2.4,0.04,3.641a57.7,57.7,0,0,0,.68,7.883,26.137,26.137,0,0,0,2.48,7.482,25.115,25.115,0,0,0,11.04,11.044,26.261,26.261,0,0,0,7.49,2.481,47.28,47.28,0,0,0,7.88.68c1.2,0.04,2.4.04,3.64,0.04h53.5c1.2,0,2.4-.04,3.64-0.04a57.654,57.654,0,0,0,7.88-.68,26.057,26.057,0,0,0,7.49-2.481,25.115,25.115,0,0,0,11.04-11.044,26.137,26.137,0,0,0,2.48-7.482,47.316,47.316,0,0,0,.68-7.883c0.04-1.2.04-2.4,0.04-3.641V495.533h0Z" transform="translate(-6701 -458)"/>
+							</clipPath>
+						</defs>
+					</svg>
+					<img class="appIconLarge" src="/assets/appicon-1024px.png">
+					
+					<div class="appNamePriceContainer">
+						<h1 class="appName">
+							Your App
+						</h1>
+						<h3 class="appPrice">
+							$9.99
+						</h3>
+					</div>
 				</div>
 
 				<div class="features">
-- 
2.51.2