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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
public/css/style.css
View File

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

2
templates/_pager.html.ep
View File

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

8
templates/layouts/main.html.ep
View File

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