diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..e5ef494 --- /dev/null +++ b/static/style.css @@ -0,0 +1,167 @@ +*, *::before, *::after { box-sizing: border-box; } + +body { + font-family: monospace; + max-width: 720px; + margin: 0 auto; + padding: 20px; + color: #222; + background: #fff; + line-height: 1.5; +} + +a { color: inherit; } + +/* Header */ +header { + display: flex; + justify-content: space-between; + align-items: baseline; + border-bottom: 1px solid #ccc; + padding-bottom: 8px; + margin-bottom: 28px; +} + +.site-title { + font-weight: bold; + text-decoration: none; + font-size: 1.1em; +} + +nav { + display: flex; + gap: 14px; + font-size: 0.88em; +} + +nav a { text-decoration: none; } +nav a:hover { text-decoration: underline; } + +.user-email { color: #666; } + +/* Diary entries */ +.entry { + display: flex; + gap: 14px; + padding: 14px 0; + border-bottom: 1px solid #eee; +} + +.poster { + width: 60px; + flex-shrink: 0; +} + +.poster img { + width: 100%; + display: block; + border: 1px solid #ddd; +} + +.entry-body { flex: 1; } + +.entry-title { + font-weight: bold; + margin-bottom: 2px; +} + +.year { color: #666; font-weight: normal; } + +.director { + color: #666; + font-size: 0.88em; + margin-bottom: 2px; +} + +.rating { + font-size: 0.88em; + margin-bottom: 2px; +} + +.comment { + font-style: italic; + color: #444; + font-size: 0.9em; + margin-bottom: 2px; +} + +.watched-at { + font-size: 0.8em; + color: #888; +} + +.empty { color: #999; margin-top: 20px; } + +/* Pagination */ +.pagination { + margin-top: 24px; + display: flex; + gap: 20px; + font-size: 0.9em; +} + +.pagination a { text-decoration: none; } +.pagination a:hover { text-decoration: underline; } + +/* Forms */ +h1 { font-size: 1.2em; margin-bottom: 20px; } + +form { + max-width: 400px; +} + +form label { + display: block; + margin-bottom: 14px; + font-size: 0.9em; +} + +form input[type="text"], +form input[type="email"], +form input[type="password"], +form input[type="number"], +form input[type="datetime-local"], +form textarea { + display: block; + width: 100%; + font-family: monospace; + font-size: 1em; + margin-top: 3px; + padding: 5px 6px; + border: 1px solid #bbb; + border-radius: 0; + background: #fff; + color: #222; +} + +form textarea { + height: 80px; + resize: vertical; +} + +form hr { + border: none; + border-top: 1px solid #eee; + margin: 18px 0; +} + +form button[type="submit"] { + font-family: monospace; + font-size: 1em; + padding: 6px 18px; + cursor: pointer; + background: #222; + color: #fff; + border: none; +} + +form button[type="submit"]:hover { background: #444; } + +.optional { color: #888; font-size: 0.85em; } + +/* Errors */ +.error { + color: #c00; + margin-bottom: 16px; + font-size: 0.9em; +}