Highlight latest post when link is clicked

This commit is contained in:
Philipp Oppermann
2015-10-04 20:21:26 +02:00
parent 445b50ce77
commit e24f30d86c
2 changed files with 31 additions and 1 deletions

View File

@@ -13,3 +13,31 @@
footer { footer {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.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;
}
@-webkit-keyframes fadeIt {
0% { background-color: #FFFFFF; }
15% { background-color: #ff7; }
100% { background-color: #FFFFFF; }
}
@-moz-keyframes fadeIt {
0% { background-color: #FFFFFF; }
15% { background-color: #ff7; }
100% { background-color: #FFFFFF; }
}
@-o-keyframes fadeIt {
0% { background-color: #FFFFFF; }
15% { background-color: #ff7; }
100% { background-color: #FFFFFF; }
}
@keyframes fadeIt {
0% { background-color: #FFFFFF; }
15% { background-color: #ff7; }
100% { background-color: #FFFFFF; }
}

View File

@@ -4,7 +4,9 @@ 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 }}">{{post.title}}</a></strong> <strong><a href="#{{ post.id }}" onclick="
document.getElementById('{{ post.id }}').className += ' updated';
">{{post.title}}</a></strong>
{% endfor %} {% endfor %}
</div> </div>