Image in screenshot folder will be used no matter the name

Author: emilbaehr

_config.yml

@@ -25,8 +25,8 @@ app_icon                                  : # assets/appicon.png
 app_video_mov                             : # assets/yourvideo.mov                    # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436. Use format .mov for Safari support.
 app_video_ogg                             : # assets/yourvideo.ogg                    # Uncomment and replace with path to app preview video. Optimal resolutions: 1242x2688 or 1125x2436. Use format .ogg for Chrome support.
 app_screenshot                            : assets/yourscreenshot.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 
+header_image                              : assets/headerimage.png                    # Replace with alternative image path or image URL.
+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                         :                                           
@@ -40,10 +40,10 @@ email_address                             : [email protected]
 features                                  :
 
   - title                                 : GitHub Pages Jekyll Theme
-    description                           : Designed for GitHub Pages for easy set-up. Fork. Edit _config.yml. Push. Voilá!
+    description                           : Designed for GitHub Pages. Fork. Edit _config.yml. Push to gh-pages branch. Voilá!
     fontawesome_icon_name                 : magic
 
-  - title                                 : iPhone Device Previews
+  - title                                 : iPhone Device Preview
     description                           : Show your app in the context of an iPhone device. Five different colors included.
     fontawesome_icon_name                 : mobile
 
@@ -55,16 +55,16 @@ features                                  :
     description                           : Choose between five different iPhone colors to match your app's visual identity.
     fontawesome_icon_name                 : palette
 
-  - title                                 : Feature list
+  - title                                 : Feature List
     description                           : Add features (like this one) to your site simply by editing the _config.yml file.
     fontawesome_icon_name                 : star
 
   - title                                 : Automatic App Icon
-    description                           : Enter your iOS app ID in the _config.yml file to automatically fetch app icon.
+    description                           : Enter iOS app ID in the _config.yml file to automatically fetch app icon, price and App Store Link.
     fontawesome_icon_name                 : sync
 
   - title                                 : Smart App Banner
-    description                           : Display a smart app banner on iOS devices.
+    description                           : Display a smart app banner right on iOS devices.
     fontawesome_icon_name                 : arrow-alt-circle-down
 
   - title                                 : Social Links

_layouts/default.html

@@ -16,16 +16,26 @@
                             </clipPath>
                         </svg>
 
+                        <!--
                         {% if site.app_video %}
                             <div class="videoContainer">
                                 <video autoplay="autoplay" controls="controls">
                                     <source src="{{ site.app_video }}" type="video/mp4">
                                     <source src="{{ site.app_video }}" type="video/mp4">
                                 </video>
                             </div>
+                        
                         {% else %}
                             <img class="iphoneScreen" src="{{ site.app_screenshot }}">
                         {% endif %}
+                        -->
+
+                        {% for image in site.static_files %}
+                            {% if image.path contains 'assets/screenshot' %}
+                            <img class="iphoneScreen" src="{{ image.path }}" alt="">
+                            {% endif %}
+                        {% endfor %}
+
                     </div>
                     <div class="appInfo">
                         <div class="appIconShadow">
@@ -52,7 +62,9 @@ <h2 class="appPrice">
                             </p>
                         </div>
                         <div class="downloadButtonsContainer">
-                            <a class="playStoreLink" href=""><img class="playStore" src="assets/playstore.png"></a>
+                            {% if site.playstore_link %}
+                                <a class="playStoreLink" href=""><img class="playStore" src="assets/playstore.png"></a>
+                            {% endif %}
                             <a class="appStoreLink" href=""><img class="appStore" src="assets/appstore.png"></a>
                         </div>
                     </div>

_sass/layout.scss

@@ -31,11 +31,18 @@
 	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 i i i i i i"
+		"p p p p p i 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";
 }
 
+@media only screen and (max-width: 1070px) {
+
+	.container {					// Set up the container for the site content
+		grid-template-rows: 115px 811px auto auto;
+	}
+}
+
 @media only screen and (max-width: 992px) {
 
 	.container {
@@ -78,7 +85,11 @@ header {
 	margin-right: 15px;
 }
 
+
+
+// Navigation Links
 nav {
+	width: 100%;
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
@@ -111,6 +122,10 @@ nav > ul li a:active {
 	color: rgba(#fff, 1);
 }
 
+
+
+// App Title, Price, Description and Links
+
 .appInfo {
 	grid-area: i;
 	display: flex;
@@ -192,14 +207,6 @@ nav > ul li a:active {
 
 } 
 
-@media only screen and (max-width: 1070px) {
-
-	.playStore {
-		margin-bottom: 27px;
-	}
-	
-} 
-
 .playStore {
 	height: 75px;
 	margin-right: 24px;
@@ -227,6 +234,10 @@ nav > ul li a:active {
 	height: 75px;
 }
 
+
+
+// iPhone Device Preview
+
 .iphonePreview {
 	grid-area: p;
 	background-image: url($device-color);
@@ -257,6 +268,32 @@ nav > ul li a:active {
 	height: 755px;
 }
 
+@media only screen and (max-width: 1070px) {
+
+	.iphonePreview {
+		background-size: 370px auto;
+	}
+
+	.iphoneScreen {
+		width: 322px;
+		margin-left: 24px;
+		margin-top: 22px;
+	}
+
+	.videoContainer {
+		width: 322px;
+		height: 698px;
+		margin-left: 28px;
+		margin-top: 3px;
+	}
+	
+	.videoContainer > video {
+		width: 322px;
+		height: 398px;
+	}
+	
+} 
+
 @media only screen and (max-width: 992px) {
 
 	.iphonePreview {
@@ -284,6 +321,9 @@ nav > ul li a:active {
 
 } 
 
+
+// Feature List
+
 .features {
 	grid-area: c;
 	display: flex;
@@ -292,16 +332,21 @@ nav > ul li a:active {
 	justify-content: flex-start;
 	flex-grow: 1;
 	flex-wrap: wrap;
+	margin-top: 93px;
 }
 
 .feature {
 	display: flex;
-	padding-top: 93px;
+	padding-top: 63px;
 	padding-left: 15px;
 	padding-right: 15px;
 	width: calc(100%/3);
 }
 
+.feature:nth-child(-n+3) {
+    padding-top: 0px;   
+}
+
 .feature:nth-child(3n) {
 	padding-right: 0px;
 }
@@ -326,7 +371,6 @@ nav > ul li a:active {
 	color: $social-icons-foreground-color;
 }
 
-
 .featureText {
 	margin-left: 18px;
 }
@@ -347,6 +391,7 @@ nav > ul li a:active {
 		flex-grow: 1;
 		flex-direction: row;
 		flex-wrap: wrap;
+		margin-top: 11px;
 	}
 
 	.feature {
@@ -357,6 +402,14 @@ nav > ul li a:active {
 		width: 100%;
 	}
 
+	.feature:nth-child(-n+3) {
+		padding-top: 41px;   
+	}
+
+	.feature:nth-child(1) {
+		padding-top: 0px;   
+	}
+
 	.feature:nth-child(3n) {
 		padding-right: 15px;
 	}
@@ -367,6 +420,10 @@ nav > ul li a:active {
 
 } 
 
+
+
+// Footer
+
 footer {
 	grid-area: f;
 	display: flex;