<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' type='text/css' href="style.css"/>
<link rel='icon' type='image/png' href="/mascots/8-square.png">
<link rel="preload" as="image" href="/background-300x300.png">
<title>Blog Index</title>
<style>
.blog-posts {
margin: 0;
padding: 0;
list-style: none;
}
.blog-listing a {
display: flex;
justify-content: space-between;
padding: 0.7em 1em;
margin: 0.3em 0;
border-radius: 5pt;
transition: background-color .05s ease;
text-decoration: none;
}
.blog-listing a:hover {
background-color: #679dd727;
}
.blog-listing .title {
text-decoration: underline;
}
.blog-listing .published {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="content">
<a href="/"><h1>Blog Posts!!</h1></a>
<div class="titleBar">
<div class="titleButton"><a href="/music">Musik</a></div>
<div class="titleButton"><a href="/school">Skole</a></div>
<div class="titleButton"><a href="/norsk">Norsk</a></div>
<div class="titleButton"><a href="/books">Bøker</a></div>
<div class="titleButton"><a href="/blog">Blog</a></div>
</div>
<ul class="blog-posts">
{% for post in posts %}
<li class="blog-listing">
<a href="/blog/{{ post['slug'] }}">
<span class="title">{{ post['title'] }}</span>
<span class="published">
(<time datetime="{{ post['datetime'] }}">{{ post['date'] }}</time>)
</span>
</a>
</li>
{% endfor %}
</ul>
</div>
<noscript><style>#mascot { opacity: 0.85; }</style></noscript>
<img src="/mascots/8.png" id="mascot"></img>
<script src="/colours.js"></script>
<script src="/image.js"></script>
<script>randomMascot(NOVELTY);</script>
</body>
</html>