michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 14:27:49 +00:00
Code Issues Projects Releases Wiki Activity

Tweak latest post highlight

Browse Source 
Tweak JS to work on a 2nd click, too. Tweak CSS for shorter highlight and linear transition.
This commit is contained in:
Philipp Oppermann
2015-10-06 00:17:22 +02:00
parent e24f30d86c
commit 427ad8dcf1
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
_sass/_layout.scss
View File

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

5
index.html
View File

@@ -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>