Added five different devices to choose from in config.yml

Author: emilbaehr

_config.yml

@@ -1,7 +1,7 @@
 # Mobile App Landing Page Configuration
 
 # App Info
-ios_app_id                                : 718043190                                 # Enter iOS app ID to automatically populate name, price and icons (e.g. 718043190).
+ios_app_id                                : 618783545                                 # Enter iOS app ID to automatically populate name, price and icons (e.g. 718043190).
 
 appstore_link                             :                                           # Automatically populates if not set and if iOS app ID is set. Otherwise enter manually.
 playstore_link                            :                                           # Enter Google Play Store URL.
@@ -20,10 +20,11 @@ your_link                                 : https://emilbaehr.com
 your_city                                 : Copenhagen                                # Tell people where you're from.
 
 # Icon, screenshot and header image
-app_icon                                  : # ../assets/appicon-1024px.png            # Automatically populates if not set and if iOS app ID is set.  Otherwise enter manually.
+app_icon                                  : # ../assets/appicon-1024px.png            # Automatically populates if not set and if iOS app ID is set.  Otherwise enter path to icon file manually.
 app_video                                 : # ../assets/video.mp4                     # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436.
 app_screenshot                            : ../assets/screenshot.png                  # Replace with alternateive image path. Does not automatically populate since Apple does not provide iPhone X/XS/XR screenshots in their iTunes lookup API.
 header_image                              : ../assets/headerimage.png                 # Replace with alternative image path.
+device_color                              : black                                     # Set to blue, black, yellow, coral or white 
 
 # Social Links                                                                        # Enter usernames and email address. If set, they will be presented as links in the footer.
 facebook_username                         :                                           
@@ -48,6 +49,10 @@ features                                  :
     description                           : Adjust colors, backgrounds and typography
     fontawesome_icon_name                 : adjust
 
+  - title                                 : Five device colors
+    description                           : Choose between five different device colors to match your app's interface
+    fontawesome_icon_name                 : mobile
+
   - title                                 : # New Feature Title
     description                           : # New Feature Description
     fontawesome_icon_name                 : # Enter Font Awesome icon name (e.g. star). Find icons on fontawesome.com/icons.

_sass/layout.scss

@@ -9,8 +9,8 @@
 		url($header-image);
 
 	background-repeat: no-repeat;
-	background-size: auto 200%;
-	background-position: bottom;
+	background-size: 100% auto;
+	background-position: top;
 	border-radius: 0px 0px 40px 40px;
 }
 
@@ -107,6 +107,7 @@ nav > ul li a:active {
 }
 
 .appIconShadow {
+	display: flex;
 	filter: $drop-shadow;
 }
 
@@ -148,6 +149,8 @@ nav > ul li a:active {
 }
 
 .downloadButtonsContainer {
+	display: flex;
+	
 	margin-top: 42px;
 	filter: $drop-shadow;
 }
@@ -158,7 +161,7 @@ nav > ul li a:active {
 
 .iphonePreview {
 	grid-area: p;
-	background-image: url(/assets/Blue.png);
+	background-image: url($device-color);
 	background-repeat: no-repeat;
 	margin-top: 68px;
 }
@@ -192,7 +195,7 @@ nav > ul li a:active {
 	display: flex;
 	flex: 0 1 auto;
 	align-content: flex-start;
-	justify-content: center;
+	justify-content: flex-start;
 	flex-grow: 1;
 	flex-wrap: wrap;
 }

assets/Screenshot.png

@@ -2,7 +2,8 @@
 # Front matter comment to ensure Jekyll properly reads file.
 ---
 
-$header-image: '{{ site.header_image }}';
+$header-image: "{{ site.header_image }}";
+$device-color: "../assets/{{ site.device_color }}.png";
 $primary-text-color: {{ site.primary_text_color }};
 $secondary-text-color: {{ site.secondary_text_color }};