Added more control over header, colors etc. via config.yml

Author: emilbaehr

_config.yml

@@ -10,10 +10,11 @@ app_price           : 4.99
 ios_app_id          : 912209541
 android_app_id      :
 
-# Icon and screenshot
-app_icon            :
-app_video           : assets/video.mp4
-app_screenshot      : 
+# Icon, screenshot and header image
+app_icon            : /assets/appicon-1024px.png
+app_video           : /assets/video.mp4
+app_screenshot      : /assets/screenshot.png
+header_image        : /assets/headerimage.png
 
 # Social Links
 facebook_username   : 
@@ -34,8 +35,19 @@ features                      :
     fontawesome_icon_name     : adjust
 
 # Theme Settings
-accent_color                  : "#1d63ea"
-image_overlay_color           : "#363b3d"
+accent_color                             : "#1d63ea"
+
+header_color                             : "#000000"
+header_transparency                      : 0.1
+
+image_overlay_color                      : "#363b3d"
+image_overlay_transparency               : 0.6
+
+feature_icons_foreground_color           : "#1d63ea"
+feature_icons_background_color           : "#e6e6e6"
+
+social_icons_foreground_color            : "#666666"
+social_icons_background_color            : "#e6e6e6"
 
 
 # Analytics 

_includes/header.html

@@ -5,7 +5,7 @@
 			<svg width="0" height="0">
 				<defs>
 					<clipPath id="shape">
-							<path id="Rectangle" class="cls-1" d="M6181.23,233.709v-1.792c0-.5-0.02-1-0.02-1.523a24.257,24.257,0,0,0-.28-3.3,11.207,11.207,0,0,0-1.04-3.132,10.683,10.683,0,0,0-1.95-2.679,10.384,10.384,0,0,0-2.68-1.943,10.806,10.806,0,0,0-3.13-1.038,19.588,19.588,0,0,0-3.3-.285c-0.5-.017-1-0.017-1.52-0.017h-22.39c-0.51,0-1.01.017-1.53,0.017a24.041,24.041,0,0,0-3.3.285,11.009,11.009,0,0,0-3.13,1.038,10.491,10.491,0,0,0-4.62,4.622,10.893,10.893,0,0,0-1.04,3.132,19.2,19.2,0,0,0-.28,3.3c-0.02.5-.02,1-0.02,1.523v22.392c0,0.5.02,1,.02,1.524a24.257,24.257,0,0,0,.28,3.3,10.9,10.9,0,0,0,1.04,3.132,10.491,10.491,0,0,0,4.62,4.622,11.04,11.04,0,0,0,3.13,1.038,19.891,19.891,0,0,0,3.3.285c0.51,0.017,1.01.017,1.53,0.017h22.39c0.5,0,1-.017,1.52-0.017a24.221,24.221,0,0,0,3.3-.285,10.836,10.836,0,0,0,3.13-1.038,10.408,10.408,0,0,0,2.68-1.943,10.683,10.683,0,0,0,1.95-2.679,11.217,11.217,0,0,0,1.04-3.132,20.257,20.257,0,0,0,.28-3.3c0.02-.5.02-1,0.02-1.524v-20.6h0Z" transform="translate(-6131 -218)"/>
+							<path id="shape" class="cls-1" d="M6181.23,233.709v-1.792c0-.5-0.02-1-0.02-1.523a24.257,24.257,0,0,0-.28-3.3,11.207,11.207,0,0,0-1.04-3.132,10.683,10.683,0,0,0-1.95-2.679,10.384,10.384,0,0,0-2.68-1.943,10.806,10.806,0,0,0-3.13-1.038,19.588,19.588,0,0,0-3.3-.285c-0.5-.017-1-0.017-1.52-0.017h-22.39c-0.51,0-1.01.017-1.53,0.017a24.041,24.041,0,0,0-3.3.285,11.009,11.009,0,0,0-3.13,1.038,10.491,10.491,0,0,0-4.62,4.622,10.893,10.893,0,0,0-1.04,3.132,19.2,19.2,0,0,0-.28,3.3c-0.02.5-.02,1-0.02,1.523v22.392c0,0.5.02,1,.02,1.524a24.257,24.257,0,0,0,.28,3.3,10.9,10.9,0,0,0,1.04,3.132,10.491,10.491,0,0,0,4.62,4.622,11.04,11.04,0,0,0,3.13,1.038,19.891,19.891,0,0,0,3.3.285c0.51,0.017,1.01.017,1.53,0.017h22.39c0.5,0,1-.017,1.52-0.017a24.221,24.221,0,0,0,3.3-.285,10.836,10.836,0,0,0,3.13-1.038,10.408,10.408,0,0,0,2.68-1.943,10.683,10.683,0,0,0,1.95-2.679,11.217,11.217,0,0,0,1.04-3.132,20.257,20.257,0,0,0,.28-3.3c0.02-.5.02-1,0.02-1.524v-20.6h0Z" transform="translate(-6131 -218)"/>
 					</clipPath>
 				</defs>
 			</svg>

