diff --git a/_data/songs.json b/_data/songs.json index 4c872f4c..df768f66 100644 --- a/_data/songs.json +++ b/_data/songs.json @@ -1,14 +1,14 @@ [{ "title": "Download", "icon": "music", - "description": "Find more than 18.000 songs on USDB, from real classics to the latest hits.", - "url_text": "usdb.animux.de", + "description": "Find more than 18.000 songs on USDB, from real classics to the latest hits on usdb.animux.de.", + "url_text": "Get Songs", "url": "http://usdb.animux.de" }, { - "title": "Create your own", + "title": "Create", "icon": "file-text-o", - "description": "Your favourite song isn't available? Just try to make your own songs for Vocaluxe.", + "description": "Your favourite song isn't available? Just try to make your own songs for Vocaluxe by following this tutorial.", "url_text": "Tutorial", "url": "http://www.ultraguide.net/songcreation.php" }] diff --git a/_includes/contribute.html b/_includes/contribute.html index 65e78a57..3988f438 100644 --- a/_includes/contribute.html +++ b/_includes/contribute.html @@ -6,11 +6,24 @@ {{ page.content | markdownify }}
{% for contribute in site.data.contribute %} -
-

{{ contribute.title }}

- -

{{ contribute.description }}

-

{{ contribute.url_text }}

+
+
+
+ +
+
+

{{ contribute.title }}

+

{{ contribute.description }}

+
+
+
+
+
+

+

{{ contribute.url_text }}

+
+
+
{% endfor %}
diff --git a/_includes/download.html b/_includes/download.html index 8b0f1bb3..6b9ea6b4 100644 --- a/_includes/download.html +++ b/_includes/download.html @@ -21,7 +21,7 @@ If you're looking for some older versions, check out our releases on GitHub and Sourceforge.

-
+

Nightly

A version with all the newest development changes. Likely to contain bugs, so use with caution.

{% if release_nightly != nil %} @@ -39,7 +39,7 @@

There isn't any nightly release yet.

{% endif %}
-
+

Pre Release

Should be almost stable, but you might experience some bugs here.

{% if release_pre != nil %} @@ -57,7 +57,7 @@

There isn't any pre release yet.

{% endif %}
-
+

Stable Release

The latest release.

{% if release_stable != nil %} diff --git a/_includes/downloadButton.html b/_includes/downloadButton.html index 4d193088..0db3dccc 100644 --- a/_includes/downloadButton.html +++ b/_includes/downloadButton.html @@ -5,7 +5,7 @@ {% endif %} {% if include.arch == "x86" %} - {{include.title}} (x32) + {{include.title}} (x86) {% else %} {{include.title}} (x64) {% endif %} diff --git a/_includes/help.html b/_includes/help.html index bc66e6c4..e2baf43e 100644 --- a/_includes/help.html +++ b/_includes/help.html @@ -6,11 +6,24 @@

{{ page.content | markdownify }}

{% for help in site.data.help %} -
-

{{ help.title }}

- -

{{ help.description }}

-

{{ help.url_text }}

+
+
+
+ +
+
+

{{ help.title }}

+

{{ help.description }}

+
+
+
+
+
+

+

{{ help.url_text }}

+
+
+
{% endfor %}
diff --git a/_includes/hero_area.html b/_includes/hero_area.html index efaee16d..2968df7b 100644 --- a/_includes/hero_area.html +++ b/_includes/hero_area.html @@ -9,7 +9,7 @@

{{site.title}}

{{site.subtitle}}

{{ site.description }}

- Download Now! + Download Now! Learn More
diff --git a/_includes/news.html b/_includes/news.html index 74df664c..935ad037 100644 --- a/_includes/news.html +++ b/_includes/news.html @@ -15,7 +15,7 @@ {{ post_1.content | split:'' | first | markdownify}} read more {% else %} - {{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }} + {{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }} {% if (post_1.content | number_of_words) > site.big-post-preview-words %} read more {% endif %} @@ -31,7 +31,7 @@ {{ post_2.content | split:'' | first | markdownify}} read more {% else %} - {{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }} + {{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }} {% if (post_2.content | number_of_words) > site.post-preview-words %} read more {% endif %} @@ -46,7 +46,7 @@ {{ post_3.content | split:'' | first | markdownify}} read more {% else %} - {{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }} + {{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }} {% if (post_3.content | number_of_words) > site.post-preview-words %} read more {% endif %} diff --git a/_includes/songs.html b/_includes/songs.html index a3fbf73a..dbc9d86f 100644 --- a/_includes/songs.html +++ b/_includes/songs.html @@ -2,15 +2,28 @@
-

