]> git.armaanb.net Git - lightcards-http.git/commitdiff
Various small improvements
authorArmaan Bhojwani <me@armaanb.net>
Sun, 14 Feb 2021 14:11:43 +0000 (09:11 -0500)
committerArmaan Bhojwani <me@armaanb.net>
Sun, 14 Feb 2021 14:23:01 +0000 (09:23 -0500)
  * Images are links
  * Serif font is enforced
  * Semantic HTML elements
  * Reduce top/bottom margin
  * Improve CSP

index.html

index a2f00521db4765fe5241785d4d15746e79808b05..eefef34cc5184cfe3e62733e15c6cc6106614e44 100644 (file)
@@ -5,16 +5,17 @@
     <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 {
-  margin: 40px auto;
+  margin: 1em auto;
   max-width: 650px;
   line-height: 1.6;
-  font-size: 18px;
   padding: 0 10px;
+  font-size: 18px;
+  font-family: serif;
 }
 
 h1 {
@@ -37,20 +38,32 @@ a {
     <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>
   </body>
 </html>