News and RSS

- reworked News section
- added RSS feed

_config.yml

@@ -62,6 +62,7 @@ web-app-mode: True
 
 post-preview-words: 80
 big-post-preview-words: 200
+excerpt_separator: <!--more-->
 
 #paginate: 5
 
@@ -95,5 +96,6 @@ sass:
 
 gems:
   - github-pages
+  - jekyll-feed
   #- jekyll-paginate
   #- jemoji

_includes/footer.html

@@ -22,7 +22,7 @@
           </a>
         </li>
         <li>
-          <a href="#">
+          <a href="{{site.baseurl}}/feed.xml">
             <i class="fa fa-rss" aria-hidden="true"></i>
           </a>
         </li>

_includes/hero_area.html

@@ -1,22 +1,20 @@
 <!-- Hero Area Section -->
 
 <section id="hero-area">
-    <div class="container">
+  <div class="container">
-        <div class="row">
+    <div class="row">
-            <div class="col-md-12">
+      <div class="col-md-12">
-
+        <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
-                <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
+          <h1 class="title">{{site.title}}</h1>
-                  <h1 class="title">{{site.title}}</h1>
+          <h2 class="subtitle">{{site.subtitle}}</h2>
-                  <h2 class="subtitle">{{site.subtitle}}</h2>
+          <p>{{ site.description }}</p>
-                  <p>{{ site.description }}</p>
+          <a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
-                  <a href="#download" class="btn btn-primary btn-lg blue-bg">Download Now!</a>
+          <a href="#about" class="btn btn-common btn-lg">Learn More</a>
-                  <a href="#about" class="btn btn-common btn-lg">Learn More</a>
-                </div>
-
-                <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
-            </div>
         </div>
+        <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
+      </div>
     </div>
+  </div>
 </section>
 
 <!-- Hero Area Section End-->

_includes/news.html

@@ -2,59 +2,53 @@
 {% assign post_1 = site.posts[0] %}
 {% assign post_2 = site.posts[1] %}
 {% assign post_3 = site.posts[2] %}
-    <section id="{{ page.section-type }}">
+<section id="{{ page.section-type }}">
-        <div class="container">
+  <div class="container">
-            <div class="row">
+    <div class="row">
-            <h1 class="title">{{ page.title }}</h1>
+      <div class="col-md-12">
-                {% if post_1 != nil %}
+
-                <div class="col-md-8">
+
-                    <h2><a href="{{site.baseurl}}{{ post_1.url }}">{{post_1.title}} </a></h2>
+      <h1 class="title">{{ page.title }}</h1>
-                    <p>Published on {{ post_1.date | date: "%Y-%m-%d"}} by {{ post_1.author }}</p>
+      {% if post_1 != nil %}
-                    <img src="{{site.baseurl}}/img/posts/{{ post_1.image }}" class="img-responsive" />
+      <div class="col-md-8 news-card">
-                    {% if post_1.content contains '<!--more-big-->' %}
+        <img src="{{site.baseurl}}/img/posts/{{ post_1.image }}" class="img-responsive" />
-                        {{ post_1.content | split:'<!--more-big-->' | first | markdownify}}
+        <div class="news-card-text dark-bg">
-                        <a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
+          <div class="post-info red-text">
-                    {% else %}
+            <i class="fa fa-calendar" aria-hidden="true"></i>
-                        {{ post_1.content | truncatewords: site.big-post-preview-words, "" | markdownify }}
+            {{ post_1.date | date_to_long_string }}
-                        {% if (post_1.content | number_of_words) > site.big-post-preview-words %}
+          </div>
-                            <a href="{{site.baseurl}}{{ post_1.url }}">read more</a>
+          <h2><a href="{{site.baseurl}}{{ post_1.url }}">{{post_1.title}} </a></h2>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                <div class="col-md-4">
-                {% if post_2 != nil %}
-                <div class="col-lg-12">
-                    <h3><a href="{{site.baseurl}}{{ post_2.url }}">{{ post_2.title }}</a></h3>
-                    <p>Published on {{ post_2.date | date: "%Y-%m-%d"}} by {{ post_2.author }}</p>
-                    {% if post_2.content contains '<!--more-->' %}
-                        {{ post_2.content | split:'<!--more-->' | first | markdownify}}
-                        <a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
-                    {% else %}
-                        {{ post_2.content | truncatewords: site.post-preview-words, "" | markdownify }}
-                        {% if (post_2.content | number_of_words) > site.post-preview-words %}
-                            <a href="{{site.baseurl}}{{ post_2.url }}">read more</a>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                {% if post_3 != nil %}
-                <div class="col-lg-12">
-                    <h3><a href="{{site.baseurl}}{{ post_3.url }}">{{ post_3.title }}</a></h3>
-                    <p>Published on {{ post_3.date | date: "%Y-%m-%d"}} by {{ post_3.author }}</p>
-                    {% if post_3.content contains '<!--more-->' %}
-                        {{ post_3.content | split:'<!--more-->' | first | markdownify}}
-                        <a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
-                    {% else %}
-                        {{ post_3.content | truncatewords: site.post-preview-words, "" | markdownify }}
-                        {% if (post_3.content | number_of_words) > site.post-preview-words %}
-                            <a href="{{site.baseurl}}{{ post_3.url }}">read more</a>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                {% endif %}
-                </div>
-            </div>
         </div>
