hermes
b8571b29cd
Cards set their own background but inherited the page text color, so in dark mode they rendered pale-on-white. Pin color on .joke in both schemes.
55 lines
1.6 KiB
Python
55 lines
1.6 KiB
Python
PAGE_TEMPLATE = """<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Wiki Jokes — {day}</title>
|
|
<style>
|
|
:root {{ color-scheme: light dark; }}
|
|
body {{
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
max-width: 720px; margin: 0 auto; padding: 2rem 1rem;
|
|
background: #fdfcf8; color: #222;
|
|
}}
|
|
@media (prefers-color-scheme: dark) {{
|
|
body {{ background: #1a1a1e; color: #e8e6e1; }}
|
|
a {{ color: #8ab4f8; }}
|
|
.joke {{ background: #26262c; color: #eceae4; border-color: #3a3a42; }}
|
|
header h1 {{ color: #f0ede6; }}
|
|
}}
|
|
header h1 {{ font-size: 2rem; margin-bottom: .25rem; }}
|
|
.date {{ color: #777; margin-top: 0; }}
|
|
.stale {{
|
|
background: #fff3cd; color: #665100; padding: .5rem .75rem;
|
|
border-radius: 6px; font-size: .9rem;
|
|
}}
|
|
@media (prefers-color-scheme: dark) {{
|
|
.stale {{ background: #4a3c0a; color: #ffd970; }}
|
|
}}
|
|
ul.jokes {{ list-style: none; padding: 0; }}
|
|
li.joke {{
|
|
background: #fff; color: #222; border: 1px solid #e2ddd2; border-radius: 10px;
|
|
padding: 1rem 1.25rem; margin: .9rem 0; font-size: 1.15rem;
|
|
line-height: 1.5; box-shadow: 0 1px 3px rgba(0,0,0,.06);
|
|
}}
|
|
li.joke::before {{ content: "😄 "; }}
|
|
footer {{ margin-top: 2rem; font-size: .9rem; color: #888; }}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Wiki Jokes</h1>
|
|
<p class="date">{day}</p>
|
|
</header>
|
|
{stale_note}
|
|
<ul class="jokes">
|
|
{jokes}
|
|
</ul>
|
|
<footer>
|
|
Inspired by today's Wikipedia featured article:
|
|
<a href="{article_url}" rel="noopener">{article_title}</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|
|
"""
|