backend: rework CSS

- Change text defaults to "small text"
- Add class for "big text"
- Use variable for gaps
- Split .gallery links normal style from pseudo classes
- Remove unused classes and elements
This commit is contained in:
Lucas 2023-03-26 20:56:06 +00:00
parent 1a2e86d666
commit b2c2b7e3a5
3 changed files with 53 additions and 77 deletions

View File

@ -32,7 +32,9 @@
--accent: var(--dark-theme-accent);
--accent-hover: var(--dark-theme-accent-hover);
--viewport-width: 60rem;
--gap: 1.5rem;
--column-width: 15rem;
--viewport-width: 15rem;
}
*,
@ -45,7 +47,6 @@ dd,
dl,
dt,
h1,
h2,
p {
margin: 0;
}
@ -56,31 +57,14 @@ body {
background-color: var(--bg);
color: var(--text);
font-family: monospace;
font-size: 1.25rem;
line-height: 2.4;
}
body > header {
border-bottom: 0.0625rem solid var(--accent);
margin-bottom: 0.1875rem;
}
body > main {
padding-top: 1.5rem;
border-top: 0.0625rem solid var(--accent);
border-bottom: 0.0625rem solid var(--accent);
}
body > footer {
border-top: 0.0625rem solid var(--accent);
margin-top: 0.1875rem;
font-size: 1rem;
line-height: 1.5;
}
dl,
h1,
h2,
p {
margin-bottom: 1.5rem;
margin-bottom: var(--gap);
}
footer > p {
@ -93,11 +77,6 @@ h1 {
line-height: 2;
}
h2 {
font-size: 2.5rem;
line-height: 1.2;
}
a,
a:link,
a:visited {
@ -114,6 +93,36 @@ img {
height: auto;
}
body > header {
border-bottom: 0.0625rem solid var(--accent);
}
body > header > nav {
gap: 0 var(--gap);
}
body > header > nav > a {
font-weight: bold;
text-decoration: none;
}
main {
border-top: 0.0625rem solid;
border-bottom: 0.0625rem solid;
border-color: var(--accent);
padding-top: var(--gap);
margin-top: 0.1875rem;
margin-bottom: 0.1875rem;
}
body > footer {
border-top: 0.0625rem solid var(--accent);
}
.leading-loose {
line-height: 3;
}
dt {
font-weight: bold;
}
@ -128,47 +137,30 @@ dd {
width: var(--viewport-width);
}
.border-top {
border-top: 0.0625rem solid var(--accent);
}
.border-bottom {
border-bottom: 0.0625rem solid var(--accent);
}
.text-center {
text-align: center;
}
.text-small {
font-size: 1rem;
line-height: 3;
.text-big {
font-size: 1.25rem;
line-height: 2.4;
}
.main-nav {
gap: 0 1rem;
}
.main-nav > a {
font-weight: bold;
text-decoration: none;
}
/* 0.5rem padding compensates the unused 1rem gap at the end. */
.gallery {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 1rem;
padding: 0 0.5rem;
gap: var(--gap);
margin-bottom: var(--gap);
}
.gallery > a {
flex-basis: calc(var(--column-width) - var(--gap));
line-height: 0;
}
.gallery > a,
.gallery > a:link,
.gallery > a:visited {
line-height: 0;
max-height: 24rem;
max-width: 14rem;
outline-offset: 0.1875rem;
outline: 0.0625rem solid;
outline-color: var(--accent);
@ -188,26 +180,10 @@ dd {
flex-direction: column;
}
.flex-c-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-c-wrap {
flex-wrap: wrap;
}
.flex-i-fullsize {
flex: auto;
}
@media screen and (max-width: 30rem) {
:root {
--viewport-width: 100%;
}
}
@media screen and (min-width: 30rem) {
:root {
--viewport-width: 30rem;

View File

@ -1,6 +1,6 @@
% if (my $pager = stash("pager")) {
<footer>
<nav class="text-center">
<nav class="text-center leading-loose">
<%= link_to "<<" => url_with->query({ page => $pager->{first_page} })
if exists $pager->{first_page} %>
<%= link_to "<" => url_with->query({ page => $pager->{previous_page} })

View File

@ -6,9 +6,9 @@
<title><%= join(" - ", "Pooru", title() // ()) %></title>
<%= stylesheet "/css/style.css" %>
</head>
<body class="bg-default fg-default flex-c-vertical">
<header>
<nav class="viewport flex-c-horizontal main-nav">
<body class="flex-c-vertical">
<header class="border-bottom">
<nav class="viewport text-big flex-c-horizontal">
<%= link_to "Pooru~" => "/" %>
<%= link_to "random" => "/random" %>
<%= link_to "tags" => "/tags" %>
@ -22,7 +22,7 @@
</div>
</main>
<footer class="border-top">
<p class="viewport text-center text-small">
<p class="viewport text-center leading-loose">
Powered by <%= link_to OpenBSD => "https://www.openbsd.org" %> and <%= link_to Perl => "https://www.perl.org/" %>.
</p>
</footer>