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

Add styles.css

Browse source 
Signed-off-by: Severin Kaderli <severin@kaderli.dev>
This commit is contained in:
Severin Kaderli 2022-01-17 20:07:49 +01:00
parent 4df16ec768
commit c238f11015
Signed by: severinkaderli
GPG key ID: F419F8835B72F0C4
3 changed files with 117 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

8
.editorconfig Normal file
View file

@ -0,0 +1,8 @@
root = true
[*]
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
charset = utf-8

73
static/styles.css Normal file
View file

@ -0,0 +1,73 @@
:root {
--spacing: 12px;
--spacing-half: calc(0.5 * var(--spacing));
--spacing-2: calc(2 * var(--spacing));
--spacing-4: calc(4 * var(--spacing));
--font-sans-serif: sans-serif;
--color-background: #e5e5e5;
--color-text: #191919;
--link-color: #ffff00;
}
@media (prefers-color-scheme: DARK) {
:root {
--color-background: #191919;
--color-background-accent: #2b2b2b;
--color-text: #e5e5e5;
--link-color: #ffff00;
}
}
html {
margin: 0;
padding: 0;
font-size: 16px;
}
body {
padding: 0 var(--spacing);
display: grid;
grid-template-columns: 1fr min(1024px, 100%) 1fr;
gap: var(--spacing-4) var(--spacing);
background-color: var(--color-background);
color: var(--color-text);
font-family: var(--font-sans-serif);
font-size: 100%;
}
header,
main,
footer {
grid-column: 2;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid var(--color-text);
}
thead {
border-bottom: 1px solid var(--color-text);
background: var(--color-background-accent);
}
tbody tr:nth-child(even) {
background: var(--color-background-accent);
}
tfoot {
border-bottom: 1px solid var(--color-text);
}
th {
text-align: left;
}
th,
td {
border-spacing: 0;
padding: var(--spacing-half);
}

72
templates/index.html
View file

@ -2,47 +2,47 @@
<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">
<style></style> <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>
<table> <table>
<thead> <thead>
<tr> <tr>
<th>Title</th> <th>Title</th>
<th>Author</th> <th>Author</th>
<th>Year</th> <th>Year</th>
<th>Pages</th> <th>Pages</th>
<th>Started</th> <th>Started</th>
<th>Finished</th> <th>Finished</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for book in books %} {% for book in books %}
<tr> <tr>
<td>{{book.title}}</td> <td>{{book.title}}</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>
<td>{{book.startDate}}</td> <td>{{book.startDate}}</td>
<td>{{book.endDate}}</td> <td>{{book.endDate}}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
</main> </main>
<footer> <footer>
Hello World! {{GIT_COMMIT}} &copy2022 Severin Kaderli - {{GIT_COMMIT}}
</footer> </footer>
</body> </body>
</html> </html>