Update style

_config.yml

@@ -16,7 +16,7 @@
 title: MiKee
 description: # Optional - Enter your site description
 
-favicon: images/favicon.png # uncomment if uploading own favicon
+favicon: assets/img/favicon.png # uncomment if uploading own favicon
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-favicon.png - can be .ico or .png
   # 16px or greater, square
@@ -28,17 +28,17 @@ app:
 
   ios_beta: https://testflight.apple.com/join/0Y5rP4jN
 
-  icon: images/app-icon-512.png # Leave blank to auto-magically populate
+  icon: assets/img/app-icon-512.png # Leave blank to auto-magically populate
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-icon-512.png
   # 512px or greater, square
 
-  favicon: images/favicon.png # uncomment if uploading own favicon
+  favicon: assets/img/favicon.png # uncomment if uploading own favicon
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-favicon.png - can be .ico or .png
   # 16px or greater, square
 
-  screenshot: images/mikee-all-screenshot.png # Leave blank to auto-magically populate
+  screenshot: assets/img/mikee-all-screenshot.png # Leave blank to auto-magically populate
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-screen-640x1136.png
   # 640x1136px

_includes/head.html

@@ -26,7 +26,7 @@
   <!-- Styles -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-  <link rel="stylesheet" href="themes/default/styles.css">
+  <link rel="stylesheet" href="{{ "/css/styles.css" | prepend: site.baseurl }}">
 
   <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

_layouts/home.html

@@ -55,21 +55,24 @@ layout: default
         <div class="col-sm-6">
   
           <!-- App Preview or Screenshot(s) -->
+          {% if site.app.appetize_key %}
           <div class="device appetize">
             <div class="frame"></div>
-            {% if site.app.appetize_key %}
             <iframe src="https://appetize.io/embed/{{ site.app.appetize_key }}?autoplay=true&useLastFrame=true&orientation=portrait&deviceColor=black&screenOnly=true&disableHome=true&device=iphonex&scale=100" frameborder="0" scrolling="no"></iframe>
-            {% elsif site.app.video %}
+          </div>
+          {% elsif site.app.video %}
+          <div class="device appetize">
+            <div class="frame"></div>
             <div class="video-container">
-              <iframe src="{{ site.app.video }}" height="426.66" width="240" allowfullscreen="" frameborder="0">
-              </iframe>
+              <iframe src="{{ site.app.video }}" height="426.66" width="240" allowfullscreen="" frameborder="0"></iframe>
             </div>
-            {% else %}
-            <img class="app-screenshot"
-            {% if site.app.screenshot %}src="{{ site.app.screenshot }}"{% endif %}
-            />
-            {% endif %}
           </div>
+          {% else %}
+          <div class="device screenshot">
+            <div class="frame"></div>
+            <img class="app-screenshot" {% if site.app.screenshot %}src="{{ site.app.screenshot }}"{% endif %}/>
+          </div>
+          {% endif %}
         </div>
       </div>
   

_sass/_devices.scss

@@ -23,7 +23,7 @@
   height: 100%; 
   z-index:1;
   pointer-events: none;
-  background-image: url(../../images/iphonex.png);
+  background-image: url(/assets/img/iphonex.png);
   background-size: 100%;
 }
 
@@ -36,11 +36,26 @@
   z-index:0;
 }
 
-.device.appetize img {
+.device.screenshot {
+  width: 341px;
+  height: 688px;
+}
+
+.device.screenshot .frame {
   position: absolute;
-  width: 375px;
-  height: 812px;
-  margin-left: 24px;
-  margin-top: 31px;
+  width: 100%;
+  height: 100%; 
+  z-index:1;
+  pointer-events: none;
+  background-image: url(/assets/img/iphonex.png);
+  background-size: 100%;
+}
+
+.device.screenshot img {
+  position: absolute;
+  width: 300px;
+  height: 650px;
+  margin-left: 19px;
+  margin-top: 25px;
   z-index:0;
 }