<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
overflow: hidden;
padding: 0;
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 1rem;
}
a {
text-decoration: none;
color: rgb(0, 80, 183);
}
h2 {
font-size: 1.25rem;
}
.directory > div {
display: flex;
flex-direction: column;
align-items: center;
}
.directory > div > a {
font-size: 1.1rem;
font-weight: 700;
}
.directory > div > span {
font-size: 0.8rem;
}
.source-link {
margin-top: 2rem;
font-size: 0.75rem;
}
</style>
</head>
<body>
<nav class="controls" aria-label="webring-controls">
<a href="/previous?id=main">Previous site</a>
<a href="/random">Random site</a>
<a href="/next?id=main">Next site</a>
</nav>
<h2>Epesooj webring</h2>
<h2 id="webring-directory">Directory</h2>
<nav class="directory" aria-labelledby="webring-directory">
{{WEBRING_ENTRIES}}
</nav>
<span class="source-link">The source for this webring can be viewed <a href="https://github.com/DanielSidhion/epesooj-webring">here</a>.</span>
</body>
</html>