Merge branch 'gh-pages' of https://github.com/Vocaluxe/Vocaluxe into gh-pages

_includes/about.html

@@ -3,8 +3,9 @@
   <div class="container">
     <div class="row">
       <h1 class="title">{{ page.title }}</h1>
-      <h2 class="subtitle">{{ page.subtitle }}</h2> {% for feature in site.data.features %}
-      <div class="col-md-3 flex-box-col">
+      <h2 class="subtitle">{{ page.subtitle }}</h2>
+      {% for feature in site.data.features %}
+      <div class="col-md-3 col-sm-6 flex-box-col">
         <div class="card hover-card dark-text">
           <img src="{{site.baseurl}}/img/features/{{ feature.image }}" class="img-responsive" alt="">
           <div class="hover-overlay blue-bg">

_includes/contribute.html

@@ -6,7 +6,7 @@
                 {{ page.content | markdownify }}
                 <div class="flex-box-row">
                     {% for contribute in site.data.contribute %}
-                        <div class="col-md-4 flex-box-col card hover-card dark-text">
+                        <div class="col-md-4 col-sm-5 flex-box-col card hover-card dark-text">
                           <div class="flex-box-row">
                             <div class="col-md-3 flex-box-col">
                               <span class="contribute-icon fa fa-{{ contribute.icon }} flex00a" aria-hidden="true"></span>

_includes/download.html

@@ -14,7 +14,7 @@
 {% endfor %}
 
 {% if release_pre != nil and release_stable != nil and release_stable.created_at > release_pre.created_at %}
-        {% assign release_pre = nil %}   
+        {% assign release_pre = nil %}
 {% endif %}
 
     <section id="{{ page.section-type }}" class="content-section">
@@ -26,73 +26,96 @@
                   <br />
                   If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.
                 </p>
