From 94607c578564c8d00b1527334910795af4e39a30 Mon Sep 17 00:00:00 2001
From: CasperSocio <casper.tollefsen@mobit.no>
Date: Fri, 11 Feb 2022 13:45:35 +0100
Subject: [PATCH] Improve styling

---
 styles/usejsdoc.css | 42 ++++++++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/styles/usejsdoc.css b/styles/usejsdoc.css
index 6c285fa2..c2e50b79 100644
--- a/styles/usejsdoc.css
+++ b/styles/usejsdoc.css
@@ -1,3 +1,9 @@
+:root {
+    --bg-code: #f6f8fa;
+    --color-heading: #B93A38;
+    --article-width: 80ch;
+}
+
 body {
     font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
     padding: 0;
@@ -25,7 +31,9 @@ header a, header a:visited {
 }
 
 article {
-    margin: 18px;
+    margin: 18px auto;
+    max-width: var(--article-width);
+    padding: 0 16px;
 }
 
 footer {
@@ -36,41 +44,40 @@ footer {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    color: #B93A38;
+    color: var(--color-heading);
 }
 
 h1 {
     font-size: 1.428em;
-    text-indent: 0;
 }
 
 h2 {
     font-size: 1.285em;
-    text-indent: 1%;
 }
 
 h3 {
     font-size: 1.142em;
-    text-indent: 2%;
 }
 
 h4 {
     font-size: 1em;
-    text-indent: 3%;
 }
 
 h5 {
     font-size: 0.857em;
-    text-indent: 4%;
 }
 
 h6 {
     font-size: 0.714em;
-    text-indent: 5%;
 }
 
 p {
-    text-indent: 2%;
+    line-height: 1.5;
+}
+
+figure {
+    display: block;
+    margin: 2em 0;
 }
 
 figure pre code {
@@ -82,7 +89,6 @@ figcaption {
 }
 
 dl {
-    margin-left: 2%;
     padding-left: 0;
 }
 
@@ -102,21 +108,21 @@ dd {
 }
 
 ol, ul {
-    margin-left: 2%;
+    padding-inline-start: 4ch;
 }
 
 code {
     font: 0.9em Consolas, "Lucida Console", Monaco, monospace;
-    background-color: #DEDEDE;
 }
 
 pre {
+    background-color: var(--bg-code);
+    border: none !important;
+    border-radius: 6px;
     display: block;
-    border: 1px solid #999;
-    margin: 12px;
-    padding: 8px;
-    white-space: pre-wrap;
-    background-color: #DEDEDE;
+    margin-top: 12px;
+    overflow-x: scroll;
+    padding: 16px !important;
 }
 
 table {
@@ -129,7 +135,7 @@ th, td {
 
 th {
     background-color: #DEDEDE;
-    color: #B93A38;
+    color: var(--color-heading);
 }
 
 .example dt {