PoorBooru/views/layouts/main.tt
Lucas ec026de8b5 frontend: layout and css improvements
Make title and pager part of the main layout.

Adjust sizes and vertical rhythm all over the place.

Add flex to the main section, again keeping the header and footer at top
and bottom.

Rename main navigation classes.

Remove unused index.tt template.
2023-02-19 17:01:55 +00:00

49 lines
1.7 KiB
Plaintext

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="[% settings.charset %]">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>[% settings.appname %] - [% title %]</title>
<link rel="stylesheet" href="[% request.uri_base %]/css/style.css">
</head>
<body class="bg-default fg-default flex-c-vertical">
<header>
<nav class="viewport flex-c-horizontal main-nav-link-gap">
<a class="main-nav-link" href="[% uris.root %]">[% settings.appname %]</a>
<a class="main-nav-link" href="[% uris.random %]">random</a>
<a class="main-nav-link" href="[% uris.tags %]">tags</a>
<span class="flex-i-fullsize"><!-- spacer --></span>
<a class="main-nav-link" href="[% uris.login %]">login</a>
</nav>
</header>
<main class="border-bottom border-top border-accent flex-i-fullsize flex-c-vertical">
<div class="viewport flex-i-fullsize flex-c-vertical">
<h1>[% title %]</h1>
<div class="flex-i-fullsize">[% content %]</div>
[% IF pager %]
<footer>
<nav class="text-center">
[% IF pager.first -%]
<a href="[% pager.first %]">&lt;&lt;</a>
[% END -%]
[% IF pager.prev -%]
<a href="[% pager.prev %]">&lt;</a>
[% END -%]
<span>[% pager.cur %]</span>
[% IF pager.next -%]
<a href="[% pager.next %]">&gt;</a>
[% END -%]
[% IF pager.last -%]
<a href="[% pager.last %]">&gt;&gt;</a>
[% END -%]
</nav>
</footer>
[% END %]
</div>
</main>
<footer class="text-center">
<p class="viewport text-small">Powered by <a href="https://www.openbsd.org">OpenBSD</a> and <a href="https://perldancer.org/">Dancer2</a></p>
</footer>
</body>
</html>