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;
} }

99
templates/index.html
View file

@ -1,48 +1,63 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
</head>
<head> <body>
<meta charset="UTF-8"> <header>
<meta name="viewport" content="width=device-width, initial-scale=1"> <h1>My book list</h1>
<link rel="stylesheet" href="./styles.css"> <p>
</head> This page lists all books that I've read since I started tracking them.
</p>
</header>
<body> <main>
<header> <table>
<h1>My book list</h1> <thead>
<p>This page lists all books that I've read since I started tracking them.</p> <tr>
</header> <th>Title</th>
<th>Author</th>
<main> <th>Year</th>
<table> <th>Pages</th>
<thead> <th>Started</th>
<tr> <th>Finished</th>
<th>Title</th> </tr>
<th>Author</th> </thead>
<th>Year</th> <tbody>
<th>Pages</th> {% for book in books %}
<th>Started</th> <tr>
<th>Finished</th> <td>
</tr> <a
</thead> target="_blank"
<tbody> rel="noreferrer noopener"
{% for book in books %} href="https://openlibrary.org/isbn/{{book.isbn}}"
<tr> >{{book.title}}</a
<td><a target="_blank" rel="noreferrer noopener" href="https://openlibrary.org/isbn/{{book.isbn}}">{{book.title}}</a></td> >
<td>{{book.author}}</td> </td>
<td>{{book.year}}</td> <td>{{book.author}}</td>
<td>{{book.pages}}</td> <td>{{book.year}}</td>
<td>{{book.startDate}}</td> <td>{{book.pages}}</td>
<td>{{book.endDate}}</td> <td>{{book.startDate}}</td>
</tr> <td>{{book.endDate}}</td>
{% endfor %} </tr>
</tbody> {% endfor %}
</table> </tbody>
</main> </table>
</main>
<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>
</footer>
</body>
<footer>
<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>
</body>
</html> </html>