Lucas/PoorBooru
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: layout and css improvements

Browse Source 
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:
Lucas 2023-02-19 17:01:55 +00:00
parent 978f979d4d
commit ec026de8b5
5 changed files with 43 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/css/style.css
View File

@ -29,11 +29,8 @@
box-sizing: border-box; box-sizing: border-box;
} }
body,
h1, h1,
main, p {
p,
section {
margin: 0; margin: 0;
} }
@ -43,13 +40,12 @@ body {
background-color: var(--bg-color); background-color: var(--bg-color);
color: var(--fg-color); color: var(--fg-color);
font-family: monospace; font-family: monospace;
line-height: 1.5; font-size: 1.25rem;
line-height: 2.4;
} }
h1, h1,
main, p {
p,
section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@ -77,11 +73,6 @@ a:active {
color: var(--accent-color-1); color: var(--accent-color-1);
} }
nav {
font-size: 1.25rem;
line-height: 2.4;
}
.viewport { .viewport {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -104,6 +95,11 @@ nav {
text-align: center; text-align: center;
} }
.text-small {
font-size: 1rem;
line-height: 3;
}
.bg-color { .bg-color {
background-color: var(--bg-color); background-color: var(--bg-color);
} }
@ -116,22 +112,12 @@ nav {
color: var(--accent-color-0); color: var(--accent-color-0);
} }
.nav-link { .main-nav-link {
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
} }
.nav-link:link, .main-nav-link-gap {
.nav-link:visited {
color: var(--accent-color-0);
}
.nav-link:hover,
.nav-link:active {
color: var(--accent-color-1);
}
.nav-link-gap {
gap: 0 1rem; gap: 0 1rem;
} }

20
views/gallery.tt
View File

@ -1,25 +1,7 @@
<h1>[% title %]</h1> <div class="flex-i-fullsize flex-c-horizontal flex-c-wrap gallery">
<div class="flex-c-horizontal flex-c-wrap gallery">
[% FOREACH entry IN media -%] [% FOREACH entry IN media -%]
<a href="[% entry.view_uri %]"> <a href="[% entry.view_uri %]">
<img class="gallery-image" src="[% entry.image_src %]" /> <img class="gallery-image" src="[% entry.image_src %]" />
</a> </a>
[% END -%] [% END -%]
</div> </div>
<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>

1
views/index.tt
View File

@ -1 +0,0 @@
<h1>PoorBooru</h1>

40
views/layouts/main.tt
View File

@ -8,21 +8,41 @@
</head> </head>
<body class="bg-default fg-default flex-c-vertical"> <body class="bg-default fg-default flex-c-vertical">
<header> <header>
<nav class="viewport flex-c-horizontal nav-link-gap"> <nav class="viewport flex-c-horizontal main-nav-link-gap">
<a class="nav-link" href="[% uris.root %]">[% settings.appname %]</a> <a class="main-nav-link" href="[% uris.root %]">[% settings.appname %]</a>
<a class="nav-link" href="[% uris.random %]">random</a> <a class="main-nav-link" href="[% uris.random %]">random</a>
<a class="nav-link" href="[% uris.tags %]">tags</a> <a class="main-nav-link" href="[% uris.tags %]">tags</a>
<span class="flex-i-fullsize"><!-- spacer --></span> <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> </nav>
</header> </header>
<main class="border-bottom border-top border-accent flex-i-fullsize"> <main class="border-bottom border-top border-accent flex-i-fullsize flex-c-vertical">
<section class="viewport"> <div class="viewport flex-i-fullsize flex-c-vertical">
[% content -%] <h1>[% title %]</h1>
</section> <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> </main>
<footer class="text-center"> <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> </footer>
</body> </body>
</html> </html>

20
views/tags.tt
View File

@ -1,23 +1,5 @@
<h1>[% title %]</h1> <p class="flex-i-fullsize text-center">
<p class="text-center">
[% FOREACH tag IN tags -%] [% FOREACH tag IN tags -%]
<a href="[% tag.uri %]">[% tag.name %] ([% tag.count %])</a> <a href="[% tag.uri %]">[% tag.name %] ([% tag.count %])</a>
[% END -%] [% END -%]
</p> </p>
<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>