From 12fb4655f5a512039fa09455c6614e139ed3e7ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20D=C3=A4schle?= <daniel.daeschle@gmail.com>
Date: Thu, 12 Aug 2021 08:21:31 +0200
Subject: [PATCH] vdoc: use nicer font (#11151)

---
 cmd/tools/vdoc/html.v            |  7 ++++---
 cmd/tools/vdoc/resources/doc.css | 22 ++++++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/cmd/tools/vdoc/html.v b/cmd/tools/vdoc/html.v
index 675182cc4a..e5a7f32abb 100644
--- a/cmd/tools/vdoc/html.v
+++ b/cmd/tools/vdoc/html.v
@@ -23,9 +23,10 @@ const (
 		<meta http-equiv="x-ua-compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<title>{{ title }} | vdoc</title>
-		<link rel="preconnect" href="https://fonts.gstatic.com">
-		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+		<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=Jost:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
 		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
 		<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
 		<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
diff --git a/cmd/tools/vdoc/resources/doc.css b/cmd/tools/vdoc/resources/doc.css
index a63d357834..e830987274 100644
--- a/cmd/tools/vdoc/resources/doc.css
+++ b/cmd/tools/vdoc/resources/doc.css
@@ -85,7 +85,7 @@ html {
 }
 body {
   margin: 0;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+  font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #fff;
   background-color: var(--background-color);
@@ -127,7 +127,7 @@ body {
   scrollbar-width: thin;
   scrollbar-color: #a0aec0 transparent;
   scrollbar-color: var(--menu-scrollbar-color) transparent;
-  font-family: "Work Sans", sans-serif;
+  font-family: Jost, sans-serif;
 }
 *::-webkit-scrollbar {
   width: 4px;
@@ -325,7 +325,7 @@ body {
   font-weight: 500;
 }
 .doc-nav > .search .result > .link > .description {
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+  font-family: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 0.75rem;
   overflow: hidden;
@@ -365,12 +365,16 @@ body {
   max-width: 100%;
 }
 .doc-content p {
+  font-size: 1rem;
   line-height: 1.4;
 }
 .doc-content a {
   color: #2779bd;
   color: var(--link-color);
 }
+.doc-content p code {
+  font-size: 0.85rem;
+}
 .doc-content > .doc-node {
   padding: 5rem 0 2rem 0;
   margin-top: -4rem;
@@ -394,7 +398,7 @@ body {
 }
 .doc-content > .doc-node > .title {
   display: flex;
-  font-family: "Work Sans", sans-serif;
+  font-family: Jost, sans-serif;
   font-weight: 500;
   padding: 0.3rem;
   align-items: center;
@@ -495,7 +499,7 @@ body {
   box-sizing: border-box;
   -ms-overflow-style: none;
   scrollbar-width: none;
-  font-family: "Work Sans", sans-serif;
+  font-family: Jost, sans-serif;
 }
 .doc-toc::-webkit-scrollbar {
   display: none;
@@ -542,7 +546,7 @@ pre code {
   color: var(--code-default-text-color);
   font-size: 0.948em;
   text-shadow: none;
-  font-family: monospace;
+  font-family: 'Jetbrains Mono', monospace;
   background-color: #edf2f7;
   background-color: var(--code-background-color);
   border-radius: 0.25rem;
@@ -566,8 +570,7 @@ pre code {
   padding: 1rem;
 }
 code {
-  padding: 0.2rem;
-  vertical-align: middle;
+  padding: 0 0.2rem;
 }
 pre {
   overflow: auto;
@@ -613,6 +616,9 @@ pre {
   color: #319795;
   color: var(--code-function-text-color);
 }
+.examples > h4 {
+  margin: 0 0 0.4rem 0;
+}
 
 /* Medium screen and up */
 @media (min-width: 768px) {