michaelkuc6/blog_os
1
0
Fork 0
mirror of https://github.com/phil-opp/blog_os.git synced 2025-12-16 22:37: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 { .updated {
-webkit-animation: fadeIt 3s ease-in-out; border-radius: 5px;
-moz-animation: fadeIt 3s ease-in-out; -webkit-animation: fadeIt 1.5s linear;
-o-animation: fadeIt 3s ease-in-out; -moz-animation: fadeIt 1.5s linear;
animation: fadeIt 3s ease-in-out; -o-animation: fadeIt 1.5s linear;
animation: fadeIt 1.5s linear;
} }
@-webkit-keyframes fadeIt { @-webkit-keyframes fadeIt {
0% { background-color: #FFFFFF; } 0% { background-color: #FFFFFF; }
15% { background-color: #ff7; } 15% { background-color: #ff9; }
100% { background-color: #FFFFFF; } 100% { background-color: #FFFFFF; }
} }
@-moz-keyframes fadeIt { @-moz-keyframes fadeIt {
0% { background-color: #FFFFFF; } 0% { background-color: #FFFFFF; }
15% { background-color: #ff7; } 15% { background-color: #ff9; }
100% { background-color: #FFFFFF; } 100% { background-color: #FFFFFF; }
} }
@-o-keyframes fadeIt { @-o-keyframes fadeIt {
0% { background-color: #FFFFFF; } 0% { background-color: #FFFFFF; }
15% { background-color: #ff7; } 15% { background-color: #ff9; }
100% { background-color: #FFFFFF; } 100% { background-color: #FFFFFF; }
} }
@keyframes fadeIt { @keyframes fadeIt {
0% { background-color: #FFFFFF; } 0% { background-color: #FFFFFF; }
15% { background-color: #ff7; } 15% { background-color: #ff9; }
100% { background-color: #FFFFFF; } 100% { background-color: #FFFFFF; }
} }

5
index.html
View File

@@ -5,7 +5,10 @@ title: Home
<div class="newest-post"> <div class="newest-post">
<emph>Latest Post</emph>: {% for post in site.categories.rust-os limit:1 %} <emph>Latest Post</emph>: {% for post in site.categories.rust-os limit:1 %}
<strong><a href="#{{ post.id }}" onclick=" <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> ">{{post.title}}</a></strong>
{% endfor %} {% endfor %}
</div> </div>