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.
This commit is contained in:
parent
978f979d4d
commit
ec026de8b5
@ -29,11 +29,8 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
main,
|
||||
p,
|
||||
section {
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -43,13 +40,12 @@ body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
font-family: monospace;
|
||||
line-height: 1.5;
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
h1,
|
||||
main,
|
||||
p,
|
||||
section {
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@ -77,11 +73,6 @@ a:active {
|
||||
color: var(--accent-color-1);
|
||||
}
|
||||
|
||||
nav {
|
||||
font-size: 1.25rem;
|
||||
line-height: 2.4;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -104,6 +95,11 @@ nav {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 1rem;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: var(--bg-color);
|
||||
}
|
||||
@ -116,22 +112,12 @@ nav {
|
||||
color: var(--accent-color-0);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
.main-nav-link {
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:link,
|
||||
.nav-link:visited {
|
||||
color: var(--accent-color-0);
|
||||
}
|
||||
|
||||
.nav-link:hover,
|
||||
.nav-link:active {
|
||||
color: var(--accent-color-1);
|
||||
}
|
||||
|
||||
.nav-link-gap {
|
||||
.main-nav-link-gap {
|
||||
gap: 0 1rem;
|
||||
}
|
||||
|
||||
|
@ -1,25 +1,7 @@
|
||||
<h1>[% title %]</h1>
|
||||
|
||||
<div class="flex-c-horizontal flex-c-wrap gallery">
|
||||
<div class="flex-i-fullsize flex-c-horizontal flex-c-wrap gallery">
|
||||
[% FOREACH entry IN media -%]
|
||||
<a href="[% entry.view_uri %]">
|
||||
<img class="gallery-image" src="[% entry.image_src %]" />
|
||||
</a>
|
||||
[% END -%]
|
||||
</div>
|
||||
|
||||
<nav class="text-center">
|
||||
[% IF pager.first -%]
|
||||
<a href="[% pager.first %]"><<</a>
|
||||
[% END -%]
|
||||
[% IF pager.prev -%]
|
||||
<a href="[% pager.prev %]"><</a>
|
||||
[% END -%]
|
||||
<span>[% pager.cur %]</span>
|
||||
[% IF pager.next -%]
|
||||
<a href="[% pager.next %]">></a>
|
||||
[% END -%]
|
||||
[% IF pager.last -%]
|
||||
<a href="[% pager.last %]">>></a>
|
||||
[% END -%]
|
||||
</nav>
|
||||
|
@ -1 +0,0 @@
|
||||
<h1>PoorBooru</h1>
|
@ -8,21 +8,41 @@
|
||||
</head>
|
||||
<body class="bg-default fg-default flex-c-vertical">
|
||||
<header>
|
||||
<nav class="viewport flex-c-horizontal nav-link-gap">
|
||||
<a class="nav-link" href="[% uris.root %]">[% settings.appname %]</a>
|
||||
<a class="nav-link" href="[% uris.random %]">random</a>
|
||||
<a class="nav-link" href="[% uris.tags %]">tags</a>
|
||||
<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="nav-link" href="[% uris.login %]">login</a>
|
||||
<a class="main-nav-link" href="[% uris.login %]">login</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="border-bottom border-top border-accent flex-i-fullsize">
|
||||
<section class="viewport">
|
||||
[% content -%]
|
||||
</section>
|
||||
<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 %]"><<</a>
|
||||
[% END -%]
|
||||
[% IF pager.prev -%]
|
||||
<a href="[% pager.prev %]"><</a>
|
||||
[% END -%]
|
||||
<span>[% pager.cur %]</span>
|
||||
[% IF pager.next -%]
|
||||
<a href="[% pager.next %]">></a>
|
||||
[% END -%]
|
||||
[% IF pager.last -%]
|
||||
<a href="[% pager.last %]">>></a>
|
||||
[% END -%]
|
||||
</nav>
|
||||
</footer>
|
||||
[% END %]
|
||||
</div>
|
||||
</main>
|
||||
<footer class="text-center">
|
||||
<p class="viewport">Powered by <a href="https://www.openbsd.org">OpenBSD</a> and <a href="https://perldancer.org/">Dancer2</a></p>
|
||||
<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>
|
||||
|
@ -1,23 +1,5 @@
|
||||
<h1>[% title %]</h1>
|
||||
|
||||
<p class="text-center">
|
||||
<p class="flex-i-fullsize text-center">
|
||||
[% FOREACH tag IN tags -%]
|
||||
<a href="[% tag.uri %]">[% tag.name %] ([% tag.count %])</a>
|
||||
[% END -%]
|
||||
</p>
|
||||
|
||||
<nav class="text-center">
|
||||
[% IF pager.first -%]
|
||||
<a href="[% pager.first %]"><<</a>
|
||||
[% END -%]
|
||||
[% IF pager.prev -%]
|
||||
<a href="[% pager.prev %]"><</a>
|
||||
[% END -%]
|
||||
<span>[% pager.cur %]</span>
|
||||
[% IF pager.next -%]
|
||||
<a href="[% pager.next %]">></a>
|
||||
[% END -%]
|
||||
[% IF pager.last -%]
|
||||
<a href="[% pager.last %]">>></a>
|
||||
[% END -%]
|
||||
</nav>
|
||||
|
Loading…
Reference in New Issue
Block a user