_sass/base.scss

@@ -6,11 +6,12 @@ $font: 'Helvetica Neue', sans-serif;
 $primary-text-color: #000;
 
 html {
-    font-size: 62.5%;
+	font-size: 62.5%;
+	font-family: $font;
 }
 
 body {
-    font-size: 2rem;
+	font-size: 2rem;
 }
 
 h1 {
@@ -35,6 +36,13 @@ body {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+a:link,
+a:hover,
+a:visited,
+a:active {
+	color: $accent-color;
+}
+
 // Shadows
 $drop-shadow: drop-shadow(0px 5px 10px rgba(#000, 0.1)) drop-shadow(0px 1px 1px rgba(#000, 0.2));
 

_sass/layout.scss

@@ -1,18 +1,12 @@
-body {
-	box-sizing: border-box;
-	font-family: $font;
-}
-
-.imageWrapper {
-	width: 100%;
+.imageWrapper {					// Sets the background image in the header area
 	height: 768px;
 	background: 
 		linear-gradient(
-		rgba($image-overlay-color, 0.6), 
-		rgba($image-overlay-color, 0.6)
+		rgba($image-overlay-color, $image-overlay-transparency), 
+		rgba($image-overlay-color, $image-overlay-transparency)
 		   ),
 
-		url("/assets/headerimage.png");
+		url($header-image);
 
 	background-repeat: no-repeat;
 	background-size: auto 200%;
@@ -21,12 +15,11 @@ body {
 }
 
 .headerBackground {
-	width: 100%;
 	height: 115px;
-	background-color: rgba(#000, 0.1);
+	background-color: rgba($header-color, $header-transparency);
 }
 
-.container {
+.container {					// Set up the container for the site content
 	display: grid;
 	margin: auto;
 	max-width: $content-width;
@@ -79,7 +72,6 @@ nav {
 nav > ul {
 	display: flex;
 	list-style-type: none;
-	padding: 0px;
 }
 
 nav > ul li {
@@ -113,23 +105,25 @@ nav > ul li a {
 	height: 120px;
 	-webkit-clip-path: url(#shape120);
 	clip-path: url(#shape120);
+	margin-right: 30px;
 }
 
 .appNamePriceContainer {
-	padding-left: 30px;
+	height: 120px;
 	flex: 0 1 auto;
-	align-items: flex-start;
+	align-items: flex-center;
+	align-content: center;
 }
 
 .appName {
-	margin-top: -5px;
 	color: #fff;
+	margin-top: -4px;
 }
 
 .appPrice {
 	color: #fff;
-	margin-top: 8px;
 	font-weight: normal;
+	padding-top: 8px;
 }
 
 .appDescriptionContainer {
@@ -151,7 +145,6 @@ nav > ul li a {
 
 .playStore {
 	margin-right: 25px;
-	margin-bottom: 25px;
 }
 
 .iphonePreview {
@@ -212,19 +205,19 @@ nav > ul li a {
 }
 
 .iconBack {
-	color: rgba(#000000, 0.1);
+	color: $feature-icons-background-color;
 }
 
 .iconTop {
-	color: $accent-color;
+	color: $feature-icons-foreground-color;
 }
 
 .socialIconBack {
-	color: rgba(#000000, 0.1);
+	color: $social-icons-background-color;
 }
 
 .socialIconTop {
-	color:rgba(#000, 0.6);
+	color: $social-icons-foreground-color;
 }
 
 

css/main.scss

@@ -2,8 +2,21 @@
 # Front matter comment to ensure Jekyll properly reads file.
 ---
 
+$header-image: '{{ site.header_image }}';
+
 $accent-color: {{ site.accent_color }};
+
+$header_color: {{ site.header_color }};
+$header_transparency: {{ site.header_transparency }};
+
 $image-overlay-color: {{ site.image_overlay_color }};
+$image-overlay-transparency: {{ site.image_overlay_transparency }};
+
+$feature-icons-foreground-color: {{ site.feature_icons_foreground_color }};
+$feature-icons-background-color: {{ site.feature_icons_background_color }};
+
+$social-icons-foreground-color: {{ site.social_icons_foreground_color }};
+$social-icons-background-color: {{ site.social_icons_background_color }};
 
 @import 
     "base",

index.html

@@ -15,7 +15,7 @@
 					<svg width="0" height="0">
 						<defs>
 							<clipPath id="screenMask">
-								<path id="Screen" class="cls-1" d="M6490.24,1234.36H6216.28c-2.57,0-10.55-.07-12.07-0.07a87.524,87.524,0,0,1-12-1.03,40.051,40.051,0,0,1-11.4-3.79,38.315,38.315,0,0,1-16.82-16.84,39.948,39.948,0,0,1-3.78-11.42,72.257,72.257,0,0,1-1.04-12.02c-0.06-1.83-.06-5.56-0.06-5.56V452.125h0s0.06-11.391.06-12.086a87.9,87.9,0,0,1,1.04-12.025,39.843,39.843,0,0,1,3.78-11.413,38.283,38.283,0,0,1,16.82-16.847,39.762,39.762,0,0,1,11.4-3.785,71.909,71.909,0,0,1,12-1.037c16.99-.567,36.32-0.061,34.51-0.061,5.02,0,6.5,3.439,6.63,6.962a35.611,35.611,0,0,0,1.2,8.156,21.326,21.326,0,0,0,19.18,15.592c2.28,0.192,6.78.355,6.78,0.355H6433.7s4.5-.059,6.79-0.251a21.348,21.348,0,0,0,19.18-15.591,35.582,35.582,0,0,0,1.19-8.154c0.13-3.523,1.61-6.962,6.64-6.962-1.81,0,17.52-.5,34.5.061a71.923,71.923,0,0,1,12.01,1.038,39.832,39.832,0,0,1,11.4,3.784,38.283,38.283,0,0,1,16.82,16.844,40.153,40.153,0,0,1,3.78,11.413,87.844,87.844,0,0,1,1.03,12.023c0,0.695.06,12.084,0.06,12.084h0V1183.64s0,3.72-.06,5.55a72.366,72.366,0,0,1-1.03,12.03,40.2,40.2,0,0,1-3.78,11.41,38.315,38.315,0,0,1-16.82,16.84,40.155,40.155,0,0,1-11.4,3.79,87.669,87.669,0,0,1-12.01,1.03c-1.52,0-9.5.07-12.07,0.07" transform="translate(-6159.12 -394.656)"/>
+								<path id="shape" class="cls-1" d="M6490.24,1234.36H6216.28c-2.57,0-10.55-.07-12.07-0.07a87.524,87.524,0,0,1-12-1.03,40.051,40.051,0,0,1-11.4-3.79,38.315,38.315,0,0,1-16.82-16.84,39.948,39.948,0,0,1-3.78-11.42,72.257,72.257,0,0,1-1.04-12.02c-0.06-1.83-.06-5.56-0.06-5.56V452.125h0s0.06-11.391.06-12.086a87.9,87.9,0,0,1,1.04-12.025,39.843,39.843,0,0,1,3.78-11.413,38.283,38.283,0,0,1,16.82-16.847,39.762,39.762,0,0,1,11.4-3.785,71.909,71.909,0,0,1,12-1.037c16.99-.567,36.32-0.061,34.51-0.061,5.02,0,6.5,3.439,6.63,6.962a35.611,35.611,0,0,0,1.2,8.156,21.326,21.326,0,0,0,19.18,15.592c2.28,0.192,6.78.355,6.78,0.355H6433.7s4.5-.059,6.79-0.251a21.348,21.348,0,0,0,19.18-15.591,35.582,35.582,0,0,0,1.19-8.154c0.13-3.523,1.61-6.962,6.64-6.962-1.81,0,17.52-.5,34.5.061a71.923,71.923,0,0,1,12.01,1.038,39.832,39.832,0,0,1,11.4,3.784,38.283,38.283,0,0,1,16.82,16.844,40.153,40.153,0,0,1,3.78,11.413,87.844,87.844,0,0,1,1.03,12.023c0,0.695.06,12.084,0.06,12.084h0V1183.64s0,3.72-.06,5.55a72.366,72.366,0,0,1-1.03,12.03,40.2,40.2,0,0,1-3.78,11.41,38.315,38.315,0,0,1-16.82,16.84,40.155,40.155,0,0,1-11.4,3.79,87.669,87.669,0,0,1-12.01,1.03c-1.52,0-9.5.07-12.07,0.07" transform="translate(-6159.12 -394.656)"/>
 							</clipPath>
 						</defs>
 					</svg>
@@ -26,15 +26,15 @@
 							</video>
 						</div>
 					{% else %}
-						<img class="iphoneScreen" src="/assets/Screenshot.png">
+						<img class="iphoneScreen" src="site.app_screenshot">
 					{% endif %}
 				</div>
 				<div class="appInfo">
 					<div class="appIconShadow">
 						<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)" filter="url(#f1)"/>
+									<path id="shape" 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)" filter="url(#f1)"/>
 								</clipPath>
 							</defs>
 						</svg>