{{ page.title }}

+

{{ page.title }}

{{ page.content | markdownify }}
- {% for song in site.data.songs %} -
-

{{ song.title }}

- -

{{ song.description }}

-

{{ song.url_text }}

+ {% for song in site.data.songs %} +
+
+
+ +
+
+

{{ song.title }}

+

{{ song.description }}

+
+
+
+
+
+

+

{{ song.url_text }}

+
+
+
{% endfor %}
diff --git a/css/main.css b/css/main.css index 6670a5df..91bbb842 100644 --- a/css/main.css +++ b/css/main.css @@ -1,14 +1,87 @@ -/******COLORS******/ -/* Blue * #428bca */ -/* Red * #E74C3C */ -/* Dark * #2C3E50 */ -/******************/ +/****COLORS****/ +.blue-text { + color: #428bca; +} + +.blue-bg { + background-color: #428bca !important; +} + +.red-text { + color: #E74C3C; +} + +.red-bg { + background-color: #E74C3C; +} + +.dark-text { + color: #2C3E50 !important; +} + +.dark-bg { + background-color: #2C3E50; +} + +/**************/ + +/****Cards****/ + +.card { + padding: 25px; + margin: 25px; + border-radius: 10px; +} + +.hover-card { + position: relative; + overflow: hidden; + z-index: 1; +} + +.hover-card .hover-overlay { + position: absolute; + top: calc(100% - 8px); + -webkit-transition: all 0.4s ease-in-out; + -moz-transition: all 0.4s ease-in-out; + -o-transition: all 0.4s ease-in-out; + -ms-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + left: -5px; + height: calc(100% + 10px); + width: calc(100% + 10px); +} + +.hover-card:hover .hover-overlay { + opacity: 1; + top: 0; +} + +.hover-card .overlay-background { + z-index: 5; + position: absolute; + height: 100%; + width: 100%; +} + +.hover-card .overlay-content { + color: #fff; + font-size: 12pt; + text-align: center; + height: 100%; + width: 100%; + padding: 10px; + margin-top: auto; + margin-bottom: auto; +} +/*************/ @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700'); body { font-family: 'Lato', sans-serif; font-size: 14pt; font-weight: 400; + color: #2C3E50 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -34,12 +107,19 @@ a:hover { } .btn { + background: rgba(255, 255, 255, 0.2); + border: none; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; } +.btn:hover { + background: rgba(0, 0, 0, 0.2); + color: white; +} + .btn-lg { border-radius: 25px; } @@ -50,11 +130,6 @@ a:hover { border: 1px solid #fff; } -.btn-common:hover { - border-color: #428bca; - color: #428bca; -} - .title { text-align: center; font-size: 50px; @@ -70,6 +145,11 @@ a:hover { color: #fff; } +#about, +#songs { + background: #2C3E50; + color: #fff; +} /**Navigation**/ @@ -100,13 +180,15 @@ a:hover { } .navbar-default .navbar-nav li a, -.navbar-default .navbar-nav li a:hover { +.navbar-default .navbar-nav li a:hover, +.navbar-default .navbar-nav li a:focus { color: #fff; font-weight: 100; } .navbar-default .navbar-nav>.active, -.navbar-default .navbar-nav li:hover { +.navbar-default .navbar-nav li:hover, +.navbar-default .navbar-nav li:focus { border-bottom: 3px solid #428bca; color: #fff; } @@ -242,158 +324,6 @@ a:hover { padding: 25px 0; } -#services h3 { - margin-top: 0; - font-size: 28px; - color: #2576E5; -} - - -/*Portfolio*/ - -#portfolio { - background: #EEEEEE; -} - - -/*Portfolio Overlay */ - -.portfolio-item { - position: relative; - margin-bottom: 15px; -} - -.portfolio-item img { - width: 100%; -} - -.portfolio-item .overlay { - position: absolute; - top: 0; - width: 100%; - height: 100%; - z-index: 10; - background-color: rgba(0, 0, 0, 0.8); - display: none; -} - -.portfolio-item:hover .overlay { - position: absolute; - top: 0; - width: 100%; - height: 100%; - z-index: 10; - background-color: rgba(0, 0, 0, 0.8); - display: block; -} - -.portfolio-item .icons .preview { - position: absolute; - left: 40%; - top: 40%; - color: #fff; - -webkit-animation-name: fadeInLeft; - animation-name: fadeInLeft; - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.portfolio-item .icons .preview i { - color: #2576E5; -} - -#clients { - background: #fff; -} - -#about { - background: #2C3E50; - color: #fff; -} - -#contact { - background: #f1f1f1; -} - -#contact ::-webkit-input-placeholder { - color: #ecf0f1; -} - -#contact :-moz-placeholder { - color: #ecf0f1; -} - -#contact ::-moz-placeholder { - color: #ecf0f1; -} - -#contact :-ms-input-placeholder { - color: #ecf0f1; -} - -#contact .social i { - color: #fff; - padding: 10px; - margin-right: 5px; - width: 50px; - height: 50px; - vertical-align: middle; - background: #34495e; -} - -#contact .social .social-links a:hover { - color: #fff; -} - -#contact .social .fa-facebook:hover { - background: #3b5998; - color: #fff; -} - -#contact .social .fa-twitter:hover { - background: #00CAFB; - color: #fff; -} - -#contact .social .fa-google-plus:hover { - background: #D23A1D; - color: #fff; -} - -#contact .social .fa-linkedin:hover { - background: #007bb6; - color: #fff; -} - -#contact .social .fa-dribbble:hover { - background: #ea4c89; - color: #fff; -} - -#contact .social .fa-github:hover { - background: #171515; - color: #fff; -} - -#contact .contact-info { - margin: 40px 0; -} - -#contact .contact-info p { - font-size: 20px; -} - -#contact .contact-form .form-control { - box-shadow: none; - font-size: 17px; - margin-bottom: 20px; - border-radius: 0; - border: none; -} - - /*Scroll Top*/ .to-top i { @@ -413,6 +343,11 @@ a:hover { transition: all 0.2s linear; } +#download, +#help { + background: #EEEEEE; +} + #copyright { background: #F1F1F1; color: #333; @@ -519,12 +454,6 @@ a:hover { transition: all 0.27s ease-in-out; } -.contribute-icon { - font-size: 65px; - margin-top: 15px; - margin-bottom: 15px; -} - .content-section { text-align: center; } @@ -532,50 +461,30 @@ a:hover { /*Download Section*/ -#download, -#help { - background: #EEEEEE; -} - -.card { - padding: 25px; - margin: 25px; - border-radius: 10px; +#download .card { color: #fff; } -.card h2 { +#download .card h2 { margin-top: 0px; margin-bottom: 20px; } -.card p { +#download .card p { font-size: 14pt; margin-bottom: 10px; - font-weight: 100; + font-weight: 400; } -.nightly { - background-color: #2C3E50; -} - -.nightly .release-date a { +.dark-bg .release-date a { color: #428bca; } -.pre-release { - background-color: #E74C3C; -} - -.pre-release .release-date a { +.red-bg .release-date a { color: #2C3E50; } -.stable { - background-color: #428bca; -} - -.stable .release-date a { +.blue-bg .release-date a { color: #E74C3C; } @@ -591,18 +500,10 @@ a:hover { .btnDownload { margin: 5px; - background: rgba(255, 255, 255, 0.2); - border: none; -} - -.btnDownload:hover { - background: rgba(0, 0, 0, 0.2); } .btnDownloadIcon { - /*flex: 0 0 auto;*/ padding-right: 5px; - /*font-size: 1em;*/ } .release-section { @@ -616,7 +517,7 @@ a:hover { .release-section { flex-direction: row; } - .card { + #download .card { max-width: 27%; min-width: 27%; } @@ -631,7 +532,7 @@ a:hover { display: flex; flex-direction: row; flex-wrap: wrap; - justify-content: center; + justify-content: space-around; } .flex00a { @@ -650,6 +551,63 @@ a:hover { margin-top: 40px; } +/*****Help*****/ + +#help .card, +#contribute .card, +#songs .card { + border: 1px solid #2C3E50; + background-color: #fff; + margin: 15px; + padding: 15px 5px 15px 5px; + min-height: 175px; +} + +@media (min-width: 992px) { + #help .card, + #contribute .card, + #songs .card { + width: 29%; + text-align: left; + } +} + +.help-text p, +.contribute-text p, +.song-text p { + font-size: 12pt; + padding-right: 10px; +} + +.help-text h2, +.contribute-text h2, +.song-text h2 { + margin-top: 0pt; + margin-bottom: 15pt; + font-size: 24pt; + vertical-align: middle; +} + +.help-icon, +.contribute-icon, +.song-icon { + font-size: 26pt; + text-align: center; +} + +.hover-overlay .help-icon, +.hover-overlay .contribute-icon, +.hover-overlay .song-icon { + font-size: 45pt; + margin: 15px; +} + +/**************/ + +/*****Songs****/ + + +/**************/ .stamp { position: absolute; display: inline-block;