-                <div class="release-section">
-                    <div class="col-md-4 flex-box-col card dark-bg">
-                        <h2 class="flex00a">Nightly</h2>
-                        <p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
-                        {% if release_nightly != nil %}
-                        <span class="release-details flex00a">
-                            {% for asset in release_nightly.assets %}
-                                {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
-                                {% assign currentReleaseFileEnding = asset.name | split:"." | last %}
-                                {% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y"" %}
-                                {% assign currentReleaseOs = currentReleaseData[2] %}
-                                {% assign currentReleaseArch = currentReleaseData[3] %}
-                                {% if currentReleaseFileEnding == "zip" %}
-                                    {% assign currentReleaseType = "portable" %}
-                                {% else if currentReleaseFileEnding == "exe" %}
-                                    {% assign currentReleaseType  = "installer" %}
-                                {% endif %}
-                                {% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
-                            {% endfor %}
-                        </span>
-                        <p class="release-date">{{ release_nightly.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_nightly.html_url }}">GitHub</a></p>
-                        {% else %}
-                            <p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
-                        {% endif %}
+                <div class="flex-box-row release-section">
+                    <div class="col-md-4 col-sm-5 flex-box-col card dark-bg">
+                      <h2 class="flex00a">Nightly</h2>
+                      <p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
+                      {% if release_nightly != nil %}
+                      {% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y" %}
+                      <div class="hidden card-overlay">
+                        <span class="fa fa-times close-icon" aria-hidden="true"></span>
+                        <h3>{{currentReleaseTitle}}</h3>
+                        {% for asset in release_nightly.assets %}
+                            {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
+                            {% assign currentReleaseFileEnding = asset.name | split:"." | last %}
+                            {% assign currentReleaseOs = currentReleaseData[2] %}
+                            {% assign currentReleaseArch = currentReleaseData[3] %}
+                            {% if currentReleaseFileEnding == "zip" %}
+                                {% assign currentReleaseType = "Portable" %}
+                            {% else if currentReleaseFileEnding == "exe" %}
+                                {% assign currentReleaseType  = "Installer" %}
+                            {% endif %}
+                            {% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
+                        {% endfor %}
+                      </div>
+                      <span class="release-details flex00a">
+                        <a class="btn btn-primary btn-lg btnDownload">
+                          <span>{{currentReleaseTitle}}</span>
+                        </a>
+                      </span>
+                      <p class="release-date">{{ release_nightly.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_nightly.html_url }}">GitHub</a></p>
+                      {% else %}
+                        <p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
+                      {% endif %}
                     </div>
-                    <div class="col-md-4 flex-box-col card red-bg">
+                    <div class="col-md-4 col-sm-5 flex-box-col card red-bg">
                         <h2 class="flex00a">Pre Release</h2>
                         <p class="flex11a">Should be almost stable, but you might experience some bugs here.</p>
                         {% if release_pre != nil %}
+                        {% assign currentReleaseTitle = release_pre.name %}
+                        <div class="hidden card-overlay">
+                          <span class="fa fa-times close-icon" aria-hidden="true"></span>
+                          <h3>{{currentReleaseTitle}}</h3>
+                          {% for asset in release_pre.assets %}
+                              {% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
+                              {% assign currentReleaseFileEnding = asset.name | split:"." | last %}
+                              {% assign currentReleaseOs = currentReleaseData[2] %}
+                              {% assign currentReleaseArch = currentReleaseData[3] %}
+                              {% if currentReleaseFileEnding == "zip" %}
+                                  {% assign currentReleaseType = "Portable" %}
+                              {% else if currentReleaseFileEnding == "exe" %}
+                                  {% assign currentReleaseType  = "Installer" %}
+                              {% endif %}
+                              {% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
+                          {% endfor %}
+                        </div>
                         <span class="release-details flex00a">
-                            {% for asset in release_pre.assets %}
-                                {% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
-                                {% assign currentReleaseFileEnding = asset.name | split:"." | last %}
-                                {% assign currentReleaseTitle = release_pre.name %}
-                                {% assign currentReleaseOs = currentReleaseData[2] %}
-                                {% assign currentReleaseArch = currentReleaseData[3] %}
-                                {% if currentReleaseFileEnding == "zip" %}
-                                    {% assign currentReleaseType = "portable" %}
-                                {% else if currentReleaseFileEnding == "exe" %}
-                                    {% assign currentReleaseType  = "installer" %}
-                                {% endif %}
-                                {% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
-                            {% endfor %}
+                          <a class="btn btn-primary btn-lg btnDownload">
+                            <span>{{currentReleaseTitle}}</span>
+                          </a>
                         </span>
                         <p class="release-date">{{ release_pre.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_pre.html_url }}">GitHub</a></p>
                         {% else %}
                             <p class="flex11100 no-release-text">There isn't any pre release yet.</p>
                         {% endif %}
                     </div>
-                    <div class="col-md-4 flex-box-col card blue-bg">
+                    <div class="col-md-4 col-sm-5 flex-box-col card blue-bg">
                         <h2 class="flex00a">Stable Release</h2>
                         <p class="flex11a">The latest release.</p>
                         {% if release_stable != nil %}
+                        {% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
                         <span class="release-details flex00a">
+                          <div class="hidden card-overlay">
+                            <span class="fa fa-times close-icon" aria-hidden="true"></span>
+                            <h3>{{currentReleaseTitle}}</h3>
                             {% for asset in release_stable.assets %}
                                 {% assign currentReleaseData = asset.name | remove:".zip" | remove:".exe" | split:"_" %}
                                 {% assign currentReleaseFileEnding = asset.name | split:"." | last %}
-                                {% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
                                 {% assign currentReleaseOs = currentReleaseData[2] | downcase %}
                                 {% assign currentReleaseArch = currentReleaseData[3] %}
                                 {% if currentReleaseFileEnding == "zip" %}
-                                    {% assign currentReleaseType = "portable" %}
+                                    {% assign currentReleaseType = "Portable" %}
                                 {% else if currentReleaseFileEnding == "exe" %}
-                                    {% assign currentReleaseType  = "installer" %}
+                                    {% assign currentReleaseType  = "Installer" %}
                                 {% endif %}
-                                {% include downloadButton.html title=currentReleaseTitle type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
+                                {% include downloadButton.html type=currentReleaseType os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
                             {% endfor %}
+                          </div>
+                        </span>
+                        <span class="release-details flex00a">
+                          <a class="btn btn-primary btn-lg btnDownload">
+                            <span>{{currentReleaseTitle}}</span>
+                          </a>
                         </span>
                         <p class="release-date">{{ release_stable.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_stable.html_url }}">GitHub</a></p>
                         {% else %}

_includes/downloadButton.html

@@ -5,9 +5,9 @@
         <span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
     {% endif %}
     {% if include.arch == "x86" %}
-        <span>{{include.title}} (x86, {{include.type}})</span>
+        <span>x86 {{include.type}}</span>
     {% else %}
-        <span>{{include.title}} (x64, {{include.type}})</span>
+        <span>x64 {{include.type}}</span>
     {% endif %}
 </a>
 </br>

_includes/help.html

@@ -6,7 +6,7 @@
                 <p>{{ page.content | markdownify }}</p>
                 <div class="flex-box-row">
                     {% for help in site.data.help %}
-                        <div class="col-md-4 flex-box-col card hover-card dark-text">
+                        <div class="col-md-4 col-sm-5 flex-box-col card hover-card dark-text">
                           <div class="flex-box-row">
                             <div class="col-md-3 flex-box-col">
                               <span class="help-icon fa fa-{{ help.icon }} flex00a" aria-hidden="true"></span>

_includes/songs.html

@@ -6,7 +6,7 @@
                 <p>{{ page.content | markdownify }}</p>
                 <div class="flex-box-row">
                     {% for song in site.data.songs %}
-                        <div class="col-md-6 flex-box-col card hover-card dark-text">
+                        <div class="col-md-6 col-sm-5 flex-box-col card hover-card dark-text">
                           <div class="flex-box-row">
                             <div class="col-md-3 flex-box-col">
                               <span class="song-icon fa fa-{{ song.icon }} flex00a" aria-hidden="true"></span>

css/main.css

@@ -241,13 +241,17 @@ a:hover {
   color: #eee;
 }
 
+.navbar-default .navbar-toggle {
+  border: none;
+}
+
 .navbar-default .navbar-toggle .icon-bar {
   background: #fff;
 }
 
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background: transparent;
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .affix.navbar-default {
@@ -410,6 +414,13 @@ a:hover {
   text-align: left;
 }
 
+@media (max-width: 767px) {
+  #news .col-md-12 {
+    padding: 0;
+    margin-left: 0;
+  }
+}
+
 .news-card-text {
   padding: 10px;
   color: white;
@@ -442,30 +453,67 @@ a:hover {
 
 #download .card .release-date {
   font-size: 11pt;
-  margin-top: 10px;
+  margin-top: 15px;
   margin-bottom: 0px;
 }
 
+#download .card-overlay {
+  z-index: 100;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  position: absolute;
+  border-radius: 10px;
+}
+
+.card-overlay .close-icon {
+  cursor: pointer;
+  font-size: 20pt;
+  margin-top: 8px;
+}
+
+.card-overlay h3 {
+  margin: 10px 0;
+}
+
 .dark-bg .release-date a {
   color: #428bca;
 }
 
+.dark-bg .card-overlay {
+  background-color: #233240;
+}
+
 .red-bg .release-date a {
   color: #2C3E50;
 }
 
+.red-bg .card-overlay {
+  background-color: #b93d30;
+}
+
 .blue-bg .release-date a {
   color: #E74C3C;
 }
 
+.blue-bg .card-overlay {
+  background-color: #356fa2;
+}
+
 .release-details {
   text-align: center;
+  margin-top: 10px;
 }
 
 .btnDownload {
   margin: 5px;
 }
 
+.release-details .btnDownload {
+  min-width: 50%;
+}
+
 .btnDownloadIcon {
   padding-right: 5px;
 }
@@ -487,6 +535,14 @@ a:hover {
   }
 }
 
+@media (max-width: 767px) {
+  #download .card {
+    margin-left: 15px !important;
+    margin-right: 15px !important;
+    width: calc(100% - 30px);
+  }
+}
+
 .flex-box-col {
   display: flex;
   flex-direction: column;
@@ -720,7 +776,6 @@ a:hover {
 .footer {
   background-color: #243342;
   color: white;
-  /*border-top: 1px solid rgba(255,255,255,0.1);*/
   padding-top: 15px;
   padding-bottom: 5px;
 }
@@ -759,3 +814,9 @@ a:hover {
 
 
 /**************/
+
+/**Animations**/
+
+.animated {
+  animation-duration: 0.7s !important;
+}

js/main.js

@@ -2,6 +2,43 @@
 //Use .swipebox class
 (function($) {
 
-  $('.swipebox').swipebox();
+  $(".swipebox").swipebox();
 
 })(jQuery);
+
+//Download Cards
+
+function showCard(card) {
+  card.addClass("animated flipInY").removeClass("flipOutY hidden");
+}
+
+function hideCard(card) {
+  card.addClass("flipOutY").removeClass("flipInY");
+}
+
+// Nightlies
+$(".dark-bg .btnDownload").click(function() {
+  showCard($(".dark-bg .card-overlay"));
+});
+
+$(".dark-bg .card-overlay .close-icon").click(function () {
+  hideCard($(".dark-bg .card-overlay"));
+});
+
+// Pre Release
+$(".red-bg .btnDownload").click(function() {
+  showCard($(".red-bg .card-overlay"));
+});
+
+$(".red-bg .card-overlay .close-icon").click(function () {
+  hideCard($(".red-bg .card-overlay"));
+});
+
+// Stable
+$(".blue-bg .btnDownload").click(function() {
+  showCard($(".blue-bg .card-overlay"));
+});
+
+$(".blue-bg .card-overlay .close-icon").click(function () {
+  hideCard($(".blue-bg .card-overlay"));
+});