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>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style></style>
<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>
<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>{{book.title}}</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>
<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>{{book.title}}</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>
Hello World! {{GIT_COMMIT}}
</footer>
<footer>
&copy2022 Severin Kaderli - {{GIT_COMMIT}}
</footer>
</body>
</html>