Improve styling

Author: wmedrano

build.el

@@ -27,7 +27,7 @@
 <link rel=\"stylesheet\" href=\"/css/styles.css\">
 <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
 <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
-<link href=\"https://fonts.googleapis.com/css2?family=Baskervville:wght@700&family=Fira+Code:wght@300..700&family=Sen:wght@400..800&display=swap\" rel=\"stylesheet\">
+<link href=\"https://fonts.googleapis.com/css2?family=Baskervville:wght@700&family=JetBrains+Mono:wght@300..700&family=Sen:wght@400..800&display=swap\" rel=\"stylesheet\">
 "
  ;; When doing syntax highlighting, output as CSS classes instead of the default
  ;; inline CSS. The color theme is defined in ./content/css/htmlize-styles.css. To get

content/css/styles.css

@@ -33,11 +33,17 @@ a:visited {
 }
 
 .content {
-    max-width: 800px;
     margin: 0 auto;
-    padding: 0 20px;
+    padding: 0 4px;
     font-family: Sen, sans-serif;
     font-size: 16px;
+    color: #222;
+    line-height: 1.5;
+}
+@media (min-width: 800px) {
+    .content {
+        max-width: 640px;
+    }
 }
 table {
     margin: 0 auto;
@@ -93,8 +99,8 @@ div.figure {
     margin: 1.5rem 0;
 }
 code, pre {
-    font-family: "Fira Code", monospace;
-    font-size: 14px;
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px;
 
 }
 code {border: 1px solid #e5e5e5;}