readding theme

logicp/themes/alpha-dust/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Klughertz Jonathan
+
+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.

logicp/themes/alpha-dust/README.md

@@ -0,0 +1,232 @@
+# Alpha Dust Hexo Blog Theme
+
+![](http://www.codeblocq.com/img/hexo-theme-thumbnail/AlphaDust.jpg)
+
+[Check out the demo](http://www.codeblocq.com/assets/projects/hexo-theme-alpha-dust/).
+
+This theme was developed from scratch by myself just for fun. It is a glowy futuristic theme, hope you will find a use for it :)
+
+## Features Overview
+
+- Responsive
+- Disqus comments
+- Google Analytics
+- Tags Support
+- Responsive Images
+- Responsive YouTube and Vimeo videos
+- Image Gallery
+- Social Accounts configuration
+- Pagination
+- Pages
+- Only one category per post
+- Stylus CSS preprocessor
+- ejs HTML templates
+
+## External libraries used
+
+- [Bootstrap 4 Alpha](http://v4-alpha.getbootstrap.com/) 
+- [FeatherLight.js](http://noelboss.github.io/featherlight/) (Gallery)
+- [jQuery](https://jquery.com/)
+- [GSAP](http://greensock.com/gsap)
+- [Font Awesome](http://fontawesome.io/icons/)
+
+## Installation
+
+### Install the theme
+
+Install the theme by using:
+
+```
+$ git clone https://github.com/klugjo/hexo-theme-alpha-dust themes/alpha-dust
+```
+
+Then update your blog's main `_config.yml` to set the theme to `alpha-dust`:
+
+i.e:
+
+```
+# Extensions
+## Plugins: http://hexo.io/plugins/
+## Themes: http://hexo.io/themes/
+theme: alpha-dust
+```
+
+## Theme Configuration
+
+The theme's global configuration is done in `/themes/hexo-theme-alpha-dust/_config.yml`.
+
+### Menu
+
+The menu is configured in the theme's `_config.yml`.
+
+```
+# Header
+menu:
+  Home: /
+  Archives: /archives
+  About: /about.html
+```
+
+The object key is the label and the value is the path.
+
+### Blog's Logo Image Source
+
+The blog's logo (above the title) is configured in the theme's `_config.yml`.
+
+The value should be a valid [Font Awesome class](http://fontawesome.io/icons/)
+
+```
+# Logo (Font Awesome Class)
+fa_logo: fa-cube
+```
+
+Page's and post's logo is configured in front matter and overrides blog's logo if defined.
+
+```
+---
+title: Post's title
+logoIcon: fa-pencil-square
+---
+```
+
+### Footer About Section Text
+
+The About section's text in the footer is configured in the theme's `_config.yml`. HTML allowed.
+
+```
+# Footer About Text
+footer_about: "Make Websites. Make Magic."
+```
+
+### Footer Copyright Section Text
+
+The Copyright section's text in the footer is configured in the theme's `_config.yml`. HTML allowed.
+
+```
+#Footer Copyright Line
+footer_copyright: "@Untitled. All right reserved | Design & Hexo <a href=\"http://www.codeblocq.com/\">Jonathan Klughertz</a>"
+```
+
+### Default post title
+
+The default post title (used when no title is specified) is configured in the theme's `_config.yml`.
+
+```
+# Default post title
+default_post_title: Untitled
+```
+
+### Archive Date Format
+
+You can change the date format for the archive page if you so desire
+
+```
+# Archive Date Format
+archive_date_format: MMM YYYY
+```
+
+### Disqus Comments
+
+The disqus shortname is specified in the theme's `_config.yml`.
+
+```
+# Comments.
+comments:
+  # Disqus comments
+  disqus_shortname: klugjotest
+```
+
+### Google Analytics
+
+The Google Analytics Tracking ID is configured in the theme's `_config.yml`.
+
+```
+# Google Analytics Tracking ID
+google_analytics:
+```
+
+### Social Account
+
+Setup the links to your social pages in the theme's `_config.yml`. Links are in the footer. No link = No icon.
+
+```
+# Social Accounts
+twitter_url: https://twitter.com/?lang=en
+facebook_url: https://www.facebook.com/
+instagram_url: https://www.instagram.com/
+dribble_url: https://dribbble.com/
+github_url: https://github.com/klugjo/hexo-theme-alpha-dust
+googleplus_url: https://plus.google.com/
+behance_url: https://www.behance.net/
+fivehundredpx_url: https://500px.com/
+email_url: \#
+rss_url: \#
+```
+
+## Tags page.
+
+> Follow these steps to add a `tags` page that contains all the tags in your site.
+
+- Create a page named `tags`
+
+```
+$ hexo new page "tags"
+```
+
+- Edit the newly created page and set page type to `tags` in the front matter.
+
+```
+title: All tags
+type: "tags"
+```
+
+- Add `tags` to the menu in the theme `_config.yml`:
+
+```
+# Header
+menu:
+  Home: /
+  Archives: /archives
+  About: /about.html
+  Tags: /tags
+```
+
+## Categories page.
+
+> Follow these steps to add a `categories` page that contains all the categories in your site.
+
+- Create a page named `categories`
+
+```
+$ hexo new page "categories"
+```
+
+- Edit the newly created page and set page type to `categories` in the front matter.
+
+```
+title: All tags
+type: "categories"
+```
+
+- Add `tags` to the menu in the theme `_config.yml`:
+
+```
+# Header
+menu:
+  Home: /
+  Archives: /archives
+  About: /about.html
+  Categories: /categories
+```
+
+## Creator
+
+This theme was created by Jonathan Klughertz, check out my [github](https://github.com/klugjo) and [blog](http://www.codeblocq.com/) for more info.
+
+## Bugs
+
+If you have a question, feature request or a bug you need me to fix, please [click here](https://github.com/klugjo/hexo-theme-phantom/issues/new) to file an issue.
+
+## License
+
+MIT

logicp/themes/alpha-dust/_config.yml

@@ -0,0 +1,38 @@
+# Logo (Font Awesome Class)
+fa_logo: fa-cube
+
+# Header
+menu:
+  Home: /
+  Archives: /archives
+  About: /about.html
+  Tags: /tags
+  Categories: /categories
+  Contact: /contact.html
+
+# Default post title
+default_post_title: Untitled
+
+# Archive Date Format
+archive_date_format: MMM YYYY
+
+# Comments.
+comments:
+  # Disqus comments
+  disqus_shortname:
+
+# Google Analytics Tracking ID
+google_analytics:
+
+# Social Accounts
+twitter_url: https://twitter.com/bartlebybiggs
+github_url: https://github.com/adventurist
+git_home: https://git.stronglogic.xyz
+email_url: adventurist@gmail.com
+
+# Footer About Text
+footer_about: "This theme was developed by <a href=\"https://github.com/klugjo\">Jonathan Klughertz</a>. The source code is available on Github. Create Websites. Make Magic."
+
+# Footer Copyright Line
+footer_copyright: "@Untitled. All right reserved | Design & Hexo <a href=\"http://www.codeblocq.com/\">Jonathan Klughertz</a>"
+

logicp/themes/alpha-dust/languages/de.yml

@@ -0,0 +1,5 @@
+prev: Vorherige Seite
+next: Nächste Seite
+comment: Kommentare
+archive_a: Archiv
+archive_b: "Archiv: %s"

logicp/themes/alpha-dust/languages/default.yml

@@ -0,0 +1,11 @@
+prev: Older Posts
+next: Newer Posts
+comment: Comments
+archive_a: Archives
+archive_b: "Archives: %s"
+about: About
+recent_posts: "Recent Posts"
+categories: "Categories"
+default_post_title: "Untitled"
+category: Category
+tag: Tag

logicp/themes/alpha-dust/languages/en.yml

@@ -0,0 +1,11 @@
+prev: Older Posts
+next: Newer Posts
+comment: Comments
+archive_a: Archives
+archive_b: "Archives: %s"
+about: About
+recent_posts: "Recent Posts"
+categories: "Categories"
+default_post_title: "Untitled"
+category: Categories
+tag: Tags

logicp/themes/alpha-dust/languages/es.yml

@@ -0,0 +1,5 @@
+prev: Anterior
+next: Siguiente
+comment: Comentarios
+archive_a: Archivo
+archive_b: "Archivo: %s"

logicp/themes/alpha-dust/languages/fr.yml

@@ -0,0 +1,5 @@
+prev: Précedent
+next: Suivant
+comment: Commentaires
+archive_a: Archives
+archive_b: "Archives: %s"

logicp/themes/alpha-dust/languages/no.yml

@@ -0,0 +1,5 @@
+prev: Forrige
+next: Neste
+comment: Kommentarer
+archive_a: Arkiv
+archive_b: "Arkiv: %s"

logicp/themes/alpha-dust/languages/pl.yml

@@ -0,0 +1,5 @@
+prev: Poprzednia
+next: Następna
+comment: Komentarze
+archive_a: Archiwa
+archive_b: "Archiwa: %s"

logicp/themes/alpha-dust/languages/pt.yml

@@ -0,0 +1,7 @@
+prev: Antigos
+next: Novos
+comment: Comentários
+archive_a: Arquivos
+archive_b: "Arquivados: %s"
+tagcloud: Tags
+categories: Categorias

logicp/themes/alpha-dust/languages/ru.yml

@@ -0,0 +1,5 @@
+prev: Назад
+next: Вперед
+comment: Комментарии
+archive_a: Архив
+archive_b: "Архив: %s"

logicp/themes/alpha-dust/languages/zh-CN.yml

@@ -0,0 +1,5 @@
+prev: 上一页
+next: 下一页
+comment: 留言
+archive_a: 归档
+archive_b: 归档：%s

logicp/themes/alpha-dust/languages/zh-TW.yml

@@ -0,0 +1,5 @@
+prev: 上一頁
+next: 下一頁
+comment: 留言
+archive_a: 彙整
+archive_b: 彙整：%s

logicp/themes/alpha-dust/layout/_partial/after-footer.ejs

@@ -0,0 +1,27 @@
+
+<!-- jQuery -->
+<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
+
+<!-- Tween Max -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
+
+<!-- Gallery -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
+
+<!-- Custom JavaScript -->
+<%- js('js/main.js') %>
+
+<!-- Disqus Comments -->
+<% if (theme.comments && theme.comments.disqus_shortname){ %>
+<script type="text/javascript">
+    var disqus_shortname = '<%= theme.comments.disqus_shortname %>';
+
+    (function(){
+        var dsq = document.createElement('script');
+        dsq.type = 'text/javascript';
+        dsq.async = true;
+        dsq.src = '//' + disqus_shortname + '.disqus.com/<% if (page.comments){ %>embed.js<% } else { %>count.js<% } %>';
+        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+    }());
+</script>
+<% } %>

logicp/themes/alpha-dust/layout/_partial/article-archive.ejs

@@ -0,0 +1,8 @@
+<div class="archive-post">
+    <a href="<%- url_for(item.path)%>">
+        <span class="archive-date">
+            <%- item.date.format(theme.archive_date_format) %>
+        </span>
+        <%- item.title || theme.default_post_title || "Untitled" %>
+    </a>
+</div>

logicp/themes/alpha-dust/layout/_partial/article-long.ejs

@@ -0,0 +1,59 @@
+
+<div class="post">
+
+    <div class="post-header">
+        <h1 class="title">
+            <a href="<%- url_for(item.path) %>">
+                <%- item.title || theme.default_post_title || __('default_post_title') %>
+            </a>
+        </h1>
+        <div class="post-info">
+            <% if(item.date) { %>
+                <span class="date"><%= item.date.format(config.date_format) %></span>
+            <% } %>
+            <% if (theme.comments && theme.comments.disqus_shortname) { %>
+                <a href="#disqus_thread" class="comments"><%= __('comment') %></a>
+            <% } %>
+            <% if(item.categories && item.categories.first()) { %>
+                <span class="category">
+                    <a href="<%- config.root + item.categories.first().path  %>"><%- item.categories.first().name %></a>
+                </span>
+            <% } %>
+        </div>
+    </div>
+
+    <div class="content">
+
+        <!-- Gallery -->
+        <% if (item.photos && item.photos.length){ %>
+            <%- partial('gallery') %>
+        <% } %>
+
+        <!-- Post Content -->
+        <%- item.content %>
+    </div>
+
+    <%
+        var tags = [];
+        if(item.tags && item.tags.length) {
+            item.tags.forEach(function(tag){
+                tags.push('<a href="' + config.root + tag.path + '">#' + tag.name + '</a>');
+            });
+        }
+    %>
+
+    <% if(tags.length) { %>
+        <div class="post-tags">
+            <i class="fa fa-tags" aria-hidden="true"></i>
+            <%- tags.join(' ') %>
+        </div>
+    <% } %>
+
+    <!-- Comments -->
+    <% if (theme.comments && theme.comments.disqus_shortname) { %>
+    <div class="comments">
+        <%- partial("_partial/comments.ejs") %>
+    </div>
+    <% } %>
+
+</div>

logicp/themes/alpha-dust/layout/_partial/article-short.ejs

@@ -0,0 +1,36 @@
+
+<div class="post">
+
+    <div class="post-header index">
+        <h1 class="title">
+            <a href="<%- url_for(item.path) %>">
+                <%- item.title || theme.default_post_title || __('default_post_title') %>
+            </a>
+        </h1>
+        <div class="post-info">
+            <% if(item.date) { %>
+                <span class="date"><%= item.date.format(config.date_format) %></span>
+            <% } %>
+            <% if (theme.comments && theme.comments.disqus_shortname) { %>
+                <a href="<%- item.permalink %>#disqus_thread" class="comments article-comment-link"><%= __('comment') %></a>
+            <% } %>
+            <% if(item.categories.first()) { %>
+                <span class="category">
+                    <a href="<%- config.root + item.categories.first().path  %>"><%- item.categories.first().name %></a>
+                </span>
+            <% } %>
+        </div>
+    </div>
+
+    <% if(item.excerpt) { %>
+        <div class="content">
+            <%- item.excerpt %>
+        </div>
+        <a href="<%- url_for(item.path) %>" class="read-more">Read More</a>
+    <% } else { %>
+        <div class="content">
+            <%- item.content %>
+        </div>
+    <% } %>
+
+</div>

logicp/themes/alpha-dust/layout/_partial/comments.ejs

@@ -0,0 +1,20 @@
+<% if(page.comments && theme.comments && theme.comments.disqus_shortname){ %>
+<div id="disqus_thread">
+    <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+<% } %>
+
+<% if(page.comments && theme.comments && theme.comments.facebook && theme.comments.facebook.appid) { %>
+<div id="fb-root"></div>
+<script>
+    (function(d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) return;
+        js = d.createElement(s); js.id = id;
+        js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=<%= theme.comments.facebook.appid %>";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
+</script>
+
+<div class="fb-comments" data-href="<%= url %>" data-num-posts="<%= theme.comments.facebook.comment_count %>" data-width="100%" data-colorscheme="<%= theme.comments.facebook.comment_colorscheme %>"></div>
+<% } %>

logicp/themes/alpha-dust/layout/_partial/footer.ejs

@@ -0,0 +1,119 @@
+<div class="push"></div>
+
+<footer class="footer-content">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
+                <h2><%- __('about') %></h2>
+                <p>
+                    <%- theme.footer_about %>
+                </p>
+            </div>
+            <%- partial('footer_recent_posts') %>
+            <%- partial('footer_categories') %>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <ul class="list-inline footer-social-icons">
+                    <% if(theme.github_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.github_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-github"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.twitter_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.twitter_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-twitter"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.facebook_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.facebook_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-facebook"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.instagram_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.instagram_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-instagram"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.dribble_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.dribble_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-dribbble"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.googleplus_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.googleplus_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-google-plus"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.behance_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.behance_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-behance"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.fivehundredpx_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.fivehundredpx_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-500px"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.email_url) { %>
+                    <li class="list-inline-item">
+                        <a href="mailto:<%- theme.email_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-envelope-o"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                    <% if(theme.rss_url) { %>
+                    <li class="list-inline-item">
+                        <a href="<%- theme.rss_url %>">
+                            <span class="footer-icon-container">
+                                <i class="fa fa-rss"></i>
+                            </span>
+                        </a>
+                    </li>
+                    <% } %>
+                </ul>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <div class="footer-copyright">
+                    <%- theme.footer_copyright %>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>

logicp/themes/alpha-dust/layout/_partial/footer_categories.ejs

@@ -0,0 +1,12 @@
+<% if (site.categories.length){ %>
+<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 footer-categories">
+    <h2><%- __('categories') %></h2>
+    <ul>
+        <% site.categories.sort('posts.length').limit(4).each(function(cat){ %>
+        <li>
+            <a class="footer-post" href="<%- url_for(cat.path) %>"><%= cat.name.substring(0, 25) %></a>
+        </li>
+        <% }) %>
+    </ul>
+</div>
+<% } %>

logicp/themes/alpha-dust/layout/_partial/footer_recent_posts.ejs

@@ -0,0 +1,13 @@
+<% if (site.posts.length){ %>
+    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
+        <h2><%- __('recent_posts') %></h2>
+        <ul>
+            <% site.posts.sort('date', -1).limit(4).each(function(post){ %>
+            <li>
+                <a class="footer-post" href="<%- url_for(post.path) %>"><%= (post.title || theme.default_post_title || __('default_post_title')).substring(0, 25) %></a>
+            </li>
+            <% }) %>
+        </ul>
+    </div>
+<% } %>
+

logicp/themes/alpha-dust/layout/_partial/gallery.ejs

@@ -0,0 +1,12 @@
+
+<div class="gallery-container">
+    <% if (item.photos.length){ %>
+        <% item.photos.forEach(function(photo){ %>
+            <div class="picture-container">
+                <a href="#" data-featherlight="<%- config.root %><%- photo %>">
+                    <img src="<%- config.root %><%- photo %>" class="img-thumbnail" />
+                </a>
+            </div>
+        <% }); %>
+    <% } %>
+</div>

logicp/themes/alpha-dust/layout/_partial/google-analytics.ejs

@@ -0,0 +1,12 @@
+<% if (theme.google_analytics){ %>
+    <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+                m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+        ga('create', '<%= theme.google_analytics %>', 'auto');
+        ga('send', 'pageview');
+
+    </script>
+<% } %>

logicp/themes/alpha-dust/layout/_partial/head.ejs

@@ -0,0 +1,96 @@
+<head>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!--Description-->
+    <% if (page.description){ %>
+        <meta name="description" content="<%= page.description %>">
+    <% } else if (config.description){ %>
+        <meta name="description" content="<%= config.description %>">
+    <% } else if (page.excerpt){ %>
+        <meta name="description" content="<%= strip_html(page.excerpt).replace(/^\s*/, '').replace(/\s*$/, '') %>">
+    <% } else if (page.content){ %>
+        <meta name="description" content="<%= strip_html(page.content).replace(/^\s*/, '').replace(/\s*$/, '').substring(0, 150) %>">
+    <% } %>
+
+    <!--Author-->
+    <% if (config.author){ %>
+        <meta name="author" content="<%= config.author %>">
+    <% } %>
+
+    <!--Open Graph Title-->
+    <% if (page.title){ %>
+        <meta property="og:title" content="<%= page.title %>"/>
+    <% } else { %>
+        <meta property="og:title" content="<%= config.title %>"/>
+    <% } %>
+
+    <!--Open Graph Description-->
+    <% if (page.description){ %>
+        <meta property="og:description" content="<%= page.description %>" />
+    <% } else if (config.description) { %>
+        <meta property="og:description" content="<%= config.description %>" />
+    <% } %>
+
+    <!--Open Graph Site Name-->
+    <meta property="og:site_name" content="<%= config.title %>"/>
+
+    <!--Type page-->
+    <% if(page.title) { %>
+        <meta property="og:type" content="article" />
+    <% } else { %>
+        <meta property="og:type" content="website" />
+    <% } %>
+
+    <!--Page Cover-->
+    <% if (page.share_cover) { %>
+        <meta property="og:image" content="<%= config.url %><%= page.share_cover %>" />
+    <% } else if (config.cover) { %>
+        <meta property="og:image" content="<%= config.url %><%= config.cover %>"/>
+    <% } %>
+
+    <meta name="twitter:card" content="summary" />
+    <% if(theme.twitter_handle) { %>
+        <meta name="twitter:site" content="<%= theme.twitter_handle %>>" />
+    <% } %>
+
+    <!-- Title -->
+    <%
+        var title = [];
+        if (page.current > 1) title.push(__('page', page.current));
+        if (page.title) title.push(page.title);
+        if (page.category) title.push(page.category);
+        if (page.tag) title.push(page.tag);
+        if (page.archive) {
+            if (page.year) title.push(__('archive_b', page.year + (page.month ? '/' + page.month : '')));
+            else title.push(__('archive_a'));
+        }
+        title.push(config.title);
+    %>
+    <title><%= title.join(' - ') %></title>
+
+    <!-- Bootstrap Core CSS -->
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+
+    <!-- Custom Fonts -->
+    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+
+    <!-- HTML5 Shim and Respond.js 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="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <!-- Gallery -->
+    <link href="//cdnjs.cloudflare.com/ajax/libs/featherlight/1.3.5/featherlight.min.css" type="text/css" rel="stylesheet" />
+
+    <!-- Custom CSS -->
+    <%- css('css/style.css') %>
+
+    <!-- Google Analytics -->
+    <%- partial('google-analytics') %>
+
+</head>

logicp/themes/alpha-dust/layout/_partial/header.ejs

@@ -0,0 +1,8 @@
+<header>
+    <div class="logo">
+        <a href="<%- config.root %>"><i class="logo-icon fa <%- logoIcon ? logoIcon : theme.fa_logo %>" aria-hidden="true"></i></a>
+        <% if(headerTitle) { %>
+            <h1 id="main-title" class="title"><%- headerTitle %></h1>
+        <% } %>
+    </div>
+</header>

logicp/themes/alpha-dust/layout/_partial/menu.ejs

@@ -0,0 +1,19 @@
+<!--Menu Links and Overlay-->
+<div class="menu-bg">
+    <div class="menu-container">
+        <ul>
+            <% for (var i in theme.menu) { %>
+            <li class="menu-item">
+                <a href="<%- url_for(theme.menu[i]) %>">
+                    <%= i %>
+                </a>
+            </li>
+            <% } %>
+        </ul>
+    </div>
+</div>
+
+<!--Hamburger Icon-->
+<nav>
+    <a href="#menu"></a>
+</nav>

logicp/themes/alpha-dust/layout/_partial/pagination.ejs

@@ -0,0 +1,15 @@
+
+<% if(page.prev || page.next) { %>
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="wrap-pagination">
+                <a class="<%- page.prev ? "" : "disabled" %>" href="<%- config.root %><%- page.prev_link %>">
+                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+                </a>
+                <a class="<%- page.next ? "" : "disabled" %>" href="<%- config.root %><%- page.next_link %>">
+                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+<% } %>

logicp/themes/alpha-dust/layout/_partial/tag-cat-item.ejs

@@ -0,0 +1,5 @@
+<div class="archive-post">
+    <a href="<%- url_for(item.path)%>">
+        <%- item.title || "Untitled" %>
+    </a>
+</div>

logicp/themes/alpha-dust/layout/archive.ejs

@@ -0,0 +1,41 @@
+<%
+    var title = '';
+    if (page.archive) {
+        if (page.year) title = page.year + (page.month ? '/' + page.month : '');
+        else title = __('archive_a');
+    }
+
+    var postList = [];
+    if (page.category) {
+        site.categories.forEach(function(item) {
+            if(item.name === page.category) {
+                postList = item.posts.slice();
+            }
+        });
+        title = page.category;
+    }
+    else if (page.tag) {
+        site.tags.forEach(function(item) {
+            if(item.name === page.tag) {
+                postList = item.posts;
+            }
+        });
+        title = "#" + page.tag;
+    } else {
+        postList = site.posts;
+    }
+%>
+
+<div class="row">
+    <div class="col-sm-12">
+
+        <!--Title and Logo-->
+        <%- partial('_partial/header.ejs', {logoIcon: '', headerTitle: title}) %>
+
+        <section class="main archive-container">
+            <% postList.each(function(item){ %>
+                <%- partial('_partial/article-archive', {item: item}) %>
+            <% }); %>
+        </section>
+    </div>
+</div>

logicp/themes/alpha-dust/layout/index.ejs

@@ -0,0 +1,15 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <!--Title and Logo-->
+        <%- partial('_partial/header.ejs', {logoIcon: '', headerTitle: config.title}) %>
+
+        <section class="main">
+            <% page.posts.forEach(function(item, index) { %>
+                <%- partial('_partial/article-short', {item: item, index: index}) %>
+            <% }); %>
+        </section>
+    </div>
+</div>
+
+<%- partial('_partial/pagination') %>

logicp/themes/alpha-dust/layout/layout.ejs

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<!-- Head tag -->
+<%- partial('_partial/head') %>
+
+<body>
+
+<div class="bg-gradient"></div>
+<div class="bg-pattern"></div>
+
+<!-- Menu -->
+<%- partial('_partial/menu') %>
+
+<div class="container">
+
+    <!-- Main Content -->
+    <%- body %>
+
+</div>
+
+<!-- Footer -->
+<%- partial('_partial/footer') %>
+
+<!-- After footer scripts -->
+<%- partial('_partial/after-footer') %>
+
+</body>
+
+</html>

logicp/themes/alpha-dust/layout/page.ejs

@@ -0,0 +1,26 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <!--Title and Logo-->
+        <% if (page.type === 'tags' || page.type === 'tag') { %>
+            <%- partial('_partial/header.ejs', {logoIcon: page.logoIcon || 'fa-tags', headerTitle: page.title}) %>
+            <section class="main archive-container">
+                <% site.tags.forEach(function(tag) { %>
+                        <%- partial('_partial/tag-cat-item', {item: {path: tag.path, title: '#' + tag.name}}) %>
+                <% }); %>
+            </section>
+        <% } else if (page.type === 'categories' || page.type === 'category') { %>
+            <%- partial('_partial/header.ejs', {logoIcon: page.logoIcon || 'fa-folder-open', headerTitle: page.title}) %>
+            <section class="main archive-container">
+                <% site.categories.forEach(function(cat) { %>
+                        <%- partial('_partial/tag-cat-item', {item: {path: cat.path, title: cat.name}}) %>
+                <% }); %>
+            </section>
+        <% } else { %>
+            <%- partial('_partial/header.ejs', {logoIcon: page.logoIcon, headerTitle: ''}) %>
+            <section class="main">
+                <%- partial('_partial/article-long', {item: page}) %>
+            </section>
+        <% } %>
+    </div>
+</div>

logicp/themes/alpha-dust/layout/post.ejs

@@ -0,0 +1,12 @@
+<div class="row">
+    <div class="col-sm-12">
+
+        <!--Title and Logo-->
+        <%- partial('_partial/header.ejs', {logoIcon: page.logoIcon, headerTitle: ''}) %>
+
+        <section class="main">
+            <%- partial('_partial/article-long', {item: page}) %>
+        </section>
+
+    </div>
+</div>

logicp/themes/alpha-dust/source/css/_partial/archive.styl

@@ -0,0 +1,25 @@
+.archive-container
+  margin-top 50px
+  @media $xs
+    margin-top 0
+  .archive-post
+    margin 10px 0
+    font-size 1.2em
+    border-left 10px solid transparent
+    background rgba(144, 144, 144, 0.1)
+    transition border-left 0.3s ease, background 0.3s ease
+    .archive-date
+      margin-right 40px
+    a, a:link, a:visited, a:active
+      padding 10px 10px 10px 40px
+      display block
+      border-bottom none
+      width 100%
+    a:hover
+      padding 10px 10px 10px 40px
+      display block
+      width 100%
+      text-shadow none
+    &:hover
+      background rgba(144, 144, 144, 0.2)
+      border-left 10px solid $mainColor1

logicp/themes/alpha-dust/source/css/_partial/base.styl

@@ -0,0 +1,48 @@
+body
+  background: $bgColor
+  font-family: 'Open Sans', sans-serif
+  @media $xs
+    font-size 0.7em
+
+.bg-gradient
+  linearGradient(lighten(#0f1516, 5%), lighten(#113a47, 20%))
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: -2
+
+.bg-pattern
+  background: url("../img/bg-pattern.png") repeat
+  opacity: 0.5
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: -1
+
+a, a:link, a:visited, a:active
+  color: $mainColor1
+  border-bottom 1px dotted $mainColor1
+  cursor: pointer
+  transition: text-shadow 0.3s ease, border-bottom-color 0.5s ease
+  text-decoration none
+a:hover
+  color $mainColor1
+  text-shadow $titleTextShadowLight
+  border-bottom 1px dotted transparent
+  text-decoration none
+
+.btn
+  color: $btnTextColor
+  text-decoration: none
+  font-family: $fontTitle
+  background: $btnBgColor
+  &:hover
+    background: darken($btnBgColor, 8%)
+    transition: all 0.3s ease
+  &:active
+    background: darken($btnBgColor, 25%)
+
+.push
+  height: 150px
+  @media $xs
+    height 60px

logicp/themes/alpha-dust/source/css/_partial/code.styl

@@ -0,0 +1,106 @@
+code
+  color $greyTextColor
+  background rgba(144, 144, 144, 0.1)
+
+figure.highlight
+  font-family monospace
+  color $greyTextColor
+  border-top 1px solid $mainColor1
+  background rgba(144, 144, 144, 0.1)
+  overflow-y auto
+  margin 1.5em 0
+  figcaption
+    padding-top 10px
+    &:before
+      content "\f016"
+      font-family FontAwesome
+      margin 0 20px 0 50px
+    a
+      margin-left 10px
+  table
+    margin 0 !important
+    tbody
+      tr
+        border-top 0 !important
+        background none !important
+        td
+          &.gutter
+            width 40px
+            text-align right
+          padding 8px !important
+          .line
+            height 1.45em
+          pre
+            margin-bottom 0
+            color $greyTextColor
+            // Theme: Solarized - Light
+            // More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html
+            .comment
+            .template_comment
+            .diff .header
+            .doctype
+            .pi
+            .lisp .string
+            .javadoc
+              color #808080
+              font-style italic
+
+            .keyword
+            .winutils
+            .method
+            .addition
+            .css .tag
+            .request
+            .status
+            .nginx .title
+              color #cc7832
+
+            .number
+            .command
+            .tag .value
+            .phpdoc
+            .tex .formula
+            .regexp
+            .hexcolor
+              color #6897BB
+
+            .string
+              color #6A8759
+
+            .title
+            .localvars
+            .chunk
+            .decorator
+            .built_in
+            .identifier
+            .vhdl
+            .literal
+            .id
+              color #268bd2
+
+            .attribute
+            .variable
+            .lisp .body
+            .smalltalk .number
+            .constant
+            .class .title
+            .parent
+            .haskell .type
+              color #6A8759
+
+            .preprocessor
+            .preprocessor .keyword
+            .shebang
+            .symbol
+            .symbol .string
+            .diff .change
+            .special
+            .attr_selector
+            .important
+            .subst
+            .cdata
+            .clojure .title
+              color #e8bf6a
+
+            .deletion
+              color #dc322f

logicp/themes/alpha-dust/source/css/_partial/footer.styl

@@ -0,0 +1,47 @@
+footer.footer-content
+  padding-top 100px
+  width 100%
+  min-height 350px
+  background $bgColor
+  color $mainColor1
+  border-top 1px dotted $mainColor1
+  text-align center
+  @media $xs
+    min-height 250px
+    padding-top 60px
+  a, a:link, a:visited, a:active
+    color $mainColor1
+    text-decoration none
+    cursor pointer
+  h2
+    font-family $fontTitle
+    padding-bottom 30px
+    font-size 1.5em
+  ul
+    list-style-type none
+    padding-left 0
+  .footer-about
+    text-align left
+    @media $sm
+      h2
+        text-align center
+      p
+        text-align center
+        padding-bottom 30px
+
+
+  .footer-social-icons
+    margin 80px 0 50px 0
+    @media $xs
+      margin 30px 0 25px 0
+    li
+      padding 0 10px
+      line-height 3em
+      .footer-icon-container
+        i
+          font-size 2em
+      a, a:link, a:visited, a:active
+        border-bottom 0
+  .footer-copyright
+    margin 0 0 40px 0
+    font-size 0.7em

logicp/themes/alpha-dust/source/css/_partial/header.styl

@@ -0,0 +1,20 @@
+header
+  padding-top 100px
+  .logo
+    a, a:link, a:visited, a:active
+      border-bottom none
+    margin 0 auto
+    text-align center
+    .logo-icon
+      font-size 60px
+      color $mainColor1
+      text-shadow $titleTextShadow
+    img
+      width 100px
+      height 100px
+      border-radius 50%
+    .title
+      line-height 100px
+      color $mainColor1
+      font-family $fontTitle
+      text-shadow $titleTextShadow

logicp/themes/alpha-dust/source/css/_partial/menu.styl

@@ -0,0 +1,47 @@
+.menu-bg
+  background: #000
+  display none
+  opacity: 0
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: 100
+  .menu-container
+    position: fixed
+    padding 0 250px
+    border-left 1px solid $mainColor1
+    border-right 1px solid $mainColor1
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    ul
+      list-style-type none
+      margin-bottom 0
+      li
+        text-align right
+        padding 5px
+        a
+          font-family $fontTitle
+          text-transform uppercase
+          font-size 30px
+          border-bottom none
+
+nav
+  position fixed
+  right 2em
+  top 1.5em
+  z-index 10000
+  a, a:link, a:visited, a:active
+    font-family FontAwesome
+    font-style normal
+    border-bottom none
+    font-size 2em
+    opacity: 0.5
+    transition: opacity 0.3s ease
+    &:before
+      content "\f0c9"
+    &.menu-active
+      &:before
+        content "\f00d"
+  a:hover
+    opacity 1

logicp/themes/alpha-dust/source/css/_partial/pagination.styl

@@ -0,0 +1,13 @@
+.wrap-pagination
+  margin-top 50px
+  font-size 30px
+  text-align center
+  color $mainColor1
+  a
+    border-bottom 0
+    margin 30px
+  a.disabled, a.disabled:active, a.disabled:visited, a.disabled:link, a.disabled:hover
+    color $greyTextColor
+    opacity 0.3
+    text-shadow none
+    pointer-events none

logicp/themes/alpha-dust/source/css/_partial/post-content.styl

@@ -0,0 +1,96 @@
+section.main
+  .post
+    .content
+
+      h1, h2, h3, h4, h5, h6
+        color: $mainColor1
+        font-family: $fontTitle
+      h1, h2
+        text-shadow: $titleTextShadow
+      h1
+        width 100%
+        padding-bottom 10px
+        margin 60px 0 30px 0
+        border-bottom 1px solid $mainColor1
+      h2
+        margin 50px 0 15px 0
+      h3
+        margin 50px 0 15px 0
+        text-shadow $titleTextShadowLight
+
+      hr
+        border-color $mainColor1
+
+      b
+        font-weight 900
+
+      table
+        margin 0 0 3em 0
+        width 100%
+        tbody
+          tr
+            border solid 1px $mainColor1
+            border-left 0
+            border-right 0
+            &:nth-child(2n + 1)
+              background rgba(144, 144, 144, 0.075)
+        td
+          padding 0.75em 0.75em
+        th
+          font-weight 900
+          padding 0 0.75em 0.75em 0.75em
+          text-align left
+        thead
+          border-bottom solid 2px $mainColor1
+        tfoot
+          border-top solid 2px $mainColor1
+
+      blockquote
+        background rgba(144, 144, 144, 0.1)
+        border-left: 10px solid $greyTextColor
+        margin: 2em 10px
+        padding: 1em 15px
+        p
+          display: inline
+        footer
+          text-align right
+          padding 25px 10px 10px 10px
+          font-family $fontTitle
+          overflow auto
+          strong
+            &:before
+              content "-"
+              padding-right 10px
+          cite
+            padding 10px
+
+      .pullquote
+        float: right;
+        border: none;
+        padding: 0;
+        margin: 1em 0 1em 1.5em;
+        text-align: left;
+        width: 45%;
+        background none
+        font-size 2em
+        font-style italic
+        &.left
+          float left
+
+      img
+        display block
+        margin 0 auto
+        max-width: 100%
+
+      .video-container
+        position relative
+        padding-top 56.25%
+        height 0
+        overflow hidden
+        iframe, object, embed
+          position absolute
+          top 0
+          left 0
+          width 100%
+          height 100%
+          margin-top 0

logicp/themes/alpha-dust/source/css/_partial/post-layout.styl

@@ -0,0 +1,108 @@
+section.main
+  color: $mainColor1
+  .post
+    margin-top: 200px
+    @media $xs
+      margin-top 60px
+    .post-header
+      position relative
+      width 100%
+      margin 0 10px
+      &:before
+        position absolute
+        padding 5px
+        top -10px
+        bottom -10px
+        left -5px
+        content "  "
+        border-left 1px solid $mainColor1
+        border-bottom 1px solid $mainColor1
+        border-top 1px solid $mainColor1
+        transition: left 0.3s ease
+        @media $xs
+          display none
+      &:after
+        position absolute
+        content "  "
+        padding 5px
+        top -10px
+        bottom -10px
+        right -5px
+        border-right 1px solid $mainColor1
+        border-bottom 1px solid $mainColor1
+        border-top 1px solid $mainColor1
+        transition: right 0.3s ease
+        @media $xs
+          display none
+      h1.title
+        text-align: center
+        font-family: $fontTitle
+        text-shadow: $titleTextShadow
+        cursor pointer
+        a, a:link, a:visited, a:active
+          border-bottom none
+        @media $xs
+           font-size 2.5em
+      .post-info
+        margin-top: 15px
+        text-align: center
+        text-transform: uppercase
+        font-family: $fontTitle
+        span
+          padding: 10px
+      &.hover
+        &:before
+          left 5px
+        &:after
+          right 5px
+    .content
+      margin-top: 65px
+      @media $xs
+        margin-top 40px
+        text-align justify
+      .gallery-container
+        width 100%
+        display block
+        &:after
+          content " "
+          visibility hidden
+          display block
+          height 50px
+          clear both
+        .picture-container
+          width 25%
+          float left
+          min-width 200px
+          a
+            border none
+            .img-thumbnail
+              border none
+              background transparent
+              padding-right 20px
+              width 100%
+    .read-more
+      margin: 10px auto
+      font-family $fontTitle
+      text-transform uppercase
+    .comments
+      margin-top 120px
+      @media $xs
+         margin-top 60px
+   .post-tags
+     margin-top 60px
+     text-transform: uppercase
+     font-family: $fontTitle
+     a, i
+       margin-right 15px
+
+.featherlight
+  .featherlight-content
+    background transparent
+    .featherlight-close
+      color $mainColor1
+      cursor pointer
+      transition text-shadow 0.3s ease
+      text-decoration none
+      background transparent
+      &:hover
+        text-shadow $titleTextShadowLight

logicp/themes/alpha-dust/source/css/_partial/variables.styl

@@ -0,0 +1,26 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron:500');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+linearGradient($top, $bottom)
+  background: $top
+  background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top), color-stop(100%, $bottom))
+  background: -webkit-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -o-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -ms-linear-gradient(top, $top 0%, $bottom 100%)
+  background: linear-gradient(to bottom, $top 0%, $bottom 100%)
+
+$headerBgColor = #113a47
+$bgColor = #0f1516
+$mainColor1 = #d7ecff
+$greyTextColor = #a9b7c6
+$btnBgColor = #d7ecff
+$btnTextColor = #113a47
+$fontTitle = "Orbitron", sans-serif
+$titleTextShadow = 0 0 1px white, 0 0 5px white, 0 0 15px #228dff
+$titleTextShadowLight = 0 0 1px white, 0 0 3px white, 0 0 7px #228dff
+
+$xs = '(max-width: 33.9em)'
+$sm = '(max-width: 47.9em)'
+$md = '(max-width: 61.9em)'
+$lg = '(max-width: 74.9em)'

logicp/themes/alpha-dust/source/css/style.styl

@@ -0,0 +1,11 @@
+
+@import "_partial/variables.styl"
+@import "_partial/base.styl"
+@import "_partial/header.styl"
+@import "_partial/post-layout.styl"
+@import "_partial/post-content.styl"
+@import "_partial/archive.styl"
+@import "_partial/menu.styl"
+@import "_partial/pagination.styl"
+@import "_partial/footer.styl"
+@import "_partial/code.styl"

logicp/themes/alpha-dust/source/js/main.js

@@ -0,0 +1,79 @@
+var alphaDust = function () {
+
+    var _menuOn = false;
+
+    function initPostHeader() {
+        $('.main .post').each(function () {
+            var $post = $(this);
+            var $header = $post.find('.post-header.index');
+            var $title = $post.find('h1.title');
+            var $readMoreLink = $post.find('a.read-more');
+
+            var toggleHoverClass = function () {
+                $header.toggleClass('hover');
+            };
+
+            $title.hover(toggleHoverClass, toggleHoverClass);
+            $readMoreLink.hover(toggleHoverClass, toggleHoverClass);
+        });
+    }
+
+    function _menuShow () {
+        $('nav a').addClass('menu-active');
+        $('.menu-bg').show();
+        $('.menu-item').css({opacity: 0});
+        TweenLite.to('.menu-container', 1, {padding: '0 40px'});
+        TweenLite.to('.menu-bg', 1, {opacity: '0.92'});
+        TweenMax.staggerTo('.menu-item', 0.5, {opacity: 1}, 0.3);
+        _menuOn = true;
+
+        $('.menu-bg').hover(function () {
+            $('nav a').toggleClass('menu-close-hover');
+        });
+    }
+
+    function _menuHide() {
+        $('nav a').removeClass('menu-active');
+        TweenLite.to('.menu-bg', 0.5, {opacity: '0', onComplete: function () {
+            $('.menu-bg').hide();
+        }});
+        TweenLite.to('.menu-container', 0.5, {padding: '0 100px'});
+        $('.menu-item').css({opacity: 0});
+        _menuOn = false;
+    }
+
+    function initMenu() {
+
+        $('nav a').click(function () {
+            if(_menuOn) {
+                _menuHide();
+            } else {
+                _menuShow();
+            }
+        });
+
+        $('.menu-bg').click(function (e) {
+            if(_menuOn && e.target === this) {
+                _menuHide();
+            }
+        });
+    }
+
+    function displayArchives() {
+        $('.archive-post').css({opacity: 0});
+        TweenMax.staggerTo('.archive-post', 0.4, {opacity: 1}, 0.15);
+    }
+
+    return {
+        initPostHeader: initPostHeader,
+        initMenu: initMenu,
+        displayArchives: displayArchives
+    };
+}();
+
+
+$(document).ready(function () {
+    alphaDust.initPostHeader();
+    alphaDust.initMenu();
+    alphaDust.displayArchives();
+});

logicp/themes/alpha-dust/template/archive.html

@@ -0,0 +1,481 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"
+          integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<div class="bg-gradient"></div>
+<div class="bg-pattern"></div>
+
+<div class="menu-bg">
+    <div class="menu-container">
+        <ul>
+            <li class="menu-item"><a href="#">Home</a></li>
+            <li class="menu-item"><a href="#">Blog</a></li>
+            <li class="menu-item"><a href="#">Projects</a></li>
+            <li class="menu-item"><a href="#">Social</a></li>
+            <li class="menu-item"><a href="#">Contact</a></li>
+        </ul>
+    </div>
+</div>
+
+<nav>
+    <a href="#menu"></a>
+</nav>
+
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+
+            <header>
+                <div class="logo">
+                    <i class="logo-icon fa fa-cube" aria-hidden="true"></i>
+                </div>
+            </header>
+
+            <section class="main">
+                <div class="post">
+                    <div class="post-header">
+                        <h1 class="title">Lorem ipsum dolor</h1>
+                        <div class="post-info">
+                            <span class="date">June 24, 2016</span>
+                            <span class="comments">3 Comments</span>
+                            <span class="category"><a>DEVELOPMENT</a></span>
+                        </div>
+                    </div>
+                    <div class="content"><p>Lorem ipsum dolor <a>sit amet</a>, consectetur adipisicing elit. Consequatur
+                        deleniti error, fuga harum iusto minima possimus praesentium repellendus unde voluptate.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dicta ea fugiat ipsam
+                            laboriosam magnam nemo quae sint temporibus. Explicabo. Lorem ipsum dolor sit amet,
+                            consectetur adipisicing elit. <a>A adipisci, amet</a>, at autem corporis cumque doloremque
+                            error eveniet fugit, libero natus reprehenderit sapiente totam ullam voluptate! Assumenda
+                            eos tempora temporibus!</p>
+
+                        <p>私は昨日ついにその助力家というのの上よりするたなけれ。</p>
+                        <p>最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。</p>
+                        <p>がたを知っないはずも同時に九月をいよいよたありた。</p>
+
+                        <p>善我王上魚、產生資西員合兒臉趣論。畫衣生這著爸毛親可時，安程幾？合學作。觀經而作建。都非子作這！法如言子你關！手師也。</p>
+                        <p>以也座論頭室業放。要車時地變此親不老高小是統習直麼調未，行年香一？</p>
+                        <p>
+                            就竟在，是我童示讓利分和異種百路關母信過明驗有個歷洋中前合著區亮風值新底車有正結，進快保的行戰從：弟除文辦條國備當來際年每小腳識世可的的外的廣下歌洲保輪市果底天影；全氣具些回童但倒影發狀在示，數上學大法很，如要我……月品大供這起服滿老？應學傳者國：山式排只不之然清同關；細車是！停屋常間又，資畫領生，相們制在？公別的人寫教資夠。資再我我！只臉夫藝量不路政吃息緊回力之；兒足灣電空時局我怎初安。意今一子區首者微陸現際安除發連由子由而走學體區園我車當會，經時取頭，嚴了新科同？很夫營動通打，出和導一樂，查旅他。坐是收外子發物北看蘭戰坐車身做可來。道就學務。</p>
+
+                        <p>All HTML Elements:</p>
+                        <h1 id="Heading-1"><a href="#Heading-1" class="headerlink" title="Heading 1"></a>Heading 1</h1>
+                        <h2 id="Heading-2"><a href="#Heading-2" class="headerlink" title="Heading 2"></a>Heading 2</h2>
+                        <h3 id="Heading-3"><a href="#Heading-3" class="headerlink" title="Heading 3"></a>Heading 3</h3>
+                        <h4 id="Heading-4"><a href="#Heading-4" class="headerlink" title="Heading 4"></a>Heading 4</h4>
+                        <h5 id="Heading-5"><a href="#Heading-5" class="headerlink" title="Heading 5"></a>Heading 5</h5>
+                        <h6 id="Heading-6"><a href="#Heading-6" class="headerlink" title="Heading 6"></a>Heading 6</h6>
+                        <hr>
+                        <h2 id="Paragraph"><a href="#Paragraph" class="headerlink" title="Paragraph"></a>Paragraph</h2>
+                        <p>Lorem ipsum dolor sit amet, <a href="">test link</a> consectetur adipiscing elit. <strong>Strong
+                            text</strong> pellentesque ligula commodo viverra vehicula. <em>Italic text</em> at
+                            ullamcorper enim. Morbi a euismod nibh. <u>Underline text</u> non elit nisl.
+                            <del>Deleted text</del>
+                            tristique, sem id condimentum tempus, metus lectus venenatis mauris, sit amet semper lorem
+                            felis a eros. Fusce egestas nibh at sagittis auctor. Sed ultricies ac arcu quis molestie.
+                            Donec dapibus nunc in nibh egestas, vitae volutpat sem iaculis. Curabitur sem tellus,
+                            elementum nec quam id, fermentum laoreet mi. Ut mollis ullamcorper turpis, vitae facilisis
+                            velit ultricies sit amet. Etiam laoreet dui odio, id tempus justo tincidunt id. Phasellus
+                            scelerisque nunc sed nunc ultricies accumsan.
+                        </p>
+                        <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. <code>Sed erat diam</code>,
+                            blandit eget felis aliquam, rhoncus varius urna. Donec tellus sapien, sodales eget ante
+                            vitae, feugiat ullamcorper urna. Praesent auctor dui vitae dapibus eleifend. Proin viverra
+                            mollis neque, ut ullamcorper elit posuere eget.</p>
+                        <blockquote>
+                            <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
+                        </blockquote>
+                        <p>Maecenas ornare arcu at mi suscipit, non molestie tortor ultrices. Aenean convallis, diam et
+                            congue ultricies, erat magna tincidunt orci, pulvinar posuere mi sapien ac magna. Vestibulum
+                            ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent vitae
+                            placerat mauris. Nullam laoreet ante posuere tortor blandit auctor. Sed id ligula volutpat
+                            leo consequat placerat. Mauris fermentum dolor sed augue malesuada sollicitudin. Vivamus
+                            ultrices nunc felis, quis viverra orci eleifend ut. Donec et quam id urna cursus posuere.
+                            Donec elementum scelerisque laoreet.</p>
+                        <h2 id="List-Types"><a href="#List-Types" class="headerlink" title="List Types"></a>List Types
+                        </h2>
+                        <h3 id="Definition-List-dl"><a href="#Definition-List-dl" class="headerlink"
+                                                       title="Definition List (dl)"></a>Definition List (dl)</h3>
+                        <dl>
+                            <dt>Definition List Title</dt>
+                            <dd>This is a definition list division.</dd>
+                        </dl>
+
+                        <h3 id="Ordered-List-ol"><a href="#Ordered-List-ol" class="headerlink"
+                                                    title="Ordered List (ol)"></a>Ordered List (ol)</h3>
+                        <ol>
+                            <li>List Item 1</li>
+                            <li>List Item 2</li>
+                            <li>List Item 3</li>
+                        </ol>
+                        <h3 id="Unordered-List-ul"><a href="#Unordered-List-ul" class="headerlink"
+                                                      title="Unordered List (ul)"></a>Unordered List (ul)</h3>
+                        <ul>
+                            <li>List Item 1</li>
+                            <li>List Item 2</li>
+                            <li>List Item 3</li>
+                        </ul>
+                        <h2 id="Table"><a href="#Table" class="headerlink" title="Table"></a>Table</h2>
+                        <table>
+                            <thead>
+                            <tr>
+                                <th>Table Header 1</th>
+                                <th>Table Header 2</th>
+                                <th>Table Header 3</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td>Division 1</td>
+                                <td>Division 2</td>
+                                <td>Division 3</td>
+                            </tr>
+                            <tr>
+                                <td>Division 1</td>
+                                <td>Division 2</td>
+                                <td>Division 3</td>
+                            </tr>
+                            <tr>
+                                <td>Division 1</td>
+                                <td>Division 2</td>
+                                <td>Division 3</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                        <h2 id="Misc-Stuff-abbr-acronym-sub-sup-etc"><a href="#Misc-Stuff-abbr-acronym-sub-sup-etc"
+                                                                        class="headerlink"
+                                                                        title="Misc Stuff - abbr, acronym, sub, sup, etc."></a>Misc
+                            Stuff - abbr, acronym, sub, sup, etc.</h2>
+                        <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit.
+                            Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit
+                            dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula,
+                            nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat
+                            enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla
+                            nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante.
+                            Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue
+                            quis tellus. <abbr title="Avenue">AVE</abbr></p>
+
+
+                        <figure class="highlight javascript">
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br><span class="line">2</span><br><span
+                                                class="line">3</span><br><span class="line">4</span><br><span
+                                                class="line">5</span><br><span class="line">6</span><br><span
+                                                class="line">7</span><br><span class="line">8</span><br><span
+                                                class="line">9</span><br><span class="line">10</span><br><span
+                                                class="line">11</span><br><span class="line">12</span><br><span
+                                                class="line">13</span><br><span class="line">14</span><br><span
+                                                class="line">15</span><br><span class="line">16</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line"><span class="keyword">const</span> refreshRate = <span
+                                                class="number">1000</span> / <span
+                                                class="number">60</span>;</span><br><span class="line"><span
+                                                class="keyword">const</span> maxXPosition = <span
+                                                class="number">400</span>;</span><br><span class="line"><span
+                                                class="keyword">let</span> rect = <span class="built_in">document</span>.getElementById(<span
+                                                class="string">'rect1'</span>);</span><br><span class="line"><span
+                                                class="keyword">let</span> speedX = <span
+                                                class="number">1</span>;</span><br><span class="line"><span
+                                                class="keyword">let</span> positionX = <span
+                                                class="number">0</span>;</span><br><span class="line"></span><br><span
+                                                class="line"><span class="function"><span
+                                                class="keyword">function</span> <span class="title">step</span>(<span
+                                                class="params"></span>) </span>&#123;</span><br><span class="line">  positionX = positionX + speedX;</span><br><span
+                                                class="line">  <span class="keyword">if</span> (positionX &gt; maxXPosition || positionX &lt; <span
+                                                class="number">0</span>) &#123;</span><br><span class="line">    speedX = speedX * (<span
+                                                class="number">-1</span>);</span><br><span
+                                                class="line">  &#125;</span><br><span class="line">  rect.style.left = positionX + <span
+                                                class="string">'px'</span>;</span><br><span class="line">  <span
+                                                class="built_in">window</span>.requestAnimationFrame(step);</span><br><span
+                                                class="line">&#125;</span><br><span class="line"></span><br><span
+                                                class="line"><span class="built_in">window</span>.requestAnimationFrame(step);</span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+
+
+                        <figure class="highlight html">
+                            <figcaption><span>/app/index.html</span></figcaption>
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br><span class="line">2</span><br><span
+                                                class="line">3</span><br><span class="line">4</span><br><span
+                                                class="line">5</span><br><span class="line">6</span><br><span
+                                                class="line">7</span><br><span class="line">8</span><br><span
+                                                class="line">9</span><br><span class="line">10</span><br><span
+                                                class="line">11</span><br><span class="line">12</span><br><span
+                                                class="line">13</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line"><span
+                                                class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span
+                                                class="line"><span class="tag">&lt;<span
+                                                class="name">html</span>&gt;</span></span><br><span class="line"><span
+                                                class="tag">&lt;<span
+                                                class="name">head</span>&gt;</span></span><br><span
+                                                class="line">    <span class="tag">&lt;<span
+                                                class="name">meta</span> <span class="attr">charset</span>=<span
+                                                class="string">"UTF-8"</span>&gt;</span></span><br><span class="line">    <span
+                                                class="tag">&lt;<span class="name">link</span> <span
+                                                class="attr">href</span>=<span class="string">"style.css"</span> <span
+                                                class="attr">rel</span>=<span class="string">"stylesheet"</span> <span
+                                                class="attr">type</span>=<span
+                                                class="string">"text/css"</span>/&gt;</span></span><br><span
+                                                class="line"><span class="tag">&lt;/<span
+                                                class="name">head</span>&gt;</span></span><br><span class="line"><span
+                                                class="tag">&lt;<span
+                                                class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span
+                                                class="line">    <span class="tag">&lt;<span
+                                                class="name">div</span> <span class="attr">id</span>=<span
+                                                class="string">"timerDiv"</span> <span class="attr">class</span>=<span
+                                                class="string">"timer"</span>&gt;</span>12:35<span
+                                                class="tag">&lt;/<span
+                                                class="name">div</span>&gt;</span></span><br><span
+                                                class="line"></span><br><span class="line">    <span
+                                                class="tag">&lt;<span class="name">script</span> <span
+                                                class="attr">type</span>=<span
+                                                class="string">"text/javascript"</span> <span
+                                                class="attr">src</span>=<span
+                                                class="string">"index.js"</span>&gt;</span><span
+                                                class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span
+                                                class="line"><span class="tag">&lt;/<span
+                                                class="name">body</span>&gt;</span></span><br><span class="line"><span
+                                                class="tag">&lt;/<span
+                                                class="name">html</span>&gt;</span></span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+
+                        <p><strong>Youtube</strong></p>
+                        <div class="video-container">
+                            <iframe src="//www.youtube.com/embed/fZswz64dFlw" frameborder="0" allowfullscreen></iframe>
+                        </div>
+
+
+                        <p>This post is used for testing different tags (code, quotes). See <a
+                                href="https://hexo.io/docs/tag-plugins.html" target="_blank" rel="external">docs</a> for
+                            more info.</p>
+                        <h2 id="Block-Quote"><a href="#Block-Quote" class="headerlink" title="Block Quote"></a>Block
+                            Quote</h2>
+                        <h3 id="Normal-blockquote"><a href="#Normal-blockquote" class="headerlink"
+                                                      title="Normal blockquote"></a>Normal blockquote</h3>
+                        <blockquote>
+                            <p>Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.</p>
+                        </blockquote>
+                        <h3 id="Quote-from-a-book"><a href="#Quote-from-a-book" class="headerlink"
+                                                      title="Quote from a book"></a>Quote from a book</h3>
+                        <blockquote><p>Do not just seek happiness for yourself. Seek happiness for all. Through
+                            kindness. Through mercy.</p>
+                            <footer><strong>David Levithan</strong><cite>Wide Awake</cite></footer>
+                        </blockquote>
+                        <h3 id="Quote-from-Twitter"><a href="#Quote-from-Twitter" class="headerlink"
+                                                       title="Quote from Twitter"></a>Quote from Twitter</h3>
+                        <blockquote><p>NEW: DevDocs now comes with syntax highlighting. <a href="http://devdocs.io"
+                                                                                           target="_blank"
+                                                                                           rel="external">http://devdocs.io</a>
+                        </p>
+                            <footer><strong>@DevDocs</strong><cite><a
+                                    href="https://twitter.com/devdocs/status/356095192085962752" target="_blank"
+                                    rel="external">twitter.com/devdocs/status/356095192085962752</a></cite></footer>
+                        </blockquote>
+                        <h3 id="Quote-from-an-article-on-the-web"><a href="#Quote-from-an-article-on-the-web"
+                                                                     class="headerlink"
+                                                                     title="Quote from an article on the web"></a>Quote
+                            from an article on the web</h3>
+                        <blockquote><p>Every interaction is both precious and an opportunity to delight.</p>
+                            <footer><strong>Seth Godin</strong><cite><a
+                                    href="http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html"
+                                    target="_blank" rel="external">Welcome to Island Marketing</a></cite></footer>
+                        </blockquote>
+                        <h2 id="Code-Block"><a href="#Code-Block" class="headerlink" title="Code Block"></a>Code Block
+                        </h2>
+                        <h3 id="Normal-code-block"><a href="#Normal-code-block" class="headerlink"
+                                                      title="Normal code block"></a>Normal code block</h3>
+                        <figure class="highlight hsp">
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line">alert(<span class="string">'Hello World!'</span>)<span
+                                                class="comment">;</span></span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+                        <h3 id="With-caption"><a href="#With-caption" class="headerlink" title="With caption"></a>With
+                            caption</h3>
+                        <figure class="highlight arduino">
+                            <figcaption><span>Array.map</span></figcaption>
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line"><span class="keyword">array</span>.<span
+                                                class="built_in">map</span>(callback[, thisArg])</span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+                        <h3 id="With-caption-and-URL"><a href="#With-caption-and-URL" class="headerlink"
+                                                         title="With caption and URL"></a>With caption and URL</h3>
+                        <figure class="highlight ruby">
+                            <figcaption><span>.compact</span><a href="http://underscorejs.org/#compact" target="_blank"
+                                                                rel="external">Underscore.js</a></figcaption>
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br><span class="line">2</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line">.compact([<span class="number">0</span>, <span
+                                                class="number">1</span>, <span class="keyword">false</span>, <span
+                                                class="number">2</span>, ‘’, <span class="number">3</span>]);</span><br><span
+                                                class="line">=&gt; [<span class="number">1</span>, <span class="number">2</span>, <span
+                                                class="number">3</span>]</span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+                        <h3 id="Highlighting"><a href="#Highlighting" class="headerlink" title="Highlighting"></a>Highlighting
+                        </h3>
+                        <figure class="highlight js">
+                            <table>
+                                <tr>
+                                    <td class="gutter">
+                                        <pre><span class="line">1</span><br><span class="line">2</span><br><span
+                                                class="line">3</span><br><span class="line">4</span><br><span
+                                                class="line">5</span><br><span class="line">6</span><br><span
+                                                class="line">7</span><br><span class="line">8</span><br><span
+                                                class="line">9</span><br><span class="line">10</span><br><span
+                                                class="line">11</span><br></pre>
+                                    </td>
+                                    <td class="code">
+                                        <pre><span class="line"><span class="keyword">const</span> http = <span
+                                                class="built_in">require</span>(<span
+                                                class="string">'http'</span>);</span><br><span
+                                                class="line"></span><br><span class="line"><span
+                                                class="keyword">const</span> hostname = <span
+                                                class="string">'127.0.0.1'</span>;</span><br><span class="line"><span
+                                                class="keyword">const</span> port = <span
+                                                class="number">1337</span>;</span><br><span
+                                                class="line"></span><br><span class="line">http.createServer((req, res) =&gt; &#123;</span><br><span
+                                                class="line">  res.writeHead(<span
+                                                class="number">200</span>, &#123; <span
+                                                class="string">'Content-Type'</span>: <span
+                                                class="string">'text/plain'</span> &#125;);</span><br><span
+                                                class="line">  res.end(<span
+                                                class="string">'Hello World\n'</span>);</span><br><span class="line">&#125;).listen(port, hostname, () =&gt; &#123;</span><br><span
+                                                class="line">  <span class="built_in">console</span>.log(<span
+                                                class="string">`Server running at http://<span class="subst">$&#123;hostname&#125;</span>:<span
+                                                class="subst">$&#123;port&#125;</span>/`</span>);</span><br><span
+                                                class="line">&#125;);</span><br></pre>
+                                    </td>
+                                </tr>
+                            </table>
+                        </figure>
+                        <p>Note: Theme’s style should support <code>.highlight.line.marked</code> (recommend to use the
+                            selection or current line color).</p>
+                        <h3 id="Gist"><a href="#Gist" class="headerlink" title="Gist"></a>Gist</h3>
+                        <script src="//gist.github.com/996818.js"></script>
+                        <h3 id="jsFiddle"><a href="#jsFiddle" class="headerlink" title="jsFiddle"></a>jsFiddle</h3>
+                        <iframe scrolling="no" width="100%" height="300"
+                                src="http://jsfiddle.net/ccWP7/embedded/js,resources,html,css,result/light"
+                                frameborder="0" allowfullscreen></iframe>
+                        <h2 id="Pullquote"><a href="#Pullquote" class="headerlink" title="Pullquote"></a>Pullquote</h2>
+                        <h3 id="Left"><a href="#Left" class="headerlink" title="Left"></a>Left</h3>
+                        <blockquote class="pullquote left"><p>Lorem ipsum dolor sit amet, consectetur adipiscing
+                            elit.</p>
+                        </blockquote>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus molestie arcu, et
+                            fringilla mauris placerat ac. Nullam luctus bibendum risus. Ut cursus sed ipsum feugiat
+                            egestas. Suspendisse elementum, velit eu consequat consequat, augue lorem dapibus libero,
+                            eget pulvinar dolor est sit amet nulla. Suspendisse a porta tortor, et posuere mi.
+                            Pellentesque ultricies, mi quis volutpat malesuada, erat felis vulputate nisl, ac congue
+                            ante tortor ut ante. Proin aliquam sem vel mauris tincidunt, eget scelerisque tortor
+                            euismod. Nulla tincidunt enim nec commodo dictum. Mauris id sapien et orci gravida luctus id
+                            ut dui. In vel vulputate odio. Duis vel turpis molestie, scelerisque enim eu, lobortis eros.
+                            Cras at ipsum gravida, sagittis ante vel, viverra tellus. Nunc mauris turpis, elementum
+                            ullamcorper nisl pretium, ultrices cursus justo. Mauris porttitor commodo eros, ac ornare
+                            orci interdum in. Cras fermentum cursus leo sed mattis. In dignissim lorem sem, sit amet
+                            elementum mauris venenatis ac.</p>
+                        <h3 id="Right"><a href="#Right" class="headerlink" title="Right"></a>Right</h3>
+                        <blockquote class="pullquote right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing
+                            elit.</p>
+                        </blockquote>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ligula justo, lobortis sit amet
+                            semper vel, dignissim sit amet libero. Praesent ac tempus ligula. Maecenas at gravida odio.
+                            Etiam tristique volutpat lacus eu faucibus. Donec non tempus arcu. Phasellus adipiscing,
+                            mauris nec mollis egestas, ipsum nunc auctor velit, et rhoncus lorem ipsum at ante. Praesent
+                            et sem in velit volutpat auctor. Duis vel mauris nulla. Maecenas mattis interdum ante, quis
+                            sagittis nibh cursus et. Nulla facilisi. Morbi convallis gravida tortor, ut fermentum enim
+                            gravida et. Nunc vel dictum nisl, non ultrices libero. Proin vestibulum felis eget orci
+                            consectetur lobortis. Vestibulum augue nulla, iaculis vitae augue vehicula, dignissim
+                            ultrices libero. Sed imperdiet urna et quam ultrices tincidunt nec ac magna. Etiam vel
+                            pharetra elit.</p>
+
+                    </div>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+
+<div class="push"></div>
+
+<footer class="footer-content">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
+                <h2>Recent Posts</h2>
+                <ul>
+                    <li><a class="footer-post">Lorem ipsum</a></li>
+                    <li><a class="footer-post">ullam dolor</a></li>
+                    <li><a class="footer-post">sit consectetur</a></li>
+                    <li><a class="footer-post">totam voluptate</a></li>
+                </ul>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 footer-categories">
+                <h2>Categories</h2>
+                <ul>
+                    <li><a class="footer-category">Development</a></li>
+                    <li><a class="footer-category">Showcase</a></li>
+                    <li><a class="footer-category">Tutorial</a></li>
+                    <li><a class="footer-category">JavaScript</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- jQuery first, then Bootstrap JS. -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
+        integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/jquery.gsap.min.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>

logicp/themes/alpha-dust/template/css/font-awesome.css

@@ -0,0 +1,2199 @@
+/*!
+ *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
+ *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+  font-family: 'FontAwesome';
+  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');
+  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 FontAwesome;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+.fa-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
+.fa-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.fa-ul > li {
+  position: relative;
+}
+.fa-li {
+  position: absolute;
+  left: -2.14285714em;
+  width: 2.14285714em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.fa-li.fa-lg {
+  left: -1.85714286em;
+}
+.fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  border-radius: .1em;
+}
+.fa-pull-left {
+  float: left;
+}
+.fa-pull-right {
+  float: right;
+}
+.fa.fa-pull-left {
+  margin-right: .3em;
+}
+.fa.fa-pull-right {
+  margin-left: .3em;
+}
+/* Deprecated as of 4.4.0 */
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+.fa.pull-left {
+  margin-right: .3em;
+}
+.fa.pull-right {
+  margin-left: .3em;
+}
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+.fa-rotate-90 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.fa-rotate-180 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.fa-rotate-270 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+  filter: none;
+}
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-1x {
+  line-height: inherit;
+}
+.fa-stack-2x {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+.fa-glass:before {
+  content: "\f000";
+}
+.fa-music:before {
+  content: "\f001";
+}
+.fa-search:before {
+  content: "\f002";
+}
+.fa-envelope-o:before {
+  content: "\f003";
+}
+.fa-heart:before {
+  content: "\f004";
+}
+.fa-star:before {
+  content: "\f005";
+}
+.fa-star-o:before {
+  content: "\f006";
+}
+.fa-user:before {
+  content: "\f007";
+}
+.fa-film:before {
+  content: "\f008";
+}
+.fa-th-large:before {
+  content: "\f009";
+}
+.fa-th:before {
+  content: "\f00a";
+}
+.fa-th-list:before {
+  content: "\f00b";
+}
+.fa-check:before {
+  content: "\f00c";
+}
+.fa-remove:before,
+.fa-close:before,
+.fa-times:before {
+  content: "\f00d";
+}
+.fa-search-plus:before {
+  content: "\f00e";
+}
+.fa-search-minus:before {
+  content: "\f010";
+}
+.fa-power-off:before {
+  content: "\f011";
+}
+.fa-signal:before {
+  content: "\f012";
+}
+.fa-gear:before,
+.fa-cog:before {
+  content: "\f013";
+}
+.fa-trash-o:before {
+  content: "\f014";
+}
+.fa-home:before {
+  content: "\f015";
+}
+.fa-file-o:before {
+  content: "\f016";
+}
+.fa-clock-o:before {
+  content: "\f017";
+}
+.fa-road:before {
+  content: "\f018";
+}
+.fa-download:before {
+  content: "\f019";
+}
+.fa-arrow-circle-o-down:before {
+  content: "\f01a";
+}
+.fa-arrow-circle-o-up:before {
+  content: "\f01b";
+}
+.fa-inbox:before {
+  content: "\f01c";
+}
+.fa-play-circle-o:before {
+  content: "\f01d";
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+  content: "\f01e";
+}
+.fa-refresh:before {
+  content: "\f021";
+}
+.fa-list-alt:before {
+  content: "\f022";
+}
+.fa-lock:before {
+  content: "\f023";
+}
+.fa-flag:before {
+  content: "\f024";
+}
+.fa-headphones:before {
+  content: "\f025";
+}
+.fa-volume-off:before {
+  content: "\f026";
+}
+.fa-volume-down:before {
+  content: "\f027";
+}
+.fa-volume-up:before {
+  content: "\f028";
+}
+.fa-qrcode:before {
+  content: "\f029";
+}
+.fa-barcode:before {
+  content: "\f02a";
+}
+.fa-tag:before {
+  content: "\f02b";
+}
+.fa-tags:before {
+  content: "\f02c";
+}
+.fa-book:before {
+  content: "\f02d";
+}
+.fa-bookmark:before {
+  content: "\f02e";
+}
+.fa-print:before {
+  content: "\f02f";
+}
+.fa-camera:before {
+  content: "\f030";
+}
+.fa-font:before {
+  content: "\f031";
+}
+.fa-bold:before {
+  content: "\f032";
+}
+.fa-italic:before {
+  content: "\f033";
+}
+.fa-text-height:before {
+  content: "\f034";
+}
+.fa-text-width:before {
+  content: "\f035";
+}
+.fa-align-left:before {
+  content: "\f036";
+}
+.fa-align-center:before {
+  content: "\f037";
+}
+.fa-align-right:before {
+  content: "\f038";
+}
+.fa-align-justify:before {
+  content: "\f039";
+}
+.fa-list:before {
+  content: "\f03a";
+}
+.fa-dedent:before,
+.fa-outdent:before {
+  content: "\f03b";
+}
+.fa-indent:before {
+  content: "\f03c";
+}
+.fa-video-camera:before {
+  content: "\f03d";
+}
+.fa-photo:before,
+.fa-image:before,
+.fa-picture-o:before {
+  content: "\f03e";
+}
+.fa-pencil:before {
+  content: "\f040";
+}
+.fa-map-marker:before {
+  content: "\f041";
+}
+.fa-adjust:before {
+  content: "\f042";
+}
+.fa-tint:before {
+  content: "\f043";
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+  content: "\f044";
+}
+.fa-share-square-o:before {
+  content: "\f045";
+}
+.fa-check-square-o:before {
+  content: "\f046";
+}
+.fa-arrows:before {
+  content: "\f047";
+}
+.fa-step-backward:before {
+  content: "\f048";
+}
+.fa-fast-backward:before {
+  content: "\f049";
+}
+.fa-backward:before {
+  content: "\f04a";
+}
+.fa-play:before {
+  content: "\f04b";
+}
+.fa-pause:before {
+  content: "\f04c";
+}
+.fa-stop:before {
+  content: "\f04d";
+}
+.fa-forward:before {
+  content: "\f04e";
+}
+.fa-fast-forward:before {
+  content: "\f050";
+}
+.fa-step-forward:before {
+  content: "\f051";
+}
+.fa-eject:before {
+  content: "\f052";
+}
+.fa-chevron-left:before {
+  content: "\f053";
+}
+.fa-chevron-right:before {
+  content: "\f054";
+}
+.fa-plus-circle:before {
+  content: "\f055";
+}
+.fa-minus-circle:before {
+  content: "\f056";
+}
+.fa-times-circle:before {
+  content: "\f057";
+}
+.fa-check-circle:before {
+  content: "\f058";
+}
+.fa-question-circle:before {
+  content: "\f059";
+}
+.fa-info-circle:before {
+  content: "\f05a";
+}
+.fa-crosshairs:before {
+  content: "\f05b";
+}
+.fa-times-circle-o:before {
+  content: "\f05c";
+}
+.fa-check-circle-o:before {
+  content: "\f05d";
+}
+.fa-ban:before {
+  content: "\f05e";
+}
+.fa-arrow-left:before {
+  content: "\f060";
+}
+.fa-arrow-right:before {
+  content: "\f061";
+}
+.fa-arrow-up:before {
+  content: "\f062";
+}
+.fa-arrow-down:before {
+  content: "\f063";
+}
+.fa-mail-forward:before,
+.fa-share:before {
+  content: "\f064";
+}
+.fa-expand:before {
+  content: "\f065";
+}
+.fa-compress:before {
+  content: "\f066";
+}
+.fa-plus:before {
+  content: "\f067";
+}
+.fa-minus:before {
+  content: "\f068";
+}
+.fa-asterisk:before {
+  content: "\f069";
+}
+.fa-exclamation-circle:before {
+  content: "\f06a";
+}
+.fa-gift:before {
+  content: "\f06b";
+}
+.fa-leaf:before {
+  content: "\f06c";
+}
+.fa-fire:before {
+  content: "\f06d";
+}
+.fa-eye:before {
+  content: "\f06e";
+}
+.fa-eye-slash:before {
+  content: "\f070";
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+  content: "\f071";
+}
+.fa-plane:before {
+  content: "\f072";
+}
+.fa-calendar:before {
+  content: "\f073";
+}
+.fa-random:before {
+  content: "\f074";
+}
+.fa-comment:before {
+  content: "\f075";
+}
+.fa-magnet:before {
+  content: "\f076";
+}
+.fa-chevron-up:before {
+  content: "\f077";
+}
+.fa-chevron-down:before {
+  content: "\f078";
+}
+.fa-retweet:before {
+  content: "\f079";
+}
+.fa-shopping-cart:before {
+  content: "\f07a";
+}
+.fa-folder:before {
+  content: "\f07b";
+}
+.fa-folder-open:before {
+  content: "\f07c";
+}
+.fa-arrows-v:before {
+  content: "\f07d";
+}
+.fa-arrows-h:before {
+  content: "\f07e";
+}
+.fa-bar-chart-o:before,
+.fa-bar-chart:before {
+  content: "\f080";
+}
+.fa-twitter-square:before {
+  content: "\f081";
+}
+.fa-facebook-square:before {
+  content: "\f082";
+}
+.fa-camera-retro:before {
+  content: "\f083";
+}
+.fa-key:before {
+  content: "\f084";
+}
+.fa-gears:before,
+.fa-cogs:before {
+  content: "\f085";
+}
+.fa-comments:before {
+  content: "\f086";
+}
+.fa-thumbs-o-up:before {
+  content: "\f087";
+}
+.fa-thumbs-o-down:before {
+  content: "\f088";
+}
+.fa-star-half:before {
+  content: "\f089";
+}
+.fa-heart-o:before {
+  content: "\f08a";
+}
+.fa-sign-out:before {
+  content: "\f08b";
+}
+.fa-linkedin-square:before {
+  content: "\f08c";
+}
+.fa-thumb-tack:before {
+  content: "\f08d";
+}
+.fa-external-link:before {
+  content: "\f08e";
+}
+.fa-sign-in:before {
+  content: "\f090";
+}
+.fa-trophy:before {
+  content: "\f091";
+}
+.fa-github-square:before {
+  content: "\f092";
+}
+.fa-upload:before {
+  content: "\f093";
+}
+.fa-lemon-o:before {
+  content: "\f094";
+}
+.fa-phone:before {
+  content: "\f095";
+}
+.fa-square-o:before {
+  content: "\f096";
+}
+.fa-bookmark-o:before {
+  content: "\f097";
+}
+.fa-phone-square:before {
+  content: "\f098";
+}
+.fa-twitter:before {
+  content: "\f099";
+}
+.fa-facebook-f:before,
+.fa-facebook:before {
+  content: "\f09a";
+}
+.fa-github:before {
+  content: "\f09b";
+}
+.fa-unlock:before {
+  content: "\f09c";
+}
+.fa-credit-card:before {
+  content: "\f09d";
+}
+.fa-feed:before,
+.fa-rss:before {
+  content: "\f09e";
+}
+.fa-hdd-o:before {
+  content: "\f0a0";
+}
+.fa-bullhorn:before {
+  content: "\f0a1";
+}
+.fa-bell:before {
+  content: "\f0f3";
+}
+.fa-certificate:before {
+  content: "\f0a3";
+}
+.fa-hand-o-right:before {
+  content: "\f0a4";
+}
+.fa-hand-o-left:before {
+  content: "\f0a5";
+}
+.fa-hand-o-up:before {
+  content: "\f0a6";
+}
+.fa-hand-o-down:before {
+  content: "\f0a7";
+}
+.fa-arrow-circle-left:before {
+  content: "\f0a8";
+}
+.fa-arrow-circle-right:before {
+  content: "\f0a9";
+}
+.fa-arrow-circle-up:before {
+  content: "\f0aa";
+}
+.fa-arrow-circle-down:before {
+  content: "\f0ab";
+}
+.fa-globe:before {
+  content: "\f0ac";
+}
+.fa-wrench:before {
+  content: "\f0ad";
+}
+.fa-tasks:before {
+  content: "\f0ae";
+}
+.fa-filter:before {
+  content: "\f0b0";
+}
+.fa-briefcase:before {
+  content: "\f0b1";
+}
+.fa-arrows-alt:before {
+  content: "\f0b2";
+}
+.fa-group:before,
+.fa-users:before {
+  content: "\f0c0";
+}
+.fa-chain:before,
+.fa-link:before {
+  content: "\f0c1";
+}
+.fa-cloud:before {
+  content: "\f0c2";
+}
+.fa-flask:before {
+  content: "\f0c3";
+}
+.fa-cut:before,
+.fa-scissors:before {
+  content: "\f0c4";
+}
+.fa-copy:before,
+.fa-files-o:before {
+  content: "\f0c5";
+}
+.fa-paperclip:before {
+  content: "\f0c6";
+}
+.fa-save:before,
+.fa-floppy-o:before {
+  content: "\f0c7";
+}
+.fa-square:before {
+  content: "\f0c8";
+}
+.fa-navicon:before,
+.fa-reorder:before,
+.fa-bars:before {
+  content: "\f0c9";
+}
+.fa-list-ul:before {
+  content: "\f0ca";
+}
+.fa-list-ol:before {
+  content: "\f0cb";
+}
+.fa-strikethrough:before {
+  content: "\f0cc";
+}
+.fa-underline:before {
+  content: "\f0cd";
+}
+.fa-table:before {
+  content: "\f0ce";
+}
+.fa-magic:before {
+  content: "\f0d0";
+}
+.fa-truck:before {
+  content: "\f0d1";
+}
+.fa-pinterest:before {
+  content: "\f0d2";
+}
+.fa-pinterest-square:before {
+  content: "\f0d3";
+}
+.fa-google-plus-square:before {
+  content: "\f0d4";
+}
+.fa-google-plus:before {
+  content: "\f0d5";
+}
+.fa-money:before {
+  content: "\f0d6";
+}
+.fa-caret-down:before {
+  content: "\f0d7";
+}
+.fa-caret-up:before {
+  content: "\f0d8";
+}
+.fa-caret-left:before {
+  content: "\f0d9";
+}
+.fa-caret-right:before {
+  content: "\f0da";
+}
+.fa-columns:before {
+  content: "\f0db";
+}
+.fa-unsorted:before,
+.fa-sort:before {
+  content: "\f0dc";
+}
+.fa-sort-down:before,
+.fa-sort-desc:before {
+  content: "\f0dd";
+}
+.fa-sort-up:before,
+.fa-sort-asc:before {
+  content: "\f0de";
+}
+.fa-envelope:before {
+  content: "\f0e0";
+}
+.fa-linkedin:before {
+  content: "\f0e1";
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+  content: "\f0e2";
+}
+.fa-legal:before,
+.fa-gavel:before {
+  content: "\f0e3";
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+  content: "\f0e4";
+}
+.fa-comment-o:before {
+  content: "\f0e5";
+}
+.fa-comments-o:before {
+  content: "\f0e6";
+}
+.fa-flash:before,
+.fa-bolt:before {
+  content: "\f0e7";
+}
+.fa-sitemap:before {
+  content: "\f0e8";
+}
+.fa-umbrella:before {
+  content: "\f0e9";
+}
+.fa-paste:before,
+.fa-clipboard:before {
+  content: "\f0ea";
+}
+.fa-lightbulb-o:before {
+  content: "\f0eb";
+}
+.fa-exchange:before {
+  content: "\f0ec";
+}
+.fa-cloud-download:before {
+  content: "\f0ed";
+}
+.fa-cloud-upload:before {
+  content: "\f0ee";
+}
+.fa-user-md:before {
+  content: "\f0f0";
+}
+.fa-stethoscope:before {
+  content: "\f0f1";
+}
+.fa-suitcase:before {
+  content: "\f0f2";
+}
+.fa-bell-o:before {
+  content: "\f0a2";
+}
+.fa-coffee:before {
+  content: "\f0f4";
+}
+.fa-cutlery:before {
+  content: "\f0f5";
+}
+.fa-file-text-o:before {
+  content: "\f0f6";
+}
+.fa-building-o:before {
+  content: "\f0f7";
+}
+.fa-hospital-o:before {
+  content: "\f0f8";
+}
+.fa-ambulance:before {
+  content: "\f0f9";
+}
+.fa-medkit:before {
+  content: "\f0fa";
+}
+.fa-fighter-jet:before {
+  content: "\f0fb";
+}
+.fa-beer:before {
+  content: "\f0fc";
+}
+.fa-h-square:before {
+  content: "\f0fd";
+}
+.fa-plus-square:before {
+  content: "\f0fe";
+}
+.fa-angle-double-left:before {
+  content: "\f100";
+}
+.fa-angle-double-right:before {
+  content: "\f101";
+}
+.fa-angle-double-up:before {
+  content: "\f102";
+}
+.fa-angle-double-down:before {
+  content: "\f103";
+}
+.fa-angle-left:before {
+  content: "\f104";
+}
+.fa-angle-right:before {
+  content: "\f105";
+}
+.fa-angle-up:before {
+  content: "\f106";
+}
+.fa-angle-down:before {
+  content: "\f107";
+}
+.fa-desktop:before {
+  content: "\f108";
+}
+.fa-laptop:before {
+  content: "\f109";
+}
+.fa-tablet:before {
+  content: "\f10a";
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+  content: "\f10b";
+}
+.fa-circle-o:before {
+  content: "\f10c";
+}
+.fa-quote-left:before {
+  content: "\f10d";
+}
+.fa-quote-right:before {
+  content: "\f10e";
+}
+.fa-spinner:before {
+  content: "\f110";
+}
+.fa-circle:before {
+  content: "\f111";
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+  content: "\f112";
+}
+.fa-github-alt:before {
+  content: "\f113";
+}
+.fa-folder-o:before {
+  content: "\f114";
+}
+.fa-folder-open-o:before {
+  content: "\f115";
+}
+.fa-smile-o:before {
+  content: "\f118";
+}
+.fa-frown-o:before {
+  content: "\f119";
+}
+.fa-meh-o:before {
+  content: "\f11a";
+}
+.fa-gamepad:before {
+  content: "\f11b";
+}
+.fa-keyboard-o:before {
+  content: "\f11c";
+}
+.fa-flag-o:before {
+  content: "\f11d";
+}
+.fa-flag-checkered:before {
+  content: "\f11e";
+}
+.fa-terminal:before {
+  content: "\f120";
+}
+.fa-code:before {
+  content: "\f121";
+}
+.fa-mail-reply-all:before,
+.fa-reply-all:before {
+  content: "\f122";
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+  content: "\f123";
+}
+.fa-location-arrow:before {
+  content: "\f124";
+}
+.fa-crop:before {
+  content: "\f125";
+}
+.fa-code-fork:before {
+  content: "\f126";
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+  content: "\f127";
+}
+.fa-question:before {
+  content: "\f128";
+}
+.fa-info:before {
+  content: "\f129";
+}
+.fa-exclamation:before {
+  content: "\f12a";
+}
+.fa-superscript:before {
+  content: "\f12b";
+}
+.fa-subscript:before {
+  content: "\f12c";
+}
+.fa-eraser:before {
+  content: "\f12d";
+}
+.fa-puzzle-piece:before {
+  content: "\f12e";
+}
+.fa-microphone:before {
+  content: "\f130";
+}
+.fa-microphone-slash:before {
+  content: "\f131";
+}
+.fa-shield:before {
+  content: "\f132";
+}
+.fa-calendar-o:before {
+  content: "\f133";
+}
+.fa-fire-extinguisher:before {
+  content: "\f134";
+}
+.fa-rocket:before {
+  content: "\f135";
+}
+.fa-maxcdn:before {
+  content: "\f136";
+}
+.fa-chevron-circle-left:before {
+  content: "\f137";
+}
+.fa-chevron-circle-right:before {
+  content: "\f138";
+}
+.fa-chevron-circle-up:before {
+  content: "\f139";
+}
+.fa-chevron-circle-down:before {
+  content: "\f13a";
+}
+.fa-html5:before {
+  content: "\f13b";
+}
+.fa-css3:before {
+  content: "\f13c";
+}
+.fa-anchor:before {
+  content: "\f13d";
+}
+.fa-unlock-alt:before {
+  content: "\f13e";
+}
+.fa-bullseye:before {
+  content: "\f140";
+}
+.fa-ellipsis-h:before {
+  content: "\f141";
+}
+.fa-ellipsis-v:before {
+  content: "\f142";
+}
+.fa-rss-square:before {
+  content: "\f143";
+}
+.fa-play-circle:before {
+  content: "\f144";
+}
+.fa-ticket:before {
+  content: "\f145";
+}
+.fa-minus-square:before {
+  content: "\f146";
+}
+.fa-minus-square-o:before {
+  content: "\f147";
+}
+.fa-level-up:before {
+  content: "\f148";
+}
+.fa-level-down:before {
+  content: "\f149";
+}
+.fa-check-square:before {
+  content: "\f14a";
+}
+.fa-pencil-square:before {
+  content: "\f14b";
+}
+.fa-external-link-square:before {
+  content: "\f14c";
+}
+.fa-share-square:before {
+  content: "\f14d";
+}
+.fa-compass:before {
+  content: "\f14e";
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+  content: "\f150";
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+  content: "\f151";
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+  content: "\f152";
+}
+.fa-euro:before,
+.fa-eur:before {
+  content: "\f153";
+}
+.fa-gbp:before {
+  content: "\f154";
+}
+.fa-dollar:before,
+.fa-usd:before {
+  content: "\f155";
+}
+.fa-rupee:before,
+.fa-inr:before {
+  content: "\f156";
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+  content: "\f157";
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+  content: "\f158";
+}
+.fa-won:before,
+.fa-krw:before {
+  content: "\f159";
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+  content: "\f15a";
+}
+.fa-file:before {
+  content: "\f15b";
+}
+.fa-file-text:before {
+  content: "\f15c";
+}
+.fa-sort-alpha-asc:before {
+  content: "\f15d";
+}
+.fa-sort-alpha-desc:before {
+  content: "\f15e";
+}
+.fa-sort-amount-asc:before {
+  content: "\f160";
+}
+.fa-sort-amount-desc:before {
+  content: "\f161";
+}
+.fa-sort-numeric-asc:before {
+  content: "\f162";
+}
+.fa-sort-numeric-desc:before {
+  content: "\f163";
+}
+.fa-thumbs-up:before {
+  content: "\f164";
+}
+.fa-thumbs-down:before {
+  content: "\f165";
+}
+.fa-youtube-square:before {
+  content: "\f166";
+}
+.fa-youtube:before {
+  content: "\f167";
+}
+.fa-xing:before {
+  content: "\f168";
+}
+.fa-xing-square:before {
+  content: "\f169";
+}
+.fa-youtube-play:before {
+  content: "\f16a";
+}
+.fa-dropbox:before {
+  content: "\f16b";
+}
+.fa-stack-overflow:before {
+  content: "\f16c";
+}
+.fa-instagram:before {
+  content: "\f16d";
+}
+.fa-flickr:before {
+  content: "\f16e";
+}
+.fa-adn:before {
+  content: "\f170";
+}
+.fa-bitbucket:before {
+  content: "\f171";
+}
+.fa-bitbucket-square:before {
+  content: "\f172";
+}
+.fa-tumblr:before {
+  content: "\f173";
+}
+.fa-tumblr-square:before {
+  content: "\f174";
+}
+.fa-long-arrow-down:before {
+  content: "\f175";
+}
+.fa-long-arrow-up:before {
+  content: "\f176";
+}
+.fa-long-arrow-left:before {
+  content: "\f177";
+}
+.fa-long-arrow-right:before {
+  content: "\f178";
+}
+.fa-apple:before {
+  content: "\f179";
+}
+.fa-windows:before {
+  content: "\f17a";
+}
+.fa-android:before {
+  content: "\f17b";
+}
+.fa-linux:before {
+  content: "\f17c";
+}
+.fa-dribbble:before {
+  content: "\f17d";
+}
+.fa-skype:before {
+  content: "\f17e";
+}
+.fa-foursquare:before {
+  content: "\f180";
+}
+.fa-trello:before {
+  content: "\f181";
+}
+.fa-female:before {
+  content: "\f182";
+}
+.fa-male:before {
+  content: "\f183";
+}
+.fa-gittip:before,
+.fa-gratipay:before {
+  content: "\f184";
+}
+.fa-sun-o:before {
+  content: "\f185";
+}
+.fa-moon-o:before {
+  content: "\f186";
+}
+.fa-archive:before {
+  content: "\f187";
+}
+.fa-bug:before {
+  content: "\f188";
+}
+.fa-vk:before {
+  content: "\f189";
+}
+.fa-weibo:before {
+  content: "\f18a";
+}
+.fa-renren:before {
+  content: "\f18b";
+}
+.fa-pagelines:before {
+  content: "\f18c";
+}
+.fa-stack-exchange:before {
+  content: "\f18d";
+}
+.fa-arrow-circle-o-right:before {
+  content: "\f18e";
+}
+.fa-arrow-circle-o-left:before {
+  content: "\f190";
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+  content: "\f191";
+}
+.fa-dot-circle-o:before {
+  content: "\f192";
+}
+.fa-wheelchair:before {
+  content: "\f193";
+}
+.fa-vimeo-square:before {
+  content: "\f194";
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+  content: "\f195";
+}
+.fa-plus-square-o:before {
+  content: "\f196";
+}
+.fa-space-shuttle:before {
+  content: "\f197";
+}
+.fa-slack:before {
+  content: "\f198";
+}
+.fa-envelope-square:before {
+  content: "\f199";
+}
+.fa-wordpress:before {
+  content: "\f19a";
+}
+.fa-openid:before {
+  content: "\f19b";
+}
+.fa-institution:before,
+.fa-bank:before,
+.fa-university:before {
+  content: "\f19c";
+}
+.fa-mortar-board:before,
+.fa-graduation-cap:before {
+  content: "\f19d";
+}
+.fa-yahoo:before {
+  content: "\f19e";
+}
+.fa-google:before {
+  content: "\f1a0";
+}
+.fa-reddit:before {
+  content: "\f1a1";
+}
+.fa-reddit-square:before {
+  content: "\f1a2";
+}
+.fa-stumbleupon-circle:before {
+  content: "\f1a3";
+}
+.fa-stumbleupon:before {
+  content: "\f1a4";
+}
+.fa-delicious:before {
+  content: "\f1a5";
+}
+.fa-digg:before {
+  content: "\f1a6";
+}
+.fa-pied-piper-pp:before {
+  content: "\f1a7";
+}
+.fa-pied-piper-alt:before {
+  content: "\f1a8";
+}
+.fa-drupal:before {
+  content: "\f1a9";
+}
+.fa-joomla:before {
+  content: "\f1aa";
+}
+.fa-language:before {
+  content: "\f1ab";
+}
+.fa-fax:before {
+  content: "\f1ac";
+}
+.fa-building:before {
+  content: "\f1ad";
+}
+.fa-child:before {
+  content: "\f1ae";
+}
+.fa-paw:before {
+  content: "\f1b0";
+}
+.fa-spoon:before {
+  content: "\f1b1";
+}
+.fa-cube:before {
+  content: "\f1b2";
+}
+.fa-cubes:before {
+  content: "\f1b3";
+}
+.fa-behance:before {
+  content: "\f1b4";
+}
+.fa-behance-square:before {
+  content: "\f1b5";
+}
+.fa-steam:before {
+  content: "\f1b6";
+}
+.fa-steam-square:before {
+  content: "\f1b7";
+}
+.fa-recycle:before {
+  content: "\f1b8";
+}
+.fa-automobile:before,
+.fa-car:before {
+  content: "\f1b9";
+}
+.fa-cab:before,
+.fa-taxi:before {
+  content: "\f1ba";
+}
+.fa-tree:before {
+  content: "\f1bb";
+}
+.fa-spotify:before {
+  content: "\f1bc";
+}
+.fa-deviantart:before {
+  content: "\f1bd";
+}
+.fa-soundcloud:before {
+  content: "\f1be";
+}
+.fa-database:before {
+  content: "\f1c0";
+}
+.fa-file-pdf-o:before {
+  content: "\f1c1";
+}
+.fa-file-word-o:before {
+  content: "\f1c2";
+}
+.fa-file-excel-o:before {
+  content: "\f1c3";
+}
+.fa-file-powerpoint-o:before {
+  content: "\f1c4";
+}
+.fa-file-photo-o:before,
+.fa-file-picture-o:before,
+.fa-file-image-o:before {
+  content: "\f1c5";
+}
+.fa-file-zip-o:before,
+.fa-file-archive-o:before {
+  content: "\f1c6";
+}
+.fa-file-sound-o:before,
+.fa-file-audio-o:before {
+  content: "\f1c7";
+}
+.fa-file-movie-o:before,
+.fa-file-video-o:before {
+  content: "\f1c8";
+}
+.fa-file-code-o:before {
+  content: "\f1c9";
+}
+.fa-vine:before {
+  content: "\f1ca";
+}
+.fa-codepen:before {
+  content: "\f1cb";
+}
+.fa-jsfiddle:before {
+  content: "\f1cc";
+}
+.fa-life-bouy:before,
+.fa-life-buoy:before,
+.fa-life-saver:before,
+.fa-support:before,
+.fa-life-ring:before {
+  content: "\f1cd";
+}
+.fa-circle-o-notch:before {
+  content: "\f1ce";
+}
+.fa-ra:before,
+.fa-resistance:before,
+.fa-rebel:before {
+  content: "\f1d0";
+}
+.fa-ge:before,
+.fa-empire:before {
+  content: "\f1d1";
+}
+.fa-git-square:before {
+  content: "\f1d2";
+}
+.fa-git:before {
+  content: "\f1d3";
+}
+.fa-y-combinator-square:before,
+.fa-yc-square:before,
+.fa-hacker-news:before {
+  content: "\f1d4";
+}
+.fa-tencent-weibo:before {
+  content: "\f1d5";
+}
+.fa-qq:before {
+  content: "\f1d6";
+}
+.fa-wechat:before,
+.fa-weixin:before {
+  content: "\f1d7";
+}
+.fa-send:before,
+.fa-paper-plane:before {
+  content: "\f1d8";
+}
+.fa-send-o:before,
+.fa-paper-plane-o:before {
+  content: "\f1d9";
+}
+.fa-history:before {
+  content: "\f1da";
+}
+.fa-circle-thin:before {
+  content: "\f1db";
+}
+.fa-header:before {
+  content: "\f1dc";
+}
+.fa-paragraph:before {
+  content: "\f1dd";
+}
+.fa-sliders:before {
+  content: "\f1de";
+}
+.fa-share-alt:before {
+  content: "\f1e0";
+}
+.fa-share-alt-square:before {
+  content: "\f1e1";
+}
+.fa-bomb:before {
+  content: "\f1e2";
+}
+.fa-soccer-ball-o:before,
+.fa-futbol-o:before {
+  content: "\f1e3";
+}
+.fa-tty:before {
+  content: "\f1e4";
+}
+.fa-binoculars:before {
+  content: "\f1e5";
+}
+.fa-plug:before {
+  content: "\f1e6";
+}
+.fa-slideshare:before {
+  content: "\f1e7";
+}
+.fa-twitch:before {
+  content: "\f1e8";
+}
+.fa-yelp:before {
+  content: "\f1e9";
+}
+.fa-newspaper-o:before {
+  content: "\f1ea";
+}
+.fa-wifi:before {
+  content: "\f1eb";
+}
+.fa-calculator:before {
+  content: "\f1ec";
+}
+.fa-paypal:before {
+  content: "\f1ed";
+}
+.fa-google-wallet:before {
+  content: "\f1ee";
+}
+.fa-cc-visa:before {
+  content: "\f1f0";
+}
+.fa-cc-mastercard:before {
+  content: "\f1f1";
+}
+.fa-cc-discover:before {
+  content: "\f1f2";
+}
+.fa-cc-amex:before {
+  content: "\f1f3";
+}
+.fa-cc-paypal:before {
+  content: "\f1f4";
+}
+.fa-cc-stripe:before {
+  content: "\f1f5";
+}
+.fa-bell-slash:before {
+  content: "\f1f6";
+}
+.fa-bell-slash-o:before {
+  content: "\f1f7";
+}
+.fa-trash:before {
+  content: "\f1f8";
+}
+.fa-copyright:before {
+  content: "\f1f9";
+}
+.fa-at:before {
+  content: "\f1fa";
+}
+.fa-eyedropper:before {
+  content: "\f1fb";
+}
+.fa-paint-brush:before {
+  content: "\f1fc";
+}
+.fa-birthday-cake:before {
+  content: "\f1fd";
+}
+.fa-area-chart:before {
+  content: "\f1fe";
+}
+.fa-pie-chart:before {
+  content: "\f200";
+}
+.fa-line-chart:before {
+  content: "\f201";
+}
+.fa-lastfm:before {
+  content: "\f202";
+}
+.fa-lastfm-square:before {
+  content: "\f203";
+}
+.fa-toggle-off:before {
+  content: "\f204";
+}
+.fa-toggle-on:before {
+  content: "\f205";
+}
+.fa-bicycle:before {
+  content: "\f206";
+}
+.fa-bus:before {
+  content: "\f207";
+}
+.fa-ioxhost:before {
+  content: "\f208";
+}
+.fa-angellist:before {
+  content: "\f209";
+}
+.fa-cc:before {
+  content: "\f20a";
+}
+.fa-shekel:before,
+.fa-sheqel:before,
+.fa-ils:before {
+  content: "\f20b";
+}
+.fa-meanpath:before {
+  content: "\f20c";
+}
+.fa-buysellads:before {
+  content: "\f20d";
+}
+.fa-connectdevelop:before {
+  content: "\f20e";
+}
+.fa-dashcube:before {
+  content: "\f210";
+}
+.fa-forumbee:before {
+  content: "\f211";
+}
+.fa-leanpub:before {
+  content: "\f212";
+}
+.fa-sellsy:before {
+  content: "\f213";
+}
+.fa-shirtsinbulk:before {
+  content: "\f214";
+}
+.fa-simplybuilt:before {
+  content: "\f215";
+}
+.fa-skyatlas:before {
+  content: "\f216";
+}
+.fa-cart-plus:before {
+  content: "\f217";
+}
+.fa-cart-arrow-down:before {
+  content: "\f218";
+}
+.fa-diamond:before {
+  content: "\f219";
+}
+.fa-ship:before {
+  content: "\f21a";
+}
+.fa-user-secret:before {
+  content: "\f21b";
+}
+.fa-motorcycle:before {
+  content: "\f21c";
+}
+.fa-street-view:before {
+  content: "\f21d";
+}
+.fa-heartbeat:before {
+  content: "\f21e";
+}
+.fa-venus:before {
+  content: "\f221";
+}
+.fa-mars:before {
+  content: "\f222";
+}
+.fa-mercury:before {
+  content: "\f223";
+}
+.fa-intersex:before,
+.fa-transgender:before {
+  content: "\f224";
+}
+.fa-transgender-alt:before {
+  content: "\f225";
+}
+.fa-venus-double:before {
+  content: "\f226";
+}
+.fa-mars-double:before {
+  content: "\f227";
+}
+.fa-venus-mars:before {
+  content: "\f228";
+}
+.fa-mars-stroke:before {
+  content: "\f229";
+}
+.fa-mars-stroke-v:before {
+  content: "\f22a";
+}
+.fa-mars-stroke-h:before {
+  content: "\f22b";
+}
+.fa-neuter:before {
+  content: "\f22c";
+}
+.fa-genderless:before {
+  content: "\f22d";
+}
+.fa-facebook-official:before {
+  content: "\f230";
+}
+.fa-pinterest-p:before {
+  content: "\f231";
+}
+.fa-whatsapp:before {
+  content: "\f232";
+}
+.fa-server:before {
+  content: "\f233";
+}
+.fa-user-plus:before {
+  content: "\f234";
+}
+.fa-user-times:before {
+  content: "\f235";
+}
+.fa-hotel:before,
+.fa-bed:before {
+  content: "\f236";
+}
+.fa-viacoin:before {
+  content: "\f237";
+}
+.fa-train:before {
+  content: "\f238";
+}
+.fa-subway:before {
+  content: "\f239";
+}
+.fa-medium:before {
+  content: "\f23a";
+}
+.fa-yc:before,
+.fa-y-combinator:before {
+  content: "\f23b";
+}
+.fa-optin-monster:before {
+  content: "\f23c";
+}
+.fa-opencart:before {
+  content: "\f23d";
+}
+.fa-expeditedssl:before {
+  content: "\f23e";
+}
+.fa-battery-4:before,
+.fa-battery-full:before {
+  content: "\f240";
+}
+.fa-battery-3:before,
+.fa-battery-three-quarters:before {
+  content: "\f241";
+}
+.fa-battery-2:before,
+.fa-battery-half:before {
+  content: "\f242";
+}
+.fa-battery-1:before,
+.fa-battery-quarter:before {
+  content: "\f243";
+}
+.fa-battery-0:before,
+.fa-battery-empty:before {
+  content: "\f244";
+}
+.fa-mouse-pointer:before {
+  content: "\f245";
+}
+.fa-i-cursor:before {
+  content: "\f246";
+}
+.fa-object-group:before {
+  content: "\f247";
+}
+.fa-object-ungroup:before {
+  content: "\f248";
+}
+.fa-sticky-note:before {
+  content: "\f249";
+}
+.fa-sticky-note-o:before {
+  content: "\f24a";
+}
+.fa-cc-jcb:before {
+  content: "\f24b";
+}
+.fa-cc-diners-club:before {
+  content: "\f24c";
+}
+.fa-clone:before {
+  content: "\f24d";
+}
+.fa-balance-scale:before {
+  content: "\f24e";
+}
+.fa-hourglass-o:before {
+  content: "\f250";
+}
+.fa-hourglass-1:before,
+.fa-hourglass-start:before {
+  content: "\f251";
+}
+.fa-hourglass-2:before,
+.fa-hourglass-half:before {
+  content: "\f252";
+}
+.fa-hourglass-3:before,
+.fa-hourglass-end:before {
+  content: "\f253";
+}
+.fa-hourglass:before {
+  content: "\f254";
+}
+.fa-hand-grab-o:before,
+.fa-hand-rock-o:before {
+  content: "\f255";
+}
+.fa-hand-stop-o:before,
+.fa-hand-paper-o:before {
+  content: "\f256";
+}
+.fa-hand-scissors-o:before {
+  content: "\f257";
+}
+.fa-hand-lizard-o:before {
+  content: "\f258";
+}
+.fa-hand-spock-o:before {
+  content: "\f259";
+}
+.fa-hand-pointer-o:before {
+  content: "\f25a";
+}
+.fa-hand-peace-o:before {
+  content: "\f25b";
+}
+.fa-trademark:before {
+  content: "\f25c";
+}
+.fa-registered:before {
+  content: "\f25d";
+}
+.fa-creative-commons:before {
+  content: "\f25e";
+}
+.fa-gg:before {
+  content: "\f260";
+}
+.fa-gg-circle:before {
+  content: "\f261";
+}
+.fa-tripadvisor:before {
+  content: "\f262";
+}
+.fa-odnoklassniki:before {
+  content: "\f263";
+}
+.fa-odnoklassniki-square:before {
+  content: "\f264";
+}
+.fa-get-pocket:before {
+  content: "\f265";
+}
+.fa-wikipedia-w:before {
+  content: "\f266";
+}
+.fa-safari:before {
+  content: "\f267";
+}
+.fa-chrome:before {
+  content: "\f268";
+}
+.fa-firefox:before {
+  content: "\f269";
+}
+.fa-opera:before {
+  content: "\f26a";
+}
+.fa-internet-explorer:before {
+  content: "\f26b";
+}
+.fa-tv:before,
+.fa-television:before {
+  content: "\f26c";
+}
+.fa-contao:before {
+  content: "\f26d";
+}
+.fa-500px:before {
+  content: "\f26e";
+}
+.fa-amazon:before {
+  content: "\f270";
+}
+.fa-calendar-plus-o:before {
+  content: "\f271";
+}
+.fa-calendar-minus-o:before {
+  content: "\f272";
+}
+.fa-calendar-times-o:before {
+  content: "\f273";
+}
+.fa-calendar-check-o:before {
+  content: "\f274";
+}
+.fa-industry:before {
+  content: "\f275";
+}
+.fa-map-pin:before {
+  content: "\f276";
+}
+.fa-map-signs:before {
+  content: "\f277";
+}
+.fa-map-o:before {
+  content: "\f278";
+}
+.fa-map:before {
+  content: "\f279";
+}
+.fa-commenting:before {
+  content: "\f27a";
+}
+.fa-commenting-o:before {
+  content: "\f27b";
+}
+.fa-houzz:before {
+  content: "\f27c";
+}
+.fa-vimeo:before {
+  content: "\f27d";
+}
+.fa-black-tie:before {
+  content: "\f27e";
+}
+.fa-fonticons:before {
+  content: "\f280";
+}
+.fa-reddit-alien:before {
+  content: "\f281";
+}
+.fa-edge:before {
+  content: "\f282";
+}
+.fa-credit-card-alt:before {
+  content: "\f283";
+}
+.fa-codiepie:before {
+  content: "\f284";
+}
+.fa-modx:before {
+  content: "\f285";
+}
+.fa-fort-awesome:before {
+  content: "\f286";
+}
+.fa-usb:before {
+  content: "\f287";
+}
+.fa-product-hunt:before {
+  content: "\f288";
+}
+.fa-mixcloud:before {
+  content: "\f289";
+}
+.fa-scribd:before {
+  content: "\f28a";
+}
+.fa-pause-circle:before {
+  content: "\f28b";
+}
+.fa-pause-circle-o:before {
+  content: "\f28c";
+}
+.fa-stop-circle:before {
+  content: "\f28d";
+}
+.fa-stop-circle-o:before {
+  content: "\f28e";
+}
+.fa-shopping-bag:before {
+  content: "\f290";
+}
+.fa-shopping-basket:before {
+  content: "\f291";
+}
+.fa-hashtag:before {
+  content: "\f292";
+}
+.fa-bluetooth:before {
+  content: "\f293";
+}
+.fa-bluetooth-b:before {
+  content: "\f294";
+}
+.fa-percent:before {
+  content: "\f295";
+}
+.fa-gitlab:before {
+  content: "\f296";
+}
+.fa-wpbeginner:before {
+  content: "\f297";
+}
+.fa-wpforms:before {
+  content: "\f298";
+}
+.fa-envira:before {
+  content: "\f299";
+}
+.fa-universal-access:before {
+  content: "\f29a";
+}
+.fa-wheelchair-alt:before {
+  content: "\f29b";
+}
+.fa-question-circle-o:before {
+  content: "\f29c";
+}
+.fa-blind:before {
+  content: "\f29d";
+}
+.fa-audio-description:before {
+  content: "\f29e";
+}
+.fa-volume-control-phone:before {
+  content: "\f2a0";
+}
+.fa-braille:before {
+  content: "\f2a1";
+}
+.fa-assistive-listening-systems:before {
+  content: "\f2a2";
+}
+.fa-asl-interpreting:before,
+.fa-american-sign-language-interpreting:before {
+  content: "\f2a3";
+}
+.fa-deafness:before,
+.fa-hard-of-hearing:before,
+.fa-deaf:before {
+  content: "\f2a4";
+}
+.fa-glide:before {
+  content: "\f2a5";
+}
+.fa-glide-g:before {
+  content: "\f2a6";
+}
+.fa-signing:before,
+.fa-sign-language:before {
+  content: "\f2a7";
+}
+.fa-low-vision:before {
+  content: "\f2a8";
+}
+.fa-viadeo:before {
+  content: "\f2a9";
+}
+.fa-viadeo-square:before {
+  content: "\f2aa";
+}
+.fa-snapchat:before {
+  content: "\f2ab";
+}
+.fa-snapchat-ghost:before {
+  content: "\f2ac";
+}
+.fa-snapchat-square:before {
+  content: "\f2ad";
+}
+.fa-pied-piper:before {
+  content: "\f2ae";
+}
+.fa-first-order:before {
+  content: "\f2b0";
+}
+.fa-yoast:before {
+  content: "\f2b1";
+}
+.fa-themeisle:before {
+  content: "\f2b2";
+}
+.fa-google-plus-circle:before,
+.fa-google-plus-official:before {
+  content: "\f2b3";
+}
+.fa-fa:before,
+.fa-font-awesome:before {
+  content: "\f2b4";
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}

logicp/themes/alpha-dust/template/css/style.css

@@ -0,0 +1,551 @@
+@import url("https://fonts.googleapis.com/css?family=Orbitron:500");
+@import url("https://fonts.googleapis.com/css?family=Open+Sans");
+body {
+  background: #0f1516;
+  font-family: 'Open Sans', sans-serif;
+}
+@media (max-width: 33.9em) {
+  body {
+    font-size: 0.7em;
+  }
+}
+.bg-gradient {
+  background: #192224;
+  background: -moz-linear-gradient(top, #192224 0%, #21728b 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #192224), color-stop(100%, #21728b));
+  background: -webkit-linear-gradient(top, #192224 0%, #21728b 100%);
+  background: -o-linear-gradient(top, #192224 0%, #21728b 100%);
+  background: -ms-linear-gradient(top, #192224 0%, #21728b 100%);
+  background: linear-gradient(to bottom, #192224 0%, #21728b 100%);
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -2;
+}
+.bg-pattern {
+  background: url("../img/bg-pattern.png") repeat;
+  opacity: 0.5;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+}
+.bg-pattern-blue {
+  background: url("../img/bg-pattern-blue.png") repeat;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -2;
+}
+a,
+a:link,
+a:visited,
+a:active {
+  color: #d7ecff;
+  border-bottom: 1px dotted #d7ecff;
+  cursor: pointer;
+  transition: text-shadow 0.3s ease, border-bottom-color 0.5s ease;
+  text-decoration: none;
+}
+a:hover {
+  color: #d7ecff;
+  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 7px #228dff;
+  border-bottom: 1px dotted transparent;
+  text-decoration: none;
+}
+.btn {
+  color: #113a47;
+  text-decoration: none;
+  font-family: "Orbitron", sans-serif;
+  background: #d7ecff;
+}
+.btn:hover {
+  background: #b1daff;
+  transition: all 0.3s ease;
+}
+.btn:active {
+  background: #62b4ff;
+}
+header {
+  height: 300px;
+  padding-top: 100px;
+}
+header .logo {
+  margin: 0 auto;
+  text-align: center;
+}
+header .logo .logo-icon {
+  font-size: 60px;
+  color: #d7ecff;
+  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
+}
+header .logo img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+header .logo .title {
+  line-height: 100px;
+  color: #d7ecff;
+  font-family: "Orbitron", sans-serif;
+  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
+  cursor: pointer;
+}
+section.main {
+  color: #d7ecff;
+}
+section.main .post {
+  margin-top: 120px;
+}
+@media (max-width: 33.9em) {
+  section.main .post {
+    margin-top: 60px;
+  }
+}
+section.main .post .post-header {
+  position: relative;
+  width: 100%;
+  margin: 0 10px;
+}
+section.main .post .post-header:before {
+  position: absolute;
+  padding: 5px;
+  top: -10px;
+  bottom: -10px;
+  left: -5px;
+  content: "  ";
+  border-left: 1px solid #d7ecff;
+  border-bottom: 1px solid #d7ecff;
+  border-top: 1px solid #d7ecff;
+  transition: left 0.3s ease;
+}
+@media (max-width: 33.9em) {
+  section.main .post .post-header:before {
+    display: none;
+  }
+}
+section.main .post .post-header:after {
+  position: absolute;
+  content: "  ";
+  padding: 5px;
+  top: -10px;
+  bottom: -10px;
+  right: -5px;
+  border-right: 1px solid #d7ecff;
+  border-bottom: 1px solid #d7ecff;
+  border-top: 1px solid #d7ecff;
+  transition: right 0.3s ease;
+}
+@media (max-width: 33.9em) {
+  section.main .post .post-header:after {
+    display: none;
+  }
+}
+section.main .post .post-header h1.title {
+  text-align: center;
+  font-family: "Orbitron", sans-serif;
+  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
+  cursor: pointer;
+}
+@media (max-width: 33.9em) {
+  section.main .post .post-header h1.title {
+    font-size: 2.5em;
+  }
+}
+section.main .post .post-header .post-info {
+  margin-top: 15px;
+  text-align: center;
+  text-transform: uppercase;
+  font-family: "Orbitron", sans-serif;
+}
+section.main .post .post-header .post-info span {
+  padding: 10px;
+}
+section.main .post .post-header.hover:before {
+  left: 5px;
+}
+section.main .post .post-header.hover:after {
+  right: 5px;
+}
+section.main .post .content {
+  margin-top: 65px;
+  text-align: justify;
+}
+@media (max-width: 33.9em) {
+  section.main .post .content {
+    margin-top: 40px;
+  }
+}
+section.main .post .content h1,
+section.main .post .content h2,
+section.main .post .content h3,
+section.main .post .content h4,
+section.main .post .content h5,
+section.main .post .content h6 {
+  color: #d7ecff;
+  font-family: "Orbitron", sans-serif;
+}
+section.main .post .content h1,
+section.main .post .content h2 {
+  text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 15px #228dff;
+}
+section.main .post .content h1 {
+  width: 100%;
+  padding-bottom: 10px;
+  margin: 45px 0 30px 0;
+  border-bottom: 1px solid #d7ecff;
+}
+section.main .post .content h2 {
+  margin: 30px 0 15px 0;
+}
+section.main .post .content h3 {
+  margin: 30px 0 15px 0;
+  text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 7px #228dff;
+}
+section.main .post .content hr {
+  border-color: #d7ecff;
+}
+section.main .post .content b {
+  font-weight: 900;
+}
+section.main .post .content table {
+  margin: 0 0 3em 0;
+  width: 100%;
+}
+section.main .post .content table tbody tr {
+  border: solid 1px #d7ecff;
+  border-left: 0;
+  border-right: 0;
+}
+section.main .post .content table tbody tr:nth-child(2n + 1) {
+  background: rgba(144,144,144,0.075);
+}
+section.main .post .content table td {
+  padding: 0.75em 0.75em;
+}
+section.main .post .content table th {
+  font-weight: 900;
+  padding: 0 0.75em 0.75em 0.75em;
+  text-align: left;
+}
+section.main .post .content table thead {
+  border-bottom: solid 2px #d7ecff;
+}
+section.main .post .content table tfoot {
+  border-top: solid 2px #d7ecff;
+}
+section.main .post .content blockquote {
+  background: rgba(144,144,144,0.1);
+  border-left: 10px solid #a9b7c6;
+  margin: 2em 10px;
+  padding: 1em 15px;
+}
+section.main .post .content blockquote p {
+  display: inline;
+}
+section.main .post .content blockquote footer {
+  text-align: right;
+  padding: 25px 10px 10px 10px;
+  font-family: "Orbitron", sans-serif;
+  overflow: auto;
+}
+section.main .post .content blockquote footer strong:before {
+  content: "-";
+  padding-right: 10px;
+}
+section.main .post .content blockquote footer cite {
+  padding: 10px;
+}
+section.main .post .content .pullquote {
+  float: right;
+  border: none;
+  padding: 0;
+  margin: 1em 0 1em 1.5em;
+  text-align: left;
+  width: 45%;
+  background: none;
+  font-size: 2em;
+  font-style: italic;
+}
+section.main .post .content .pullquote.left {
+  float: left;
+}
+section.main .post .content .video-container {
+  position: relative;
+  padding-top: 56.25%;
+  height: 0;
+  overflow: hidden;
+}
+section.main .post .content .video-container iframe,
+section.main .post .content .video-container object,
+section.main .post .content .video-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-top: 0;
+}
+section.main .post .read-more {
+  margin: 10px auto;
+  font-family: "Orbitron", sans-serif;
+  text-transform: uppercase;
+}
+.push {
+  height: 150px;
+}
+@media (max-width: 33.9em) {
+  .push {
+    height: 60px;
+  }
+}
+.menu-bg {
+  background: #000;
+  display: none;
+  opacity: 0;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 100;
+}
+.menu-bg .menu-container {
+  position: fixed;
+  padding: 0 250px;
+  border-left: 1px solid #d7ecff;
+  border-right: 1px solid #d7ecff;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.menu-bg .menu-container ul {
+  list-style-type: none;
+  margin-bottom: 0;
+}
+.menu-bg .menu-container ul li {
+  text-align: right;
+  padding: 5px;
+}
+.menu-bg .menu-container ul li a {
+  font-family: "Orbitron", sans-serif;
+  text-transform: uppercase;
+  font-size: 30px;
+  border-bottom: none;
+}
+nav {
+  position: fixed;
+  right: 2em;
+  top: 1.5em;
+  z-index: 10000;
+}
+nav a,
+nav a:link,
+nav a:visited,
+nav a:active {
+  font-family: FontAwesome;
+  font-style: normal;
+  border-bottom: none;
+  font-size: 2em;
+  opacity: 0.5;
+  transition: opacity 0.3s ease;
+}
+nav a:before,
+nav a:link:before,
+nav a:visited:before,
+nav a:active:before {
+  content: "\f0c9";
+}
+nav a.menu-active:before,
+nav a:link.menu-active:before,
+nav a:visited.menu-active:before,
+nav a:active.menu-active:before {
+  content: "\f00d";
+}
+nav a:hover {
+  opacity: 1;
+}
+.wrap-pagination {
+  margin-top: 50px;
+  font-size: 30px;
+  text-align: center;
+  color: #d7ecff;
+}
+.wrap-pagination a {
+  border-bottom: 0;
+  margin: 30px;
+}
+footer.footer-content {
+  padding-top: 100px;
+  width: 100%;
+  min-height: 350px;
+  background: #0f1516;
+  color: #d7ecff;
+  border-top: 1px dotted #d7ecff;
+  text-align: center;
+}
+@media (max-width: 33.9em) {
+  footer.footer-content {
+    min-height: 250px;
+    padding-top: 60px;
+  }
+}
+footer.footer-content a,
+footer.footer-content a:link,
+footer.footer-content a:visited,
+footer.footer-content a:active {
+  color: #d7ecff;
+  text-decoration: none;
+  cursor: pointer;
+}
+footer.footer-content h2 {
+  font-family: "Orbitron", sans-serif;
+  padding-bottom: 30px;
+  font-size: 1.5em;
+}
+footer.footer-content ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+footer.footer-content .footer-about {
+  text-align: left;
+}
+footer.footer-content .footer-social-icons {
+  margin: 80px 0 50px 0;
+}
+@media (max-width: 33.9em) {
+  footer.footer-content .footer-social-icons {
+    margin: 30px 0 25px 0;
+  }
+}
+footer.footer-content .footer-social-icons li {
+  padding: 0 10px;
+  line-height: 3em;
+}
+footer.footer-content .footer-social-icons li .footer-icon-container i {
+  font-size: 2em;
+}
+footer.footer-content .footer-social-icons li a,
+footer.footer-content .footer-social-icons li a:link,
+footer.footer-content .footer-social-icons li a:visited,
+footer.footer-content .footer-social-icons li a:active {
+  border-bottom: 0;
+}
+footer.footer-content .footer-copyright {
+  margin: 0 0 40px 0;
+  font-size: 0.7em;
+}
+code {
+  color: #a9b7c6;
+  background: rgba(144,144,144,0.1);
+}
+figure.highlight {
+  font-family: monospace;
+  color: #a9b7c6;
+  border-top: 1px solid #d7ecff;
+  background: rgba(144,144,144,0.1);
+  overflow-y: auto;
+  margin: 1.5em 0;
+}
+figure.highlight figcaption {
+  padding-top: 10px;
+}
+figure.highlight figcaption:before {
+  content: "\f016";
+  font-family: FontAwesome;
+  margin: 0 20px 0 50px;
+}
+figure.highlight figcaption a {
+  margin-left: 10px;
+}
+figure.highlight table {
+  margin: 0 !important;
+}
+figure.highlight table tbody tr {
+  border-top: 0 !important;
+  background: none !important;
+}
+figure.highlight table tbody tr td {
+  padding: 8px !important;
+  overflow-x: scroll !important;
+}
+figure.highlight table tbody tr td.gutter {
+  width: 40px;
+  text-align: right;
+}
+figure.highlight table tbody tr td pre {
+  overflow-x: scroll !important;
+  margin-bottom: 0;
+  color: #a9b7c6;
+}
+figure.highlight table tbody tr td pre .comment,
+figure.highlight table tbody tr td pre .template_comment,
+figure.highlight table tbody tr td pre .diff .header,
+figure.highlight table tbody tr td pre .doctype,
+figure.highlight table tbody tr td pre .pi,
+figure.highlight table tbody tr td pre .lisp .string,
+figure.highlight table tbody tr td pre .javadoc {
+  color: #808080;
+  font-style: italic;
+}
+figure.highlight table tbody tr td pre .keyword,
+figure.highlight table tbody tr td pre .winutils,
+figure.highlight table tbody tr td pre .method,
+figure.highlight table tbody tr td pre .addition,
+figure.highlight table tbody tr td pre .css .tag,
+figure.highlight table tbody tr td pre .request,
+figure.highlight table tbody tr td pre .status,
+figure.highlight table tbody tr td pre .nginx .title {
+  color: #cc7832;
+}
+figure.highlight table tbody tr td pre .number,
+figure.highlight table tbody tr td pre .command,
+figure.highlight table tbody tr td pre .tag .value,
+figure.highlight table tbody tr td pre .phpdoc,
+figure.highlight table tbody tr td pre .tex .formula,
+figure.highlight table tbody tr td pre .regexp,
+figure.highlight table tbody tr td pre .hexcolor {
+  color: #6897bb;
+}
+figure.highlight table tbody tr td pre .string {
+  color: #6a8759;
+}
+figure.highlight table tbody tr td pre .title,
+figure.highlight table tbody tr td pre .localvars,
+figure.highlight table tbody tr td pre .chunk,
+figure.highlight table tbody tr td pre .decorator,
+figure.highlight table tbody tr td pre .built_in,
+figure.highlight table tbody tr td pre .identifier,
+figure.highlight table tbody tr td pre .vhdl,
+figure.highlight table tbody tr td pre .literal,
+figure.highlight table tbody tr td pre .id {
+  color: #268bd2;
+}
+figure.highlight table tbody tr td pre .attribute,
+figure.highlight table tbody tr td pre .variable,
+figure.highlight table tbody tr td pre .lisp .body,
+figure.highlight table tbody tr td pre .smalltalk .number,
+figure.highlight table tbody tr td pre .constant,
+figure.highlight table tbody tr td pre .class .title,
+figure.highlight table tbody tr td pre .parent,
+figure.highlight table tbody tr td pre .haskell .type {
+  color: #6a8759;
+}
+figure.highlight table tbody tr td pre .preprocessor,
+figure.highlight table tbody tr td pre .preprocessor .keyword,
+figure.highlight table tbody tr td pre .shebang,
+figure.highlight table tbody tr td pre .symbol,
+figure.highlight table tbody tr td pre .symbol .string,
+figure.highlight table tbody tr td pre .diff .change,
+figure.highlight table tbody tr td pre .special,
+figure.highlight table tbody tr td pre .attr_selector,
+figure.highlight table tbody tr td pre .important,
+figure.highlight table tbody tr td pre .subst,
+figure.highlight table tbody tr td pre .cdata,
+figure.highlight table tbody tr td pre .clojure .title {
+  color: #e8bf6a;
+}
+figure.highlight table tbody tr td pre .deletion {
+  color: #dc322f;
+}
+p {
+  font-size: 1.2em;
+}

logicp/themes/alpha-dust/template/css/style.styl

@@ -0,0 +1,455 @@
+@import url('https://fonts.googleapis.com/css?family=Orbitron:500');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans');
+
+linearGradient($top, $bottom)
+  background: $top
+  background: -moz-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top), color-stop(100%, $bottom))
+  background: -webkit-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -o-linear-gradient(top, $top 0%, $bottom 100%)
+  background: -ms-linear-gradient(top, $top 0%, $bottom 100%)
+  background: linear-gradient(to bottom, $top 0%, $bottom 100%)
+
+$headerBgColor = #113a47
+$bgColor = #0f1516
+$mainColor1 = #d7ecff
+$greyTextColor = #a9b7c6
+$btnBgColor = #d7ecff
+$btnTextColor = #113a47
+$fontTitle = "Orbitron", sans-serif
+$titleTextShadow = 0 0 1px white, 0 0 5px white, 0 0 15px #228dff
+$titleTextShadowLight = 0 0 1px white, 0 0 3px white, 0 0 7px #228dff
+
+$xs = '(max-width: 33.9em)'
+$sm = '(max-width: 47.9em)'
+$md = '(max-width: 61.9em)'
+$lg = '(max-width: 74.9em)'
+
+body
+  background: $bgColor
+  font-family: 'Open Sans', sans-serif
+  @media $xs
+    font-size 0.7em
+
+.bg-gradient
+  linearGradient(lighten(#0f1516, 5%), lighten(#113a47, 20%))
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: -2
+
+.bg-pattern
+  background: url("../img/bg-pattern.png") repeat
+  opacity: 0.5
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: -1
+
+.bg-pattern-blue
+  background: url("../img/bg-pattern-blue.png") repeat
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: -2
+
+a, a:link, a:visited, a:active
+  color: $mainColor1
+  border-bottom 1px dotted $mainColor1
+  cursor: pointer
+  transition: text-shadow 0.3s ease, border-bottom-color 0.5s ease
+  text-decoration none
+a:hover
+  color $mainColor1
+  text-shadow $titleTextShadowLight
+  border-bottom 1px dotted transparent
+  text-decoration none
+
+.btn
+  color: $btnTextColor
+  text-decoration: none
+  font-family: $fontTitle
+  background: $btnBgColor
+  &:hover
+    background: darken($btnBgColor, 8%)
+    transition: all 0.3s ease
+  &:active
+    background: darken($btnBgColor, 25%)
+
+header
+  height: 300px
+  padding-top: 100px
+  .logo
+    margin: 0 auto
+    text-align: center
+    .logo-icon
+      font-size: 60px
+      color: $mainColor1
+      text-shadow: $titleTextShadow
+    img
+      width: 100px
+      height: 100px
+      border-radius: 50%
+    .title
+      line-height: 100px
+      color: $mainColor1
+      font-family: $fontTitle
+      text-shadow: $titleTextShadow
+      cursor: pointer
+
+
+section.main
+  color: $mainColor1
+  .post
+    margin-top: 120px
+    @media $xs
+      margin-top 60px
+    .post-header
+      position relative
+      width 100%
+      margin 0 10px
+      &:before
+        position absolute
+        padding 5px
+        top -10px
+        bottom -10px
+        left -5px
+        content "  "
+        border-left 1px solid $mainColor1
+        border-bottom 1px solid $mainColor1
+        border-top 1px solid $mainColor1
+        transition: left 0.3s ease
+        @media $xs
+          display none
+      &:after
+        position absolute
+        content "  "
+        padding 5px
+        top -10px
+        bottom -10px
+        right -5px
+        border-right 1px solid $mainColor1
+        border-bottom 1px solid $mainColor1
+        border-top 1px solid $mainColor1
+        transition: right 0.3s ease
+        @media $xs
+          display none
+      h1.title
+        text-align: center
+        font-family: $fontTitle
+        text-shadow: $titleTextShadow
+        cursor pointer
+        @media $xs
+          font-size 2.5em
+      .post-info
+        margin-top: 15px
+        text-align: center
+        text-transform: uppercase
+        font-family: $fontTitle
+        span
+          padding: 10px
+      &.hover
+        &:before
+          left 5px
+        &:after
+          right 5px
+    .content
+      margin-top: 65px
+      @media $xs
+        margin-top 40px
+      text-align justify
+      h1, h2, h3, h4, h5, h6
+        color: $mainColor1
+        font-family: $fontTitle
+      h1, h2
+        text-shadow: $titleTextShadow
+      h1
+        width 100%
+        padding-bottom 10px
+        margin 45px 0 30px 0
+        border-bottom 1px solid $mainColor1
+      h2
+        margin 30px 0 15px 0
+      h3
+        margin 30px 0 15px 0
+        text-shadow $titleTextShadowLight
+      hr
+        border-color $mainColor1
+      b
+        font-weight 900
+      table
+        margin 0 0 3em 0
+        width 100%
+        tbody
+          tr
+            border solid 1px $mainColor1
+            border-left 0
+            border-right 0
+            &:nth-child(2n + 1)
+              background rgba(144, 144, 144, 0.075)
+        td
+          padding 0.75em 0.75em
+        th
+          font-weight 900
+          padding 0 0.75em 0.75em 0.75em
+          text-align left
+        thead
+          border-bottom solid 2px $mainColor1
+        tfoot
+          border-top solid 2px $mainColor1
+
+      blockquote
+        background rgba(144, 144, 144, 0.1)
+        border-left: 10px solid $greyTextColor
+        margin: 2em 10px
+        padding: 1em 15px
+        p
+          display: inline
+        footer
+          text-align right
+          padding 25px 10px 10px 10px
+          font-family $fontTitle
+          overflow auto
+          strong
+            &:before
+              content "-"
+              padding-right 10px
+          cite
+            padding 10px
+      .pullquote
+        float: right;
+        border: none;
+        padding: 0;
+        margin: 1em 0 1em 1.5em;
+        text-align: left;
+        width: 45%;
+        background none
+        font-size 2em
+        font-style italic
+        &.left
+          float left
+
+      .video-container
+        position relative
+        padding-top 56.25%
+        height 0
+        overflow hidden
+        iframe, object, embed
+          position absolute
+          top 0
+          left 0
+          width 100%
+          height 100%
+          margin-top 0
+
+    .read-more
+      margin: 10px auto
+      font-family $fontTitle
+      text-transform uppercase
+
+.push
+  height: 150px
+  @media $xs
+    height 60px
+
+.menu-bg
+  background: #000
+  display none
+  opacity: 0
+  width: 100vw
+  height: 100vh
+  position: fixed
+  z-index: 100
+  .menu-container
+    position: fixed
+    padding 0 250px
+    border-left 1px solid $mainColor1
+    border-right 1px solid $mainColor1
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    ul
+      list-style-type none
+      margin-bottom 0
+      li
+        text-align right
+        padding 5px
+        a
+          font-family $fontTitle
+          text-transform uppercase
+          font-size 30px
+          border-bottom none
+
+nav
+  position fixed
+  right 2em
+  top 1.5em
+  z-index 10000
+  a, a:link, a:visited, a:active
+    font-family FontAwesome
+    font-style normal
+    border-bottom none
+    font-size 2em
+    opacity: 0.5
+    transition: opacity 0.3s ease
+    &:before
+      content "\f0c9"
+    &.menu-active
+      &:before
+        content "\f00d"
+  a:hover
+    opacity 1
+
+.wrap-pagination
+  margin-top 50px
+  font-size 30px
+  text-align center
+  color $mainColor1
+  a
+    border-bottom 0
+    margin 30px
+
+footer.footer-content
+  padding-top 100px
+  width 100%
+  min-height 350px
+  @media $xs
+    min-height 250px
+    padding-top 60px
+  background $bgColor
+  color $mainColor1
+  border-top 1px dotted $mainColor1
+  text-align center
+  a, a:link, a:visited, a:active
+    color $mainColor1
+    text-decoration none
+    cursor pointer
+  h2
+    font-family $fontTitle
+    padding-bottom 30px
+    font-size 1.5em
+  ul
+    list-style-type none
+    padding-left 0
+  .footer-about
+    text-align left
+  .footer-social-icons
+    margin 80px 0 50px 0
+    @media $xs
+      margin 30px 0 25px 0
+    li
+      padding 0 10px
+      line-height 3em
+      .footer-icon-container
+        i
+          font-size 2em
+      a, a:link, a:visited, a:active
+        border-bottom 0
+  .footer-copyright
+    margin 0 0 40px 0
+    font-size 0.7em
+
+code
+  color $greyTextColor
+  background rgba(144, 144, 144, 0.1)
+
+figure.highlight
+  font-family monospace
+  color $greyTextColor
+  border-top 1px solid $mainColor1
+  background rgba(144, 144, 144, 0.1)
+  overflow-y auto
+  margin 1.5em 0
+  figcaption
+    padding-top 10px
+    &:before
+      content "\f016"
+      font-family FontAwesome
+      margin 0 20px 0 50px
+    a
+      margin-left 10px
+  table
+    margin 0 !important
+    tbody
+      tr
+        border-top 0 !important
+        background none !important
+        td
+          &.gutter
+            width 40px
+            text-align right
+          padding 8px !important
+          pre
+            margin-bottom 0
+            color $greyTextColor
+            // Theme: Solarized - Light
+            // More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html
+            .comment
+            .template_comment
+            .diff .header
+            .doctype
+            .pi
+            .lisp .string
+            .javadoc
+              color #808080
+              font-style italic
+
+            .keyword
+            .winutils
+            .method
+            .addition
+            .css .tag
+            .request
+            .status
+            .nginx .title
+              color #cc7832
+
+            .number
+            .command
+            .tag .value
+            .phpdoc
+            .tex .formula
+            .regexp
+            .hexcolor
+              color #6897BB
+
+            .string
+              color #6A8759
+
+            .title
+            .localvars
+            .chunk
+            .decorator
+            .built_in
+            .identifier
+            .vhdl
+            .literal
+            .id
+              color #268bd2
+
+            .attribute
+            .variable
+            .lisp .body
+            .smalltalk .number
+            .constant
+            .class .title
+            .parent
+            .haskell .type
+              color #6A8759
+
+            .preprocessor
+            .preprocessor .keyword
+            .shebang
+            .symbol
+            .symbol .string
+            .diff .change
+            .special
+            .attr_selector
+            .important
+            .subst
+            .cdata
+            .clojure .title
+              color #e8bf6a
+
+            .deletion
+              color #dc322f

logicp/themes/alpha-dust/template/index.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"
+          integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<div class="bg-gradient"></div>
+<div class="bg-pattern"></div>
+
+<div class="menu-bg">
+    <div class="menu-container">
+        <ul>
+            <li class="menu-item"><a href="#">Home</a></li>
+            <li class="menu-item"><a href="#">Blog</a></li>
+            <li class="menu-item"><a href="#">Projects</a></li>
+            <li class="menu-item"><a href="#">Social</a></li>
+            <li class="menu-item"><a href="#">Contact</a></li>
+        </ul>
+    </div>
+</div>
+
+<nav>
+    <a href="#menu"></a>
+</nav>
+
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+            <header>
+                <div class="logo">
+                    <i class="logo-icon fa fa-cube" aria-hidden="true"></i>
+                    <h1 id="main-title" class="title">Alpha Dust</h1>
+                </div>
+            </header>
+
+            <section class="main">
+                <div class="post">
+                    <div class="post-header index">
+                        <h1 class="title">Lorem ipsum dolor</h1>
+                        <div class="post-info">
+                            <span class="date">June 24, 2016</span>
+                            <span class="comments">3 Comments</span>
+                            <span class="category"><a>DEVELOPMENT</a></span>
+                        </div>
+                    </div>
+                    <div class="content"><p>Lorem ipsum dolor <a>sit amet</a>, consectetur adipisicing elit. Consequatur
+                        deleniti error, fuga harum iusto minima possimus praesentium repellendus unde voluptate.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dicta ea fugiat ipsam
+                            laboriosam magnam nemo quae sint temporibus. Explicabo. Lorem ipsum dolor sit amet,
+                            consectetur adipisicing elit. <a>A adipisci, amet</a>, at autem corporis cumque doloremque
+                            error eveniet fugit, libero natus reprehenderit sapiente totam ullam voluptate! Assumenda
+                            eos tempora temporibus!</p>
+                    </div>
+                    <a class="read-more">Read More</a>
+                </div>
+                <div class="post">
+                    <div class="post-header index"><h1 class="title">Assumenda eos tempora</h1>
+                        <div class="post-info">
+                            <span class="date">August 4, 2015</span>
+                            <span class="comments">6 Comments</span>
+                            <span class="category"><a>DEVELOPMENT</a></span>
+                        </div>
+                    </div>
+                    <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur
+                        deleniti error, fuga harum iusto minima possimus praesentium repellendus unde voluptate. Lorem
+                        ipsum dolor sit amet, consectetur adipisicing elit. Dolorem porro sed temporibus?</p>
+                        <p>Lorem ipsum dolor sit amet, <a>consectetur adipisicing elit.</a> Consequatur dicta ea fugiat
+                            ipsam laboriosam magnam nemo quae sint temporibus. Explicabo. Lorem ipsum dolor sit amet,
+                            consectetur adipisicing elit. A adipisci, amet, at autem corporis cumque doloremque error
+                            eveniet fugit, libero natus reprehenderit sapiente totam ullam voluptate! Assumenda eos
+                            tempora temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur,
+                            molestiae!</p>
+                    </div>
+                    <a class="read-more">Read More</a>
+                </div>
+                <div class="post">
+                    <div class="post-header index"><h1 class="title">A adipisci, amet</h1>
+                        <div class="post-info">
+                            <span class="date">December 10, 2014</span>
+                            <span class="comments">2 Comments</span>
+                            <span class="category"><a>DEVELOPMENT</a></span>
+                        </div>
+                    </div>
+                    <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur
+                        deleniti error, fuga harum iusto minima possimus praesentium repellendus unde voluptate.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dicta ea fugiat ipsam
+                            laboriosam magnam nemo quae sint temporibus. Explicabo. Lorem ipsum dolor sit amet,
+                            consectetur adipisicing elit. A adipisci, amet, at autem corporis cumque doloremque error
+                            eveniet fugit, libero natus reprehenderit sapiente totam ullam voluptate! Assumenda eos
+                            tempora temporibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias animi
+                            beatae culpa distinctio, enim est exercitationem expedita fugit laudantium maiores molestias
+                            nam nisi reprehenderit unde.</p>
+                    </div>
+                    <a class="read-more">Read More</a>
+                </div>
+                <div class="post">
+                    <div class="post-header index"><h1 class="title">Lorem ipsum dolor sit.</h1>
+                        <div class="post-info">
+                            <span class="date">October 24, 2014</span>
+                            <span class="comments">9 Comments</span>
+                            <span class="category"><a>DEVELOPMENT</a></span>
+                        </div>
+                    </div>
+                    <div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur
+                        deleniti error, fuga harum iusto minima possimus praesentium repellendus unde voluptate.</p>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dicta ea fugiat ipsam
+                            laboriosam magnam nemo quae sint temporibus. Explicabo. Lorem ipsum dolor sit amet,
+                            consectetur adipisicing elit. A adipisci, amet, at autem corporis cumque doloremque error
+                            eveniet fugit, libero natus reprehenderit sapiente totam ullam voluptate! Assumenda eos
+                            tempora temporibus!</p>
+                    </div>
+                    <a class="read-more">Read More</a>
+                </div>
+            </section>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-sm-12">
+            <div class="wrap-pagination">
+                <a href="#">
+                    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+                </a>
+                <a href="#">
+                    <i class="fa fa-chevron-right" aria-hidden="true"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="push"></div>
+
+<footer class="footer-content">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 footer-about">
+                <h2>About</h2>
+                <p>
+                    This theme was developed by <a href="https://github.com/klugjo">Jonathan Klughertz</a>. The source
+                    code is available on Github. Feel free to participate in improving it. Hope you find it fun and find
+                    a use for it. Enjoy :)
+                </p>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
+                <h2>Recent Posts</h2>
+                <ul>
+                    <li><a class="footer-post">Lorem ipsum</a></li>
+                    <li><a class="footer-post">ullam dolor</a></li>
+                    <li><a class="footer-post">sit consectetur</a></li>
+                    <li><a class="footer-post">totam voluptate</a></li>
+                </ul>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 footer-categories">
+                <h2>Categories</h2>
+                <ul>
+                    <li><a class="footer-category">Development</a></li>
+                    <li><a class="footer-category">Showcase</a></li>
+                    <li><a class="footer-category">Tutorial</a></li>
+                    <li><a class="footer-category">JavaScript</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <ul class="list-inline footer-social-icons">
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-github"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-facebook"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-twitter"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-instagram"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-dribbble"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-google-plus"></i>
+                                </span>
+                        </a>
+                    </li>
+                    <li class="list-inline-item">
+                        <a href="#">
+                                <span class="footer-icon-container">
+                                    <i class="fa fa-behance"></i>
+                                </span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <div class="footer-copyright">
+                    @Untitled. All right reserved | Design & Hexo <a href="#">Jonathan Klughertz</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- jQuery first, then Bootstrap JS. -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>

logicp/themes/alpha-dust/template/js/main.js

@@ -0,0 +1,72 @@
+var alphaDust = function () {
+
+    var _menuOn = false;
+
+    function initPostHeader() {
+        $('.main .post').each(function () {
+            var $post = $(this);
+            var $header = $post.find('.post-header.index');
+            var $title = $post.find('h1.title');
+            var $readMoreLink = $post.find('a.read-more');
+
+            var toggleHoverClass = function () {
+                $header.toggleClass('hover');
+            };
+
+            $title.hover(toggleHoverClass, toggleHoverClass);
+            $readMoreLink.hover(toggleHoverClass, toggleHoverClass);
+        });
+    }
+
+    function _menuShow () {
+        $('nav a').addClass('menu-active');
+        $('.menu-bg').show();
+        $('.menu-item').css({opacity: 0});
+        TweenLite.to(".menu-container", 1, {padding: '0 40px'});
+        TweenLite.to(".menu-bg", 1, {opacity: '0.92'});
+        TweenMax.staggerTo(".menu-item", 0.5, {opacity: 1}, 0.3);
+        _menuOn = true;
+
+        $('.menu-bg').hover(function () {
+            $('nav a').toggleClass('menu-close-hover');
+        });
+    }
+
+    function _menuHide() {
+        $('nav a').removeClass('menu-active');
+        TweenLite.to(".menu-bg", 0.5, {opacity: '0', onComplete: function () {
+            $('.menu-bg').hide();
+        }});
+        TweenLite.to(".menu-container", 0.5, {padding: '0 100px'});
+        $('.menu-item').css({opacity: 0});
+        _menuOn = false;
+    }
+
+    function initMenu() {
+
+        $('nav a').click(function () {
+            if(_menuOn) {
+                _menuHide();
+            } else {
+                _menuShow();
+            }
+        });
+
+        $('.menu-bg').click(function (e) {
+            if(_menuOn && e.target === this) {
+                _menuHide();
+            }
+        });
+    }
+
+    return {
+        initPostHeader: initPostHeader,
+        initMenu: initMenu
+    };
+}();
+
+
+$(document).ready(function () {
+    alphaDust.initPostHeader();
+    alphaDust.initMenu();
+});

logicp/themes/alpha-dust/template/post.html

@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <!-- Required meta tags always come first -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css"
+          integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/font-awesome.min.css">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+<div class="bg-gradient"></div>
+<div class="bg-pattern"></div>
+
+<div class="menu-bg">
+    <div class="menu-container">
+        <ul>
+            <li class="menu-item"><a href="#">Home</a></li>
+            <li class="menu-item"><a href="#">Blog</a></li>
+            <li class="menu-item"><a href="#">Projects</a></li>
+            <li class="menu-item"><a href="#">Social</a></li>
+            <li class="menu-item"><a href="#">Contact</a></li>
+        </ul>
+    </div>
+</div>
+
+<nav>
+    <a href="#menu"></a>
+</nav>
+
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12">
+
+            <header>
+                <div class="logo">
+                    <i class="logo-icon fa fa-cube" aria-hidden="true"></i>
+                </div>
+            </header>
+
+            <section class="main">
+                <div class="archive-post"><a href="#">Lorem ipsum dolor.</a></div>
+                <div class="archive-post"><a href="#">Accusamus amet, obcaecati!</a></div>
+                <div class="archive-post"><a href="#">Harum, necessitatibus tenetur!</a></div>
+                <div class="archive-post"><a href="#">Aliquid, ducimus, tenetur.</a></div>
+                <div class="archive-post"><a href="#">Amet earum, suscipit.</a></div>
+                <div class="archive-post"><a href="#">Aliquam, delectus, ullam!</a></div>
+                <div class="archive-post"><a href="#">Aspernatur, harum quo!</a></div>
+                <div class="archive-post"><a href="#">Nisi saepe, tenetur?</a></div>
+                <div class="archive-post"><a href="#">Ducimus, praesentium, vel.</a></div>
+                <div class="archive-post"><a href="#">Alias, maiores, repellat!</a></div>
+                <div class="archive-post"><a href="#">Maiores, quae, quisquam.</a></div>
+                <div class="archive-post"><a href="#">Ipsam, rem, sequi.</a></div>
+                <div class="archive-post"><a href="#">Ipsam, laboriosam soluta.</a></div>
+                <div class="archive-post"><a href="#">Fugiat, recusandae, sapiente!</a></div>
+                <div class="archive-post"><a href="#">Ea, esse optio?</a></div>
+            </section>
+        </div>
+    </div>
+</div>
+
+<div class="push"></div>
+
+<footer class="footer-content">
+    <div class="container">
+        <div class="row">
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 recent-posts">
+                <h2>Recent Posts</h2>
+                <ul>
+                    <li><a class="footer-post">Lorem ipsum</a></li>
+                    <li><a class="footer-post">ullam dolor</a></li>
+                    <li><a class="footer-post">sit consectetur</a></li>
+                    <li><a class="footer-post">totam voluptate</a></li>
+                </ul>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3 footer-categories">
+                <h2>Categories</h2>
+                <ul>
+                    <li><a class="footer-category">Development</a></li>
+                    <li><a class="footer-category">Showcase</a></li>
+                    <li><a class="footer-category">Tutorial</a></li>
+                    <li><a class="footer-category">JavaScript</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</footer>
+
+<!-- jQuery first, then Bootstrap JS. -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"
+        integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7"
+        crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/TweenMax.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/jquery.gsap.min.js"></script>
+<script src="js/main.js"></script>
+</body>
+</html>