improve website styling (WIP)

Author: marle3003

webui/src/assets/github-dark.css

@@ -9,12 +9,12 @@
     padding: 3px 5px
   }
   pre:has(code.hljs) {
-    background: #0d1117;
+    background: var(--code-background);
   }
 
   .hljs {
     color: #BBBBBB;
-    background: #0d1117
+    background: var(--code-background)
   }
 
   .hljs-doctag,

webui/src/assets/github.css

@@ -9,12 +9,12 @@
     padding: 3px 5px
   }
   pre:has(code.hljs) {
-    background: #f6f8fa;
+    background: var(--code-background);
   }
 
   .hljs {
     color: 	#24292e;
-    background: #f6f8fa;
+    background: var(--code-background);
   }
 
   .hljs-doctag,

webui/src/assets/main.css

@@ -44,18 +44,24 @@ main {
 h1 {
   font-size: 2.3rem;
   font-weight: 700;
+  margin-top: 32px;
+  margin-bottom: 18px;
 }
 
 h2 {
   font-size: 1.7rem;
   font-weight: 700;
   margin-block-start: 2.5rem;
   margin-block-end: 1rem;
+  margin-top: 28px;
+  margin-bottom: 16px;
 }
 
 h3 {
   font-size: 1.25rem;
   font-weight: 700;
+  margin-top: 24px;
+  margin-bottom: 14px;
 }
 
 h4 {

webui/src/assets/vars.css

@@ -100,6 +100,8 @@
 
     --badge-background: #eabaabff;
 
+    --code-background: #0d1117;
+
     --footer-background: #282b33;
 }
 
@@ -176,5 +178,7 @@
 
     --badge-background: rgb(8, 109, 215);
 
+    --code-background: #f6f8fa;
+
     --footer-background: rgb(244 244 246);
 }

webui/src/composables/markdown-tabs.ts

@@ -55,11 +55,13 @@ export function MarkdownItTabs(md: MarkdownIt, opts: Options) {
                         </div>`
         }
 
-        return `<div class="nav code-tabs" id="tab-${counter}" role="tablist">
-                ${tabs}
-                </div>
-                <div class="tab-content code" id="tabContent-${counter}">
-                ${contents}
+        return `<div class="code">
+                    <div class="nav code-tabs" id="tab-${counter}" role="tablist">
+                        ${tabs}
+                    </div>
+                    <div class="tab-content code" id="tabContent-${counter}">
+                        ${contents}
+                    </div>
                 </div>`
 
     }

webui/src/views/DocsView.vue

@@ -203,39 +203,37 @@ function formatParam(label: any): string {
   font-size: 0.9rem;
 }
 .content {
-  line-height: 1.63;
-  font-size: 1.15rem;
+  line-height: 1.5rem;
+  font-size: 1rem;
 }
 
 .content h1 {
-  margin-top: 1.2rem;
-  margin-bottom: 1.6rem;
   font-size: 2.25rem;
 }
 
 .content h2 {
-  margin-top: 1.6rem;
-  margin-bottom: 1rem;
-  font-size: 1.8rem;
+  font-size: 1.55rem;
 }
 
 .content h2 > * {
   vertical-align: middle;display: inline-block;
   padding-right: 5px;
 }
 
+.content h2 > a {
+  padding-right: 0;
+}
+
 .content h2 > svg path {
   fill: var(--link-color);
 }
 
 .content h3 {
-  margin-top: 1.3rem;
-  margin-bottom: 0.75rem;
   font-size: 1.4rem;
 }
 
 .content p {
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 }
 
 .content ul {
@@ -266,7 +264,7 @@ table {
     text-align: start;
     width: 100%;
     margin-bottom: 20px;
-    font-size: 1rem;
+    font-size: 0.9rem;
 }
 table.selectable td {
     cursor: pointer;
@@ -304,7 +302,7 @@ pre {
   margin-bottom: 1rem;
   white-space: pre-wrap;
   word-break: break-all;
-  border-radius: 6px;
+  box-shadow: none;
   line-height: 1.4;
   font-family: Menlo,Monaco,Consolas,"Courier New",monospace !important;
   font-size: 0.85rem;
@@ -325,7 +323,9 @@ code {
   font-size: 1rem;
   margin-bottom: 0.5rem;
 }
-
+.code {
+  background-color: var(--code-background);
+}
 .code-tabs {
   margin-top: 1rem;
 }