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:
parent
1a2e86d666
commit
b2c2b7e3a5
@ -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;
|
||||
|
||||
@ -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} })
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user