CSS: make the content more readable

The Roboto Slab font is hard to read (at least for me). Switch to Droid
Sans and make the text a bit smaller.

Change the background of the page to white (again), and change the
background color for the code snippets.

Add text decoration for headlines (similar to org-bullet).

1 files changed, 24 insertions, 15 deletions

diff --git a/users/fcuny/notes/static/css/custom.css b/users/fcuny/notes/static/css/custom.css
index 8f776d7..1113707 100644
--- a/users/fcuny/notes/static/css/custom.css
+++ b/users/fcuny/notes/static/css/custom.css
@@ -1,13 +1,12 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
 
 *, *:before, *:after { box-sizing: border-box; }
 
 body {
-    background-color: #fffff8;
-    line-height: 1.8rem;
-    font-size: 1em;
-    font-family: "Roboto Slab", sans-serif;
+    background-color: #ffffff;
+    line-height: 1.4rem;
+    font-size: 16px;
+    font-family: 'Droid Sans', sans-serif;
     color: #000;
     padding: 2rem;
 }
@@ -25,14 +24,22 @@ a {
 
 p { color: #1a1a19; }
 
-h1 {
-    line-height: normal;
+h1:before {
+    content: '◉';
+}
+h2:before {
+    content: '○';
+}
+h3:before {
+    content: '✸';
+}
+h4:before {
+    content: '✿';
 }
 
 h2 {
     margin-top: 2rem;
-    line-height: 1.4em;
-    border-bottom-color: #000000;
+    border-bottom-color: #eee;
     border-bottom-style: solid;
     border-bottom-width: 0.8px;
 }
@@ -43,15 +50,18 @@ span.published, span.updated {
 }
 
 code.verbatim {
-    background-color: #fffff8;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+    border-radius: 2px;
+    font-size: 90%;
+    padding: 2px 2px;
 }
 
 .highlight pre {
-    background-color: #fffff8 !important;
+    background-color: #f7f7f7 !important;
 }
 
 .highlight {
-    padding: 5px;
     border-radius: 5px;
     border: 1px solid #eee;
 }
@@ -59,13 +69,12 @@ code.verbatim {
 pre {
     padding: 0.3rem 0.3rem;
     margin: 0;
-    font-size: 16px;
+    font-size: 14px;
     font-family: 'Source Code Pro', monospace;
     overflow-x: auto;
 }
 
 .tags {
-    /* background-color: #eeeeee; */
     border-radius:8px;
     padding:0 .5rem;
     font-size: 90%;
@@ -82,6 +91,7 @@ pre {
 
 table {
     border: 1px solid black;
+    border-radius: 2px;
     width: 100%;
     border-spacing: 15px;
     border-collapse: collapse;
@@ -109,7 +119,6 @@ nav.menu {
     justify-content: flex-end;
     padding-left: 1em;
     margin: 0 auto;
-    line-height: 0.2rem;
 }
 
 nav.menu ul {