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 */
--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) {
@ -36,20 +43,15 @@
html {
margin: 0;
padding: 0;
font-size: 16px;
font-size: 100%;
}
body {
margin: 0;
padding: var(--spacing-3) var(--spacing);
display: grid;
grid-template-columns: minmax(auto, 1024px);
gap: var(--spacing-3) var(--spacing);
padding: var(--spacing-3) 0;
background-color: var(--color-background);
color: var(--color-text);
font-family: var(--font-sans-serif);
font-size: 100%;
justify-content: center;
}
a {
@ -88,6 +90,26 @@ td {
header,
main,
footer {
background-color: var(--color-background-accent);
padding: var(--spacing);
display: grid;
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>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./styles.css" />
</head>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<header>
<h1>My book list</h1>
<p>
This page lists all books that I've read since I started tracking them.
</p>
</header>
<body>
<header>
<h1>My book list</h1>
<p>This page lists all books that I've read since I started tracking them.</p>
</header>
<main>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Pages</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td><a target="_blank" rel="noreferrer noopener" href="https://openlibrary.org/isbn/{{book.isbn}}">{{book.title}}</a></td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
<td>{{book.pages}}</td>
<td>{{book.startDate}}</td>
<td>{{book.endDate}}</td>
</tr>
{% endfor %}
</tbody>
</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>
<main>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Year</th>
<th>Pages</th>
<th>Started</th>
<th>Finished</th>
</tr>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>
<a
target="_blank"
rel="noreferrer noopener"
href="https://openlibrary.org/isbn/{{book.isbn}}"
>{{book.title}}</a
>
</td>
<td>{{book.author}}</td>
<td>{{book.year}}</td>
<td>{{book.pages}}</td>
<td>{{book.startDate}}</td>
<td>{{book.endDate}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</main>
<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>