From dfde36add63746b15ada88e9366a9491ab0728c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hendrik=20Bl=C3=B6=C3=9F?= <hendrik.bloess@googlemail.com>
Date: Mon, 10 Jul 2017 20:22:10 +0200
Subject: [PATCH] reworked single post view

---
 _includes/navigation.html           |  2 +-
 _layouts/post.html                  | 52 ++++++++++++++++-----------
 _posts/2012-12-21-second-release.md |  8 ++---
 css/main.css                        | 54 +++++++++++++++++++++++++++++
 4 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/_includes/navigation.html b/_includes/navigation.html
index 75c502e2..2ad536ff 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -1,6 +1,6 @@
 <!-- Nav Menu Section -->
    <div class="logo-menu">
-    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" data-spy="affix" data-offset-top="50">
+    <nav class="navbar navbar-default navbar-fixed-top affix" role="navigation" {% if page.section-type == "index" %} data-spy="affix" {% endif %} data-offset-top="50">
       <div class="container">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header col-md-3">
diff --git a/_layouts/post.html b/_layouts/post.html
index cc7b42b9..fe49bdf5 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -3,27 +3,39 @@
 <!DOCTYPE html>
 <html lang="{{ site.lang }}">
 
-  {% include head.html %}
-  
-  <body data-spy="scroll" data-offset="20" data-target="#navbar">
-      
-      {% include navigation.html %}
-      
-      {% include hero_area_small.html %}
-       <section id="{{ page.section-type }}">
-        <div class="container">
-            <div class="row">
-            <h1 class="title">{{page.title}}</h1>
-            <h4>Published on {{ page.date | date: "%Y-%m-%d"}} by {{ page.author }}</h4>
-            <img src="{{site.baseurl}}/img/posts/{{ page.image }}" class="img-responsive" />
-            {{ page.content | markdownify }}
-            </div>
-        </div>
-     </section>
-  
-      {% include js.html %}
+{% include head.html %}
+
+<body data-spy="scroll" data-offset="20" data-target="#navbar">
+
+  {% include navigation.html %}
+
+  <section id="{{ page.section-type }}">
+    <div class="container">
+      <div class="row">
+        <br />
+        <h1 class="">{{page.title}}</h1>
+        <p 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 }}">
+            {{ page.author }}
+          </a>
+          {% for tag in page.tags %}
+          <div class="chip blue-bg">
+            {{ tag }}
+          </div>
+          {% endfor %}
+        </p>
+        <img src="{{site.baseurl}}/img/posts/{{ page.image }}" class="img-responsive" />
+        {{ page.content | markdownify }}
+      </div>
+    </div>
+  </section>
+
+  {% include js.html %}
+
+</body>
 
-  </body>  
 </html>
 
 <!-- Post Layout End -->
diff --git a/_posts/2012-12-21-second-release.md b/_posts/2012-12-21-second-release.md
index 37e4241b..35e162bc 100644
--- a/_posts/2012-12-21-second-release.md
+++ b/_posts/2012-12-21-second-release.md
@@ -7,7 +7,7 @@ author: "flokuep"
 image: release-02.png
 ---
 #### Dear Vocaluxe fans,
- 
+
 #### we've finished Vocaluxe v0.2 after 8 months of development.  
 The new version has the following new features:
 <!--more-->
@@ -17,13 +17,13 @@ The new version has the following new features:
 * Short Song mode (short version of a song)
 * Playlists: Create, Save, Edit by keyboard or mouse (drag&drop). You can adjust the sing mode for each song of the playlist individually (normal, medley, duet, short song).
 <!--more-big-->
-* Introduced popup controls. You can control the background music by a control panel that appears at the top border of the screen if you press "TAB" or reaches it by mouse. You can even start singing of the currently played background song.
+* Introduced popup controls. You can control the background music by a control panel that appears at the top border of the screen if you press <kbd>TAB</kbd> or reaches it by mouse. You can even start singing of the currently played background song.
 * Webcam support:  
-    * Activating/deactivating with "W" in the sing screen.
+    * Activating/deactivating by pressing <kbd>W</kbd> in the sing screen.
     * You can use your WebCam to take profile pictures in the profile screen. Activate your camera before you start the program. If Vocaluxe detects the camera a button "Webcam" appears in the profile screen.
 * WiiMote support:  
     * Vocaluxe supports the Wiimotion remote control from Nintendo. Connect it with your bluetooth connection manager and start Vocaluxe. If a Wiimote is recognized it will perform two short rumbles and the third LED will lighten up.
 * Improved keyboard navigation
 * Improved mouse navigation
 * Improved pitch recognition
-* You can specify the duet singer names in the song txt by #P1 and #P2. Afterwards you can assign that names to the players in die name selection screen.
\ No newline at end of file
+* You can specify the duet singer names in the song `.txt` by #P1 and #P2. Afterwards you can assign that names to the players in die name selection screen.
diff --git a/css/main.css b/css/main.css
index 277dff99..eed28447 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,6 +1,7 @@
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
 
 /****Colors****/
+
 .blue-text {
   color: #428bca;
 }
@@ -25,8 +26,10 @@
   background-color: #2C3E50;
 }
 
+
 /**************/
 
+
 /****Cards****/
 
 .card {
@@ -76,8 +79,11 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+
+
 /*************/
 
+
 /***General***/
 
 body {
@@ -163,8 +169,10 @@ a:hover {
   background: #EEEEEE;
 }
 
+
 /*************/
 
+
 /****Navbar***/
 
 .navbar {
@@ -282,8 +290,10 @@ a:hover {
   }
 }
 
+
 /*************/
 
+
 /**Hero area**/
 
 #hero-area {
@@ -338,8 +348,10 @@ a:hover {
   padding: 25px 0;
 }
 
+
 /**************/
 
+
 /***Download***/
 
 #download .card {
@@ -432,8 +444,10 @@ a:hover {
   margin-top: 40px;
 }
 
+
 /**************/
 
+
 /***Features***/
 
 #about .card {
@@ -477,8 +491,10 @@ a:hover {
   transition: all 0.27s ease-in-out;
 }
 
+
 /**************/
 
+
 /*****Help*****/
 
 #help .card,
@@ -530,4 +546,42 @@ a:hover {
   margin: 15px;
 }
 
+
+/**************/
+
+
+/*****Post*****/
+
+.post-info {
+  display: inline-block;
+  margin-bottom: 15px;
+}
+
+.avatar {
+  border-radius: 50%;
+  position: relative;
+  top: 3px;
+  height: 18px;
+  width: 18px;
+  vertical-align: baseline;
+}
+
+.author-link {
+  margin-left: 12px;
+  margin-right: 20px;
+}
+
+.author-link:hover {
+  text-decoration: none;
+}
+
+.chip {
+  display: inline-block;
+  padding: 0 10px;
+  height: 28px;
+  color: white;
+  border-radius: 14px;
+}
+
+
 /**************/