Update description and screenshot

Gemfile.lock

@@ -1,20 +1,20 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.6.0)
-      public_suffix (>= 2.0.2, < 4.0)
+    addressable (2.7.0)
+      public_suffix (>= 2.0.2, < 5.0)
     colorator (1.1.0)
-    concurrent-ruby (1.1.4)
+    concurrent-ruby (1.1.5)
     em-websocket (0.5.1)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0.6.0)
     eventmachine (1.2.7)
-    ffi (1.10.0)
+    ffi (1.11.1)
     forwardable-extended (2.6.0)
     http_parser.rb (0.6.0)
     i18n (0.9.5)
       concurrent-ruby (~> 1.0)
-    jekyll (3.8.5)
+    jekyll (3.8.6)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
@@ -29,10 +29,10 @@ GEM
       safe_yaml (~> 1.0)
     jekyll-sass-converter (1.5.2)
       sass (~> 3.4)
-    jekyll-watch (2.1.2)
+    jekyll-watch (2.2.1)
       listen (~> 3.0)
     kramdown (1.17.0)
-    liquid (4.0.1)
+    liquid (4.0.3)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -40,14 +40,14 @@ GEM
     mercenary (0.3.6)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (3.0.3)
+    public_suffix (4.0.1)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
-    rouge (3.3.0)
+    rouge (3.11.0)
     ruby_dep (1.5.0)
-    safe_yaml (1.0.4)
-    sass (3.7.3)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
       sass-listen (~> 4.0.0)
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)

_config.yml

@@ -22,7 +22,7 @@ app:
   # e.g. images/app-favicon.png - can be .ico or .png
   # 16px or greater, square
 
-  screenshot: # Leave blank to auto-magically populate
+  screenshot: images/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
@@ -39,12 +39,18 @@ app:
   # To update use path relative to project root with no leading slash:
   # e.g. images/app-social_image.png
   # 512px or greater, square or width = 2X height
-  appetize_key: 5mr4fvxmmrpea13dj8hbc8ark4
+  appetize_key: # 5mr4fvxmmrpea13dj8hbc8ark4
 #
 # Marketing
 #
-marketing_header: Safe Password Manager # Optional
-marketing_desc: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+marketing_header: Password Safe # Optional
+marketing_desc: MiKee safely stores passwords and other sensitive data on your iOS device. Compatible with <a href="https://keepass.info/">KeePass</a>, MiKee synchronizes your Password Database from the cloud and auto-fill your credentials in other apps and webpages.
+marketing_features:
+  - Create/Import Password Database.
+  - Synchronize Password Database with Document apps (iCloud, Dropbox, Nextcloud, etc ...)
+  - Compatible with iOS AutoFill feature.
+  - Unlock using Touch ID or Face ID.
+  - Support Time-based One-Time Password (TOTP).
 
 #
 # Social Links

_sass/_devices.scss

@@ -35,3 +35,12 @@
   margin-top: 31px;
   z-index:0;
 }
+
+.device.appetize img {
+  position: absolute;
+  width: 375px;
+  height: 812px;
+  margin-left: 24px;
+  margin-top: 31px;
+  z-index:0;
+}

themes/default/index.html

@@ -23,6 +23,15 @@
           {% endif %}
 
           <p class="marketing-desc">{{ site.marketing_desc }}</p>
+          {% if site.marketing_features %}
+          <h4>Features:</h4>
+          <ul>
+            {% for feature in site.marketing_features %}
+            <li><span>{{ feature }}</span></li>
+            {% endfor %}
+          </ul>
+          {% endif %}
+          
           <div class="download-buttons">
             <a
               class="download-btn btn btn-lg"
@@ -44,13 +53,22 @@
 
       <div class="col-sm-6">
 
-        <!-- Appetize -->
-      {% if site.app.appetize_key %}
+        <!-- App Preview or Screenshot(s) -->
         <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 class="video-container">
+            <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>
-      {% endif %}
       </div>
     </div>
 

themes/default/styles.scss

@@ -38,7 +38,12 @@ a {
   transition: all .3s;
 }
 
+ul {
+  list-style-type: disc;
+}
+
 {% if site.link_color %}
+
 a {
   color: {{ site.link_color }};
 }
@@ -47,6 +52,15 @@ a:focus,
 a:hover {
   color: darken({{ site.link_color }}, 20%);
 }
+
+ul > li {
+  color: {{ site.link_color }};
+}
+
+ul > li > span {
+  color: black;
+}
+
 {% endif %}
 
 //
@@ -95,6 +109,13 @@ a:hover {
   font-weight: 500;
 }
 
+.marketing-features {
+  margin: 0 auto 20px;
+  max-width: 450px;
+  white-space: pre-wrap;
+  font-weight: 500;
+}
+
 //
 // Download Buttons
 //
@@ -104,6 +125,7 @@ a:hover {
 }
 
 .download-btn {
+  margin-top: 20px;
   margin-right: 20px;
   margin-bottom: 20px;
   border: none;