فهرست منبع

Initial commit :baby:

Josh Buchea 10 سال پیش
کامیت
12843e7ef8

+ 10 - 0
.gitignore

@@ -0,0 +1,10 @@
+_site
+.DS_Store
+.jekyll
+.jekyll-metadata
+.bundle
+.sass-cache
+Gemfile
+Gemfile.lock
+node_modules
+package.json

+ 6 - 0
404.md

@@ -0,0 +1,6 @@
+---
+layout: page
+title: 404 - Page not found
+---
+
+Sorry, we can't find that page that you're looking for. You can try again by going [back to the homepage]({{ site.baseurl }}/).

+ 1 - 0
CNAME

@@ -0,0 +1 @@
+

+ 20 - 0
LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Josh Buchea
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

+ 112 - 0
README.md

@@ -0,0 +1,112 @@
+# Awesome App Landing Page
+
+**Get a free iOS app landing page in less than 30 seconds (seriously)**
+
+It's easy to try out, you can just delete your forked repository if you don't like it
+
+In less than 30 seconds you'll be set up with an awesome app landing page like the one below giving you more time to spend making awesome apps! All without leaving your browser.
+
+![Awesome App Landing Page Theme Screenshot](/images/awesome-app-landing-page-screenshot.png "Awesome App Landing Page Theme Screenshot")
+
+## Features
+
+✓ Command-line free _fork-first workflow_, using GitHub.com to create and customize your awesome app landing page  
+✓ Free & Automatic Hosting with GitHub Pages   
+✓ Fully Responsive Base Theme (**<a href="http://joshbuchea.github.io/awesome-app-landing-page">Demo</a>**)  
+✓ Apple Devices for Screenshots  
+✓ Apple Smart App Banner  
+✓ iTunes Affiliate Integration  
+✓ Google Analytics Integration  
+✓ Social Icons  
+✓ Sass Support  
+✓ Bootstrap  
+✓ Font Awesome  
+
+✘ No installing dependancies  
+✘ No need to set up local development  
+✘ No configuring plugins  
+✘ No need to spend time on theming  
+✘ More time to code other things ... wait ✓!
+
+## Quick Start
+
+### Step 1) Fork this repo
+
+![Step 1](/images/fork.png "Step 1")
+
+**That's it! Check out your new Awesome App Landing Page!**
+
+Your Awesome App Landing Page will often be viewable immediately at `http://yourgithubusername.github.io/awesome-app-landing-page` (if it's not, you can often force it to build by completing step 2)
+
+**IMPORTANT**: Don't forget to replace **yourgithubusername** with the GitHub user/organization name you forked the repo to.
+
+### Step 2) Edit `_config.yml` to customize
+
+Enter required information:
+- **App Name**
+- **iOS App ID** (10 Digit Numeric App ID)
+
+Optionally enter additional information:
+- Android App ID (e.g. com.example.appname)
+- App Icon (will auto-magically load if left blank)
+- App Screenshot (will auto-magically load if left blank)
+- Marketing Header
+- Marketing Description
+- Social Links
+- Hide/Show App Icon
+- Hide/Show Smart App Banner
+- Full Screen Background Image (optional)
+- Site Title & Description
+- iTunes Affiliate Token
+- Google Analytics Site ID
+
+Making a change to `_config.yml` (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at `http://yourgithubusername.github.io/repository-name` - if not, give it ten minutes as GitHub suggests and it'll appear soon
+
+> There are 2 different ways that you can make changes to your page's files:
+
+> 1. Edit files within your repository in the browser at GitHub.com (shown below).
+> 2. Clone down your repository and make updates locally, then push them to your GitHub repository.
+
+![_config.yml](/images/config.png "_config.yml")
+
+## iTunes Affiliate Token
+
+If you'd like to make a little extra revenue from your paid iOS app, sign up for the iTunes Affiliate Program and enter your affiliate token in the config file.
+
+Sign up here: http://www.apple.com/itunes/affiliates/
+
+**Disclaimer**: If left empty, developer's affiliate token will be used. (this is a way for me, the author, to make a few pennies for my efforts without costing you a dime 😄)
+
+## Local Development (Optional)
+
+1. Install Jekyll and plug-ins in one fell swoop. `gem install github-pages` This mirrors the plug-ins used by GitHub Pages on your local machine including Jekyll, Sass, etc.
+2. Clone down your fork `git clone https://github.com/yourusername/repository-name.git`
+3. Serve the site and watch for markup/sass changes `jekyll serve --baseurl=""`
+4. View your website at http://127.0.0.1:4000/
+5. Commit any changes and push everything to the `gh-pages` branch of your repository. GitHub Pages will then rebuild and serve your website.
+
+## Credits
+
+- [GitHub Pages](https://pages.github.com/)
+- [Jekyll Now](https://github.com/barryclark/jekyll-now)
+- [Jekyll](https://github.com/jekyll/jekyll)
+- [Bootstrap](https://github.com/mdo/bootstrap)
+- [FontAwesome](https://fortawesome.github.io/Font-Awesome/)
+
+## Questions?
+
+[Open an Issue](https://github.com/joshbuchea/awesome-app-landing-page/issues/new) and let's chat!
+
+## Contributing
+
+Open an issue or a pull request to suggest changes or additions.
+
+## Author
+
+**Josh Buchea**
+- <https://github.com/joshbuchea>
+- <https://twitter.com/joshbuchea>
+
+## License
+
+[MIT License](LICENSE)

+ 118 - 0
_config.yml

@@ -0,0 +1,118 @@
+#
+# Awesome App Landing Page Config
+#
+
+# Be sure all REQUIRED fields are filled out!
+
+# IMPORTANT - If you changed the repository name:
+# This must match the repository name like this: "/repository-name"
+baseurl: "/awesome-app-landing-page" # REQUIRED
+
+# FYI Your app landing page will be available at:
+# http://yourusername.github.io/repository-name
+
+#
+# General App Info
+#
+app:
+  name: Awesome App # REQUIRED - Enter your app name
+  ios_id: 1109109105 # REQUIRED - 10 Digit Numeric App ID (lookup in iTunes Connect)
+  android_id: # Optional - Enter Android app id like: com.example.app
+
+  icon: # 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
+
+  screenshot: # 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
+
+#
+# Marketing
+#
+marketing_header: Does Awesome Stuff # 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.
+
+#
+# Social Links
+#
+# Includes an icon for each username you enter
+#
+social-links:
+  github:
+  facebook:
+  twitter:
+  pinterest:
+  instagram:
+  email:
+  youtube: # channel/<your_long_string> or <user-name>
+  googleplus: # anything in your profile username that comes after plus.google.com/
+
+#
+# Enable/Disable Features & Page Elements
+#
+enable:
+  app_icon: true
+  smart_app_banner: true
+
+#
+# Device
+#
+# Available devices:
+# * iphone-se-silver-vertical
+# * iphone-se-space-gray-vertical
+# * ipod-touch-blue-vertical
+#
+device: iphone-se-silver-vertical # REQUIRED
+
+#
+# Theme Settings
+#
+background_color: "#989898" # Optional
+background_image: /images/backgrounds/58-usersthink-stock-image-web.jpg # Optional - Use Relative path e.g. images/backgrounds/image.jpg
+text_color: white # Optional
+link_color: # Optional
+social_link_color: white # Optional
+download_button_background_color: "#0191FF" # Optional
+download_button_text_color: white; # Optional
+
+#
+# Site Info
+#
+# If you want specific meta info for your <head></head> tags
+#
+title: # Optional - Enter your site title
+description: # Optional - Enter your site description
+
+#
+# Google Analytics
+#
+google_analytics: # Enter your tracking code (e.g. UA-2110908-2) to activate tracking
+
+#
+# iTunes Affiliate Program
+#
+# Sign up here: http://www.apple.com/itunes/affiliates/
+#
+# Disclaimer:
+# This will default to using the author's affiliate token if left blank
+#
+itunes_affiliate_token: # Optional
+
+#
+# !! You don't need to change any of the configuration flags below !!
+#
+
+# The release of Awesome App Landing Page that you're using
+version: v1.0
+
+# Set the Sass partials directory, as we're using @imports
+sass:
+  style: :compressed
+
+# Exclude these files from your production _site
+exclude:
+  - LICENSE
+  - README.md

+ 22 - 0
_includes/analytics.html

@@ -0,0 +1,22 @@
+{% if site.google_analytics %}
+	<!-- Google Analytics -->
+	<script>
+    window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+    ga('create','{{ site.google_analytics }}','auto');ga('send','pageview')
+  </script>
+  <script src="https://www.google-analytics.com/analytics.js" async defer></script>
+
+	<script>
+		// Automatically track all link clicks
+    $(function() {
+			$('body').on('click', 'a', function(e) {
+				var url = $(this).attr('href');
+				if (url) {
+			    console.info('GA link click event: ', url);
+					ga('send', 'event', 'link', 'click', url);
+				}
+			});
+    });
+  </script>
+	<!-- End Google Analytics -->
+{% endif %}

+ 1 - 0
_includes/apple-affiliate.html

@@ -0,0 +1 @@
+{% if site.itunes_affiliate_token %}{{ site.itunes_affiliate_token }}{% else %}11l7ss{% endif %}

+ 27 - 0
_includes/apple.html

@@ -0,0 +1,27 @@
+{% if site.app.ios_id %}
+  <!-- iTunes Search API -->
+  <script>
+    $(function() {
+      var API_URL = 'https://itunes.apple.com/lookup?id={{ site.app.ios_id }}&callback=?';
+      $.getJSON(API_URL, function(res) {
+        if (res.results && res.results.length) {
+          console.info('App info successfully loaded from Apple');
+          var appInfo = res.results[0];
+          // App Icon
+          var $appIcon = $('.app-icon');
+          if ( $appIcon && !$appIcon.attr('src') && appInfo.artworkUrl512 ) {
+            $appIcon.attr('src', appInfo.artworkUrl512);
+          }
+          // App Screenshot
+          var $appScreenshot = $('.app-screenshot');
+          if ( $appScreenshot && !$appScreenshot.attr('src') && appInfo.screenshotUrls && appInfo.screenshotUrls.length ) {
+            $appScreenshot.attr('src', appInfo.screenshotUrls[0]);
+          }
+        } else {
+          console.warn('Unable to load app info from Apple');
+        }
+      });
+    });
+  </script>
+  <!-- End iTunes Search API -->
+{% endif %}

+ 30 - 0
_includes/head.html

@@ -0,0 +1,30 @@
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
+  <title>{% if site.title %}{{ site.title }}{% else %}{{ site.app.name }}{% endif %}</title>
+  <meta name="description" content="{{ site.description }}">
+
+  {% if site.enable.smart_app_banner %}
+  <!-- Smart App Banner -->
+  <meta name="apple-itunes-app" content="app-id={{ site.app.ios_id }},affiliate-data={% include apple-affiliate.html %}">
+  {% endif %}
+
+  <!-- Open All Links In A New Tab/Window -->
+  <base target="_blank">
+
+  <!-- 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="{{ site.baseurl }}/themes/default/styles.css">
+
+  <!-- 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:// -->
+  <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+  <![endif]-->
+
+  <!-- Created with Awesome App Landing Page - http://github.com/joshbuchea/awesome-app-landing-page -->
+</head>

+ 10 - 0
_includes/social.html

@@ -0,0 +1,10 @@
+<ul class="social-links">
+  {% if site.social-links.github %}<li><a href="https://github.com/{{ site.social-links.github }}"><i class="fa fa-github fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.twitter %}<li><a href="https://twitter.com/{{ site.social-links.twitter }}"><i class="fa fa-twitter fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.facebook %}<li><a href="https://facebook.com/{{ site.social-links.facebook }}"><i class="fa fa-facebook-square fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.instagram %}<li><a href="https://instagram.com/{{ site.social-links.instagram }}"><i class="fa fa-instagram fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.pinterest %}<li><a href="https://pinterest.com/{{ site.social-links.pinterest }}"><i class="fa fa-pinterest fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.youtube %}<li><a href="https://youtube.com/{{ site.social-links.youtube }}"><i class="fa fa-youtube fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.googleplus %}<li><a href="https://plus.google.com/{{ site.social-links.googleplus }}"><i class="fa fa-google-plus fa-lg"></i></a></li>{% endif %}
+  {% if site.social-links.email %}<li><a href="mailto:{{ site.social-links.email }}"><i class="fa fa-envelope-o fa-lg"></i></a></li>{% endif %}
+</ul>

+ 13 - 0
_layouts/default.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en-us">
+{% include head.html %}
+  <body>
+
+    {{ content }}
+
+    <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
+    <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
+    {% include apple.html %}
+    {% include analytics.html %}
+  </body>
+</html>

+ 11 - 0
_layouts/page.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+<div class="page">
+  <h1>{{ page.title }}</h1>
+
+  <div class="entry">
+    {{ content }}
+  </div>
+</div>

+ 60 - 0
_sass/_devices.scss

@@ -0,0 +1,60 @@
+
+//
+// DEVICES
+//
+
+.device {
+  position: relative;
+  background-size: cover;
+}
+
+.device .app-screenshot {
+  position: absolute;
+  width: 240px;
+  height: auto;
+}
+
+//
+// iPhone SE Silver Vertical
+//
+
+.device.iphone-se-silver-vertical {
+  width: 288px;
+  height: 608px;
+  background-image: url(../../images/devices/iphone-se-silver-vertical.png);
+}
+.device.iphone-se-silver-vertical .app-screenshot {
+  top: 91px;
+  left: 25px;
+  width: 240px;
+}
+
+//
+// iPhone SE Space Gray Vertical
+//
+
+.device.iphone-se-space-gray-vertical {
+  width: 288px;
+  height: 608px;
+  background-image: url(../../images/devices/iphone-se-space-gray-vertical.png);
+}
+.device.iphone-se-space-gray-vertical .app-screenshot {
+  top: 91px;
+  left: 25px;
+  width: 240px;
+}
+
+//
+// iPod Touch Blue Vertical
+//
+
+.device.ipod-touch-blue-vertical {
+  width: 291px;
+  height: 614px;
+  background-image: url(../../images/devices/ipod-touch-blue-vertical.png);
+}
+.device.ipod-touch-blue-vertical .app-screenshot {
+  top: 87px;
+  left: 23px;
+  width: 246px;
+}

+ 17 - 0
_sass/_variables.scss

@@ -0,0 +1,17 @@
+
+//
+// VARIABLES
+//
+
+// Font stacks
+$helvetica: Helvetica, Arial, sans-serif;
+$helveticaNeue: "Helvetica Neue", Helvetica, Arial, sans-serif;
+$georgia: Georgia, serif;
+
+// Grays
+$black: #000;
+$darkerGray: #222;
+$darkGray: #333;
+$gray: #666;
+$lightGray: #eee;
+$white: #fff;

BIN
images/app-icon-512.jpg


BIN
images/app-screen-640x1136.jpg


BIN
images/awesome-app-landing-page-screenshot.png


BIN
images/backgrounds/31-usersthink-stock-image-web.jpg


BIN
images/backgrounds/37-usersthink-stock-image-web.jpg


BIN
images/backgrounds/58-usersthink-stock-image-web.jpg


BIN
images/backgrounds/71-usersthink-stock-image-web.jpg


BIN
images/backgrounds/73-usersthink-stock-image-web.jpg


BIN
images/backgrounds/75-usersthink-stock-image-web.jpg


BIN
images/backgrounds/81-usersthink-stock-image-web.jpg


BIN
images/backgrounds/91-usersthink-stock-image-web.jpg


BIN
images/backgrounds/95-usersthink-stock-image-web.jpg


BIN
images/config.png


BIN
images/devices/iphone-se-silver-vertical.png


BIN
images/devices/iphone-se-space-gray-vertical.png


BIN
images/devices/ipod-touch-blue-vertical.png


BIN
images/fork.png


+ 5 - 0
index.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{% include_relative themes/default/index.html %}

+ 75 - 0
themes/default/index.html

@@ -0,0 +1,75 @@
+<div class="main" role="main">
+  <div class="container">
+
+    <div class="row">
+      <div class="col-sm-6">
+
+        <!-- Marketing -->
+        <div class="marketing">
+          <div class="app-meta">
+            {% if site.enable.app_icon %}
+              <img
+                class="app-icon"
+                style="min-width: 92px;"
+                height="auto"
+                {% if site.app.icon %} src="{{ site.baseurl }}/{{ site.app.icon }}"{% endif %}
+              />
+            {% endif %}
+            <span class="app-name">{{ site.app.name }}</span>
+          </div>
+
+          {% if site.marketing_header %}
+          <h2 class="marketing-header">{{ site.marketing_header }}</h2>
+          {% endif %}
+
+          <p class="marketing-desc">{{ site.marketing_desc }}</p>
+          <div class="download-buttons">
+            <a
+              class="download-btn btn btn-lg"
+              href="https://itunes.apple.com/app/id{{ site.app.ios_id }}?mt=8&at={% include apple-affiliate.html %}">
+              <i class="fa fa-apple fa-lg" aria-hidden="true"></i> App Store
+            </a>
+
+            {% if site.app.android_id %}
+            <a
+              class="download-btn btn btn-lg"
+              href="https://play.google.com/store/apps/details?id={{ site.app.android_id }}">
+              <i class="fa fa-android fa-lg" aria-hidden="true"></i> Google Play
+            </a>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+
+
+      <div class="col-sm-6">
+
+        <!-- App Screenshot(s) -->
+        <div class="device {{ site.device }}">
+          <img
+            class="app-screenshot"
+            {% if site.app.screenshot %}src="{{ site.baseurl }}/{{ site.app.screenshot }}"{% endif %}
+          />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+
+<div class="social">
+  <div class="container">
+    <div class="row">
+      <div class="col-sm-12">
+        {% include social.html %}
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="footer">
+  <div class="container">
+    <!-- footer text here -->
+  </div>
+</div>

+ 193 - 0
themes/default/styles.scss

@@ -0,0 +1,193 @@
+---
+---
+
+@import "variables";
+
+//
+// BASE
+//
+
+body {
+  min-height: 100%;
+
+  {% if site.background_color %}
+  background-color: {{ site.background_color }};
+  {% endif %}
+
+  {% if site.background_image %}
+  background: linear-gradient(rgba(59, 61, 64, 0.5), rgba(59, 61, 64, 0.5)), url(../../{{ site.background_image }}) no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  {% endif %}
+
+  {% if site.text_color %}
+  color: {{ site.text_color }};
+  {% endif %}
+
+  font-size: 18px;
+  -moz-osx-font-smoothing: grayscale;
+   -webkit-font-smoothing: antialiased;
+}
+
+a {
+  transition: all .3s;
+}
+
+{% if site.link_color %}
+a {
+  color: {{ site.link_color }};
+}
+
+a:focus,
+a:hover {
+  color: darken({{ site.link_color }}, 20%);
+}
+{% endif %}
+
+//
+// LAYOUT / SECTIONS
+//
+
+.container {
+  max-width: 980px;
+}
+
+.main {
+  position: relative;
+  min-height: 100%;
+  padding-top: 70px;
+  padding-bottom: 60px;
+}
+
+.footer {
+  padding-bottom: 50px;
+}
+
+//
+// Marketing
+//
+
+.marketing {
+  text-align: center;
+}
+
+.app-meta {
+  margin-bottom: 20px;
+  font-size: 32px;
+}
+
+.app-icon {
+  display: block;
+  margin: 0 auto 10px;
+  border-radius: 15px;
+  width: 92px;
+}
+
+.marketing-desc {
+  margin: 0 auto 20px;
+  max-width: 450px;
+  white-space: pre-wrap;
+  font-weight: 500;
+}
+
+//
+// Download Buttons
+//
+
+.download-buttons {
+  margin-bottom: 20px;
+}
+
+.download-btn {
+  margin-right: 20px;
+  margin-bottom: 20px;
+  border: none;
+  background-color: #0191FF;
+  color: #fff;
+
+  {% if site.download_button_background_color %}
+  background-color: {{ site.download_button_background_color }};
+  {% endif %}
+
+  {% if site.download_button_text_color %}
+  color: {{ site.download_button_text_color }};
+  {% endif %}
+}
+
+.download-btn:focus,
+.download-btn:hover {
+  background-color: darken(#0191FF, 20%);
+  color: #fff;
+
+  {% if site.download_button_background_color %}
+  background-color: darken({{ site.download_button_background_color }}, 20%);
+  {% endif %}
+
+  {% if site.download_button_text_color %}
+  color: {{ site.download_button_text_color }};
+  {% endif %}
+}
+
+//
+// Social
+//
+
+.social {
+  text-align: center;
+}
+
+.social-links {
+  padding-left: 0;
+  margin-left: -5px;
+  list-style: none;
+}
+
+.social-links li {
+  display: inline-block;
+  margin: 12px;
+}
+
+{% if site.social_link_color %}
+.social-links a {
+  color: {{ site.social_link_color }};
+}
+
+.social-links a:focus,
+.social-links a:hover {
+  color: darken({{ site.social_link_color }}, 30%);
+}
+{% endif %}
+
+//
+// Device
+//
+
+.device {
+  margin: auto;
+}
+
+//
+// large screens
+//
+
+@media (min-width: 768px) {
+  .marketing {
+    text-align: left;
+  }
+
+  .app-icon {
+    display: inline;
+  }
+
+  .marketing-desc {
+    text-align: left;
+  }
+}
+
+//
+// more imports
+//
+
+@import "devices";