From 427ad8dcf1d008f468d2c2f84b5c3ae62e0064e8 Mon Sep 17 00:00:00 2001
From: Philipp Oppermann <dev@phil-opp.com>
Date: Tue, 6 Oct 2015 00:17:22 +0200
Subject: [PATCH] Tweak latest post highlight

Tweak JS to work on a 2nd click, too. Tweak CSS for shorter highlight and linear transition.
---
 _sass/_layout.scss | 17 +++++++++--------
 index.html         |  5 ++++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index c43ffda0..98a1218f 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -15,29 +15,30 @@ footer {
 }
 
 .updated {
-    -webkit-animation: fadeIt 3s ease-in-out;
-       -moz-animation: fadeIt 3s ease-in-out;
-         -o-animation: fadeIt 3s ease-in-out;
-            animation: fadeIt 3s ease-in-out;
+	border-radius: 5px;
+    -webkit-animation: fadeIt 1.5s linear;
+       -moz-animation: fadeIt 1.5s linear;
+         -o-animation: fadeIt 1.5s linear;
+            animation: fadeIt 1.5s linear;
 }
 
 @-webkit-keyframes fadeIt {
   0%   { background-color: #FFFFFF; }
-  15%  { background-color: #ff7; }
+  15%  { background-color: #ff9; }
   100% { background-color: #FFFFFF; }
 }
 @-moz-keyframes fadeIt {
   0%   { background-color: #FFFFFF; }
-  15%  { background-color: #ff7; }
+  15%  { background-color: #ff9; }
   100% { background-color: #FFFFFF; }
 }
 @-o-keyframes fadeIt {
   0%   { background-color: #FFFFFF; }
-  15%  { background-color: #ff7; }
+  15%  { background-color: #ff9; }
   100% { background-color: #FFFFFF; }
 }
 @keyframes fadeIt {
   0%   { background-color: #FFFFFF; }
-  15%  { background-color: #ff7; }
+  15%  { background-color: #ff9; }
   100% { background-color: #FFFFFF; }
 }
diff --git a/index.html b/index.html
index b831e02a..710409c1 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@ title: Home
 <div class="newest-post">
 <emph>Latest Post</emph>: {% for post in site.categories.rust-os limit:1 %}
   <strong><a href="#{{ post.id }}" onclick="
-    document.getElementById('{{ post.id }}').className += ' updated';
+    post = document.getElementById('{{ post.id }}');
+    post.className = post.className.replace(/\b updated\b/, '');
+    post.offsetWidth = post.offsetWidth; // trigger reflow -> works on 2nd click, too
+    post.className += ' updated';
   ">{{post.title}}</a></strong>
 {% endfor %}
 </div>