* Images are links
* Serif font is enforced
* Semantic HTML elements
* Reduce top/bottom margin
* Improve CSP
<meta name="viewport" content="width=device-width">
<meta name="description" content="lightcards - terminal flashcards program homepage">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width">
<meta name="description" content="lightcards - terminal flashcards program homepage">
<meta name="robots" content="index, follow">
- <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self'; img-src 'self'; style-src 'unsafe-inline';">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self'; img-src data: 'self'; style-src 'unsafe-inline';">
<meta name="referrer" content="no-referrer">
<title>lightcards</title>
<style>
body {
<meta name="referrer" content="no-referrer">
<title>lightcards</title>
<style>
body {
max-width: 650px;
line-height: 1.6;
max-width: 650px;
line-height: 1.6;
+ font-size: 18px;
+ font-family: serif;
<link href=data:, rel=icon>
</head>
<body>
<link href=data:, rel=icon>
</head>
<body>
- <hr>
- <h1>lightcards</h1>
- <a href="https://sr.ht/~armaan/lightcards">Source code</a> |
- <a href="https://lists.sr.ht/~armaan/public-inbox">Mailing list</a> |
- <a href="https://pypi.org/project/lightcards">PyPI</a>
- <hr>
- <p>A terminal flashcards program that gets its data from Markdown.</p>
+ <header>
+ <hr>
+ <h1>lightcards</h1>
+ <nav>
+ <a href="https://sr.ht/~armaan/lightcards">Source code</a> |
+ <a href="https://lists.sr.ht/~armaan/public-inbox">Mailing list</a> |
+ <a href="https://pypi.org/project/lightcards">PyPI</a>
+ <hr>
+ <p>A terminal flashcards program that gets its data from Markdown.</p>
+ </nav>
+ </header>
- <h2>Gallery</h2>
- <img src="1.webp" alt="screenshot 1">
- <img src="2.webp" alt="screenshot 2">
+ <section>
+ <h2>Gallery</h2>
+ <a href="1.webp">
+ <img src="1.webp" alt="screenshot 1">
+ </a>
+ <a href="2.webp">
+ <img src="2.webp" alt="screenshot 2">
+ </a>
+ </section>
- <h2>Copyright</h2>
- <p>Copyright 2021 Armaan Bhojwani, MIT license.
- <hr>
+ <section>
+ <h2>Copyright</h2>
+ <p>Copyright 2021 Armaan Bhojwani, MIT license.
+ <hr>
+ </section>