-    </section>
+      </div>
+      {% endif %}
+      <div class="col-md-4">
+        {% if post_2 != nil %}
+        <div class="col-lg-12 news-card">
+          <img src="{{site.baseurl}}/img/posts/{{ post_2.image }}" class="img-responsive" />
+          <div class="news-card-text dark-bg">
+            <div class="post-info red-text">
+              <i class="fa fa-calendar" aria-hidden="true"></i>
+              {{ post_2.date | date_to_long_string }}
+            </div>
+            <h3><a href="{{site.baseurl}}{{ post_2.url }}">{{post_2.title}} </a></h3>
+          </div>
+        </div>
+        {% endif %}
+        {% if post_3 != nil %}
+        <div class="col-lg-12 news-card">
+          <img src="{{site.baseurl}}/img/posts/{{ post_2.image }}" class="img-responsive" />
+          <div class="news-card-text dark-bg">
+            <div class="post-info red-text">
+              <i class="fa fa-calendar" aria-hidden="true"></i>
+              {{ post_3.date | date_to_long_string }}
+            </div>
+            <h3><a href="{{site.baseurl}}{{ post_3.url }}">{{post_3.title}} </a></h3>
+          </div>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    </div>
+  </div>
+</section>
 <!-- Help Section End -->

_layouts/post.html

@@ -9,12 +9,12 @@
 
   {% include navigation.html %}
 
-  <section id="{{ page.section-type }}">
+  <section class="{{ page.section-type }}">
     <div class="container">
       <div class="row">
         <br />
         <h1 class="">{{page.title}}</h1>
-        <p class="post-info">
+        <div class="post-info">
           <i class="fa fa-calendar" aria-hidden="true"></i> {{ page.date | date_to_long_string }}
           <a href="https://github.com/{{ page.author }}" class="author-link">
             <img class="avatar" src="https://github.com/{{ page.author }}.png?size=18" alt="{{ page.author }}">
@@ -25,15 +25,14 @@
             {{ tag }}
           </div>
           {% endfor %}
-        </p>
+        </div>
-        <img src="{{site.baseurl}}/img/posts/{{ page.image }}" class="img-responsive" />
         {{ page.content | markdownify }}
       </div>
     </div>
   </section>
 
   {% include footer.html %}
-  
+
   {% include js.html %}
 
 </body>

_posts/2012-07-04-first-final-release.md

@@ -4,14 +4,20 @@ section-type: post
 title: First final release!
 tags: [ 'release', '0.1' ]
 author: "flokuep"
-image: release-01.png
+image: "release-01.png"
 ---
+![Release 1]({{site.baseurl}}/img/posts/release-01.png){:.post-banner}
 
-#### Dear Vocaluxe fans,  
+Dear Vocaluxe fans,  
 
 just in time for the holidays we've compiled our first final release after roughly one year of development time - Vocaluxe 0.1 final is ready to be unleashed!
 <!--more-->
 So don't think twice and download it from Sourceforge. How about a round (or two?) of Vocaluxe between the egg hunt and the lamb roast?
 
 You don't want to wait for the next final release and want to follow the latest edge of development instead? Just follow the developers on the Github Vocaluxe repository!
-[![Song Selection]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection_Small.png){:class="img-responsive"}]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive" data-lightbox="screenshots" data-title="Song Selection"}
+
+## Gallery
+
+{:class="post-gallery"}
+
+[![Song Selection]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive"}]({{site.baseurl}}/img/posts/release-01_Screenshot_SongSelection.png){:class="img-responsive" data-lightbox="screenshots" data-title="Song Selection"}

_posts/2012-12-21-second-release.md

@@ -4,14 +4,17 @@ section-type: post
 title: Second version released!
 tags: [ 'release', '0.2' ]
 author: "flokuep"
-image: release-02.png
+image: "release-02.png"
 ---
-#### Dear Vocaluxe fans,
+![Release 2]({{site.baseurl}}/img/posts/release-02.png){:.post-banner}
 
-#### we've finished Vocaluxe v0.2 after 8 months of development.  
+Dear Vocaluxe fans,
-The new version has the following new features:
+
+we've finished Vocaluxe v0.2 after 8 months of development.  
 <!--more-->
 
+The new version has the following new features:
+
 * Support for up to 6 microphones.
 * Medley mode
 * Short Song mode (short version of a song)

css/main.css

@@ -113,6 +113,7 @@ a:hover {
 
 .row {
   padding: 50px 0px;
+  margin: 0;
 }
 
 .btn {
@@ -351,6 +352,47 @@ a:hover {
 
 /**************/
 
+/*****News*****/
+
+
+#news img {
+  width: 100%;
+}
+
+#news .col-md-8,
+#news .col-lg-12 {
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+#news h2,
+#news h3 {
+  margin-top: 0;
+  margin-bottom: 25px;
+}
+
+#news .post-info {
+  font-size: 12pt;
+}
+
+#news .btn {
+  align-items:
+}
+
+.news-card {
+  padding: 0;
+}
+
+.news-card-text {
+  padding: 10px;
+  color: white  ;
+}
+
+.news-card-text a {
+  color: white;
+}
+
+/**************/
 
 /***Download***/
 
@@ -551,17 +593,32 @@ a:hover {
 
 /*****Post*****/
 
+.post .post-banner {
+  width: 100%;
+}
+
+.post-gallery {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.post-gallery a {
+  max-width: 220px;
+  margin: 4px;
+}
+
 .post-info {
   display: inline-block;
   margin-bottom: 15px;
+  font-size: 13pt;
 }
 
 .avatar {
   border-radius: 50%;
   position: relative;
   top: 3px;
-  height: 18px;
+  height: 18px !important;
-  width: 18px;
+  width: 18px !important;
   vertical-align: baseline;
 }
 
@@ -577,9 +634,9 @@ a:hover {
 .chip {
   display: inline-block;
   padding: 0 10px;
-  height: 28px;
+  height: 26px;
   color: white;
-  border-radius: 14px;
+  border-radius: 13px;
 }