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

@@ -4,7 +4,6 @@
   <div class="container">
     <div class="row">
       <div class="col-md-12">
-
         <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
           <h1 class="title">{{site.title}}</h1>
           <h2 class="subtitle">{{site.subtitle}}</h2>
@@ -12,7 +11,6 @@
           <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>
         </div>
-
         <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
       </div>
     </div>

_includes/news.html

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

_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;
 }