severinkaderli/books.kaderli.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve styles
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source 
Signed-off-by: Severin Kaderli <severin@kaderli.dev>
This commit is contained in:
Severin Kaderli 2023-01-14 22:59:41 +01:00
parent 09938710ab
commit a368d8d49e
Signed by: severinkaderli
GPG key ID: F419F8835B72F0C4
2 changed files with 88 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

40
static/styles.css
View file

@ -21,6 +21,13 @@
/* Peach */ /* Peach */
--link-color: hsl(22, 99%, 52%); --link-color: hsl(22, 99%, 52%);
/* Grid */
/* https://ryanmulligan.dev/blog/layout-breakouts/ */
--gap: var(--spacing);
--full: minmax(var(--gap), 1fr);
--content: min(80ch, 100% - var(--gap) * 2);
--feature: minmax(0, var(--spacing-4));
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -36,20 +43,15 @@
html { html {
margin: 0; margin: 0;
padding: 0; padding: 0;
font-size: 16px; font-size: 100%;
} }
body { body {
margin: 0; margin: 0;
padding: var(--spacing-3) var(--spacing); padding: var(--spacing-3) 0;
display: grid;
grid-template-columns: minmax(auto, 1024px);
gap: var(--spacing-3) var(--spacing);
background-color: var(--color-background); background-color: var(--color-background);
color: var(--color-text); color: var(--color-text);
font-family: var(--font-sans-serif); font-family: var(--font-sans-serif);
font-size: 100%;
justify-content: center;
} }
a { a {
@ -88,6 +90,26 @@ td {
header, header,
main, main,
footer { footer {
background-color: var(--color-background-accent); display: grid;
padding: var(--spacing); grid-template-columns:
[full-start] var(--full)
[feature-start] var(--feature)
[content-start] var(--content) [content-end]
var(--feature) [feature-end]
var(--full) [full-end];
}
h1,
h2,
h3,
p {
grid-column: content;
}
p {
font-size: 1rem;
}
table {
grid-column: feature;
} }

31
templates/index.html
View file

@ -1,16 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css"> <link rel="stylesheet" href="./styles.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>My book list</h1> <h1>My book list</h1>
<p>This page lists all books that I've read since I started tracking them.</p> <p>
This page lists all books that I've read since I started tracking them.
</p>
</header> </header>
<main> <main>
@ -28,7 +29,14 @@
<tbody> <tbody>
{% for book in books %} {% for book in books %}
<tr> <tr>
<td><a target="_blank" rel="noreferrer noopener" href="https://openlibrary.org/isbn/{{book.isbn}}">{{book.title}}</a></td> <td>
<a
target="_blank"
rel="noreferrer noopener"
href="https://openlibrary.org/isbn/{{book.isbn}}"
>{{book.title}}</a
>
</td>
<td>{{book.author}}</td> <td>{{book.author}}</td>
<td>{{book.year}}</td> <td>{{book.year}}</td>
<td>{{book.pages}}</td> <td>{{book.pages}}</td>
@ -41,8 +49,15 @@
</main> </main>
<footer> <footer>
&copy2022 Severin Kaderli - <a target="_blank" rel="noreferrer noopener" href="https://git.kaderli.dev/severinkaderli/books.kaderli.dev/commit/{{GIT_COMMIT}}">{{GIT_COMMIT}}</a> <p>
&copy2022 Severin Kaderli -
<a
target="_blank"
rel="noreferrer noopener"
href="https://git.kaderli.dev/severinkaderli/books.kaderli.dev/commit/{{GIT_COMMIT}}"
>{{GIT_COMMIT}}</a
>
</p>
</footer> </footer>
</body> </body>
</html> </html>